Combobox

Egnet til:

• Når det er mange valg og du har lite plass.
• Når brukeren skal velge flere alternativer fra samme liste.
• Når det er nyttig at brukeren kan skrive for å begrense antall valg.

Uegnet til:

• Når det er få valg (ca. 5–15). Da er det bedre med en vanlig nedtrekksliste eller radioknapper.
• Når brukeren trenger spesiell veiledning for å ta et valg. Da bør du vurdere andre komponenter som gir mer kontekst. Se mønster «velge flere» for detaljer.

Komponenter som ligner:

• TextField
• Select
• CheckboxGroup

Teknisk dokumentasjon

Se Combobox i Storybook for tekniske detaljer. 

Varianter

Velge ett alternativ (standard)

Brukes når brukeren kun skal velge ett alternativ. Listen åpnes når brukeren klikker eller begynner å skrive. Listen med valg blir kortere etter hvert som brukeren søker.

Combobox med filtrert liste med valg

Velge flere alternativer (multi)

• Brukeren kan velge flere alternativer.
• Valgene vises som chips inne i feltet. Feltet er høyere enn en vanlig nedtrekkliste for å få plass til disse. I tillegg øker komponentens høyde etter hvert som flere valg legges til.
• Skuffen med valg forblir åpen for å gjøre det enkelt å velge flere i samme operasjon.
• Det er mulig å begrense antall valg brukeren skal kunne ta, for eksempel maksimalt tre valg.

Combobox med åpen flervalgsliste

Hvordan bruke komponenten  

• Combobox med flervalg bør plasseres i fleksible oppsett som tåler at komponenten vokser i høyden.
• Combobox fungerer best når innholdet er av samme art. Hvis listen av alternativer består av ulike kategorier, kan det bli vanskelig for brukeren å lete. Se mer om dette i mønsteret for å velge flere.

Relaterte mønstre

• Velge flere

Universell utforming

• Brukeren kan navigere i forslag med piltaster.
• Antall treff og plassering i listen kunngjøres for skjermleser.
• I flervalg annonserer skjermleser om forslag er valgt eller ikke når du navigerer, og når valg skrus av eller på.
• Når det er satt en grense for antall valg, annonseres meldingen om at maks er nådd. Husk at ledetekst skal gi beskjed om begrensning i antall valg.