Shadcn Toggle

Q: How do I make a toggle icon-only and still accessible?

Use an icon without text and add an aria-label: ` `. Screen readers will announce 'Bold button, toggle' on focus.

Q: Can I disable a toggle?

Yes. Set disabled prop: ` Bold `. Style it to look unavailable. Pair with a Tooltip to explain why it's disabled.

Browse 14 production-ready shadcn toggle components for two-state buttons, text formatting controls, and view mode switching. Shadcn Toggle is built on Radix UI primitives and fully compatible with Shadcn Create style options.

For AI Agents

Hand your agent this brief or the ReUI MCP, not a screenshot. Free to install.

When to use

Editor formatting controls that stay pressed, such as bold, italic, underline and strikethrough
Reaction and save controls, such as like, retweet, share and bookmark, with or without a count
Media and app controls with an on and off state, such as mute, pin to sidebar or a notifications bell

When not to use

A one time action such as Save, Send or Delete that keeps no pressed state: use the Button component
Related actions joined edge to edge into one strip, such as playback or zoom controls: use the Button Group component
A set of options read as one value and crossed with arrow keys, such as text alignment: use the Toggle Group component

Agent notes

Pressed state lives inside each Toggle or a local useState and nothing saves it; read changes from onPressedChange to persist them
Every Toggle here is named by aria-label, which wins over its visible text for screen readers, so update both when relabelling

Markdownhttps://web.dev.reui.io/components/toggle.md

MCPget_component("toggle")

Installnpx shadcn@latest add toggle

Full index for agents:llms.txtReUI MCP setup

Shadcn Toggle: Two-State Button Control

Shadcn Toggle is a button that toggles between on and off states. Built on Radix UI primitives, it follows WAI-ARIA button semantics and announces state to screen readers via aria-pressed attribute.

Use for text formatting (bold, italic), view mode switching (list vs. grid), or any toggle-like action that doesn't fit a Shadcn Switch or Shadcn Checkbox. Shadcn Create style options apply to button colors and sizing so your design tokens flow into exported code.

ReUI lists toggle components inside text editors, content filters, and view controllers so you evaluate icon clarity, sizing, and spacing next to real workflows. The sections below explain what it is, why teams use it, which features matter, and how it pairs with other components.

What is Shadcn Toggle?

A toggle is a button that switches between two states: pressed (on) and unpressed (off). Unlike a Shadcn Button, a toggle retains its state visually after being clicked. Shadcn Toggle uses the Radix UI Toggle primitive, which manages focus, aria-pressed, and keyboard interaction.

Components here show toggle with icons, text labels, and sizing variants. They help you decide when a toggle (stateful) versus a regular button (action-oriented) is semantically correct.

Why Use Shadcn Toggle?

Teams use toggles for view options (show/hide, list/grid), text formatting (bold, italic, underline), and feature toggles in dense interfaces like editors or dashboards. A toggle signals that clicking it changes a UI state, not just triggers an action.

The layouts on this page show how to combine toggles with icons, labels, and groups.

Shadcn Toggle Features

Radix UI Foundation. Built on Radix UI Toggle primitive. Handles aria-pressed, focus, and keyboard navigation automatically.
Icon and Text Support. Render icons from Lucide, text labels, or both. Customize sizing and spacing via Tailwind utilities and Shadcn Create options.
Pressed State Styling. Visually distinct when pressed (e.g., different background color). Use data-state="on" or data-state="off" for conditional styling.
Size Variants. Small, default, and large sizes for different contexts. Choose based on density and hit target needs.
Disabled State. Set disabled prop to prevent user interaction. Style disabled toggles differently so intent is clear.

Use toggles with text formatting controls in rich text editors. Pair with Shadcn Button for text color or font size actions.

Combine toggles with Shadcn Toggle Group to create exclusive or multiple-select button groups (e.g., view mode: list, grid, kanban).

Show Shadcn Tooltip on icon-only toggles to clarify their purpose for screen readers and new users.

Settings Blocks in ReUI Pro

The free examples above pair with 16 production ready settings blocks in ReUI Pro, complete sections built on the same primitives and ready to copy into your app.

Settings (16 blocks)Settings and preferences pages with grouped options, toggles, and configuration panels.

Browse all Application blocks

Frequently Asked Questions

What's the difference between toggle, switch, and checkbox?

Checkbox is for multi-select or affirmations. Switch is for on/off state changes (immediately effective). Toggle is for single-select UI controls (bold, italic, alignment). Use based on the semantic intent.

Can I use toggle as a form field?

Yes, though it's less common than checkbox or switch. Use a toggle group for multi-option selection (alignment: left, center, right). For single boolean fields, switch is clearer.

How do I manage toggle state in React?

Use useState for uncontrolled mode or pass pressed/onPressedChange props for controlled mode: <Toggle pressed={isActive} onPressedChange={setIsActive}>.

How do I make a toggle icon-only and still accessible?

Use an icon without text and add an aria-label: <Toggle aria-label="Bold"><Bold /></Toggle>. Screen readers will announce 'Bold button, toggle' on focus.

Can I disable a toggle?

Yes. Set disabled prop: <Toggle disabled>Bold</Toggle>. Style it to look unavailable. Pair with a Tooltip to explain why it's disabled.

Should I use toggle or toggle-group for multiple selections?

Use Toggle for single binary controls. Use Toggle-Group for multi-option selection or single-select options (alignment, text formatting). Toggle-Group manages state across multiple toggles.

Start building with ReUI Pro today.

Every Pro block, every style, and every future addition, with one license for unlimited projects.

Get All-Access

From $249, once. Lifetime updates.