Components
/
Checkbox
Checkbox
A control that allows the user to toggle between checked and not checked.
Installation
npx shadcn@latest add https://ui.saturation.io/r/checkbox.jsonUsage
1600 dark:text-blue-400">class="text-purple-600 dark:text-purple-400">import { Checkbox } 600 dark:text-blue-400">class="text-purple-600 dark:text-purple-400">from 600 dark:text-blue-400">class="text-purple-600 dark:text-purple-400">class="text-orange-600 dark:text-orange-400">"@/components/ui/checkbox"2 3600 dark:text-blue-400">class="text-purple-600 dark:text-purple-400">export 600 dark:text-blue-400">class="text-purple-600 dark:text-purple-400">default 600 dark:text-blue-400">class="text-purple-600 dark:text-purple-400">function Example() {4 600 dark:text-blue-400">class="text-purple-600 dark:text-purple-400">return 600 dark:text-blue-400">class="text-cyan-600 dark:text-cyan-400"> /> 5}Examples
With Text
A checkbox with accompanying text and description.
You agree to our Terms of Service and Privacy Policy.
Disabled
A disabled checkbox that cannot be interacted with.
With Label
Using the Label component for better accessibility.
Circle
A circular checkbox variant with three distinct states: empty (styled like a deactivated field with border), filled (entire circle filled with theme color and centered white checkmark), and deactive (styled like a deactivated button).
Select All
A checkbox list with a select all option that shows indeterminate state when some items are selected.
API Reference
Checkbox
Built on top of Radix UI Checkbox. Accepts all Radix Checkbox props.
| Prop | Type | Default | Description |
|---|---|---|---|
| checked | boolean | - | The controlled checked state of the checkbox |
| defaultChecked | boolean | - | The default checked state when uncontrolled |
| onCheckedChange | function | - | Event handler called when the checked state changes |
| disabled | boolean | false | When true, prevents the user from interacting with the checkbox |
| required | boolean | false | When true, indicates that the user must check the checkbox |
| name | string | - | The name of the checkbox for form submission |
| value | string | on | The value given as data when submitted with a name |
| shape | "default" | "circle" | "default" | The shape of the checkbox (square with rounded corners or circular) |