Checkbox

Turn an option on or off as part of a form people will review and save.

Include in your project

A few tasks to help the team get started.

Confirm that you reviewed these options to continue.

Fig. 1 Choose what to include. Select all shows a mixed state when only some are on.

When to use it

Use Checkbox for options that apply when the form is submitted, or for picking several items from a list. It can also show a mixed state when some of a group is selected.

If the change should happen the moment it’s flipped, use Switch.

CheckboxThis page

Saved with the form.

Include in your project

Options reviewed before submitting.

Switch

Takes effect now.

Receive notifications about this project.

Preferences that apply at once.

Fig. 2 Two on/off controls. The difference is when the change takes effect.

How it behaves

Use defaultChecked for local state or checked/onCheckedChange for controlled state. Base UI forwards name, value, required, readOnly, and inputRef to its form behavior.

Associate a visible label using htmlFor and id. Space toggles the focused checkbox; disabled controls cannot be changed.

Pass indeterminate for a mixed selection; it is separate from checked. JZB shows a dash for mixed and a checkmark for checked.

Use aria-invalid and connect an error with aria-describedby. Validation and clearing an indeterminate state belong to the consumer.

The checkmark draws along its stroke in 220ms using CSS, reversing when cleared. The mixed-state dash crossfades. Reduced motion uses a 100ms fade without drawing; focused keyboard changes are immediate.

Build it

Add it with the shadcn CLI:

Terminal

A complete example. Change the values to fit your product:

checkbox-example.tsx

The full source is yours to edit once installed:

checkbox.tsx