Component · 05

Checkbox

Built on Base UI for correct keyboard, mixed-state and form behaviour, drawn in the same stamped style. It presses into the page when you click it.

With a label

Click the text or the box. Space toggles it from the keyboard.

Email me product updatesRemember me

tsx

<Checkbox label="Email me product updates" />
<Checkbox label="Remember me" defaultChecked />

Select allDisabledDisabled, checked

tsx

<Checkbox label="Select all" indeterminate />
<Checkbox label="Disabled" disabled />
<Checkbox label="Disabled, checked" disabled defaultChecked />

No label prop means you must name it yourself.

tsx

<Checkbox aria-label="Select row 3" />

Prop	Type	Default	Description
label	ReactNode	-	Wraps the box in a <label> so the text toggles it and names it. Without it, pass aria-label.
checked / defaultChecked	boolean	false	Controlled / uncontrolled state.
onCheckedChange	(checked, details) => void	-	Fires when the user toggles it.
indeterminate	boolean	false	Mixed state, announced as aria-checked=mixed.
disabled / readOnly / required	boolean	false	As in a native checkbox.
name / value	string	-	Submitted with the surrounding form when checked.
className	string	-	With a label: applied to the wrapper. Without: to the box.