Question 1

What is a toggle group?

Accepted Answer

A row of toggle buttons that share one state: text alignment, where one option is pressed at a time, or bold, italic and underline, where several can be on together. Each example here is shadcn.io's Toggle Group, styled with Tailwind CSS, 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 group 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 Group, Radio Group or Tabs: which one?

Accepted Answer

A Toggle Group fits choices that read at a glance from an icon, like alignment or formatting. A Radio Group fits labeled options people compare before choosing, like plans. Tabs switch between panels of content.

Question 4

Single or multiple selection?

Accepted Answer

Single selection when the options exclude each other: text can't be left- and right-aligned at once. Multiple selection when they combine: text can be bold and italic. Every target allows one pressed item by default; multiple selection is `multiple` on Base UI, Ark UI, Vue, Svelte and Solid, `selectionMode="multiple"` on React Aria, and `type="multiple"` on Radix UI, where `type` is required.

Question 5

How do I size a toggle group?

Accepted Answer

Set `size` on the group, `sm`, `md` (the default) or `lg`, and every item follows it. Use `sm` in dense toolbars and `lg` on touch screens.

Question 6

How do I get the outline style?

Accepted Answer

Set `variant="outline"` on the group: every item gets a border, and pressed items fill with the muted background. Set it once on the group rather than on each item.

Question 7

How do I disable the group or one option?

Accepted Answer

Disable the group to disable every item, or one item on its own: `disabled` on most targets, `isDisabled` on React Aria. Disabled items keep their pressed look and ignore clicks and the keyboard.

Question 8

How do I install a toggle group 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 Group component it uses to your project, for your framework and UI library.

Question 9

How do I read or control which items are pressed?

Accepted Answer

Pass the pressed items and listen to changes. On Base UI, Ark UI, Vue, Svelte and Solid the value is an array of item values, even with single selection. On Radix UI it's a string with `type="single"` and an array with `type="multiple"`. On React Aria it's `selectedKeys`, a set of item ids, with `onSelectionChange`.

Question 10

How do I build an icon-only toolbar?

Accepted Answer

Put only the icon in each item, hide it with `aria-hidden`, and give the item an `aria-label` such as Toggle bold. To show the name on hover too, wrap the item in a Tooltip.

Question 11

Which libraries do toggle group examples use?

Accepted Answer

shadcn.io's Toggle Group (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 toggle groups accessible?

Accepted Answer

Yes. The group is one Tab stop and the arrow keys move between items; Space and Enter press them. Screen readers announce whether each item is on. Every example labels the group and its icon-only items with `aria-label`.

Question 13

Do the examples work in Vue, Svelte and Solid?

Accepted Answer

Yes, and the groups look the same on every target. The props that differ between libraries are the selection mode, the value and the disabled prop, as described above.

Toggle Group Examples

Default Size Toggle Group

Large Toggle Group

Small Toggle Group

Default Toggle Group

Disabled Toggle Group

Outline Toggle Group

Single Selection Toggle Group

More component examples

Button

Button Group

Toggle

Tooltip

Accordion

Alert

Alert Dialog

Aspect Ratio

Toggle Group examples MCP, with Pro

Individual

Team

Organization

Individual

Team

Organization

Frequently asked questions

Every toggle group example. One prompt away.