Combobox

Om komponenten

En Combobox (også kalt multiselect) kombinerer et tekstfelt med en nedtrekksliste. Den lar brukeren:

• Søke ved å skrive inn tekst (for å filtrere alternativer)
• Velge ett eller flere alternativer fra en forhåndsdefinert liste
• Legge til egne verdier dersom det er tillatt (Valgfritt)

Formålet med en Combobox er å gjøre det enklere for brukeren å finne eller legge inn riktig verdi, spesielt når det er mange alternativer.

Varianter

Combobox har to ulike hovedvarianter:

• Flervalg
• Enkeltvalg

I Combobox kan man velge flere ulike varianter for utfylling uansett om man går for flervalg eller enkeltvalg:

• Typeahead (automatisk utfylling mens du skriver)
• Søk i selve tekstfeltet
• Søk i alternativlisten

Flervalg

• Lar brukeren velge flere alternativer, som vises som Tags i tekstfeltet
• Kan ha en maksimalgrense for hvor mange alternativer som kan velges
• Kan også tillate egendefinerte verdier, om det er lagt opp til det

Enkeltvalg

• Lar brukeren velge kun ett alternativ fra nedtrekkslisten
• Kan eventuelt tillate at brukeren legger til en egendefinert verdi (hvis ønskelig)
• Viser det valgte alternativet i tekstfeltet

Komponenten baserer seg på vanlig Text Input, og har de samme mulighetene som inkluderes i Input Wrapper.

Farger

• Bakgrunn: Hvit ($surface-subtle-white, #FFFFFF).
• Tekst: Mørk blå ($text-body-dark, #2A2859).
• Kantlinje på input: Mørk blå ($brand-dark-blue, #2A2859).
• Valgte elementer: Lys blå ($brand-blue, #D1F9FF) for bakgrunn eller markering.
• Tags: Mørk blå ($brand-dark-blue, #2A2859), men alle fargevarianter av tags kan brukes. Se fargealternativene for Tags her.

Slik bruker du komponenten

Når skal Combobox brukes? ✅

• Når brukeren kan velge mellom mange alternativer, og det er nyttig å filtrere listen ved å søke
• Når du ønsker å redusere feil ved å foreslå treff mens brukeren skriver.
• Når du vil åpne for at brukeren kan legge til en verdi som ikke finnes i den forhåndsdefinerte listen

Når skal Combobox unngås? ❌

• Når det er svært få alternativer (da er en vanlig dropdown, checkbox eller radio-knapper ofte mer intuitive)
• Når brukeren alltid må velge fra en fast liste (uten mulighet for fritekst) – da holder det ofte med en select
• Når valgene er svært komplekse, er informasjonstunge eller krever en helt annen form for presentasjon
• Når brukeren kun skal søke og ikke velge fra liste – da kan en renspikket “Search input” være bedre

Retningslinjer for bruk

Det er viktig å tilpasse ledetekst (label) og hjelpetekst godt for å hjelpe brukeren når man tar i bruk en Combobox:

• Vær kort og konsis i ledetekst (label).
• Forklar spesielle regler i hjelpeteksten, for eksempel om brukeren kan legge til nye verdier selv eller om det er et fastsatt antall elementer som kan velges.

Dersom du gir brukeren mulighet for å legge til nye alternativer, forklar tydelig hvordan brukeren skal benytte Comboboxen i hjelpeteksten, for eksempel:

Du står fritt til å velge om du ønsker å liste ut tags innenfor input-feltet, eller utenfor.

Gjør dette/ikke gjør dette

Combobox egner seg når man ønsker at brukeren skal velge mellom flere enn tre alternativer. Bruk heller Checkbox dersom du har få alternativer.

Ikke bruk Combobox hvis brukeren kun har lov til å søke – da er Search Input bedre.

Anatomi

1. Label: Kort tittel/etikett.
2. Hjelpetekst: Gir brukeren nødvendig informasjon om bruksmåte (valgfritt).
3. Inputfelt: Hvor brukeren skriver og ser valgte alternativer.
4. Tag (for hvert valgte alternativ): Viser hvilke alternativer som er valgt. Alle tags har slett-ikon som lar brukeren fjerne en valgt tag.
5. Alternativer: Listen over tilgjengelige valg som kan scrolles eller filtreres. Enten flervalg eller enkeltvalg.
6. Valgt alternativ: Markert i listen, og vist som en tag i inputfeltet.
7. Hoverstate: Vises når pilen beveger seg over alternativet.