AG Design System

Component

Toggle

A two-state on/off button that stays visually pressed when active. Ideal for toolbar formatting controls and feature switches.

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/toggle

Usage

Use a Toggle for a single control that flips between two states. For a group of mutually exclusive options, compose several toggles; for a boolean form field, use Checkbox instead.

Playground

Preview

Configure

Transparent (default) or bordered (outline).

Control height: 28px, 32px, or 36px.

Text shown inside the toggle.

No

Start in the pressed (on) state.

No

Prevent interaction.

Code

<Toggle>Toggle</Toggle>

Do

  • Give icon-only toggles an aria-label so their purpose is announced
  • Use the pressed/onPressedChange props for controlled state
  • Group related toggles in a toolbar for formatting actions

Don't

  • Don't use a Toggle for a form boolean, use Checkbox
  • Don't use a Toggle for navigation, use a link or button
  • Don't rely on color alone to convey the pressed state