Hopp til innhold
Aksel

Søk

Ctrl+K for å søkeEsc for å lukke

Aksel

Designsystemet
God praksisBloggen

Komponenter

Combobox

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

BetaOppdatert 9. mai 2025
Github FigmaEndringslogg

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

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:

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.

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:

    Initial value of the input field. Only works when the input is uncontrolled.

readOnly?

  • Type:
    boolean
  • Description:

    Read-only state.

className?

  • Type:
    string

id?

  • Type:
    string
  • Description:

    Override internal id.

data-color?

  • Type:
    (string & {}) | AkselColor

label

  • Type:
    ReactNode
  • Description:

    Combobox label.

allowNewValues?

  • Type:
    boolean
  • Description:

    If enabled, adds an option to add the value of the input as an option whenever there are no options matching the value.

filteredOptions?

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

    A list of options to display in the dropdown list. If provided, this overrides the internal search logic in the component. Useful for e.g. searching on a server or when overriding the search algorithm to search for synonyms or similar.

hideLabel?

  • Type:
    boolean
  • Description:

    Optionally hide the label visually. Not recommended, but can be considered for e.g. search fields in the top menu.

inputClassName?

  • Type:
    string
  • Description:

    Custom class name for the input field.

    If used for styling, please consider using tokens instead.

isListOpen?

  • Type:
    boolean
  • Description:

    Controlled open/closed state for the dropdown list

isLoading?

  • Type:
    boolean
  • Description:

    Set to true when doing an async search and waiting for new filteredOptions.

    Will show a spinner in the dropdown and announce to screen readers that it is loading.

isMultiSelect?

  • Type:
    boolean
  • Description:

    Set to true to allow multiple selections.

    This will display selected values as a list of Chips in front of the input field, instead of a selection replacing the value of the input.

onToggleSelected?

  • Type:
    ((option: string, isSelected: boolean, isCustomOption: boolean) => void)
  • Description:

    Callback function triggered whenever an option is selected or de-selected.

    • 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:

    List of selected options.

    Use this prop when controlling the selected state outside for the component, e.g. for a filter, where options can be toggled elsewhere/programmatically.

maxSelected?

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

    Maximum number of selected options.

  • Example:
    maxSelected={3}

shouldAutocomplete?

  • Type:
    boolean
  • Default:
    false
  • Description:

    Set to true to enable inline autocomplete.

shouldShowSelectedOptions?

  • Type:
    boolean
  • Default:
    true
  • Description:

    When set to true displays selected options as Chips before the input field

toggleListButton?

  • Type:
    boolean
  • Default:
    true
  • Description:

    When set to true displays the toggle button for opening/closing the dropdown list

error?

  • Type:
    ReactNode
  • Description:

    Error message.

errorId?

  • Type:
    string
  • Description:

    Override internal errorId.

description?

  • Type:
    ReactNode
  • Description:

    Adds a description to extend the labeling.

ref?

  • Type:
    LegacyRef<HTMLInputElement>
  • Description:

    Allows getting a ref to the component instance. Once the component unmounts, React will set ref.current to null (or call the ref with null if you passed a callback ref). React Docs

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