Checkbox
An accessible checkbox component built with Radix UI primitives. Supports checked, unchecked, and indeterminate states with full keyboard navigation.
Installation
Install the following dependencies
Run these commands in your terminal to install the required packages
Create or update your Checkbox component
Copy this code to create your Checkbox component
Test Your Component
- 1. Add the component to a test page
- 2. Check all props and variants work as expected
- 3. Verify responsive behavior
- 4. Test with different content/data
- 5. Ensure accessibility features work correctly
Disabled States
Checkboxes can be disabled in unchecked, checked, and indeterminate states.
With Label
Checkboxes can be combined with labels for better accessibility and user experience.
API Reference
The Checkbox component is built on top of the Radix UI Checkbox primitive and extends its functionality with additional styling options and features. The table below shows the available props.
Checkbox.Root
See Radix UI docs for base props.
| Prop | Type | Default | Description |
|---|---|---|---|
className | "string" | "undefined" | Additional CSS classes to apply to the checkbox. |
checked | "boolean" | "undefined" | The controlled checked state of the checkbox. |
defaultChecked | "boolean" | "false" | The default checked state when initially rendered. |
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 before the form can be submitted. |
onCheckedChange | "function" | "undefined" | Event handler called when the checked state changes. |