Question 1

What is a toggle?

Accepted Answer

A button that stays pressed until you press it again: bold, italic and underline in a text editor, mute, a view option, a filter. Each example here is shadcn.io's Toggle, a real button that tells screen readers whether it's pressed, styled with Tailwind CSS. It comes for React on Base UI, React Aria, Ark UI and Radix UI, and for Vue, Svelte and Solid on Ark UI.

Question 2

Are these toggle examples free?

Accepted Answer

Yes. Every example is free to use in personal and commercial projects, with no attribution. Seeing the code and installing it takes a free shadcn.io account.

Question 3

Toggle, Switch or Checkbox: which one?

Accepted Answer

A Toggle is a button that switches an action or a formatting on and off, like bold in a toolbar. A Switch is a setting that is on or off, like dark mode. A Checkbox picks items or accepts terms, usually in a form. If it sits in a toolbar, it's a Toggle.

Question 4

When should I use a Toggle Group instead?

Accepted Answer

Use a single Toggle for an action that stands alone, like mute. When two or more toggles sit side by side, use a Toggle Group: it tracks which items are pressed, lets one or several be pressed at a time, and moves between them with the arrow keys.

Question 5

How do I size a toggle?

Accepted Answer

Toggle has a `size` prop: `sm`, `md` (the default) and `lg`. Use `sm` in dense toolbars, `md` next to default-size buttons and inputs, and `lg` for touch screens or a few prominent controls. Keep one size per toolbar.

Question 6

How do I make an icon-only toggle?

Accepted Answer

Put the Lucide icon alone inside the Toggle and give the Toggle an `aria-label`, such as Toggle bold, so screen readers know what it does. Hide the icon itself with `aria-hidden`.

Question 7

What does the outline variant change?

Accepted Answer

The default variant has no border until it's pressed. `variant="outline"` adds a border, which helps on busy surfaces or next to outline buttons. The pressed state fills the background in both.

Question 8

How do I install a toggle example?

Accepted Answer

Sign in with a free account, open the example and run the install command it shows. It adds the example and the Toggle component it uses to your project, for your framework and UI library.

Question 9

How do I control whether the toggle is pressed?

Accepted Answer

The Toggle keeps its own pressed state by default. To control it, pass the pressed value and listen to its change: `pressed` and `onPressedChange` on Base UI, Ark UI and Radix UI, `isSelected` and `onChange` on React Aria, `v-model:pressed` in Vue.

Question 10

How do I disable a toggle?

Accepted Answer

Disable it: `disabled` on most targets, `isDisabled` on React Aria. It stays in place, faded, and ignores clicks and the keyboard, so the toolbar doesn't shift when it comes back.

Question 11

Which libraries do toggle examples use?

Accepted Answer

shadcn.io's Toggle (built on Base UI, React Aria, Ark UI or Radix UI in React, and on Ark UI in Vue, Svelte and Solid), Tailwind CSS and Lucide icons.

Question 12

Are the toggles accessible?

Accepted Answer

Yes. The Toggle renders a real button: Tab focuses it, Space and Enter press it, and screen readers announce whether it's pressed. An icon-only toggle needs an `aria-label`, as every icon-only example here has.

Question 13

Do the examples work in Vue, Svelte and Solid?

Accepted Answer

Yes, and the toggles look the same on every target: the same sizes, variants and pressed style. Only the prop names differ where the libraries differ, such as `isDisabled` on React Aria.

Toggle Examples

Default Size Toggle

Large Toggle

Small Toggle

Default Toggle

Disabled Toggle

Outline Toggle

Toggle with Text

More component examples

Toggle Group

Button

Button Group

Tooltip

Accordion

Alert

Alert Dialog

Aspect Ratio

Toggle examples MCP, with Pro

Individual

Team

Organization

Individual

Team

Organization

Frequently asked questions

Every toggle example. One prompt away.