Checkbox
Checkbox
A Radix Checkbox.Root — controlled or uncontrolled, three-state capable (checked, unchecked, "indeterminate").
import { Checkbox } from "@pompeitech/vesuvius-ui";With a label
Checked / disabled / indeterminate
"indeterminate" is a real third state, not just a visual — it's what a "select all" checkbox shows when only some of its children are checked:
Controlled, with a "select all"
The classic pattern this state exists for — a parent checkbox reflecting the union of several children:
API
Checkbox
| Prop | Type | Default | Description |
|---|---|---|---|
checked | boolean | "indeterminate" | Controlled checked state. | |
defaultChecked | boolean | "indeterminate" | false | Initial state, uncontrolled. |
onCheckedChange | (checked: boolean | "indeterminate") => void | Fires with the new state on every click/keyboard toggle. | |
disabled | boolean | false | |
required | boolean | false | Marks the field required for native form validation. |
name / value | string | For plain (non-JS) form submission — renders a hidden native input alongside the styled button. |
Plus every other native <button> prop (Radix's Checkbox.Root renders a <button role="checkbox">, not a native <input type="checkbox">).
Accessibility
Fully keyboard operable out of the box: Tab to focus, Space to toggle. Always pair it with a <Label htmlFor> (as in every example above) or an explicit aria-label on the checkbox itself — the rendered element is a <button>, not an <input>, so it has no implicit accessible name of its own the way a native checkbox+label association gets for free.