Hopp til innhold
Aksel
  • God praksis
  • Grunnleggende
  • Ikoner
  • Komponenter
  • Mønster & Maler
  • Bloggen

Meny

  • God praksis
  • Grunnleggende
  • Ikoner
  • Komponenter
  • Mønster & Maler
  • Blogg
  • komponenter
      • Page
      • HGrid
      • HStack
      • VStack
      • Box
      • Hide
      • Show
      • Bleed
      • Eksperimenter 🧪
      • Accordion
      • ActionMenuBeta
      • Alert
      • Button
      • Chat
      • Checkbox
      • Chips
      • ComboboxBeta
      • CopyButton
      • DatePicker
      • Dropdown
      • ErrorSummary
      • ExpansionCard
      • FileUpload
      • FormProgressNy
      • FormSummaryNy
      • GuidePanel
      • HelpText
      • InternalHeader
      • Link
      • List
      • Loader
      • Modal
      • MonthPicker
      • Navpoleonskake
      • Pagination
      • Popover
      • ProgressBar
      • Provider
      • Radio
      • ReadMore
      • Search
      • Select
      • Skeleton
      • Stepper
      • Switch
      • Table
      • Tabs
      • Tag
      • Textarea
      • TextField
      • Timeline
      • ToggleGroup
      • Tooltip
      • Typography
      • ConfirmationPanelAvviklet
      • LinkPanelAvviklet
      • PanelAvviklet

Combobox

Oppdatert 9. mai 2025
GithubYarn FigmaEndringslogg

Innhold på siden

  • Intro
  • Eksempler
  • Retningslinjer
    • Antall alternativer
    • Legg til alternativer
    • Vise valg eksternt
    • Listeinnhold
  • Tilgjengelighet
    • Input-type
    • Tastaturinteraksjon
  • Props

Beta

Komponenten er under utvikling. Så lenge komponenten er prefikset med UNSAFE kan det også medføre breaking-changes i minor versjon av kodepakker og i Figma. Teamet ditt må selv ta stilling til om dere ønsker å bruke denne i produksjon.

Send innspill

Intro

Combobox kombinerer tekstfelt og nedtrekksliste. Den lar brukeren skrive direkte i tekstfeltet eller velge fra en liste med alternativer i nedtrekkslista.

Egnet til:

  • Velge blant en lang liste av alternativer.
  • Oppgi verdier på et standardisert format, som navn på land.
  • Velge én eller flere verdier.
  • Oppslag i store datasett.

Uegnet til:

  • Færre enn 7 alternativer (bruk Radio eller Checkbox).
  • Søk (bruk Search).

Eksempler

Ved Single Select velger brukeren kun ett valg fra nedtrekkslisten.

SandboxSandbox
Åpne eksempel i nytt vindu

Med shouldAutocomplete foreslås et valg fra listen som matcher det brukeren skriver.

Med isMultiSelect kan brukeren velge flere alternativer fra nedtrekkslisten.

Du kan overstyre blant annet value, selectedOptions og filteredOptions.

Med allowNewValues kan brukeren legge til egne verdier som ikke finnes i listen.

Ved å sette en grense for maks antall valg vil brukeren få opp en beskjed om at hen ikke kan velge flere når grensen er nådd. Resterende alternativer blir 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.

Advarsel

VoiceOver har hatt en feil med håndtering av Combobox i Safari. Valgalternativene blir ikke lest opp når brukeren blar i dem. Feilen ble fikset i MacOS 15 Sequoia.

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

Props

defaultValue?

  • Type:
    string
  • Description:

readOnly?

  • Type:
    boolean
  • Description:

className?

  • Type:
    string

id?

  • Type:
    string
  • Description:

label

  • Type:
    ReactNode
  • Description:

allowNewValues?

  • Type:
    boolean
  • 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:
    ParamDescription
    optionThe option value
    isSelectedWhether the option has been selected or unselected
    isCustomOptionWhether the option comes from user input, instead of from the list

selectedOptions?

  • Type:
    string[] | ComboboxOption[]
  • Description:

maxSelected?

  • Type:
    number | { limit: number; }
  • Description:
  • Example:

shouldAutocomplete?

  • Type:
    boolean
  • Default:
    false
  • Description:

shouldShowSelectedOptions?

  • Type:
    boolean
  • Default:
    true
  • Description:

toggleListButton?

  • Type:
    boolean
  • Default:
    true
  • Description:

error?

  • Type:
    ReactNode
  • Description:

errorId?

  • Type:
    string
  • Description:

description?

  • Type:
    ReactNode
  • Description:

ref?

  • Type:
    LegacyRef<HTMLInputElement>
  • Description:

clearButton?

  • Deprecated:
    The clear button has been removed. This prop has no effect.
  • Type:
    boolean

clearButtonLabel?

  • Deprecated:
    The clear button has been removed. This prop has no effect.
  • Type:
    string

Relaterte komponenter

  • Checkbox thumbnail
    Checkbox
  • Radio thumbnail
    Radio
  • Select thumbnail
    Select

© 2025 Nav

Arbeids- og velferdsetaten

Snarveier

  • Skriv for Aksel
  • Prinsipper for brukeropplevelse
  • Security Playbook
  • Etterlevelse

Om nettstedet

  • Hva er Aksel?
  • Personvernerklæring
  • Tilgjengelighetserklæring

Finn oss

  • Figma
  • Github
  • Slack