Checkbox

Related components

Checkbox field

Checkbox provides a styled checkbox without a label.

Checkboxes should be accompanied by labels, so rather than using Checkbox directly in a UI, it’s normally best to the CheckboxField component, which combines a Checkbox with a Label and displays validation errors. Alternatively, use this Checkbox component to compose other field components with more specific requirements.

<Checkbox aria-label="Example" />

States

checked accepts true, false or "indeterminate". Use indeterminate for a parent checkbox when only some of its children are selected.

<div className="flex gap-3">
  <Checkbox aria-label="Unchecked" />
  <Checkbox aria-label="Checked" checked />
  <Checkbox aria-label="Indeterminate" checked="indeterminate" />
</div>

Sizes

<div className="flex gap-3 items-center">
  <Checkbox aria-label="Medium" size="md" checked />
  <Checkbox aria-label="Large" size="lg" checked />
</div>

Error

Use state="error" to flag a validation error. Pair it with an error message, as CheckboxField does.

<Checkbox aria-label="Error" state="error" />

Disabled

<div className="flex gap-3">
  <Checkbox aria-label="Disabled unchecked" disabled />
  <Checkbox aria-label="Disabled checked" disabled checked />
  <Checkbox aria-label="Disabled indeterminate" disabled checked="indeterminate" />
</div>

API Reference