Select

Release dato: 19.09.2023

Sist oppdatert: 07.07.2025

Select (nedtrekksliste) lar brukeren velge ett enkelt alternativ fra en liste. Den brukes nÄr du har mange valg, men ikke plass eller behov for Ä vise alle samtidig.

FormÄlet med komponenten er Ä gjÞre det enkelt Ä velge riktig alternativ uten at det tar unÞdvendig plass i et skjema eller lÞsning.

Test komponenten

Relaterte komponenter

Varianter

Innhold

Type Beskrivelse
Standard Label, placeholder og valgliste
Med hjelpetekst Kort hjelpetekst under feltet
Med ekspanderende hjelpetekst Hjelpetekst bak “Les mer”-knapp
Valgfritt-tag/obligatorisk tag Viser enten “Valgfritt” eller “MĂ„ fylles ut” ved siden av label
Standard selectSelect med hjelpetekstSelect med ekspanderende hjelpetekstSelect med ekspanderende hjelpetekst og 'mÄ fylles ut'-tag

Select brukes vanligvis sammen med input wrapper, under dokumentasjonen til denne finner du mer om hvordan du skriver gode labels og hjelpetekster, og om funksjonene i input wrapper.

States

Select har seks ulike states som gir brukeren visuell tilbakemelding i ulike situasjoner:

Type Beskrivelse
Default Feltet vises i normal tilstand, klar til bruk
Hover NĂ„r brukeren beveger musepekeren over feltet
Focus NĂ„r brukeren har markert feltet og er klar til Ă„ skrive
Active NĂ„r brukeren skriver i feltet
Error NĂ„r feltet har en feil, og en forklarende feilmelding vises
Disabled NĂ„r feltet ikke er tilgjengelig for interaksjon
Default state for selectHover state for selectFocus state for selectActive state for selectError state for selectDisabled state for select

StĂžrrelser

Select kan brukes i tre ulike stĂžrrelser:

StĂžrrelser Bruk
Medium (default) Standard, og skal brukes som hovedregel
Small For trange flater, som tabeller og kompakte skjema
XSmall For ekstra trange flater, som kompakte tabeller og informasjonstette fagsystemer
Eksempel pÄ select i forskjellige stÞrrelser

Retningslinjer for bruk

Bruk select nÄr

  • du skal presentere mange alternativ der bare ett kan velges
  • du Ăžnsker Ă„ unngĂ„ at lange lister med alternativer blir overveldende
  • du trenger Ă„ fĂ„ plass til flere alternativer pĂ„ liten plass

UnngÄ select nÄr

  • du har fĂ„ valg og god plass (bruk heller radio button)
  • brukeren kan velge mer enn ett alternativ (bruk heller checkbox)
  • du har strukturerte alternativer med nok plass er det bedre Ă„ liste ut alle valgene

Antall og tilgjengelighet

Select fungerer best nÄr du har mange alternativer, men bare ett skal velges. Har du fÊrre enn fem valg, er radioknapper ofte bedre fordi valgene blir mer synlige og enklere Ä sammenligne.

Lange lister kan vĂŠre utfordrende for brukere med skjermleser, og det finnes kjente tilgjengelighetsproblemer med select-komponenten (les mer under “Research about this component” pĂ„ gov.uk).

Vurder om du kan forenkle spÞrsmÄlet slik at det blir fÊrre alternativer. Hvis det gir mening, bruk radio button for Ä gi en bedre opplevelse.

GjĂžr slik

Bruk select nÄr du har mange alternativer

UnngÄ

UnngÄ select ved fÄ alternativer

Sortering av alternativer

Det er viktig Ä liste ut elementene dine pÄ en oversiktlig mÄte, om det sÄ er alfabetisk, tidsbasert eller en annen logisk rekkefÞlge.

GjĂžr slik

Sorter alternativene i en logisk rekkefĂžlge

UnngÄ

UnngÄ Ä liste alternativer i ulogisk rekkefÞlge og Ä bruke forskjellige mÄter Ä skrive alternativene

Bruk select til riktig formÄl

Select passer best til ryddige, relaterte lister. Ikke bruk den til Ă„ velge innhold som egentlig krever et annet format, som adresse eller telefonnummer.

GjĂžr slik

Bruk select til lister med relatert innhold

UnngÄ

UnngÄ select for innhold som bÞr velges pÄ en annen mÄte

Label, hjelpetekst og plassholder

En label skal vÊre kort og presis, helst mellom ett og tre ord. UnngÄ kolon pÄ slutten og bruk verken kun store eller kun smÄ bokstaver.

Plassholder skal aldri vÊre eneste instruksjon. Den forsvinner nÄr brukeren gjÞr et valg, og er ikke alltid tilgjengelig for skjermlesere. Bruk heller label og/eller hjelpetekst for Ä gi nÞdvendig veiledning.

Les mer om innhold i skjemaelementer i input wrapper-dokumentasjonen og om god praksis for skjemaer.

Responsivitet

Select tilpasser seg automatisk tilgjengelig plass og bryter linjer der det er nÞdvendig. Test alltid pÄ ulike skjermstÞrrelser og zoom-nivÄer at det fortsatt er enkelt Ä navigere med tastatur og skjermleser.

Select i mobilkontekst

Universell utforming

  • Alle felt skal ha en tilknyttet label, ogsĂ„ hvis den skjules visuelt (pkt-sr-only).
  • Feilmeldinger skal vĂŠre kodet som tekst og knyttet til det spesifikke feltet.
  • Select kan vĂŠre utfordrende for skjermlesere ved veldig lange lister, vurder alternativer som radio button eller combobox om det gir bedre opplevelse.

Anatomi

Element Beskrivelse
Label (etikett) Kort og tydelig ledetekst som beskriver hva brukeren skal velge
Valgfritt-/obligatorisk Merker feltet som valgfritt eller obligatorisk
Hjelpetekst Kort forklaring under label som hjelper brukeren Ä forstÄ hvordan de skal fylle ut feltet
Ekspanderende hjelpetekst “Les mer”-knapp som viser mer utfyllende informasjon nĂ„r brukeren trenger ekstra forklaring
Inputfelt Selve nedtrekkslisten der brukeren velger et alternativ
Plassholdertekst Midlertidig tekst i feltet som indikerer at brukeren mÄ gjÞre et valg, skal ikke erstatte label
Anatomi for Select

Implementasjon i kode

Hvordan ta komponenten i bruk?

Testing

Elements: Dersom du skal skrive tester med JSDOM eller liknende er det viktig at du lar komponenten bli rendret ferdig fĂžr du tester den. Dette kan gjĂžres ved Ă„ kjĂžre denne kodelinjen fĂžr testene kjĂžres: 

await window.customElements.whenDefined("pkt-select");

Egenskaper og tokens

PktSelect

Props

Prop:
label?
Type:
string
Beskrivelse:
Tekst som vises over feltet
Prop:
requiredTag?
Type:
boolean
Standardverdi:
false
Beskrivelse:
Viser en merking som indikerer at feltet er pÄkrevd
Prop:
requiredText?
Type:
string
Beskrivelse:
Tekst som vises i pÄkrevd-merkingen
Prop:
optionalTag?
Type:
boolean
Beskrivelse:
Viser en merking som indikerer at feltet er valgfritt
Prop:
optionalText?
Type:
string
Beskrivelse:
Tekst som vises i valgfritt-merkingen
Prop:
tagText?
Type:
string
Beskrivelse:
Tekst som vises i en tag ved siden av label
Prop:
hasError?
Type:
boolean
Beskrivelse:
Angir om feltet har feil
Prop:
errorMessage?
Type:
string
Beskrivelse:
Feilmelding som vises under feltet
Prop:
helptext?
Type:
string
Beskrivelse:
Hjelpetekst som vises over feltet
Prop:
helptextDropdown?
Type:
string
Beskrivelse:
Hjelpetekst som vises i en lukket boks man kan Ă„pne
Prop:
helptextDropdownButton?
Type:
string
Beskrivelse:
Tekst som vises pÄ knappen for Ä Äpne/lukke utvidet hjelpetekst
Prop:
name
Type:
string
Beskrivelse:
Navn pÄ feltet
Prop:
id
Type:
string
Beskrivelse:
Id pÄ feltet
Prop:
value?
Type:
string
Beskrivelse:
Verdi pÄ feltet
Prop:
disabled?
Type:
boolean
Standardverdi:
false
Beskrivelse:
Angir om feltet er disabled
Prop:
inline?
Type:
boolean
Standardverdi:
false
Beskrivelse:
Angir om feltet skal vises i en linje
Prop:
fullwidth?
Type:
boolean
Standardverdi:
false
Beskrivelse:
Angir om feltet skal ta full bredde
Prop:
ariaDescribedBy?
Type:
string
Beskrivelse:
Spesifiserer ID-en til elementet som beskriver feltet
Prop:
ariaLabelledby?
Type:
string
Beskrivelse:
Spesifiserer ID-en til elementet som navigerer til feltet
Prop:
inputSize?
input-size?
Type:
"small" | "medium" | "xsmall"
Standardverdi:
"medium"
Beskrivelse:
Visuell stĂžrrelse via input-wrapper.

Slots

Slot:
default
Beskrivelse:
Option elements for select component

Events

Event:
change
Type:
Event
Beskrivelse:
Returnerer valgt verdi som streng
Event:
value-change
Type:
CustomEvent
Beskrivelse:
Returnerer valgt verdi som streng i event.detail
Event:
toggleHelpText
Type:
CustomEvent
Beskrivelse:
Returnerer event.detail { isOpen: true } eller event.detail { isOpen: false } nÄr hjelpeteksten Äpnes eller lukkes