Select

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

Hva er ditt foretrukne frontendrammeverk?

Vi bruker ikke svarene på denne til noe nyttig.

<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

Hva er ditt foretrukne frontendrammeverk? (Disabled)

Vi bruker ikke svarene på denne til noe nyttig.

<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

Hva er ditt foretrukne frontendrammeverk? (Error)

Vi bruker ikke svarene på denne til noe nyttig.

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.

Om komponenten

Avhengigheter

Bruk i Vue og React

Varianter

Disabled

Error

Props, slots og events

Les mer