Q: How do I render an icon-only toggle?

Wrap a Lucide icon as the sole child of Toggle: ` `. Set `aria-label="Bold"` on the toggle so screen readers know the action — icon alone isn't text. Common in editor toolbars (Bold / Italic / Underline / Strikethrough). For touch-friendly icon-only toggles, use `size="lg"` so the tap target is at least 44x44 px.

Question 1

What is a shadcn toggle?

Accepted Answer

A shadcn Toggle is a press-and-hold button that toggles between active and inactive states — bold/italic/underline buttons in a text editor toolbar, view-mode toggles (list / grid), filter chips that stay pressed when active. Built on Radix UI's Toggle primitive (proper button role with `aria-pressed`, keyboard activation with Space) styled with shadcn/ui.

Question 2

Are these toggle examples free?

Accepted Answer

Yes, every toggle example on shadcn.io is free for personal and commercial use — no attribution requirement, no runtime dependency, no gating.

Question 3

Toggle vs Switch vs Checkbox — which one?

Accepted Answer

Toggle for buttons that visually press in/out (bold formatting, mute mic, view mode). Switch for binary settings with on/off semantics (airplane mode, dark mode). Checkbox for selecting items in a list or accepting terms (state submitted with the form). The Toggle metaphor is a PRESSED BUTTON; Switch is a FLIPPED SWITCH; Checkbox is a TICKED BOX.

Question 4

When should I use a single Toggle versus a Toggle Group?

Accepted Answer

Single Toggle for one-off press-and-hold actions where the state is independent (mute mic). ToggleGroup for related toggles where exclusivity (single-select: text alignment) or inclusivity (multi-select: bold + italic) matters. Use ToggleGroup whenever you'd render 2+ Toggles next to each other — the group manages keyboard nav and styling cohesion.

Question 5

How do I size the toggle (sm / default / lg)?

Accepted Answer

shadcn Toggle ships with a `size` prop: `"sm"` (h-9), `"default"` (h-10), `"lg"` (h-11). Match Toggle size to its surrounding controls — sm in dense toolbars, default in standard forms, lg in mobile-first or touch-heavy contexts. Mixed sizes within the same toolbar feel ragged.

Question 6

How do I render an icon-only toggle?

Accepted Answer

Wrap a Lucide icon as the sole child of Toggle: ``. Set `aria-label="Bold"` on the toggle so screen readers know the action — icon alone isn't text. Common in editor toolbars (Bold / Italic / Underline / Strikethrough). For touch-friendly icon-only toggles, use `size="lg"` so the tap target is at least 44x44 px.

Question 7

How do I add a label next to the toggle's icon?

Accepted Answer

Render the icon + label inside the Toggle with `inline-flex items-center gap-2`. Useful in less dense toolbars where the action isn't obvious from the icon alone. Trade-off: takes more horizontal space; cap to 6-8 icon+label toggles before the toolbar overflows. For longer toolbars, use icon-only toggles with tooltips for labels.

Question 8

How do I install a toggle example?

Accepted Answer

Run the `npx shadcn@latest add` command shown under the Installation heading. The CLI copies the example's TSX source into `components/examples/toggle/…`, plus the shadcn/ui Toggle primitive (and its Radix dependency) if you don't already have it.

Question 9

How do I control the toggle's pressed state?

Accepted Answer

Pass `pressed={isActive}` and `onPressedChange={setIsActive}` to Toggle. The boolean state lives in your useState. For uncontrolled toggles ("toggle me, I'll remember"), use `defaultPressed={false}` — Radix manages the state internally. Most cases want controlled state so you can read it from elsewhere (form integration, persistence).

Question 10

How do I show a different icon based on pressed state?

Accepted Answer

Render a conditional icon: `{isActive ? : }`. Common pattern for mute toggles, play/pause buttons, show/hide toggles. The icon swap reinforces the state change beyond the button's pressed appearance. Animate the swap via Framer Motion / motion-react if the transition matters; for chrome controls, an instant swap is fine.

Question 11

Which libraries do toggle examples depend on?

Accepted Answer

Radix UI Toggle (the primitive — pressed state, ARIA-pressed, keyboard activation), shadcn/ui Toggle (the styled wrapper generated into your project), Tailwind CSS, class-variance-authority (variant API), and Lucide React (icons inside toggles). React 19 baseline.

Question 12

Are toggle examples accessible for keyboard and screen reader users?

Accepted Answer

Yes. Radix Toggle renders as a real `<button>` with `aria-pressed="true"` / `"false"` reflecting state. Tab focuses the toggle; Space activates it. Screen readers announce "button, pressed" / "button, not pressed". For icon-only toggles, set `aria-label` so the action is described to SR users.

Question 13

Can I use these toggle examples with React Server Components?

Accepted Answer

Toggle is a client component (it manages pressed state). Wrap it inside a Server Component parent and pass static props for label / icon. The toggled state lives in the client; for server-persisted toggles (saved settings), pair with a Server Action that fires on `onPressedChange`.

React Toggle Examples for shadcn/ui

Browse every toggle example

Frequently Asked Questions