Checkbox

Kildekode på GitHub · Les som Markdown

Checkbox er en avkryssingsboks for binære valg. Til forskjell fra Switch er den ment for skjemaer der endringen ikke trer i kraft umiddelbart, men først ved innsending. Bygget på Radix UI Checkbox.

Importering

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

Grunnleggende bruk

<div style={{ display: "flex", alignItems: "center", gap: "0.5rem" }}>
<Checkbox id="terms" />
<Label htmlFor="terms">Jeg godtar vilkårene</Label>
</div>

Flere checkboxer

<div style={{ display: "grid", gap: "0.75rem" }}>
<div style={{ display: "flex", alignItems: "center", gap: "0.5rem" }}>
  <Checkbox id="email-notif" defaultChecked />
  <Label htmlFor="email-notif">E-postvarsler</Label>
</div>
<div style={{ display: "flex", alignItems: "center", gap: "0.5rem" }}>
  <Checkbox id="sms-notif" />
  <Label htmlFor="sms-notif">SMS-varsler</Label>
</div>
<div style={{ display: "flex", alignItems: "center", gap: "0.5rem" }}>
  <Checkbox id="push-notif" defaultChecked />
  <Label htmlFor="push-notif">Push-varsler</Label>
</div>
</div>

Med FormField

<FormField>
<div style={{ display: "flex", alignItems: "center", gap: "0.5rem" }}>
  <Checkbox id="newsletter" />
  <Label htmlFor="newsletter">Meld meg på nyhetsbrevet</Label>
</div>
<FormDescription>Du kan melde deg av når som helst.</FormDescription>
</FormField>

Deaktivert

<div style={{ display: "grid", gap: "0.75rem" }}>
<div style={{ display: "flex", alignItems: "center", gap: "0.5rem" }}>
  <Checkbox id="disabled-unchecked" disabled />
  <Label htmlFor="disabled-unchecked" style={{ opacity: 0.5 }}>Deaktivert (av)</Label>
</div>
<div style={{ display: "flex", alignItems: "center", gap: "0.5rem" }}>
  <Checkbox id="disabled-checked" disabled defaultChecked />
  <Label htmlFor="disabled-checked" style={{ opacity: 0.5 }}>Deaktivert (på)</Label>
</div>
</div>

Bruksanbefalinger

Godta vilkår

Bruk i skjemaer med lagre-knapp

Checkbox passer for valg som sendes inn med et skjema, som samtykke, preferanser eller flervalg.

Mørk modus

Ikke bruk for umiddelbare endringer

For innstillinger som trer i kraft med en gang (mørk modus, varsler av/på), bruk Switch i stedet.

React

Vue

Bruk for flervalg

Når brukeren kan velge flere alternativer fra en liste, bruk checkboxer.

Liten

Stor

Ikke bruk for enkeltvalg mellom alternativer

Når brukeren skal velge ett alternativ fra en liste, bruk RadioGroup eller Select.

Tilgjengelighet

Space toggler checkboxen
Støtter checked, unchecked og indeterminate tilstander
Kobles til label via id/htmlFor
Deaktivert tilstand kommuniseres via aria-disabled

Props

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