Checkbox
A styled checkbox input built on Base UI's headless Checkbox primitive, rendering a checkmark indicator with focus, disabled, and validation states.
Default
Terms accepted: No
Checkbox Group
User permissions
Active: read, write
Disabled
Disabled states
Indeterminate
Selected: Apples
Readonly
Read-only states
Read-only checkboxes display state but cannot be toggled by the user.
With Label
Using Label component
Installation
npx shadcn@latest add @byronwade/checkboxProps
| 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. |