Forms · Application UI
Checkbox
A styled checkbox input built on Base UI's headless Checkbox primitive, rendering a checkmark indicator with focus, disabled, and validation states.
Feature showcase
Installation
Features
1 example
Default.
API
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| checked | boolean | - | Controlled checked state of the checkbox. |
| defaultChecked | boolean | false | Initial checked state for uncontrolled usage. |
| onCheckedChange | (checked: boolean, eventDetails: CheckboxRootChangeEventDetails) => void | - | Callback fired when the checkbox is ticked or unticked. |
| disabled | boolean | false | Prevents user interaction and applies disabled styling. |
| readOnly | boolean | false | Prevents the user from ticking or unticking the checkbox. |
| required | boolean | false | Marks the checkbox as required for form submission. |
| indeterminate | boolean | false | Puts the checkbox in a mixed state, neither checked nor unchecked. |
| name | string | - | Field name submitted with the form. |
| value | string | - | Value submitted with the form when the checkbox is checked. |
| className | string | - | Additional CSS classes merged onto the root element. |
Source and related
| File | Path |
|---|---|
| Component | registry/ui/checkbox.tsx |
| Default example | content/examples/checkbox/default.tsx |