The Checkbox component allows users to select or deselect options with support for indeterminate states and parent-child relationships.
Installation
npx shadcn@latest add @eo-n/checkbox
Install dependencies
Install the required packages:npm install @base-ui/react lucide-react
Copy component code
Copy and paste the checkbox component code into your project at components/ui/checkbox.tsx.
Update imports
Update the import paths to match your project setup.
import { Checkbox } from "@/components/ui/checkbox";
export default function Example() {
return <Checkbox />;
}
Examples
Default
With Label
import { Label } from "@/components/ui/label";
<div className="flex items-center space-x-2">
<Checkbox id="terms" />
<Label htmlFor="terms">Accept terms and conditions</Label>
</div>
Disabled
<Checkbox disabled />
<Checkbox disabled checked />
Controlled
import { useState } from "react";
function ControlledCheckbox() {
const [checked, setChecked] = useState(false);
return (
<div className="flex items-center space-x-2">
<Checkbox
checked={checked}
onCheckedChange={setChecked}
id="controlled"
/>
<Label htmlFor="controlled">
{checked ? "Checked" : "Unchecked"}
</Label>
</div>
);
}
Indeterminate State
<Checkbox checked="indeterminate" />
Parent Checkbox
Use the parent prop for checkboxes that control child checkboxes in a group.
API Reference
Checkbox
Extends all props from @base-ui/react Checkbox.Root component.
Whether this checkbox is a parent checkbox controlling child checkboxes.
checked
boolean | 'indeterminate'
The controlled checked state of the checkbox.
The default checked state when uncontrolled.
Callback fired when the checked state changes.(checked: boolean | "indeterminate") => void
Whether the checkbox is disabled.
Whether the checkbox is required in a form.
The name attribute for form submission.
The value attribute for form submission.
Additional CSS classes to apply.
TypeScript
import { Checkbox as CheckboxPrimitive } from "@base-ui/react";
type CheckboxProps = React.ComponentProps<typeof CheckboxPrimitive.Root> & {
parent?: boolean;
};
Accessibility
- Fully keyboard accessible (Space to toggle)
- Proper ARIA attributes
- Focus visible indicator
- Works with form labels
- Supports indeterminate state
Related
See Checkbox Group for managing multiple related checkboxes. 