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
• Tette skjemaer der en radiogruppe tar for mye plass

Uegnet til

• Korte lister med få alternativer (bruk RadioGroup)
• Når brukeren må sammenligne alternativene — en lukket liste viser bare ett om gangen
• Når alternativene er komplekse eller krever forklaring

Bruk

Laster...

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

Laster...

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

Eksempler

Med hjelpetekst

Laster...

Laster...

Med grupperte alternativer

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

Laster...

Laster...

Med feilmelding

Laster...

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

Laster...

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

Med tooltip

Laster...

Laster...

Deaktivert

Laster...

Laster...

Med deaktivert alternativ

Laster...

Laster...

Retningslinjer

Bruk select når listen tåler å være skjult

Select tar plassen til ett felt uansett hvor mange alternativer det er, og det er hele styrken i tette skjemaer. Prisen er at brukeren må åpne listen for å se valgene. Med tre eller fire alternativer er RadioGroup bedre: alt ligger synlig og kan sammenlignes med øyet.

Vis valgt verdi i det lukkede feltet

Feltet skal svare på "hva står det nå?" uten at listen åpnes. Bruker du et placeholder-alternativ øverst, må teksten si at ingenting er valgt ennå. "Velg land" er tydelig, et blankt felt er ikke.

Sorter listen slik brukeren leter

Alfabetisk rekkefølge er utgangspunktet i lange lister. Er noen få alternativer mye vanligere enn resten, legg dem i en egen <optgroup> øverst, så slipper brukeren å scrolle etter det opplagte svaret.

Grupper lange lister med optgroup

Fylker, kontotyper, år: deler du listen i navngitte grupper, leter brukeren i én bolk i stedet for i femti linjer. Gi hver <optgroup> en label som sier hva den samler.

Hold alternativene på én linje

Et alternativ er en kort tekst, ikke en forklaring. Trenger valgene utfyllende tekst, bruk Combobox, der hvert alternativ kan ha en beskrivelse under navnet.

Universell utforming

Hva du selv må sørge for

• Beskrivende labeltekst: komponenten kobler label til feltet, men du skriver teksten. «Land» eller «Foretrukket kontaktmetode», ikke «Velg et alternativ»
• Option-tekster som gir mening: skjermleseren leser teksten, ikke value. «Norge», ikke «NO»
• optgroup når listen er lang: grupper relaterte alternativer. Skjermleseren annonserer «[gruppenavn], gruppe» før alternativene i gruppen
• Gode feilmeldinger: komponenten viser og annonserer dem, men du skriver innholdet. «Du må velge et land», ikke «Ugyldig valg»
• Unngå disabled: et deaktivert felt sier ikke hvorfor det er deaktivert. Se Deaktiverte tilstander for alternativene

Hva komponenten gjør automatisk

Select er et native <select>, så nettleseren eier nedtrekkslisten — på mobil åpnes plattformens egen velger. Tastaturoppførselen er derfor ikke noe vi har implementert, den er den brukeren kjenner fra alle andre select-felt. Den står i tabellen under.

Resten settes opp av <ix-field>:

• for/id: label kobles til feltet, med generert ID hvis du ikke oppgir en
• aria-describedby: feltet peker til description og feilmelding, i den rekkefølgen
• aria-invalid: settes når feilmeldingen har innhold, og fjernes når den tømmes
• aria-live="polite" på feilmeldingen, slik at en ny melding annonseres uten å avbryte brukeren
• placeholder rendres som et disabled førstevalg med tom value, ikke som grå tekst i feltet. Brukeren kan derfor ikke velge det tilbake etter å ha valgt noe
• 44 px høyde via min-height på .ix-select (WCAG 2.5.8)
• Fokusring på :focus-visible (WCAG 2.4.7)

Skjermleseren annonserer feltet som «kombinasjonsboks». Det er den implisitte rollen native <select> har, ikke noe vi setter.

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

<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

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

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

• Combobox — for lange lister der brukeren bør kunne søke
• Label — labeltekst for feltet
• TextField — for fritekst-input
• TextArea — for lengre fritekst