Intro
Switch brukes til å raskt endre mellom to states. Ofte for å toggle preferanser eller innstillinger.
Egnet til:
- Aktivere/deaktivere en tilstand umiddelbart
- Som en på/av bryter for eks notifikasjoner
Uegnet til:
- Erstatning for checkbox eller radio i skjema
- Tilstander som ikke umiddelbart blir oppdatert
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.
Plassering av switch
Komponentet har en prop position som lar oss endre hvor elementet står i forhold til label. Dette kan være nytting for eksempel i et vanlig "innstillingspanel" der alle switch-elementene er høyrestilt.
Loading
Switch har en loading-prop som viser en loader ved aktivering. Denne bør brukes sparsomt og helst med ekstra informasjon til bruker om hva som lastes hvis lastingen tar lengre tid.
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.
Retningslinjer
Label-tekst
Label er statisk og beskriver en ting som kan være på eller av. Switch’en kommuniserer om tingen er på eller av. Sørg for å skrive label som ikke inneholder status på eller av.
Gruppere switch
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 bli forvirrende hvilken tekst som hører til hvilket element hvis du bruker veldig lange tekster.
Bør ha umiddelbar effekt
Switch bør ha en umiddelbar effekt ved aktivering. Det skal derfor ikke være nødvendlig med en lagre knapp for å aktivere de innstillingene man har valgt.
Ikke bruk som erstatning for checkbox
Ved flervalg i et skjema bør ikke switch bli brukt. Vurder heller andre skjemaelementer som eks Checkbox.
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 laste-tider. Ved lengre lastetid bør bruker bli informert om hva som tar tid/foregår i bakgrunnen mens de venter.
Tilgjengelighet
Tastaturinteraksjon
Switch er implementert som en checkbox og følger samme interaksjon som den.
| Kommando | Interaksjon |
|---|---|
| space | Aktiverer/deaktiverer elementet. |
Disabled switch
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
Switch
- children ReactNode
- Switch-label
- hideLabel? boolean
- If enabled shows the label and description for screenreaders only
- loading? boolean
- Toggles loading state with loader-component on switch
- position?"left" | "right"
- Positions switch on left/right side of label
- description? string
- Adds a description to extend labling of Switch
- size? "medium" | "small"
- Changes font-size, padding and gaps
- disabled? boolean
- Disables element @note Avoid using if possible for accessibility purposes
- id? string
- Override internal id
- readOnly? boolean
- Read only-state
- className? string
- ref? Ref<HTMLInputElement>
- 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
- Switch extends HTMLInputElement
Tokens
| Token | Fallback |
|---|---|
| --ac-switch-action | --a-surface-action |
| --ac-switch-bg | --a-surface-neutral |
| --ac-switch-checked-bg | --a-surface-success |
| --ac-switch-hover-bg | --a-surface-neutral-hover |
| --ac-switch-checked-hover-bg | --a-surface-success-hover |
| --ac-switch-thumb-bg | --a-surface-default |
| --ac-switch-thumb-icon | --a-icon-subtle |
| --ac-switch-thumb-icon-checked | --a-icon-success |
