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
Vurder noe annet:
- Som erstatning for checkbox eller radio i skjema
- Toggle tilstander som ikke automatisk blir oppdatert. Brukes helst som en lysbryter der endringer skjer umiddelbart.
Har du innspill til komponenten?
Send forslagEksempler
Varianter
Størrelser
Switch kommer i to størrelser: medium og small. Medium er standard, og brukes både på eksterne og interne flater. Small brukes på interne flater der det er behov for et mer komprimert grensesnitt.
Switch plassering
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.
Disabled
Vi fraråder å ta i bruk disabled-state på skjema-elementer.
Tilgjengelighet
Interaksjon Tastatur
Switch er implementert som en checkbox og følger da samme interaksjon som den.
| Kommando | Interaksjon |
| space | Aktiverer/deaktiverer elementet. |
Bruk
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.
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
- className? string
- ref? Ref<HTMLInputElement>
- 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 |
