Forms

Checkbox

An independent on/off choice, on its own or in a set.

Importimport { Checkbox } from "@/components/ui/Checkbox";
Sourcesrc/components/ui/Checkbox

Controlled only — pass checked and handle onCheckedChange. Use a Checkbox when the value is collected and submitted; use a Switch when it applies the moment it is flipped.

States

With a label

Pair by id and htmlFor so clicking the text toggles the box. Where there is a visible label, drop the aria-label — two names is worse than one.

Props

Checkbox

PropTypeDefaultDescription
checkedbooleanRequired. The controlled checked state.
onCheckedChange(checked: boolean) => voidCalled with the next state.