Switch

Kildekode på GitHub · Les som Markdown

Switch er en toggle-bryter for binære valg (av/på). Den er visuelt tydelig og gir umiddelbar feedback. Bygget på Radix UI Switch.

Utforsk

disabled

<Switch />

Importering

import { Switch } from "@kilden/designsystem";

Grunnleggende bruk

<div style={{ display: "flex", alignItems: "center", gap: "0.5rem" }}>
<Switch id="airplane-mode" />
<label htmlFor="airplane-mode">Flymodus</label>
</div>

Med label

Koble alltid en <label> til switchen via id/htmlFor for tilgjengelighet.

<div style={{ display: "flex", flexDirection: "column", gap: "1rem" }}>
<div style={{ display: "flex", alignItems: "center", gap: "0.5rem" }}>
  <Switch id="notifications" defaultChecked />
  <label htmlFor="notifications">Varsler</label>
</div>
<div style={{ display: "flex", alignItems: "center", gap: "0.5rem" }}>
  <Switch id="marketing" />
  <label htmlFor="marketing">Markedsføringseposter</label>
</div>
<div style={{ display: "flex", alignItems: "center", gap: "0.5rem" }}>
  <Switch id="analytics" disabled />
  <label htmlFor="analytics" style={{ opacity: 0.5 }}>Analyse (deaktivert)</label>
</div>
</div>

Bruksanbefalinger

Mørk modus

Bruk for umiddelbare innstillinger

Switch passer best for innstillinger som trer i kraft umiddelbart, uten å måtte trykke 'Lagre'.

Godta vilkår

Ikke bruk i skjemaer med lagre-knapp

Hvis endringen ikke trer i kraft umiddelbart, bruk en checkbox i stedet. Brukere forventer at en switch har umiddelbar effekt.

Aktiver varsler

Koble til en synlig label

Bruk alltid en synlig label som forklarer hva switchen styrer. Ikke stol kun på aria-label.

Ikke bruk uten kontekst

En switch uten label gir ingen informasjon om hva den gjør.

Tilgjengelighet

Bruker role="switch" med aria-checked automatisk
Space toggler switchen
Støtter aria-label og aria-labelledby for skjermlesere
Deaktivert tilstand kommuniseres via aria-disabled
Koble alltid til en <label> for best mulig tilgjengelighet

Props

Prop	Type	Default	Beskrivelse
`checked`	`boolean`	—	Kontrollert av/på-tilstand
`defaultChecked`	`boolean`	`false`	Starttilstand (ukontrollert)
`onCheckedChange`	`(checked: boolean) => void`	—	Kalles når tilstanden endres
`disabled`	`boolean`	`false`	Deaktiver switchen
`required`	`boolean`	`false`	Marker som påkrevd i skjema
`name`	`string`	—	Navn for skjemainnsending
`value`	`string`	`"on"`	Verdi som sendes ved skjemainnsending