Checkbox

Enables users to select one or more items from a set. Commonly used in forms, filters, and preference settings.

Enable notifications

Code

Installation

npx shadcn@latest add checkbox

Basic Example

import { Checkbox } from "@/components/ui/checkbox"
import { Label } from "@/components/ui/label"

<div className="flex items-center space-x-2">
  <Checkbox id="terms" />
  <Label htmlFor="terms">Accept terms</Label>
</div>

Controlled

const [checked, setChecked] = useState(false)

<Checkbox 
  checked={checked}
  onCheckedChange={(checked) => setChecked(checked === true)}
/>

Reference

Props

Prop	Type	Default	Description
checked	boolean	—	Controlled checked state
defaultChecked	boolean	false	Default checked state (uncontrolled)
disabled	boolean	false	Disable the checkbox
onCheckedChange	function	—	Callback when checked state changes

States

Unchecked

Checked

Disabled

Disabled (checked)

Usage Guidelines

When to Use

Use checkboxes when users need to select one or more options from a list. They are ideal for settings, filters, multiple selections, and toggling features on or off.

Always pair checkboxes with clear labels. Use Label component for proper accessibility and to make the entire area clickable.

Best Practices

Always provide a visible label for each checkbox
Use groups for related checkboxes with a group label
Default checked state should reflect the current or most common setting
Use disabled state for unavailable options, not for hiding them
Provide clear feedback when checkboxes trigger actions

Accessibility

Checkboxes are fully keyboard accessible. Users can navigate with Tab and toggle with Space. Always associate labels with checkboxes using the htmlFor attribute for proper screen reader support.

Use the Label component to ensure proper accessibility relationships. The component handles focus states and click events automatically.

Rhetoric-ds