Hopp til innhold
Aksel

Komponenter

Combobox

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

Egnet til:

  • Velge ett eller flere alternativer fra en lang liste
  • Velge fra store datasett som lastes dynamisk
  • La brukeren legge til egne alternativer

Uegnet til:

Se bort fra "UNSAFE"-prefikset

Denne komponenten har ikke noen kjente alvorlige feil selv om den er merket som "UNSAFE" i kode. Vi har imidlertid planer om å lage en ny Combobox som vil ha et helt annet API. Ved å beholde prefikset vil den nye versjonen kunne leve side om side med den gamle i en overgangsperiode.

Eksempler

Retningslinjer

Antall alternativer

Combobox fungerer best når brukerne har behov for å filtrere for å ta valg. Hvis du har relativt få alternativer, er det bedre å bruke Radio, Checkbox eller Select, siden de er enklere å bruke.

Legge til alternativer

Combobox kan settes opp til å la brukeren legge til egne alternativer. Du bør likevel ha med noen forhåndsdefinerte alternativer som brukeren kan velge blant.

Listeinnhold

Unngå at teksten i alternativene bryter over flere linjer, da blir den vanskeligere å lese.

Tilgjengelighet

Komponenten følger i stor grad WAI-ARIA Practices Guide (APG) sin implementasjon av combobox-mønsteret.

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 flervalg-versjonen av Combobox kan man også flytte fokuset til de allerede valgte alternativene.

Props

Combobox

label

  • Type:
    ReactNode
  • Description:

    Combobox label.

options

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

    List of options

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.

onChange?

  • Type:
    ((value: string) => void)
  • Description:

    Callback function triggered whenever the value of the input field is triggered.

    • value: The value after change

onClear?

  • Type:
    ((event: PointerEvent<Element> | KeyboardEvent<Element> | FocusEvent<Element, Element>) => void)
  • Description:

    Callback function triggered whenever the input field is cleared.

    • event:

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

value?

  • Type:
    string
  • Description:

    Set this to override the value of the input field.

    This converts the input to a controlled input, so you have to use onChange to update the value.

defaultValue?

  • Type:
    string
  • Description:

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

error?

  • Type:
    ReactNode
  • Description:

    Error message.

errorId?

  • Type:
    string
  • Description:

    Override internal errorId.

size?

  • Type:
    "medium" | "small"
  • Description:

    Changes font-size, padding and gaps.

disabled?

  • Type:
    boolean
  • Description:

    Avoid using if possible for accessibility purposes.

    Disables element.

description?

  • Type:
    ReactNode
  • Description:

    Adds a description to extend the labeling.

id?

  • Type:
    string
  • Description:

    Override internal id.

readOnly?

  • Type:
    boolean
  • Description:

    Read-only state.

className?

  • Type:
    string

ref?

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

Forvalter

Team
Aksel
Artikkel oppdatert 11. september 2026
Send innspill
Om du har noen innspill eller tilbakemeldinger kan du sende dem inn på GitHub.
Send innspill
Slack
For lavterskel deling og hjelp kan du bruke Slack-kanalen for å stille spørsmål og diskutere løsninger.
Slack