Switch

Status
Figma	✅Publisert
CSS	✅Publisert
Vue	✅Publisert
React	✅Publisert
Dokumentasjon	✅Publisert

Om komponenten

Switch (også kalt toggle, eller bryter på godt norsk) er en kontroll som lar brukerne veksle mellom to mulige tilstander (av eller på).

Skru på lyset

Varianter

I Punkt kan du selv velge om du ønsker å bruke/plassere switchen frittstående, eller med tekst på én av sidene.

Farger

Switchen er alltid Dark blue ($dark-blue-1000), #2A2859.

Slik bruker du komponenten

Switch brukes kun for binære handlinger som aktiveres eller deaktiveres umiddelbart etter at brukeren har slått på eller av bryteren. Det vil si at endring i tilstanden ikke skal kreve bekreftelse eller lagring. Switchen bør ha en ledetekst som forteller hva brukeren slår av og på.

Eksempel på bruk av switch i booking sin løsning. — Eksempel på bruk av switch i team Booking sin admin-løsning

Husk at switchen ikke alltid er det riktige valget - ofte fungerer det best med en avmerkningsboks (checkbox). Enkelt oppsummert:

Bruk avmerkingsbokser (checkbox) for å velge flere relaterte alternativer.
Bruk radioknapper for å velge ett enkelt alternativ i en liste av alternativer.
Bruk switch for å skru noe av eller på, eller aktivere, et valg eller en handling.