Docs › Components › Checkbox

Shadcn Checkbox

The shadcn/ui Checkbox is a copy-paste control for boolean choices, styled with Tailwind CSS v4. Built on accessible primitives, it supports checked, unchecked, and indeterminate states with full keyboard support. Checkboxes appear in forms, filters, and row selection across ShadcnStore blocks.

Key features

• Checked, unchecked, and indeterminate states.
• Controlled or uncontrolled via checked / defaultChecked.
• Full keyboard support (Space toggles) and focus styles.
• Pairs with Label and the Form component.

Installation

npx shadcn@latest add checkbox

Usage

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

export function Example() {
  return (
    <div className="flex items-center gap-2">
      <Checkbox id="terms" />
      <Label htmlFor="terms">Accept terms and conditions</Label>
    </div>
  )
}

Connect the Label with htmlFor and the checkbox id so clicking the text toggles the box.

Controlled state

const [checked, setChecked] = useState(false)

<Checkbox checked={checked} onCheckedChange={setChecked} />

Disabled and indeterminate

<Checkbox disabled />
<Checkbox checked="indeterminate" />

Props

Prop	Type	Default	Description
checked	boolean | "indeterminate"	—	Controlled checked state.
defaultChecked	boolean	false	Uncontrolled initial state.
onCheckedChange	(checked) => void	—	Fires when the state changes.
disabled	boolean	false	Disable interaction.

Accessibility

• Always associate a Label with the checkbox so it has an accessible name and a larger hit target.
• For a group of related checkboxes, wrap them in a fieldset with a legend.
• Reflect indeterminate state visually and with the indeterminate value, for example a "select all" header.

When to use the Checkbox

Use a Checkbox to select one or more items or to agree to something, usually submitted with a form: accept terms, choose filters, or select table rows. For a setting that toggles on or off and takes effect immediately, use a Switch. For one choice among several, use a Radio Group.

Used in these blocks

• Login forms: "remember me" option.
• Checkout forms: terms and billing options.
• Category filters: filter selection.

Related components

A Checkbox pairs with a Label, lives inside a Form, and selects rows in a Data Table. For immediate toggles use a Switch.

FAQ

What is the shadcn checkbox used for?

The Checkbox lets users toggle a boolean choice, such as accepting terms, selecting rows, or enabling options in a form.

How do I control the checked state?

Pass checked and onCheckedChange to the Checkbox, or use defaultChecked for uncontrolled state.

What is the difference between Checkbox and Switch?

Checkbox is for selecting items or agreeing, often submitted with a form. Switch is for toggling a setting on or off that takes effect immediately.

How do I show an indeterminate checkbox?

Set checked to the string "indeterminate", which is useful for a "select all" control when only some items are selected.