Checkbox

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

Installation

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>

Selection

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

<Checkbox defaultSelected />

const [isSelected, setIsSelected] = useState(false);

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

Playground

Use the controls below to experiment with different checkbox props and see the live preview and code update.

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

Examples

API Reference

Checkbox