Boolean selection controls for choosing one or multiple options from a set. Supports checked, unchecked, and indeterminate states with convex physics for tactile elevation on interaction. Use checkboxes when users can select zero, one, or multiple items independently.
Physics: Checkboxes use convex shadows to create depth. On hover, the checkbox elevates slightly (-1px) with expanded shadow. The check icon scales in with a spring animation on selection.
Simple checkbox with a label for basic boolean selection.
Manage checkbox state with React state for controlled behavior.
Start with the checkbox already selected using uncontrolled mode.
Use indeterminate to show a partially-selected parent when some but not all children are selected.
Add additional context or instructions below the checkbox.
Mark the checkbox as required with a visual indicator.
Display validation errors with status and helper text.
Show a pre-checked checkbox for confirmed settings.
Disable interaction for readonly or unavailable options.
Use the variant prop to apply visual emphasis for error states.
Compare all three sizes for different density requirements.
Use CheckboxGroup to manage multiple selections with an options array.
Arrange checkboxes horizontally for compact layouts.
Disable specific options within a group while keeping others interactive.
Show validation errors for the entire group.
Common pattern for terms acceptance in forms with validation.
| Prop | Type | Default | Description |
|---|---|---|---|
checked | boolean | - | Controlled checked state |
defaultChecked | boolean | false | Initial checked state (uncontrolled) |
indeterminate | boolean | false | Show indeterminate (minus) state |
onChange | (e: ChangeEvent) => void | - | Native change event handler |
onCheckedChange | (checked: boolean) => void | - | Convenience handler with boolean value |
label | ReactNode | - | Label content |
helperText | string | - | Helper text below checkbox |
variant | 'default' | 'error' | 'default' | Visual variant (error styling) |
size | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'md' | Checkbox size |
required | boolean | false | Mark as required field |
disabled | boolean | false | Disable the checkbox |
aria-checked (including "mixed" for indeterminate)htmlForaria-invalid and aria-describedby for helper text