AG Design System

Component

Checkbox

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

Installation

Install from the live registry into any shadcn-initialized app (another project). Prefer installing ag-globals first so AG tokens and fonts are present.

npx shadcn@latest add https://design.ag.org/r/checkbox

Usage

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

Playground

Preview

Configure

Visual style of the checkbox control

No
No

Code

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

Variants & States

Supported variants, sizes, and interaction states for this component.

Variants

  • Default
  • With description
  • Card

States

  • Unchecked
  • Checked
  • Disabled

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