Eksempler

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

Komponenten implementerer standard "Combobox Pattern".

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.

Props