Checkbox

Checkbox is the box-and-check control for toggling a single option on or off, or for selecting several items from a list. It is built on Radix Checkbox, so it is keyboard accessible and controllable, and it pairs with a Label for its text. Use it whenever a user can pick zero, one, or many options independently.

Live demo

The interactive story below runs from the deployed Storybook.

Usage

Source: checkbox.tsx

import { Checkbox, Label } from "@beacon/design-system";

// Pair the checkbox with a Label via matching id / htmlFor.
<div className="flex items-center space-x-2">
  <Checkbox id="terms" />
  <Label htmlFor="terms">Accept terms and conditions</Label>
</div>

// Checked by default, and disabled variants.
<Checkbox id="checked" defaultChecked />
<Checkbox id="disabled" disabled />

Props

Checkbox forwards the props of the Radix Checkbox.Root and forwards its ref. The most commonly set props:

Prop	Type	Default	Description
checked	boolean | "indeterminate"	—	Controlled checked state.
defaultChecked	boolean	—	Uncontrolled initial checked state.
onCheckedChange	(checked: boolean | "indeterminate") => void	—	Fires when the checked state changes.
disabled	boolean	false	Disables the checkbox and dims it.
id	string	—	Associates the box with a Label via htmlFor.
className	string	—	Extra classes merged onto the control.

When to use

• A single yes/no toggle within a form (for example “Accept terms”).
• Selecting multiple independent options from a list.
• Bulk selection in tables (select-all and per-row checkboxes).

Do not use Checkbox to choose exactly one option from a mutually exclusive set; use a Radio Group instead. For an instant-effect on/off setting, prefer a Switch.