Checkbox
@/components/ui/Checkbox
Et valg som er del av et skjema og bekreftes/lagres samlet — «button role="checkbox"», aldri et rått input-element med type="checkbox".
Når brukes den
Bruk for et valg som er DEL av et skjema og lagres samlet, f.eks. «godtar vilkårene» eller hvilke tiltak som skal med i en finansiering.
Bruk Switch i stedet når verdien er binær og trer i kraft med én gang, uten en egen lagre-handling.
size="sm" for tette rader — radavkrysning i en liste/tabell uten synlig etikett ved siden av (sett ariaLabel da).
Ikke bruk et rått input-element med type="checkbox" noe sted i appen (regel/ingen-raa-skjemaelementer).
Eksempler
Med etikett og forklaring
Standardformen i et skjema — etikett over, forklaring under.
<Checkbox
label="Send kopi til styreleder"
description="Samme innhold som e-posten til beboerne."
checked={sendKopi}
onChange={setSendKopi}
/>Uten forklaring
Kun etikett, når teksten alene er selvforklarende.
Deaktivert
Grået ut og ikke-klikkbar — bruk når rettigheten mangler eller valget ikke er relevant ennå.
size="sm" i en tett rad
For radavkrysning i en liste/tabell der en synlig 20px boks tar for mye plass. Sett ariaLabel siden teksten ved siden av ikke er selve etiketten.
Ekstra isolasjon i loft
Indeterminate («velg alle»)
Vises som en strek når NOEN, men ikke alle, underliggende rader er krysset av. aria-checked blir "mixed".
<Checkbox label="Velg alle" checked={alle} indeterminate={noen && !alle} onChange={...} />Props
Sveip tabellen for å se hele innholdet