Hopp til innhold
Aksel
  • God praksis
  • Grunnleggende
  • Ikoner
  • Komponenter
  • Bloggen

Meny

  • God praksis
  • Grunnleggende
  • Ikoner
  • Komponenter
  • Blogg
    • Box
    • HGrid
    • Hide
    • HStack
    • Show
    • VStack
    • Accordion
    • Alert
    • Button
    • Chat
    • Checkbox
    • Chips
    • Combobox
    • ConfirmationPanel
    • CopyButton
    • DatePicker
    • Dropdown
    • ErrorSummary
    • ExpansionCard
    • GuidePanel
    • HelpText
    • InternalHeader
    • Link
    • LinkPanel
    • List
    • Loader
    • Modal
    • MonthPicker
    • Pagination
    • Panel
    • Popover
    • Provider
    • Radio
    • ReadMore
    • Search
    • Select
    • Skeleton
    • Stepper
    • Switch
    • Table
    • Tabs
    • Tag
    • Textarea
    • TextField
    • Timeline
    • ToggleGroup
    • Tooltip
    • Typography
    • StepIndicator
    • CopyToClipboard
Komponenter / Core

Select

Oppdatert 2. august 2023Stabil
GithubYarn FigmaEndringslogg

    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

    Har du innspill til komponenten?

    Send forslag

    Eksempler

    Åpne eksempel i nytt vindu

    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.

    KommandoInteraksjon
    TabFlytter fokus til elementet etter select i tabindex
    Shift+TabFlytter 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
    EnterVelge alternativ i listen
    HomeMarkerer første element i listen
    EndMarkerer 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

    TokenFallback
    --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
    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

    • Radio thumbnail
      Radio

    © 2023 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