Combobox

Användningsområden

Combobox är, precis som dess namn antyder, en kombination. Enklast sagt är det en kombination av en input fält och en dropdown, där användaren kan börja skriva namnet på sitt val för att se den filtrerad i resultatlistan. Komponenten är främst avsedd för större formulär, redigerbara tabell, eller där de val som finns i resultatlistan är välkänd av användaren.

Just nu ser Combobox och Dropdown select likadana ut, vilket kan medför förvirring för användarna om en sida implementeras med en blandning av Comboboxar och Dropdown select. Därför bör man försöka hålla sig till det ena eller det andra per sida.

Combobox	Dropbox
Bra vid långa resultatlistor	Användas där flera val kan väljas samtidigt
Bara ett val kan väljas	Användas där ett lämpligt default värde finns
Underlättar i långa formulär eller redigerbara tabeller	Bra vid kortare resultatlistor

Styling

• Combobox följer färgtema.
• Combobox har en fast höjd på 30 px.
• Comboboxen har två grundstorlekar: small (160px) eller stor (270 px)
• men det går att ange ett specifik bred
• Comboboxen har följande states:

Tillgänglighetskrav

• En rubrik kopplas till Comboboxen med Labelid.

• bör vara kolumnrubriken om komponenten är i en redigerbar tabell eller dylikt där samma rubrik uppstår flera gånger

• När Comboboxen är i fokus, läser skärmläsaren både rubrik och innehåll.

• När Comboboxen är i fokus, resultatlistan öppnas vid enter eller pil ner.

• Om användaren börjar skriva visas resultatlistan filtrerade utifrån det som skrivits med första val vald

• listan stängs sedan vid enter

• escape stänger listan och återgår till föregående val

• Piltangenterna används för att navigera mellan olika alternativ i resultatlistan

• Är det första/sista valet navigeras man till första alternativet igen.

• Home flyttar fokus till den första alternativet i vyn.

• End flyttar fokus till den sista alternativet i vyn.

• Tab stänger resultatlistan, behåller det som var valt, och flyttar fokus till nästa element.

• Inaktiva och read-only Combobox ska kunna få fokus så att skärmläsaren kan läsa upp.