Select

Select lar brukeren velge ett alternativ fra en nedtrekksliste. Komponenten skjuler alternativene til brukeren åpner listen, og brukes når det ikke er nødvendig å vise alle valg samtidig.

Egnet til

• Når brukeren skal velge ett alternativ fra en liste
• Lister med mange alternativer der det ikke er plass til å vise alle
• Valg som er kjent eller enkle å kjenne igjen
• Situasjoner der det er viktig å spare plass i grensesnittet

Uegnet til

• Korte lister med få alternativer (bruk radio-knapper)
• Når det er viktig å sammenligne alternativer før valg
• Når alternativene er komplekse eller krever forklaring
• Situasjoner der brukeren bør se alle valg samtidig

Kom i gang

Result

Loading...

Kode

Live Editor

<Select
  label="Land"
  placeholder="Velg land..."
  options={[
    { value: 'no', label: 'Norge' },
    { value: 'se', label: 'Sverige' },
    { value: 'dk', label: 'Danmark' },
  ]}
/>

Prøv å legge til flere alternativer i options-arrayen.

Result

Loading...

Kode

Live Editor

<ix-field>
  <label>Land</label>
  <select class="ix-select" name="land">
    <option value="" disabled selected>Velg land...</option>
    <option value="no">Norge</option>
    <option value="se">Sverige</option>
    <option value="dk">Danmark</option>
  </select>
  <span data-field="error"></span>
</ix-field>

<ix-field> setter opp ARIA-koblinger automatisk. Error-elementet skal alltid ligge i DOM.

Eksempler

Med hjelpetekst

Result

Loading...

Kode

Live Editor

<Select
  label="Foretrukket kontaktmetode"
  description="Vi bruker dette for å sende deg viktig informasjon"
  placeholder="Velg..."
  options={[
    { value: 'email', label: 'E-post' },
    { value: 'sms', label: 'SMS' },
    { value: 'phone', label: 'Telefon' },
  ]}
/>

Result

Loading...

Kode

Live Editor

<ix-field>
  <label>Foretrukket kontaktmetode</label>
  <span data-field="description">Vi bruker dette for å sende deg viktig informasjon</span>
  <select class="ix-select" name="contact">
    <option value="" disabled selected>Velg...</option>
    <option value="email">E-post</option>
    <option value="sms">SMS</option>
    <option value="phone">Telefon</option>
  </select>
  <span data-field="error"></span>
</ix-field>

Med grupperte alternativer

Bruk optgroup for å gruppere relaterte alternativer. Dette gjør lange lister lettere å navigere.

Result

Loading...

Kode

Live Editor

<Select
  label="Velg land"
  placeholder="Velg..."
  options={[
    {
      label: 'Norden',
      options: [
        { value: 'no', label: 'Norge' },
        { value: 'se', label: 'Sverige' },
        { value: 'dk', label: 'Danmark' },
      ],
    },
    {
      label: 'Europa',
      options: [
        { value: 'de', label: 'Tyskland' },
        { value: 'fr', label: 'Frankrike' },
        { value: 'es', label: 'Spania' },
      ],
    },
  ]}
/>

Result

Loading...

Kode

Live Editor

<ix-field>
  <label>Velg land</label>
  <select class="ix-select" name="land">
    <option value="" disabled selected>Velg...</option>
    <optgroup label="Norden">
      <option value="no">Norge</option>
      <option value="se">Sverige</option>
      <option value="dk">Danmark</option>
    </optgroup>
    <optgroup label="Europa">
      <option value="de">Tyskland</option>
      <option value="fr">Frankrike</option>
      <option value="es">Spania</option>
    </optgroup>
  </select>
  <span data-field="error"></span>
</ix-field>

Med feilmelding

Result

Loading...

Kode

Live Editor

<Select
  label="Land"
  placeholder="Velg land..."
  errorMessage="Du må velge et land for å fortsette"
  options={[
    { value: 'no', label: 'Norge' },
    { value: 'se', label: 'Sverige' },
    { value: 'dk', label: 'Danmark' },
  ]}
/>

Prøv å tømme errorMessage. aria-invalid fjernes automatisk.

Result

Loading...

Kode

Live Editor

<ix-field>
  <label>Land</label>
  <select class="ix-select" name="land">
    <option value="" disabled selected>Velg land...</option>
    <option value="no">Norge</option>
    <option value="se">Sverige</option>
    <option value="dk">Danmark</option>
  </select>
  <span data-field="error">Du må velge et land for å fortsette</span>
</ix-field>

<ix-field> setter aria-invalid="true" automatisk når error-elementet har innhold.

Med tooltip

Result

Loading...

Kode

Live Editor

<Select
  label="Bostedsland"
  tooltip="Vi trenger denne informasjonen for å beregne skatt"
  tooltipLabel="Mer informasjon om Bostedsland"
  placeholder="Velg..."
  options={[
    { value: 'no', label: 'Norge' },
    { value: 'se', label: 'Sverige' },
    { value: 'dk', label: 'Danmark' },
  ]}
/>

Result

Loading...

Kode

Live Editor

<ix-field tooltip="Vi trenger denne informasjonen for å beregne skatt" tooltip-label="Mer informasjon om Bostedsland">
  <label>Bostedsland</label>
  <select class="ix-select" name="land">
    <option value="" disabled selected>Velg...</option>
    <option value="no">Norge</option>
    <option value="se">Sverige</option>
    <option value="dk">Danmark</option>
  </select>
  <span data-field="error"></span>
</ix-field>

Deaktivert

Result

Loading...

Kode

Live Editor

<Select
  label="Land"
  disabled
  defaultValue="no"
  options={[
    { value: 'no', label: 'Norge' },
    { value: 'se', label: 'Sverige' },
  ]}
/>

Result

Loading...

Kode

Live Editor

<ix-field>
  <label>Land</label>
  <select class="ix-select" name="land" disabled>
    <option value="no" selected>Norge</option>
    <option value="se">Sverige</option>
  </select>
  <span data-field="error"></span>
</ix-field>

Med deaktivert alternativ

Result

Loading...

Kode

Live Editor

<Select
  label="Leveringsmetode"
  placeholder="Velg..."
  options={[
    { value: 'standard', label: 'Standard levering (3–5 dager)' },
    { value: 'express', label: 'Ekspress (ikke tilgjengelig)', disabled: true },
    { value: 'pickup', label: 'Hent i butikk' },
  ]}
/>

Result

Loading...

Kode

Live Editor

<ix-field>
  <label>Leveringsmetode</label>
  <select class="ix-select" name="delivery">
    <option value="" disabled selected>Velg...</option>
    <option value="standard">Standard levering (3–5 dager)</option>
    <option value="express" disabled>Ekspress (ikke tilgjengelig)</option>
    <option value="pickup">Hent i butikk</option>
  </select>
  <span data-field="error"></span>
</ix-field>

Retningslinjer

Tydelige labels gir forutsigbarhet

Alle select-felter skal ha en synlig og beskrivende label. Labelen skal beskrive hvilken informasjon feltet gjelder, ikke hva brukeren skal gjøre.

For eksempel bør man skrive "Land" i stedet for "Velg land". Når labelen beskriver selve dataen, blir det enklere å forstå hva som forventes.

Dette gjør skjemaet lettere å skanne og reduserer behovet for ekstra forklaring.

Bruk select når plass eller antall tilsier det

Select egner seg når det er mange alternativer, eller når det ikke er nødvendig å vise alle samtidig. Ved å skjule listen reduseres visuell støy, og grensesnittet blir mer kompakt.

For korte lister er det ofte bedre å bruke radio-knapper, siden de gir bedre oversikt og gjør det enklere å sammenligne valgene.

Valgt verdi må alltid være tydelig

Når listen er lukket, skal det være tydelig hvilket alternativ som er valgt. Brukeren skal ikke være i tvil om hva som er gjeldende verdi.

Dersom det brukes placeholder, må det være tydelig at dette ikke er et valgt alternativ.

Rekkefølge påvirker hvor lett det er å finne frem

Alternativene bør som hovedregel sorteres alfabetisk, slik at brukeren raskt kan finne det de leter etter.

I noen tilfeller kan det være mer hensiktsmessig å prioritere de mest relevante eller brukte valgene øverst, særlig i lange lister.

Gruppering gir bedre oversikt

Dersom listen inneholder mange alternativer, bør disse grupperes logisk (for eksempel med optgroup). Dette gjør det enklere å orientere seg og finne riktig valg.

Unngå komplekst innhold i alternativer

Alternativene i en select bør være korte og enkle å forstå. Lange tekster eller komplekse beskrivelser gjør det vanskeligere å skanne listen og ta et valg.

Dersom alternativene krever mer forklaring, bør man vurdere en annen komponent.

Interaksjon skal være forutsigbar

Når brukeren åpner listen og velger et alternativ, skal listen lukkes og verdien oppdateres umiddelbart.

Brukeren skal kunne navigere med tastatur og enkelt endre valget uten unødvendige steg.

Tilgjengelighet / universell utforming

Semantisk struktur og korrekt rolle

Select skal implementeres med korrekt HTML (<select>) eller med riktig ARIA-roller dersom det er en custom komponent. Dette sikrer at hjelpemidler forstår hvordan komponenten fungerer.

Alle select-felter må ha en programmessig koblet label.

Label må være tilgjengelig

Select skal alltid ha en tydelig label som beskriver hva brukeren skal velge. Skjermlesere bruker denne for å gi kontekst til feltet.

Uten en god label blir det vanskelig å forstå hva valget gjelder.

Tydelig fokus og tastaturnavigasjon

Select må være fullt opererbar med tastatur. Brukeren skal kunne navigere til feltet med Tab, åpne listen med Enter eller Space, og navigere mellom alternativer med piltaster.

Fokusindikatoren må være tydelig og ha god kontrast.

Tilstrekkelig størrelse og klikkeflate

Select-feltet må ha tilstrekkelig størrelse (minimum 44px høyde) for å være enkelt å bruke, spesielt på touch-enheter.

Vær bevisst på bruk av disabled

Bruk av disabled state frarådes. Et deaktivert felt kan være vanskelig å forstå uten forklaring.

Vurder om feltet heller bør skjules, vises som ren tekst, eller settes til readOnly.

Tastaturnavigasjon

Tast	Handling
Tab	Flytter fokus til select-feltet
Shift+Tab	Flytter fokus til forrige fokuserbare element
Enter / Space	Åpner nedtrekkslisten
Arrow Up/Down	Navigerer mellom alternativer i listen
Enter	Velger markert alternativ og lukker listen
Escape	Lukker listen uten å endre valg
Home	Går til første alternativ
End	Går til siste alternativ
Bokstav	Hopper til første alternativ som starter med bokstaven

Skjermleser

• Ved fokus: "[label], kombinasjonsboks, [valgt verdi]"
• Med hjelpetekst: "[label], kombinasjonsboks, [valgt verdi], [hjelpetekst]"
• Ved feil: "[label], ugyldig, kombinasjonsboks, [valgt verdi], [feilmelding]"
• Med optgroup: grupper annonseres med "[gruppenavn], gruppe" før alternativene i gruppen
• Ved navigering i listen: "[alternativ], [posisjon] av [total]"
• Disabled alternativ: "[alternativ], nedtonet"

WCAG-kriterier

Sist gjennomgått: 2026-05-18 — alle 56 WCAG 2.2-kriterier vurdert

WCAG-kriterier6 ditt ansvar · 17 håndtert · 33 ikke relevant · 0 ikke på plass

Ditt ansvar (6)

Kriterium	Nivå	Hva du må gjøre
2.4.6 Overskrifter og ledetekster	AA	Skriv beskrivende labeltekst. Labelen skal forklare hva brukeren skal velge — ikke handlingen. "Land" eller "Foretrukket kontaktmetode" er bedre enn "Velg et alternativ". Alle select-felter må ha en label, enten synlig eller via ariaLabel.
3.3.2 Ledetekster eller instruksjoner	A	Skriv beskrivende labeltekst. Labelen skal forklare hva brukeren skal velge — ikke handlingen. "Land" eller "Foretrukket kontaktmetode" er bedre enn "Velg et alternativ". Alle select-felter må ha en label, enten synlig eller via ariaLabel.
3.3.1 Identifikasjon av feil	A	Skriv gode feilmeldinger. Feilmeldingen må si hva som er galt og hva brukeren skal gjøre. "Du må velge et land" — ikke "Ugyldig valg". Komponenten viser og annonserer meldingen, men du skriver innholdet.
3.3.3 Forslag ved feil	AA	Skriv gode feilmeldinger. Feilmeldingen må si hva som er galt og hva brukeren skal gjøre. "Du må velge et land" — ikke "Ugyldig valg". Komponenten viser og annonserer meldingen, men du skriver innholdet.
2.4.6 Overskrifter og ledetekster	AA	Bruk meningsfulle option-tekster. Hvert alternativ skal ha en tydelig og beskrivende tekst. Unngå forkortelser eller koder som ikke gir mening for brukeren. "Norge" er bedre enn "NO".
1.3.1 Informasjon og relasjoner	A	Grupper relaterte alternativer med optgroup. Når listen inneholder mange alternativer, bruk optgroup for å gruppere relaterte valg. Dette gjør det lettere å navigere og forstå strukturen.

Håndtert av komponenten (17)

Kriterium	Nivå	Hva komponenten gjør
1.3.1 Informasjon og relasjoner	A	Label kobles til select via for/id. Hjelpetekst og feilmelding kobles via aria-describedby. Optgroup gir semantisk gruppering.
1.3.2 Meningsfull rekkefølge	A	Label, select, hjelpetekst og feilmelding følger naturlig rekkefølge i DOM.
1.3.3 Sensoriske egenskaper	A	Feiltilstand bruker tekst, farge og aria-invalid — ikke farge alene.
1.4.1 Bruk av farge	A	Feiltilstand kommuniseres med farge, rammeendring og tekstlig feilmelding.
1.4.4 Endre tekststørrelse	AA	Relative enheter — skalerer korrekt ved 200 % zoom.
1.4.10 Omflyt	AA	Reflower korrekt ned til 320px viewport.
1.4.11 Kontrast for ikke-tekstlig innhold	AA	Ramme og fokusindikator oppfyller 3:1 kontrastkrav.
1.4.12 Tekstavstand	AA	Tåler økt line-height, bokstav- og ordavstand uten tap av innhold.
1.4.13 Innhold ved hover eller fokus	AA	Hjelpetekst er persistent — forsvinner ikke ved fokusflytt.
2.1.1 Tastatur	A	Fullt opererbart med tastatur. Native select gir Tab, Enter/Space for å åpne, piltaster for navigering, Enter for valg, Escape for å lukke.
2.1.2 Ingen tastaturfelle	A	Fokus kan navigeres ut med Tab og Shift+Tab. Ingen tastaturfelle.
2.4.3 Fokusrekkefølge	A	Følger naturlig tab-rekkefølge i DOM.
2.4.7 Synlig fokus	AA	Tydelig fokusindikator med god kontrast.
2.5.8 Målstørrelse (minimum)	AA	Select-feltet oppfyller minimum 44px klikkflate.
3.2.1 Ved fokus	A	Fokus trigger ingen kontekstendring.
3.2.2 Ved inndata	A	Valg trigger ingen automatisk kontekstendring med mindre onChange eksplisitt gjør det.
4.1.2 Navn, rolle, verdi	A	Native select med implisitt combobox-rolle. Tilgjengelig navn fra label. Tilstander (valgt alternativ, disabled) eksponeres korrekt.

Ikke relevant (33)

Kriterium	Nivå	Hvorfor ikke relevant
1.1.1 Ikke-tekstlig innhold	A	Ingen bilder eller ikoner i komponenten.
1.2.1 Bare lyd og bare video (forhåndsinnspilt)	A	Ingen medieelementer.
1.2.2 Teksting (forhåndsinnspilt)	A	Ingen medieelementer.
1.2.3 Synstolking eller mediealternativ (forhåndsinnspilt)	A	Ingen medieelementer.
1.2.4 Teksting (direkte)	AA	Ingen medieelementer.
1.2.5 Synstolking (forhåndsinnspilt)	AA	Ingen medieelementer.
1.3.4 Visningsretning	AA	Ingen fast orientering — tilpasser seg visningsretning.
1.3.5 Identifiser formål med inndata	AA	Ikke et felt for personlig informasjon — autocomplete gjelder ikke.
1.4.2 Styring av lyd	A	Ingen lydelementer.
1.4.5 Bilder av tekst	AA	Ingen bilder av tekst.
2.1.4 Tastatursnarveier	A	Ingen egendefinerte tastatursnarveier.
2.2.1 Justerbar hastighet	A	Ingen tidsbegrensede funksjoner.
2.2.2 Pause, stopp, skjul	A	Ingen animasjon eller automatisk oppdatering.
2.3.1 Terskelverdi på tre glimt	A	Ingen blinkende eller glimtende innhold.
2.4.1 Hoppe over blokker	A	Sidekrav — gjelder ikke enkeltkomponenter.
2.4.2 Sidetitler	A	Sidekrav — gjelder ikke enkeltkomponenter.
2.4.4 Formål med lenke (i kontekst)	A	Ingen lenker i komponenten.
2.4.5 Flere måter	AA	Sidekrav — gjelder ikke enkeltkomponenter.
2.4.11 Fokus ikke skjult (minimum)	AA	Ingen sticky/overlappende elementer som kan skjule fokus.
2.5.1 Pekerbevegelser	A	Ingen drag-and-drop eller sveipebevegelser.
2.5.2 Avbryt peker	A	Native select-element — nettleseren håndterer pekerinteraksjon.
2.5.4 Bevegelsesaktivering	A	Ingen bevegelsesbasert interaksjon.
2.5.6 Samtidige inndatamekanismer	A	Ingen bevegelsesaktivering.
2.5.7 Drabevegelser	A	Ingen drag-and-drop.
3.1.1 Språk på siden	A	Sidekrav — gjelder ikke enkeltkomponenter.
3.1.2 Språk på deler av innhold	AA	Komponenten setter ikke lang-attributt — innhold er på sidespråket.
3.2.3 Konsistent navigasjon	AA	Sidekrav — gjelder ikke enkeltkomponenter.
3.2.4 Konsistent identifikasjon	AA	Systemkrav — gjelder konsistens på tvers av sider, ikke enkeltkomponenter.
3.2.6 Konsistent hjelp	A	Sidekrav — gjelder plassering av hjelpefunksjon på tvers av sider.
3.3.4 Forhindring av feil (juridisk, økonomisk, data)	AA	Flytkrav — gjelder bekreftelse/reversering av transaksjoner, ikke enkeltfelter.
3.3.7 Redundant oppføring	A	Flytkrav — gjelder at brukeren ikke skal gjenta informasjon i en prosess.
3.3.8 Tilgjengelig autentisering (minimum)	AA	Ikke en autentiseringskomponent.
4.1.3 Statusmeldinger	AA	Feilmeldinger håndteres via aria-live="polite". Ingen øvrige statusmeldinger.

Props / API

SelectProps

Prop	Type	Påkrevd	Standard	Beskrivelse
label	string	Nei*		Synlig labeltekst for feltet. Anbefalt fremfor ariaLabel
ariaLabel	string	Nei*		Skjult label for skjermlesere. Brukes kun når synlig label ikke er mulig. *Enten label eller ariaLabel må settes
description	string	Nei		Hjelpetekst som vises under label. Kobles til select via aria-describedby
errorMessage	string	Nei		Feilmelding som vises under select. Trigger aria-invalid når den har innhold
placeholder	string	Nei		Placeholder-tekst som vises som første (disabled) alternativ
options	(SelectOption | SelectOptionGroup)[]	Nei	[]	Liste med alternativer eller grupper av alternativer
className	string	Nei		CSS-klasse på ytterste wrapper (.ix-field)
ref	Ref<HTMLSelectElement>	Nei		Ref videresendes til <select>-elementet

I tillegg støttes alle standard HTML select-attributter (value, defaultValue, onChange, onBlur, disabled, required, id, name osv.) som settes direkte på komponenten.

SelectOption

Prop	Type	Påkrevd	Beskrivelse
value	string	Ja	Verdien som sendes ved valg
label	string	Ja	Teksten som vises for alternativet
disabled	boolean	Nei	Gjør alternativet utilgjengelig for valg

SelectOptionGroup

Prop	Type	Påkrevd	Beskrivelse
label	string	Ja	Overskriften for gruppen
options	SelectOption[]	Ja	Alternativene i gruppen

<ix-field> med <select>

<ix-field> har ingen egne attributter. Alt settes på native HTML-elementer inni:

<ix-field>
  <label>Land</label>
  <span data-field="description">Velg landet du bor i</span>
  <select class="ix-select" name="land">
    <option value="" disabled>Velg...</option>
    <optgroup label="Norden">
      <option value="no">Norge</option>
      <option value="se">Sverige</option>
    </optgroup>
  </select>
  <span data-field="error"></span>
</ix-field>

Del	Påkrevd	Beskrivelse
<ix-field>	Ja	Wrapper. Kobler ARIA mellom label, select, description og error
<label>	Ja	Labeltekst. Kobles til select via for/id
<span data-field="description">	Nei	Hjelpetekst. Kobles til select via aria-describedby
<select class="ix-select">	Ja	Selve nedtrekkslisten
<option>	Ja	Alternativene i listen
<optgroup>	Nei	Gruppering av alternativer
<span data-field="error">	Ja	Feilmelding. Alltid i DOM. Tomt = ingen feil

Tilpasning med CSS

Tilgjengelige klasser og selektorer

Element	Selektor
Select-felt	.ix-select
Label	.ix-label
Hjelpetekst	[data-field="description"]
Feilmelding	[data-field="error"]

Relatert

• TextField — for fritekst-input
• TextArea — for lengre fritekst