FORMS

Checkbox

Memphis-bordered checkbox built on Radix Checkbox. Supports tri-state checked / unchecked / indeterminate, plus all native form semantics (name, value, required).

Import

import { Checkbox, Label } from 'damo-ui'

With Label

1<div className="flex items-center gap-2">
2  <Checkbox id="terms" />
3  <Label htmlFor="terms">Accept the terms</Label>
4</div>

States

1<Checkbox defaultChecked />
2<Checkbox checked={false} />
3<Checkbox checked="indeterminate" />
4<Checkbox disabled />
5<Checkbox defaultChecked disabled />

Props

Checkbox props
PropTypeDefaultDescription
checkedboolean | 'indeterminate'—Controlled checked state. Pair with onCheckedChange.
defaultCheckedboolean—Uncontrolled initial checked state.
onCheckedChange(checked: boolean | "indeterminate") => void—Fires whenever the checked state changes.
disabledboolean—Disables the input.
requiredboolean—Marks the input as required for native form submission.
namestring—Name attribute for native form submission.

Accessibility

  • Radix Checkbox renders role="checkbox" with aria-checked reflecting the checked state, including "mixed" for the indeterminate case.
  • Always pair with a Label wired via htmlFor, or supply aria-label when there is no visible text.
  • Native keyboard support inherited: Space toggles the checked state.
← LabelRadioGroup →