Component

Checkbox

Binary selection control. Available as a simple checkbox, with description text, or inside a bordered card row.

Usage

Use checkboxes for multi-select options or toggling a single setting on/off. Use the card variant for settings panels.

Playground

Preview

Accept terms and conditions

Configure

Variant

Visual style of the checkbox control

Label

Description

Checked

Disabled

Code

<label className="flex cursor-pointer items-center gap-2.5 select-none">
  <Checkbox />
  <span className="text-sm">Accept terms and conditions</span>
</label>

Do

Always pair with a visible label to the right of the checkbox
Use for multi-select scenarios where multiple items can be chosen
Use the card variant for settings toggles where extra context is needed

Don't

Don't use a checkbox for mutually exclusive options, use a radio group
Don't use a checkbox as a primary call to action