Checkbox

Accessible checkbox with checked, unchecked and indeterminate states. Built on Base UI Checkbox with a Lucide Check indicator.

Preview

Accept terms and conditions

Installation

bash

npx shadcn@latest add @layout/checkbox

Usage

tsx

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

Examples

Pre-checked list

Subscribe to newsletter

Receive product updates

Allow marketing emails

Indeterminate state

Select all items

Disabled

Unavailable option

Read-only selection

Guidelines for AI agents

Pair with a Label via htmlFor/id. Use inside a form or with Field for validation. The indeterminate prop shows a minus icon for parent checkboxes that represent a partial selection.

Never

Neveruse as a toggle for immediate actions; use Switch instead
Neveromit an associated label — pass aria-label if no visible label is present
Neveroverride the checked background colour; it derives from --layout-primary
Neverrely on colour alone to convey state

Tokens consumed

--layout-primary--layout-primary-fg--layout-input--layout-ring--layout-radius--layout-duration-base