Hopp til innhold
Aksel
  • God praksis
  • Grunnleggende
  • Ikoner
  • Komponenter
  • Mønster & Maler
  • Bloggen

Meny

  • God praksis
  • Grunnleggende
  • Ikoner
  • Komponenter
  • Mønster & Maler
  • Blogg
  • komponenter
      • Page
      • HGrid
      • HStack
      • VStack
      • Box
      • Hide
      • Show
      • Bleed
      • Eksperimenter 🧪
      • Accordion
      • ActionMenuBeta
      • Alert
      • Button
      • Chat
      • Checkbox
      • Chips
      • ComboboxBeta
      • CopyButton
      • DatePicker
      • Dropdown
      • ErrorSummary
      • ExpansionCard
      • FileUpload
      • FormProgressNy
      • FormSummaryNy
      • GuidePanel
      • HelpText
      • InternalHeader
      • Link
      • List
      • Loader
      • Modal
      • MonthPicker
      • Navpoleonskake
      • Pagination
      • Popover
      • ProgressBar
      • Provider
      • Radio
      • ReadMore
      • Search
      • Select
      • Skeleton
      • Stepper
      • Switch
      • Table
      • Tabs
      • Tag
      • Textarea
      • TextField
      • Timeline
      • ToggleGroup
      • Tooltip
      • Typography
      • ConfirmationPanelAvviklet
      • LinkPanelAvviklet
      • PanelAvviklet

Select

Oppdatert 30. april 2025Stabil
GithubYarn FigmaEndringslogg

Innhold på siden

  • Intro
  • Eksempler
    • Skjule label visuelt
  • Retningslinjer
    • Antall alternativer
    • Plassering av label og description
    • Tilpass bredden
    • Uegnet til navigasjon
  • Tilgjengelighet
    • Kjente feil
    • Disabled
  • Figma
  • Props
    • Select
  • Tokens

Intro

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
  • Å velge flere alternativer (se Combobox)

Har du innspill til komponenten?

Send forslag

Eksempler

SandboxSandbox
Åpne eksempel i nytt vindu

Small brukes på interne flater der det er behov for et mer komprimert grensesnitt.

Readonly-attributtet gjør at verdien ikke kan endres. Til forskjell fra disabled-felter vil brukere fortsatt kunne tabbe til det, og feltet vil inkluderes når skjemaet sendes inn.

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 det ut i ren tekst.

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.

Retningslinjer

Antall alternativer

Select funker godt når det er 7 eller flere alternativer. Om det er færre alternativer vil det i skjemaer være enklere for brukerne å forholde seg til Radio. Vurder også om det er behov for å søke i eller filtrere alternativene. Da anbefaler vi å bruke Combobox.

Plassering av label og description

Label og description er alltid plassert over feltet slik at det er godt synlig på små skjermer og ikke kommer i konflikt med feilmelding.

Unngå labeltekst som går over to linjer.

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.

LenkerLenker

  • God praksis-artikler om skjemaer

Tilgjengelighet

Komponenten implementer HTML select.

Kjente feil

Select fungerer ikke med VoiceOver i Chrome på Mac. Dette er en kjent feil med VoiceOver.

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:

htmlSize?

  • Type:
    number
  • Description:

style?

  • Type:
    CSSProperties
  • Description:

label

  • Type:
    ReactNode
  • Description:

hideLabel?

  • Type:
    boolean
  • Description:

error?

  • Type:
    ReactNode
  • Description:

errorId?

  • Type:
    string
  • Description:

size?

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

disabled?

  • Type:
    boolean
  • Description:

description?

  • Type:
    ReactNode
  • Description:

id?

  • Type:
    string
  • Description:

readOnly?

  • Type:
    boolean
  • Description:

className?

  • Type:
    string

ref?

  • Type:
    LegacyRef<HTMLSelectElement>
  • Description:

Tokens

TokenFallback
--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
Hva er dette?

Komponent-tokens gir deg muligheten til å sette opp theming eller justere styling uten å måtte overskrive css-klasser. Les gjennom guiden vår eller utforsk alle design tokens.

Relaterte komponenter

  • Combobox thumbnail
    ComboboxBeta
  • Radio thumbnail
    Radio

© 2025 Nav

Arbeids- og velferdsetaten

Snarveier

  • Skriv for Aksel
  • Prinsipper for brukeropplevelse
  • Security Playbook
  • Etterlevelse

Om nettstedet

  • Hva er Aksel?
  • Personvernerklæring
  • Tilgjengelighetserklæring

Finn oss

  • Figma
  • Github
  • Slack