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
      • ConfirmationPanel
      • 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
      • LinkPanelAvviklet
      • PanelAvviklet

Switch

Oppdatert 30. april 2025Stabil
GithubYarn FigmaEndringslogg

Innhold på siden

  • Intro
  • Eksempler
  • Retningslinjer
    • Label-tekst
    • Gruppering
    • Bør ha umiddelbar effekt
    • Ikke bruk som erstatning for checkbox
    • Loading
  • Tilgjengelighet
    • Tastaturinteraksjon
    • Disabled
  • Props
    • Switch
  • Tokens

Intro

Switch brukes som en bryter til å endre umiddelbart mellom to tilstander, ofte for å slå en innstilling av og på.

Egnet til:

  • Aktivere/deaktivere en tilstand umiddelbart.
  • Av/på-bryter for f.eks. varsler.

Uegnet til:

  • Erstatning for checkbox eller radio i skjema.
  • Tilstander som ikke blir lagret umiddelbart.

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. Small bør brukes sparsomt på sider som brukes fra mobil, da det er viktig at touch-flaten er stor nok.

Label må være meningsfull selv om den skjules, siden den fortsatt leses av skjermlesere.

'loading'-prop bør bare brukes for korte lastetider. Ved lengre lastetid bør brukeren informeres om hva som foregår.

Readonly-attributtet gjør at tilstanden ikke kan endres. Til forskjell fra 'disabled' vil brukere fortsatt kunne tabbe til feltet, og verdien 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.

Retningslinjer

Label-tekst

Label er statisk og beskriver en ting som kan være på eller av. Switchen kommuniserer om tingen er på eller av, ikke skriv dette i label.

GjørLabel er statisk og forståelig
Label forteller hva det er og switchen forteller statusen.
UnngåLabel inneholder status og gjør det vanskelig å skjønne tilstanden
Om label inneholder statusen kan det være vrient å skjønne hva som er av og på.

Gruppering

Relaterte switch-elementer bør grupperes sammen. Dette kan gjøres ved bruk av Fieldset-komponenten vår.

Ved bruk av høyrestilt switch kan det være vanskelig å se hvilken tekst som hører til hvilken switch dersom avstanden er stor.

GjørGruppering av switch
Venstrestilt switch-element. Dette vil være go-to løsning i de fleste tilfeller.
Pass påSwitch gruppering høyrestilt
Ved bruk av høyrestilt switch må du passe på at avstanden mellom tekst og switch ikke blir for stor.

Bør ha umiddelbar effekt

Switch bør ha en umiddelbar effekt ved aktivering. Det skal derfor ikke være nødvendlig med en lagreknapp for å aktivere de innstillingene man har valgt.

UnngåSwitch med eks lagre-knapp er ikke anbefalt

Ikke bruk som erstatning for checkbox

Ved flervalg i et skjema bør ikke switch brukes. Vurder heller andre skjemaelementer som for eksempel Checkbox.

UnngåIkke bruk switch som checkbox erstattning

Loading

Ved aktivering av innstillinger der ny data må lastes inn finnes det en egen loading-state. Denne bør helst bare brukes for korte lastetider. Ved lengre lastetid bør brukeren bli informert om hva som tar tid.

GjørSwitch i loading-state
Loading-state kan brukes ved korte lastetider.

Tilgjengelighet

Tastaturinteraksjon

Switch er implementert som en checkbox og følger samme interaksjon som den.

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.

Props

Switch

children

  • Type:
    ReactNode
  • Description:

hideLabel?

  • Type:
    boolean
  • Description:

loading?

  • Type:
    boolean
  • Description:

position?

  • Type:
    "left" | "right"
  • Default:
    "left"
  • Description:

description?

  • Type:
    string
  • Description:

size?

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

disabled?

  • Type:
    boolean
  • Description:

id?

  • Type:
    string
  • Description:

readOnly?

  • Type:
    boolean
  • Description:

className?

  • Type:
    string

ref?

  • Type:
    LegacyRef<HTMLInputElement>
  • Description:

Tokens

TokenFallback
--ac-switch-action--a-surface-action-selected
--ac-switch-bg--a-surface-default
--ac-switch-checked-bg--a-surface-action-selected
--ac-switch-hover-bg--a-surface-subtle
--ac-switch-checked-hover-bg--a-surface-action-selected-hover
--ac-switch-thumb-bg--a-surface-neutral
--ac-switch-thumb-icon--a-icon-subtle
--ac-switch-thumb-icon-checked--a-icon-action-selected
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

  • Checkbox thumbnail
    Checkbox

© 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