Checkbox

GradeTested

UsageCopy Anchor Link

import { Checkbox, Label } from "@cadence-clinical/ui";

<Label>
  <Checkbox onCheckedChange={setInterpreterNeeded} />
  Interpreter needed
</Label>;

Checkbox is built on the Base UI Checkbox and accepts all of its props. It follows the shadcn Checkbox. Wrap it in a Label to name it.

Partly onCopy Anchor Link

Set indeterminate when a checkbox stands for a group in which some items are selected, such as the heading of a table.

What Cadence changesCopy Anchor Link

• The target is as large as a control. The box is 16px when compact and 20px when comfortable. The area that takes a click or a tap is 32px and 44px. shadcn's target is a fixed size.
• The focus ring and the boundary are never faded.

AccessibilityCopy Anchor Link

• Checked and unchecked differ by the tick as well as the fill.
• A checkbox is for a choice that is saved with the rest of a form. For a setting that applies at once, use a Switch.