Intro
Combobox kombinerer tekstfelt og nedtrekksliste. Den lar brukeren skrive direkte i tekstfeltet eller velge fra en liste med alternativer i nedtrekkslista.
Eksempler
Ved Single Select velger brukeren kun ett valg fra nedtrekkslisten.
Ved Single Select velger brukeren ett valg fra listen. Med autocomplete foreslås et valg fra listen som matcher det brukeren skriver.
Ved Single Select velger brukeren kun ett valg fra nedtrekkslisten.
Ved Multi Select kan brukeren velge flere valg fra listen.
Du kan overstyre blant annet value, selectedOptions, filteredOptions.
Ved Multi Select kan brukeren velge flere valg fra nedtrekkslisten.
Ved å sette en grense for maks antall valgte vil brukeren få opp en beskjed om at hen ikke kan velge flere når grensen er nådd. Resterende valg vil også bli inaktive.
Ved å sende inn options som objekter er det mulig å vise en brukervennlig tekst til brukeren, samtidig som systemet i bakkant kan forholde seg til en ID.
Eksempel på bruk med react-hook-form.
Retningslinjer
Antall alternativer
Combobox fungerer best med større datasett hvor brukerne trenger en søke/filter-mekanisme for å ta valg. Om du har mindre enn 7 alternativer å velge mellom, så er det bedre å bruke Radio eller Checkbox. Ved enkeltvalg bør du vurdere å bruke Select hvis det ikke er veldig mange alternativer, da den er enklere å bruke.
Legg til alternativer
Combobox kan settes opp til å la brukeren legge til nye alternativer som ikke finnes i nedtrekkslista. Du bør likevel ha med noen forhåndsdefinerte alternativer som brukeren kan velge blant. Hvis ikke kan det være enklere å bare bruke et enkelt tekstfelt.
Vise valg eksternt
Combobox har muligheten til å vise valgte alternativer utenfor komponentens tekstfelt. Det er ofte brukt i løsninger med flere filter som viser hva som er valgt over en resultatoversikt. Det er også en mulig løsning for alternativer med tilknyttet data/metadata som trenger større plass for å vise alt innholdet.
Listeinnhold
Hold teksten i alternativene så kort at de passer i bredden til nedtrekslista. Om teksten blir lang vil den gå over flere linjer. Lange tekster gjør alternativene vanskelige å lese.
Tilgjengelighet
Komponenten følger i stor grad WAI-ARIA Practices Guide (APG) sin implementasjon av combobox-mønsteret.
Hoveddelene av komponenten er tekstfeltet og nedtrekklisten. Tekstfeltet har rollen combobox, og den kobles til nedtrekkslisten med aria-autocomplete="list" og aria-controls="<liste-id>". Dette kommuniserer for skjermleserbrukere at det er mulig å bruke piltaster for å bla mellom valgene i listen.
Input-type
Vi har valgt å bruke type="text" på tekstfeltet. I noen tilfeller ville kanskje type="search" virke mer logisk, da tekstfeltet primært brukes for å søke i verdier. Men gjennom brukertesting har denne typen fungert dårligere med skjermleser/leselist.
Tastaturinteraksjon
Det er hovedsakelig kun tekstfeltet som får fokus. Det er for å redusere antall tab-stopp for komponenten, slik at den oppleves likt som en native select. Deretter styres et virtuelt fokus når brukeren blar i nedtrekkslisten.
Vi har ikke gjort det mulig å tabbe til ekspander- eller tømmeknappen siden disse handlingene kan gjøres med henholdsvis piltastene og escape.
Når man bruker Multi Select-versjonen av Combobox kan man også flytte fokuset til de allerede valgte alternativene.
| Kommando | Interaksjon |
|---|---|
| Tab | Navigerer fremover i allerede valgte alternativer |
| Shift+Tab | Navigerer bakover i allerede valgte alternativer |
| ArrowUp | Navigerer til starten av teksten i input-feltet eller til forrige valg i nedtrekkslisten |
| ArrowDown | Navigerer til slutten av teksten i input-feltet eller til neste valg i nedtrekkslisten |
| Enter | Bekrefter autocomplete eller valget med virtuelt fokus i nedtrekkslisten |
| Home | Navigerer til starten av input-feltet |
| End | Navigerer til siste valg i nedtrekkslisten |
| Esc | Tømmer tekstfeltet |
Props
Props
defaultValue?
- Type:
string - Description:
readOnly?
- Type:
boolean - Description:
className?
- Type:
string
id?
- Type:
string - Description:
label
- Type:
ReactNode - Description:
allowNewValues?
- Type:
boolean - Description:
clearButton?
- Type:
boolean - Default:true
- Description:
clearButtonLabel?
- Type:
string - Default:"Tøm"
- Description:
filteredOptions?
- Type:
string[] | ComboboxOption[] - Description:
hideLabel?
- Type:
boolean - Description:
inputClassName?
- Type:
string - Description:
isListOpen?
- Type:
boolean - Description:
isLoading?
- Type:
boolean - Description:
isMultiSelect?
- Type:
boolean - Description:
onToggleSelected?
- Type:
((option: string, isSelected: boolean, isCustomOption: boolean) => void) - Description:
Param Description option The option value isSelected Whether the option has been selected or unselected isCustomOption Whether the option comes from user input, instead of from the list
selectedOptions?
- Type:
string[] | ComboboxOption[] - Description:
maxSelected?
- Type:
{ limit: number; message?: string; } - Description:
shouldAutocomplete?
- Type:
boolean - Default:false
- Description:
shouldShowSelectedOptions?
- Type:
boolean - Default:true
- Description:
toggleListButton?
- Type:
boolean - Default:true
- Description:
toggleListButtonLabel?
- Type:
string - Default:"Alternativer"
- Description:
error?
- Type:
ReactNode - Description:
errorId?
- Type:
string - Description:
description?
- Type:
ReactNode - Description:
ref?
- Type:
LegacyRef<HTMLInputElement> - Description:
