Intro
Switch brukes som en bryter til å endre umiddelbart mellom to tilstander, ofte for å slå en innstilling av og på.
Eksempler
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.
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.
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.
Ikke bruk som erstatning for checkbox
Ved flervalg i et skjema bør ikke switch brukes. Vurder heller andre skjemaelementer som for eksempel 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 lastetider. Ved lengre lastetid bør brukeren bli informert om hva som tar tid.
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
| Token | Fallback |
|---|---|
| --ac-switch-action | --a-surface-action-selected |
| --ac-switch-bg | --a-surface-neutral |
| --ac-switch-checked-bg | --a-surface-action-selected |
| --ac-switch-hover-bg | --a-surface-neutral-hover |
| --ac-switch-checked-hover-bg | --a-surface-action-selected-hover |
| --ac-switch-thumb-bg | --a-surface-default |
| --ac-switch-thumb-icon | --a-icon-subtle |
| --ac-switch-thumb-icon-checked | --a-icon-action-selected |
