Checkbox

A control that allows the user to toggle between checked and unchecked states.

Default

Default (no label)

<Checkbox id="default-checkbox" />

Variants

Default

Accept terms

<div className="flex items-center space-x-2">
  <Checkbox id="basic-checkbox" checked={false} onCheckedChange={() => {}} />
  <label htmlFor="basic-checkbox" className="text-sand-12 text-sm">
    Accept terms
  </label>
</div>

Disabled

Disabled option

<div className="flex items-center space-x-2">
  <Checkbox id="disabled-checkbox" disabled={true} />
  <label htmlFor="disabled-checkbox" className="text-sand-11 text-sm">
    Disabled option
  </label>
</div>

Indeterminate

Click to toggle state

<div className="flex items-center space-x-2">
  <Checkbox id="indeterminate-checkbox" checked="indeterminate" onCheckedChange={() => {}} />
  <label htmlFor="indeterminate-checkbox" className="text-sand-12 text-sm">
    Click to toggle state
  </label>
</div>

Danger

Danger checkbox

<div className="flex items-center space-x-2">
  <DangerCheckbox id="danger-checkbox" />
  <label htmlFor="danger-checkbox" className="text-sand-12 text-sm">
    Danger checkbox
  </label>
</div>