Checkbox

InstallationCopy Anchor Link

npx shadcn@latest add @quireui/checkbox

UsageCopy Anchor Link

<CheckboxLabel description="One email per paid invoice.">
  Email me when an invoice is paid
</CheckboxLabel>

CheckboxLabel puts the box, its label and an optional description in one row, and the whole row toggles it, so the small box is never the only thing to aim for. It takes every Checkbox prop. Use Checkbox on its own where the label lives elsewhere, like a table header, and give it an aria-label.

Select allCopy Anchor Link

Wrap the options in CheckboxGroup with allValues, and mark one CheckboxLabel as parent. It shows a dash while only some are checked. Clicking it selects everything, and when everything is already selected it clears them all. Disabled options keep their state either way.

<CheckboxGroup value={value} onValueChange={setValue} allValues={["email", "slack", "sms"]}>
  <CheckboxLabel parent>All channels</CheckboxLabel>
  <CheckboxLabel value="email">Email</CheckboxLabel>
  <CheckboxLabel value="slack">Slack</CheckboxLabel>
  <CheckboxLabel value="sms">Text message</CheckboxLabel>
</CheckboxGroup>

StatesCopy Anchor Link

Unchecked, checked, indeterminate (indeterminate), and disabled either way. The box is half a control's height, so it follows the density: 14px compact, 16px default, 20px comfortable, and larger on touch screens.

In a formCopy Anchor Link

Inside a Field with a name, the box is submitted with the form, and required blocks the form until it is checked, with the error under the row and nothing below it moving.

AccessibilityCopy Anchor Link

Each box is read with its label, as checked or not. A parent is read as mixed while only some of its group are checked, and a description on CheckboxLabel is read after the label.

MotionCopy Anchor Link

The check pops in with the same quick scale as a menu opening, and only the fill colour fades. Toggling from the keyboard is instant, and reduced motion keeps only the fade.

API referenceCopy Anchor Link