Shadcn Checkbox

A checkbox is a yes or no. Click the box or its label and the check appears. Use it for terms, filters, and picking rows — anything that waits for submit. If it should take effect now, that is a Switch.

Usage

import { Checkbox } from "@/components/ui/checkbox"
import { Field, FieldLabel } from "@/components/ui/field"

<Field orientation="horizontal">
  <Checkbox id="terms" name="terms" />
  <FieldLabel htmlFor="terms">Accept terms and conditions</FieldLabel>
</Field>

defaultChecked for an uncontrolled box. checked plus onCheckedChange when you own the state.

Composition

The indicator is inside the root. Pair it with Field for the label.

Invalid State

aria-invalid on the checkbox. data-invalid on the Field. Both, or the label stays the wrong color.

Basic

Pair it with Field and FieldLabel so the words are the click target.

Description

FieldContent plus FieldDescription for the helper line under the label.

Disabled

disabled on the checkbox, data-disabled on the Field so the label greys out with it.

Group

A FieldSet of horizontal Fields. Each row is its own checkbox.

Table

A checkbox in the header selects the page. One per row selects that record.

RTL

Wrap with DirectionProvider and dir="rtl". Labels stay Arabic.

API

Keyboard

Notes

checked="indeterminate" is paint, not a posted value. The form still sends checked or not.

With other components

Questions

Related