Checkbox

Turns an independent option on or off; the choice is saved with the form.

Code

import { Checkbox } from "@/components/ui/checkbox"
import { Label } from "@/components/ui/label"

<div className="flex items-center gap-2">
  <Checkbox id="summary" defaultChecked />
  <Label htmlFor="summary">Send me a weekly summary</Label>
</div>

Examples

Example source

var P = window.PUI, h = React.createElement;
  ReactDOM.createRoot(document.getElementById('preview')).render(h('div', { className: 'pui-stage', style: { padding: 0 } },
    h('div', { className: 'pui-inline' }, h(P.Checkbox, { id: 'a', defaultChecked: true }), h(P.Label, { htmlFor: 'a' }, 'Send me a weekly summary')),
    h('div', { className: 'pui-inline' }, h(P.Checkbox, { id: 'b' }), h(P.Label, { htmlFor: 'b' }, 'Send me partner offers')),
    h('div', { className: 'pui-inline' }, h(P.Checkbox, { id: 'c', disabled: true }), h(P.Label, { htmlFor: 'c' }, 'Automatic export (Pro plan)'))));

Usage

What you provide

id + Label htmlFor; checked / onCheckedChange (controlled) or defaultChecked.
For an immediate effect (no Save button), use Switch.
Checkbox lists: grid gap-3; label to the right of the control with gap-2.

Accessibility

For independent choices; when only one option of a group can be chosen, use radio buttons.
The label is associated and clickable, so it is part of the touch target. Hover, checked, unchecked, mixed and disabled states are distinct.
Tab moves to each checkbox and Space toggles it. Disabled checkboxes do nothing.
Screen readers hear the label, the role and the state (checked, unchecked or mixed). For a mixed parent, set checked="indeterminate" and document the toggle order.
Group related checkboxes in a <fieldset> with a <legend> that names the group.

Adapted from Magoo 1.6.0 by Marcelo Sales: Checkbox (checkbox). Magoo is educational guidance; test the behavior in your implementation.

API

Install with:

npx @aline-aroucha/pui add checkbox

<Checkbox />
<Label />

Checkbox

Name	Type	Default
`checked`	`boolean \| "indeterminate"`	—
Controlled state; `"indeterminate"` shows the mixed state.
`defaultChecked`	`boolean \| "indeterminate"`	`false`
Initial state when uncontrolled.
`onCheckedChange`	`(checked: boolean \| "indeterminate") => void`	—
Runs when the state changes.
`disabled`	`boolean`	`false`
Blocks changes.
`required`	`boolean`	`false`
Must be checked to submit.
`name`	`string`	—
Form field name.
`value`	`string`	`"on"`
Value sent with the form.