Toggle Group

Show code

Usage

<div class="toggle-group" data-spacing="0" role="group" aria-label="Text alignment">
  <button class="toggle toggle-outline" type="button" aria-pressed="true">…</button>
</div>

Attribute	Meaning
data-spacing="0"	Joined: flat inner corners and shared edges
data-orientation="vertical"	Stacks the segments

Spaced

Without data-spacing="0" the segments keep their own shape and a gap.

Bold Italic Underline

Show code

Single selection

When exactly one may be on, it is a radio group — not several toggles. Radios give the arrow keys and the announced state for free.

List Grid

Show code

Multiple and single are different components

Several independent toggles use role="group" and each carries its own aria-pressed. One choice out of many is role="radiogroup" with radio inputs. Using pressed buttons for a single choice leaves a screen reader user unable to tell the options are exclusive.

RTL

Set dir="rtl" on the page or on any subtree — the outer corners round on the correct sides. See the button page for a live example.

Accessibility

• Name the group. role="group" with aria-label, or role="radiogroup" for a single choice.
• A focused segment lifts above its neighbours, so a joined group never clips the focus ring.
• Icon-only segments each need a name. The group name says what the set is for; each button still says what it does.