Hjem

Select

Select viser en meny med valgalternativer og brukes når brukeren skal velge ett av flere alternativer.

Normal

info
Dersom du har mindre enn fem valg kan du vurdere å bruke radioknapper i stedet, siden de er enklere og mer oversiktlige for brukerne.
<Select label="Hvilken land er best om sommeren?">
  <option value="">Velg land</option>
  <option value="norge">Norge</option>
  <option value="sverige">Sverige</option>
  <option value="danmark">Danmark</option>
</Select>

 Kopiert!

Disabled

advarsel
Merk at disabled bør unngås, og at bruken heller bør løses på andre måter, da fks kombinert med tydelige feilmeldinger hvis handlingen av en eller annen grunn ikke er tillatt. Ler mer om dette på siden vår om `disabled`.
<Select label="Hvilken land er best om sommeren?" disabled>
  <option value="">Velg land</option>
  <option value="norge">Norge</option>
  <option value="sverige">Sverige</option>
  <option value="danmark">Danmark</option>
</Select>

 Kopiert!

Feilmelding

Her er det noe feil

<Select label="Hvilken land er best om sommeren?" feil="Her er det noe feil">
  <option value="">Velg land</option>
  <option value="norge">Norge</option>
  <option value="sverige">Sverige</option>
  <option value="danmark">Danmark</option>
</Select>

 Kopiert!

Innhold mellom label og skjemafelt

Bruk description-propen for å legge inn egendefinert HTML-innhold mellom labelen og skjemafeltet.

En kort beskrivelse av listen
<Select
  label="Hvilken land er best om sommeren?"
  description="En kort beskrivelse av listen"
>
  <option value="">Velg land</option>
  <option value="norge">Norge</option>
  <option value="sverige">Sverige</option>
  <option value="danmark">Danmark</option>
</Select>

 Kopiert!

Rediger siden på Github