Documentation Index
Fetch the complete documentation index at: https://mintlify.com/shadcn-ui/ui/llms.txt
Use this file to discover all available pages before exploring further.
Installation
npx shadcn@latest add checkbox
import { Checkbox } from "@/components/ui/checkbox"
Component Code
"use client"
import * as React from "react"
import { CheckIcon } from "lucide-react"
import { Checkbox as CheckboxPrimitive } from "radix-ui"
import { cn } from "@/lib/utils"
function Checkbox({
className,
...props
}: React.ComponentProps<typeof CheckboxPrimitive.Root>) {
return (
<CheckboxPrimitive.Root
data-slot="checkbox"
className={cn(
"peer size-4 shrink-0 rounded-[4px] border border-input shadow-xs transition-shadow outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:border-primary data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
className
)}
{...props}
>
<CheckboxPrimitive.Indicator
data-slot="checkbox-indicator"
className="grid place-content-center text-current"
>
<CheckIcon className="size-3.5" />
</CheckboxPrimitive.Indicator>
</CheckboxPrimitive.Root>
)
}
export { Checkbox }
Examples
Basic
With Label
Disabled
With Form
Use with a label for better accessibility.<div className="flex items-center space-x-2">
<Checkbox id="terms" />
<label
htmlFor="terms"
className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
>
Accept terms and conditions
</label>
</div>
A disabled checkbox.<div className="flex items-center space-x-2">
<Checkbox id="terms-disabled" disabled />
<label
htmlFor="terms-disabled"
className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
>
Disabled checkbox
</label>
</div>
Use with React Hook Form for form validation.import { useForm } from "react-hook-form"
function CheckboxForm() {
const { register, handleSubmit } = useForm()
const onSubmit = (data: any) => {
console.log(data)
}
return (
<form onSubmit={handleSubmit(onSubmit)}>
<div className="flex items-center space-x-2">
<Checkbox id="terms" {...register("terms")} />
<label htmlFor="terms">
I agree to the terms and conditions
</label>
</div>
<button type="submit">Submit</button>
</form>
)
}
- Unchecked - Default state
- Checked - When the checkbox is selected
- Indeterminate - For partial selection (e.g., select all)
- Disabled - When the checkbox cannot be interacted with
Accessibility
The Checkbox component:
- Uses native checkbox semantics
- Supports keyboard navigation
- Works with screen readers
- Implements proper ARIA attributes
- Can be controlled or uncontrolled
API Reference
Checkbox
| Prop | Type | Default |
|---|
checked | boolean | "indeterminate" | - |
defaultChecked | boolean | - |
onCheckedChange | (checked: boolean) => void | - |
disabled | boolean | false |
required | boolean | false |
name | string | - |
value | string | - |
className | string | - |