Checkbox
A checkbox with checked, unchecked and indeterminate states, on Base UI. The box fills with the accent green when checked; the data-state attributes carry the styling so the visual always matches the real control state.
States
<Checkbox aria-label="Unchecked" /><Checkbox aria-label="Checked" defaultChecked /><Checkbox aria-label="Indeterminate" indeterminate /><Checkbox aria-label="Disabled" disabled />With a label
<label className="flex items-center gap-2"> <Checkbox /> Email me product updates</label>Props
| Prop | Type | Default | Notes |
|---|---|---|---|
checked / defaultChecked | boolean | — | Controlled or initial state. |
onCheckedChange | (checked) => void | — | Called on toggle. |
indeterminate | boolean | false | Renders the mixed state. |
disabled | boolean | — | Blocks interaction. |
name / value / required | — | — | Standard form wiring. |