Checkbox

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

On this page

Installation

npm

pnpm

yarn

bun

npx shadcn@latest add @dotui/checkbox

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>

Use defaultSelected for uncontrolled checkboxes, or isSelected and onChange for controlled checkboxes.

<Checkbox defaultSelected />

const [isSelected, setIsSelected] = useState(false)

;<Checkbox isSelected={isSelected} onChange={setIsSelected} />

I accept the terms and conditions

Accept terms and conditionsBy clicking this checkbox, you agree to the terms and conditions.

Accept terms and conditions

Select all

I accept the terms and conditions

I accept the terms and conditions

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

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`	`—`

The control element of a checkbox.

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

Supports all span attributes.

Prop	Type	Default

Last updated on 6/16/2026