Switch
Release dato: 31.01.2024
Sist oppdatert: 13.03.2025
En switch (også kalt toggle eller bryter) lar brukeren veksle mellom to mulige tilstander – av eller på. Den brukes for handlinger som får umiddelbar effekt, uten at brukeren må bekrefte eller lagre.
Typiske bruksområder er å skru på varsler, aktivere en funksjon eller slå av en innstilling.
For demo og implementasjonsdetaljer kan du se checkbox.
Eksempler
Med labelPosition kan man legge label til venstre:
Switch kan også presenteres med en skjult label:
Relaterte komponenter
For valg i skjema eller når lagring kreves
Når brukeren skal velge kun ett alternativ i en liste
For enkeltstående handlinger som krever bekreftelse
Varianter
Variant
| Variant | Beskrivelse |
|---|---|
| Standard | Når switch står alene eller i en enkel liste |
| Med ramme (tile) | Når du vil ramme inn en switch visuelt |
Type
| Type | Beskrivelse |
|---|---|
| Frittstående | Brukes når konteksten er tydelig, for eksempel i tabeller eller lister |
| Med tekst | Brukes når det er nødvendig å forklare hva som skrus av/på, kan også ha hjelpetekst |
Retningslinjer for bruk
Bruk switch når
- handlingen får umiddelbar effekt når den slås av eller på
- brukeren forventer en visuell bekreftelse på tilstanden
- valget gjelder én funksjon eller innstilling
Unngå switch når
- du trenger bekreftelse eller lagring før endringen trer i kraft (bruk checkbox eller button)
- brukeren skal kunne velge flere alternativer samtidig (bruk checkbox)
- brukeren skal velge ett av flere alternativer (bruk radio button)
Bruk switch når endring i tilstanden ikke skal kreve bekreftelse
Bruk switch for binære handlinger som slår en funksjon av eller på umiddelbart. Endringen skal tre i kraft med én gang, uten at brukeren må bekrefte eller lagre. Gi alltid switchen en tydelig ledetekst som forteller hva som blir aktivert eller deaktivert.
Switch skal ikke erstatte knapp
En switch skal ikke brukes til å starte en enkeltstående handling som normalt gjøres med en knapp. For eksempel: “Lagre endringer” bør være en button, ikke en switch.
Gjør slik
Unngå
Ledeteksten skal beskrive handlingen
Ledeteksten skal fortelle hva som skrus av eller på, switchen viser statusen. Unngå å legge status direkte inn i teksten.
Gjør slik
Unngå
Endringen skal ha umiddelbar effekt
En switch skal ikke kreve et ekstra steg for å bekrefte. Effekten skal tre i kraft idet brukeren aktiverer eller deaktiverer bryteren.
Gjør slik
Unngå
Responsivitet
Switch fungerer på alle skjermstørrelser. Den tilpasser seg tilgjengelig plass, og bryteren og eventuell tekst bryter linjer ved behov.
- at ledetekst og bryter har god avstand og er lett å treffe på mobil
- at interaksjonen fungerer like godt i stående og liggende visning
- at skjulte etiketter fungerer på alle skjermlesere
Universell utforming
Switch er egentlig bare en checkbox
Switch er teknisk implementert som en checkbox med role="switch", og følger samme tastaturinteraksjon: “space” aktiverer/deaktiverer.
Bruk alltid ledetekst/etikett
Bruk alltid en etikett (synlig eller skjult) som beskriver hva bryteren gjør (WCAG 2.1: 1.3.1 Info and Relationships, 2.4.6 Headings and Labels). Ved grupper av switcher, bruk fieldset og legend for å gi kontekst.
Switch og skjermleser
Endringen skal annonseres for skjermlesere umiddelbart ved aktivering (WAI-ARIA Switch Pattern).
Hvordan gjøre en switch tilgjengelig og universelt utformet
Anatomi
| Element | Beskrivelse |
|---|---|
| Ledetekst venstre (valgfritt) | Kort tekst som beskriver handlingen |
| Switch | Selve bryteren som endrer tilstand |
| Ledetekst høyre (valgfritt) | Kort tekst som beskriver handlingen |
| Hjelpetekst (valgfritt) | Utfyllende forklaring under ledeteksten |
Implementasjon i kode
Se checkbox for implementasjon i kode.
Props og tokens
Se checkbox for egenskaper.
Farger
| Element | CSS variabel |
|---|---|
| Border | |
| Text | |