Checkbox

Checkboxes allow users to select multiple items from a list of individual items, or to mark one individual item as selected.

<Checkbox>
  <CheckboxControl />
  <Label>Accept terms</Label>
</Checkbox>

Installation

npm

pnpm

yarn

bun

npx shadcn@latest add @dotui/checkbox

Usage

Use Checkbox to allow users to select multiple items from a list of individual items, or to mark one individual item as selected.

import { Checkbox, CheckboxControl } from '@/components/ui/checkbox'
import { Label } from '@/components/ui/field'

<Checkbox>
  <CheckboxControl />
  <Label>I accept the terms and conditions</Label>
</Checkbox>

Anatomy

Pass a plain string and Checkbox wraps it in a CheckboxControl and Label for you. Pass elements instead and you compose the tree yourself — CheckboxControl renders the CheckboxIndicator (the box) and can hold FieldContent with a Label and Description.

import {
  Checkbox,
  CheckboxControl,
  CheckboxIndicator,
} from '@/components/ui/checkbox'
import { Description, FieldContent, Label } from '@/components/ui/field'
;<Checkbox>
  <CheckboxControl>
    <CheckboxIndicator />
    <FieldContent>
      <Label>I agree to the terms</Label>
      <Description>Please read them before proceeding</Description>
    </FieldContent>
  </CheckboxControl>
</Checkbox>

Selection

The checkbox is selected or not. Use defaultSelected for uncontrolled state, or isSelected with onChange to control it.

const [isSelected, setIsSelected] = React.useState(false)

<Checkbox isSelected={isSelected} onChange={setIsSelected}>
  Accept terms
</Checkbox>

Examples

Basic

I accept the terms and conditions

With Indicator

I agree to the terms and conditionsPlease read the terms before proceeding

Terms Acceptance

Before you continue

Terms of ServiceI have read and agree to the terms.

Privacy PolicyI consent to how my data is handled.

Marketing emailsSend me product updates and offers.

Preferences List

Product updatesGet notified about new features.

Security alertsImportant account activity.

Weekly newsletterA digest of tips and news.

API Reference

Checkbox

A checkbox allows a user to select multiple items from a list of individual items, or to mark one individual item as selected.

Prop	Type	Default
	`ReactNode \| function`	`—`
	`boolean`	`—`
	`RefObject<HTMLInputElement \| null>`	`—`
	`boolean`	`—`
	`boolean`	`—`
	`boolean`	`—`
	`boolean`	`—`

	`function`	`—`

CheckboxControl

The control element of a checkbox.

Prop	Type	Default
	`ReactNode \| function`	`—`

CheckboxIndicator

The visual indicator of a checkbox (the box with check/minus icon).

Supports all span attributes.

Prop	Type	Default

Last updated on 7/7/2026