Om komponenten
<select> er plassbesparende, og brukes ved 5+ valg hvor det ikke er et behov for Ă„ synliggjĂžre alle valg. Elementet skal ha et forhĂ„ndssatt valg uten verdi som navngis pĂ„ en mĂ„te som informerer brukeren om konteksten (eksempel âVelg firma Ă„ representereâ).
Avhengigheter
Ekspanderende hjelpetekst:
- pkt-alert
- pkt-button
Bruk i Vue og React
Denne komponenten fungerer som en drop-in erstatning for <select> og har ingen innebygget funksjonalitet i selve nedtrekksfeltet. Det betyr at du selv mÄ legge inn <option> i komponentens slot (Vue) / children (React). Vi anbefaler at du bruker v-model rett pÄ PktSelect-komponenten om du bruker Vue, eller value og onChange om du bruker React.
Varianter
<div class="pkt-inputwrapper">
<label class="pkt-inputwrapper__label" for="exampleSelect1">
<span>Hva er ditt foretrukne frontendrammeverk?</span>
<div class="pkt-inputwrapper__helptext">
Vi bruker ikke svarene pÄ denne til noe nyttig.
</div>
<select class="pkt-input" id="exampleSelect1">
<option selected>Velg ditt foretrukne rammeverk</option>
<option value="1">Vue.js</option>
<option value="2">React</option>
<option value="3">Web components</option>
<option value="4">Svelte</option>
</select>
</label>
</div>
<PktSelect
label="Hva er ditt foretrukne frontendrammeverk?"
helptext="Vi bruker ikke svarene pÄ denne til noe nyttig."
id="exampleSelect1"
v-model="preferedframework"
>
<option selected>Velg ditt foretrukne rammeverk</option>
<option value="1">Vue.js</option>
<option value="2">React</option>
<option value="3">Web components</option>
<option value="4">Svelte</option>
</PktSelect>
<PktSelect
label="Hva er ditt foretrukne frontendrammeverk?"
helptext="Vi bruker ikke svarene pÄ denne til noe nyttig."
id="exampleSelect1"
value={preferedframework}
onChange={setPreferedFramework}
>
<option selected>Velg ditt foretrukne rammeverk</option>
<option value="1">Vue.js</option>
<option value="2">React</option>
<option value="3">Web components</option>
<option value="4">Svelte</option>
</PktSelect>
Disabled
<div class="pkt-inputwrapper pkt-inputwrapper--disabled">
<label class="pkt-inputwrapper__label" for="exampleSelect1">
<span>Hva er ditt foretrukne frontendrammeverk? (Disabled)</span>
<div class="pkt-inputwrapper__helptext">
Vi bruker ikke svarene pÄ denne til noe nyttig.
</div>
<select class="pkt-input" id="exampleSelect1" disabled>
<option selected>Velg ditt foretrukne rammeverk</option>
<option value="1">Vue.js</option>
<option value="2">React</option>
<option value="3">Web components</option>
<option value="4">Svelte</option>
</select>
</label>
</div>
<PktSelect
label="Hva er ditt foretrukne frontendrammeverk?"
helptext="Vi bruker ikke svarene pÄ denne til noe nyttig."
id="exampleSelect1"
v-model="preferedframework"
disabled
>
<option selected>Velg ditt foretrukne rammeverk</option>
<option value="1">Vue.js</option>
<option value="2">React</option>
<option value="3">Web components</option>
<option value="4">Svelte</option>
</PktSelect>
<PktSelect
label="Hva er ditt foretrukne frontendrammeverk?"
helptext="Vi bruker ikke svarene pÄ denne til noe nyttig."
id="exampleSelect1"
value={preferedframework}
onChange={setPreferedFramework}
disabled
>
<option selected>Velg ditt foretrukne rammeverk</option>
<option value="1">Vue.js</option>
<option value="2">React</option>
<option value="3">Web components</option>
<option value="4">Svelte</option>
</PktSelect>
Error
Dette er en feilmelding
<div class="pkt-inputwrapper pkt-inputwrapper--error">
<label class="pkt-inputwrapper__label" for="exampleSelect1">
<span>Hva er ditt foretrukne frontendrammeverk? (Disabled)</span>
<div class="pkt-inputwrapper__helptext">
Vi bruker ikke svarene pÄ denne til noe nyttig.
</div>
<select class="pkt-input" id="exampleSelect1">
<option selected>Velg ditt foretrukne rammeverk</option>
<option value="1">Vue.js</option>
<option value="2">React</option>
<option value="3">Web components</option>
<option value="4">Svelte</option>
</select>
</label>
<div class="pkt-alert pkt-alert--error pkt-alert--compact" aria-live="assertive">
<span class="pkt-icon pkt-alert__icon">
<svg viewBox="0 0 32 32" aria-hidden="true">
<use href="#alert-error"></use>
</svg>
</span>
<div class="pkt-alert__text">Dette er en feilmelding</div>
</div>
</div>
<PktSelect
label="Hva er ditt foretrukne frontendrammeverk?"
helptext="Vi bruker ikke svarene pÄ denne til noe nyttig."
id="exampleSelect1"
v-model="preferedframework"
hasError
errorMessage="Dette er en feilmelding"
>
<option selected>Velg ditt foretrukne rammeverk</option>
<option value="1">Vue.js</option>
<option value="2">React</option>
<option value="3">Web components</option>
<option value="4">Svelte</option>
</PktSelect>
<PktSelect
label="Hva er ditt foretrukne frontendrammeverk?"
helptext="Vi bruker ikke svarene pÄ denne til noe nyttig."
id="exampleSelect1"
value={preferedframework}
onChange={setPreferedFramework}
hasError
errorMessage="Dette er en feilmelding"
>
<option selected>Velg ditt foretrukne rammeverk</option>
<option value="1">Vue.js</option>
<option value="2">React</option>
<option value="3">Web components</option>
<option value="4">Svelte</option>
</PktSelect>
Block:
- .pkt-select
- .pkt-inputwrapper
Elements:
- .pkt-inputwrapper__label
- .pkt-inputwrapper__helptext
- .pkt-input__container
- .pkt-input
- .pkt-inputwrapper__helptext-expandable
- .pkt-inputwrapper__helptext-expandable-heading
- .pkt-inputwrapper__helptext-expandable-open
- .pkt-inputwrapper__helptext-expandable-closed
Modifiers:
- .pkt-inputwrapper
--disabled - .pkt-inputwrapper
--error - .pkt-inputwrapper
--inline - .pkt-input
--fullwidth
Props, slots og events
| Props | Type | Validation | Default | Beskrivelse |
|---|---|---|---|---|
| id | string | Required | - | ID for inputfeltet |
| label | string | Required | - | Etiketten for inputfeltet |
| ariaDescribedby | string | - | - | aria for elementet som beskriver inputfeltet |
| ariaLabelledby | string | - | - | aria for elementet som beskriver inputfeltet |
| className | string | - | - | Tilpasset CSS-klasse for inputfeltet |
| disabled | boolean | - | false | Angir om inputfeltet er deaktivert |
| errorMessage | string, ReactNode, ReactNode[] | - | - | Feilmelding som vises nÄr det er en feil i inputfeltet |
| hasError | boolean | - | false | Angir om inputfeltet har en feil |
| helptext | string, ReactNode, ReactNode[] | - | - | Hjelpetekst som vises over inputfeltet |
| helptextDropdown | string, ReactNode, ReactNode[] | - | - | Hjelpetekst som er skjult bak âLes merâ-knapp |
| helptextDropdownButton | string | - | - | Alternativ tekst til âLes merâ-knapp |
| inline | boolean | - | false | Angir om inputfelt skal vises i en linje |
| fullwidth | boolean | - | false | Sett select-elementet til Ă„ ha full bredde |
| name | string | - | id | Navnet for inputfeltet |
| optionalTag | boolean | - | false | Angir om inputfeltet skal ha et valgfritt-merke |
| optionalText | string | - | âValgfrittâ | Overstyre tekst for optionalTag-merke |
| requiredTag | boolean | - | false | Angir om inputfeltet er pÄkrevd |
| requiredText | string | - | âMĂ„ fylles utâ | Overstyre tekst for requiredTag-merke |
| useWrapper | boolean | - | true | Angir om feltet skal ha label og hjelpetekst eller om det skal stÄ alene |
| value | string | - | - | Verdien for inputfeltet |
| Slots | Type | Validation | Default | Beskrivelse |
|---|---|---|---|---|
| default | Vue | - | - | |
| children | React | - | - |
| Events | Type | Validation | Default | Beskrivelse |
|---|---|---|---|---|
| input | Vue | UtlÞses nÄr verdien i inputfeltet endres. Sender den nye verdien som parameter til eventet. |
React Merk: Denne komponenten er videresendt med forwardRef, sÄ den stÞtter ogsÄ Ä motta en ref som en ekstra prop. Denne ref-propen kan brukes til Ä referere til selve inputfeltet og fÄ tilgang til dets egenskaper og metoder.