Checkbox

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

export default function CheckboxDemo() {
  return <Checkbox aria-label="Accept terms" />
}

Checkbox wraps the checkbox primitive and renders a check icon inside its indicator when checked. It is a single self-contained part: there are no child components to compose.

Use a checkbox for independent options that people can select in any combination, such as accepting terms or opting in to email. For a mutually exclusive choice, use a radio group; for a setting that takes effect immediately, consider a switch.

Installation

CLI

$ pnpm dlx shadcn@latest add @esuiss/checkbox

Works in any project with a components.json. See Installation for the one-line registry setup. Or use the suiss/ui CLI:

$ pnpm dlx @esuiss/ui@latest add checkbox

Manual

1. Install the dependencies and add the cn helper:

$ pnpm add @base-ui/react @phosphor-icons/react

2. Copy the source into components/ui/checkbox.tsx:

3. Update the import paths to match your project.

Usage

import { Checkbox } 

<Checkbox

Leave the checkbox uncontrolled with defaultChecked, or control it with checked and onCheckedChange. Pair it with a visible Label: wrapping the checkbox in Label makes the whole label text clickable. To add supporting text, give the checkbox an id and an aria-describedby that points to the description element.

Examples

Checked

A checkbox that starts checked using defaultChecked.

With label

A checkbox wrapped in a Label, so clicking the text toggles it.

With description

A checkbox labelled with htmlFor and described by supporting text through aria-describedby.

Disabled

Disabled checkboxes, both unchecked and checked, that ignore clicks and are skipped by Tab.

Invalid

A checkbox marked with aria-invalid to show a validation error.

API Reference

Accessibility

• Renders with the checkbox role and exposes its checked state to assistive technology.
• Toggles on click and with Space when focused.
• Needs an accessible name: wrap it in a Label, associate a Label through htmlFor and id, or set aria-label.
• When disabled, it sets aria-disabled, ignores clicks, and is removed from the Tab order.
• Set aria-invalid to communicate a validation error; the border turns to the destructive color.

Notes

• Styling hooks: data-slot="checkbox" on the root and data-slot="checkbox-indicator" on the indicator.
• State attributes set by the primitive drive the checked and disabled styles.
• Uses the primary, primary-foreground, background and border colors, and opacity-50 when disabled.
• The hit area extends beyond the visible box through an after pseudo-element, making the small control easier to tap.

Checkbox is a Pressable with the checkbox role that shows a check icon when checked and a minus icon when indeterminate. It has an enlarged hit area around the box so it is easy to tap.

Use it for options that can be combined, such as terms acceptance or multi-select lists. For a single on/off setting that applies right away, use Switch.

Installation

$ pnpm dlx shadcn@latest add @esuiss-rn/checkbox

$ pnpm dlx @esuiss/ui@latest add checkbox

$ pnpm dlx @esuiss/ui@latest add checkbox --platform swift