Build · New

Checkbox

For choosing any number of options, or turning one setting on before submitting. The box sits at the inline start, and the label toggles it too.

Preview

Mirrored is the same English content laid out right to left: it separates a mirroring bug from a translation one.

SoonInstalling from the registry opens at launch. Until then the command below is what it will be.

npx shadcn@latest add @ritla/checkbox

Dependencies it brings: @base-ui/react, @phosphor-icons/react

import { Checkbox } from "@/components/ui/checkbox";

<Checkbox name="updates" description="About once a month.">Send me product updates</Checkbox>

checked and indeterminate (only some children), error, disabled and readOnly. size="lg" is the large touch box with its halo.

Prop	Type	Default	Description
`children`	`ReactNode`		Figma's Label. A positive statement (“Send me updates”).
`description`	`ReactNode`		Figma's Show hint support: a helper line.
`checked / defaultChecked`	`boolean`		Figma's Value.
`onCheckedChange`	`(checked: boolean) => void`		When it toggles.
`indeterminate`	`boolean`	`false`	Value = Indeterminate (`aria-checked="mixed"`).
`error`	`ReactNode \| boolean`		State = Error: a message replaces the description.
`disabled / readOnly / required`	`boolean`		State = Disabled and Read-only.
`size`	`"sm" \| "lg"`	`"sm"`	Small (Web), an 18px box, or Large (Native), a 20px box with a halo in a 48px target.
`name / value / parent`	`…`		For forms and `CheckboxGroup` (`parent` for “select all”).

Keys are written for left-to-right. In right-to-left the arrow keys swap: the one pointing toward the reading direction moves forward.

Key	Action
`Space`	Toggles the box.

role="checkbox" with aria-checked (true, false, mixed), named by its text and linked to its description.
The whole row is a <label>: clicking the text toggles it, and the touch target is at least 48px.
An error sets aria-invalid and shows why.

Numerals: No numbers in the box.
Arabic typography: Text is label-16 Medium, the description label-12; Arabic lines are taller and the box stays on the first line.