Komponenter
Select
Select viser brukeren en nedtrekksliste der ett alternativ kan velges. Et valg kan ikke fjernes, kun byttes med et annet alternativ. Komponenten bruker native HTML-<select>.
Egnet til:
- Å velge ett alternativ
Uegnet til:
- Navigasjon (vurder ActionMenu)
- Å velge flere alternativer (se Combobox)
Eksempler
Retningslinjer
Antall alternativer
Select funker godt når det er mange alternativer. Hvis det er få alternativer vil det være enklere å forholde seg til Radio. Vurder også om det er behov for å søke i eller filtrere alternativene. Da anbefaler vi å bruke Combobox.
Tilpass bredden
Skjemafelter bør ha en bredde som er tilpasset det brukeren skal fylle inn. For Select kan dette enkelt gjøres med style={{ width: "auto" }} så lenge alternativene er statiske. Når feltene har forskjellig bredde blir det lettere å navigere i skjemaer med mange felter.
Uegnet til navigasjon
Bruk av Select til navigasjon kan være brudd på WCAG 3.2.2 On Input, som sier at endring av et skjemafelt ikke skal føre til endring av kontekst. Legg merke til at det å endre URLen ikke nødvendigvis innebærer endring av kontekst.
Tilgjengelighet
Skjule label visuelt
Select skal alltid ha en label. I spesielle tilfeller kan label skjules visuelt med propen hideLabel, f.eks. i tabeller der feltet får ledeteksten sin fra tabellheaderen. Selv om labelen skjules er det viktig at den er meningsfull siden den fortsatt leses av skjermlesere.
Disabled
Vi fraråder bruk av disabled state. Vurder om du trenger å vise feltet i det hele tatt, om du heller kan bruke readOnly, eller bare kan skrive ut informasjonen i ren tekst.
Figma
I Figma er nedtrekslisten (options) et eksempel du kan bruke til prototyping. I kode er dette et native element som operativsystemet bestemmer designet på.
Props
Select
children
- Type:
ReactNode - Description:
Collection of <option />-elements.
style?
- Type:
CSSProperties - Description:
Sets inline-style on select wrapper.
label
- Type:
ReactNode - Description:
Label for select.
hideLabel?
- Type:
boolean - Description:
Shows label and description for screenreaders only.
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:
LegacyRef<HTMLSelectElement> - Description:
Allows getting a ref to the component instance. Once the component unmounts, React will set
ref.currenttonull(or call the ref withnullif you passed a callback ref). React Docs
Tokens
Deprecation warning: I det nye systemet for theming og darkmode, er komponent-tokens fjernet. Les mer om det nye themingsystemet.
| Token | Fallback |
|---|---|
| --ac-select-bg | --a-surface-default |
| --ac-select-text | --a-text-default |
| --ac-select-border | --a-border-default |
| --ac-select-hover-border | --a-border-action-hover |
| --ac-select-active-border | --a-border-action-selected |
| --ac-select-error-border | --a-surface-danger |