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.

Dynamiske alternativer

Hvis alternativene er endrer seg dynamisk, så anbefales det at alternativer sendes inn som en array av objekter i options-prop. Hvert option-objekt har følgende egenskaper:

value: Verdi for alternativet
label: Tekst for alternativet
selected: Angir om alternativet er valgt som default
disabled: Angir om alternativet er deaktivert

const options = [
  { value: 0, label: "Velg ditt foretrukne rammeverk" },
  { value: 1, label: "Vue.js" },
  { value: 2, label: "React" },
  { value: 3, label: "Web components" },
  { value: 4, label: "Svelte" },
];

<pkt-select options={options}></pkt-select>

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>

CSS oversikt

I Punkt brukes BEM-styling. Under er Select sin CSS-struktur.

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

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
options	`TSelectOption[]`	-	-	Alternativer for feltet. Hvis alternativene er endrer seg dynamisk, bør alternativer sendes inn her.

`TSelectOption`

TSelectOption er en type som brukes til å definere alternativer for PktSelect. Denne er et objekt med følgende egenskaper props:

Prop	Type	Validation	Default	Beskrivelse
value	string	Required	Verdi for alternativet
label	string	Required	Tekst for alternativet
selected	boolean	-	-	Angir om alternativet er valgt som default
disabled	boolean	-	-	Angir om alternativet er deaktivert

Slots

Slots	Type	Validation	Default	Beskrivelse
default	Vue	-	-
children	React	-	-

Events

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

Dynamiske alternativer

Varianter

Disabled

Error

CSS oversikt

Props, slots og events

Props

TSelectOption

Slots

Events

Les mer

`TSelectOption`