Komponenter
Combobox
Combobox kombinerer tekstfelt og nedtrekksliste. Den lar brukeren skrive direkte i tekstfeltet eller velge fra en liste med alternativer i nedtrekkslista.
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.
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.
Eksempler
<UNSAFE_Combobox label="Hva er din favorittfrukt?" options={options} />
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.
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
tonull
(or call the ref withnull
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