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.
Anatomi
Er kodet som checkbox og har samme funksjonalitet.
Endrer ikon og bakgrunnsfarge for raskere identifisering av tilstand.
Switch bruker et ikon for å identifisere "checked"-tilstand i tillegg til farge.
Kan ha label på venstre eller høyre side av switch-elementet. Høyre er default.
Blir lagt rett under label.
Demo
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.
