Komponenter
Switch
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.
Eksempler
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:
Switch-label.
hideLabel?
- Type:
boolean - Description:
If enabled shows the label and description for screenreaders only.
loading?
- Type:
boolean - Description:
Toggles loading state with loader-component on switch.
position?
- Type:
"left" | "right" - Default:
""left"" - Description:
Positions switch on left/right side of label.
description?
- Type:
string - Description:
Adds a description to extend labeling of Switch.
size?
- Type:
"medium" | "small" - Default:
"null" - Description:
Changes font-size, padding and gaps.
disabled?
- Type:
boolean - Description:
Avoid using if possible for accessibility purposes.
Disables element.
id?
- Type:
string - Description:
Override internal id.
readOnly?
- Type:
boolean - Description:
Read-only state.
className?
- Type:
string
data-color?
- Type:
(string & {}) | AkselColor
ref?
- Type:
LegacyRef<HTMLInputElement> - Description:
Allows getting a ref to the component instance. Once the component unmounts, React will set
ref.currenttonull(or call the ref withnullif you passed a callback ref). React Docs
Tokens
Deprecation warning: I det nye systemet for theming og darkmode, er komponent-tokens fjernet. Mer dokumentasjon for dette kommer, midlertidig dokumentasjon finner du her.
| Token | Fallback |
|---|---|
| --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 |