Checkbox - Saturation UI

Installation

pnpm dlx shadcn@latest add @saturation-ui/checkbox

Tailwind v4 — Source Scanning

The public shadcn registry installs component source into your project. If Tailwind v4 isn't scanning your components directory, add this to your CSS entry file:

@source "../components";

This ensures all utility classes in CVA variants and data attribute selectors are included in your build.

Usage

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

<Checkbox />

Examples

With Text

A checkbox with accompanying text and description.

Disabled

A disabled checkbox that cannot be interacted with.

With Label

Using the Label component for better accessibility.

Circle

A circular checkbox variant with three distinct states: empty (has a plus-shaped field with border), filled (circle filled with theme color and contains white checkmark), and disabled (circle like a dot-indicator content).

Select All

A checkbox list with a select all option that shows indeterminate state when some items are selected.

API Reference

Prop	Type	Default	Description
`checked`	`boolean \| 'indeterminate'`	—	The controlled checked state.
`defaultChecked`	`boolean`	—	The default checked state.
`onCheckedChange`	`(checked: boolean) => void`	—	Event handler for state changes.
`disabled`	`boolean`	`false`	Disables the checkbox.