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.