Checkbox

Controlled checkbox built on Radix. Supports indeterminate, inline label and description.

Examples

Accept terms

Required to continue.

<Checkbox
  label="Accept terms"
  description="Required to continue."
  checked={checked}
  onCheckedChange={(v) => setChecked(Boolean(v))}
/>

Email notifications

SMS notifications

Push notifications

<Checkbox label="Email notifications" defaultChecked />
<Checkbox label="SMS notifications" />
<Checkbox label="Push notifications" defaultChecked />

Some children selected

<Checkbox label="Select all" checked="indeterminate" />

Off & disabled

On & disabled

<Checkbox label="Off & disabled" disabled />
<Checkbox label="On & disabled" checked disabled />

Props of the Checkbox component.

Prop	Type	Default	Description
`checked`	`boolean \| 'indeterminate'`	—	—
`defaultChecked`	`boolean`	—	—
`onCheckedChange`	`(checked: boolean \| 'indeterminate') => void`	—	—
`label`	`string`	—	Renders the label inline next to the checkbox.
`description`	`string`	—	Helper text below the label.
`disabled`	`boolean`	`false`	—