Intro
Select viser brukeren en nedtrekksliste med alternativer som kan velges, og kun ett alternativ kan velges av gangen. Når et valgt er tatt kan det ikke fjernes, kun byttes med et annet alternativ.
Egnet til:
- Mange alternativer
- Å velge ett alternativ
Uegnet til:
- Navigasjon
- Å velge flere alternativ
- Færre enn 7 alternativer
Eksempler
Varianter
Størrelser
Komponenten kommer i to størrelser:
- Medium (standard) brukes både på eksterne og interne flater.
- Small brukes på interne flater der det er behov for et mer komprimert grensesnitt.
Skjule label visuelt
Select skal alltid ha en label. I spesielle tilfeller kan label skjules visuelt, f.eks. i tabeller der en select får ledeteksten sin fra tabellheaderen--bruk da `aria-label` eller `aria-labelledby`.
Read-only
Readonly-attributtet spesifiserer at et inputfelt i et skjema er skrivebeskyttet. Et skrivebeskyttet felt kan ikke endres, men brukere kan tabbe til det, markere det og kopiere tekst fra det. Til forskjell fra disabled-felter vil innholdet i readonly-felter inkluderes når et skjema sendes inn.
Antall alternativer
Select funker godt når det er 7 eller flere alternativer. Om det er færre alternativer vil det være enklere for brukerne å forholde seg til Radio. Vurder også om det er behov for å søke i eller filtrere alternativene. Da anbefales det å bruke Combobox.
Retningslinjer
Figma
I Figma finner du nedtrekkslisten som en egen komponent som heter "Options". Denne kan du bruke til å bygge interaktive prototyper.
Options i Figma Aksel UI-kit (krever innlogging i NAV Figma-konto)
Tilgjengelighet
Tastaturinteraksjon
Merk at man bruker piltastene for markere alternativ i select, ikke tab.
| Kommando | Interaksjon |
|---|---|
| Tab | Flytter fokus til elementet etter select i tabindex |
| Shift+Tab | Flytter fokus til element før select i tabindex |
| Space | Åpne listen og velge alternativ i listen (sistnevnte bare på Mac) |
| ↓ | Markere neste alternativ i listen |
| ↑ | Markere forrige alternativ i listen |
| Enter | Velge alternativ i listen |
| Home | Markerer første element i listen |
| End | Markerer siste element i listen |
Disabled
Selv om vi fraråder bruk av disabled state generelt, finnes det helt sikkert unntak. Ta kontakt med våre eksperter på universell utforming for å finne best mulig løsning.
Props
Select
- children ReactNode
- Collection of <option />-elements
- htmlSize? number
- Exposes the HTML size attribute
- label ReactNode
- Label for select
- hideLabel? boolean
- If enabled shows the label and description for screenreaders only
- style? CSSProperties
- Sets inline-style on select wrapper
- error? ReactNode
- Error message for element
- errorId? string
- Override internal errorId
- size? "medium" | "small"
- Changes font-size, padding and gaps
- disabled? boolean
- Disables element @note Avoid using if possible for accessibility purposes
- description? ReactNode
- Adds a description to extend labling of a field
- id? string
- Override internal id
- readOnly? boolean
- Read only-state
- className? string
- ref? Ref<HTMLSelectElement>
- 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). @see https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom
- Select extends HTMLSelectElement
Tokens
| Token | Fallback |
|---|---|
| --ac-select-bg | --a-surface-default |
| --ac-select-text | --a-text-default |
| --ac-select-border | --a-border-default |
| --ac-select-hover-bg | --a-border-action |
| --ac-select-error-border | --a-surface-danger |
