Toggle group

Tab

Moves into the group on one item (the last focused, else the first pressed, else the first) and out again.

Arrow keys

Move focus to the previous or next item, wrapping at the ends. Focus moves without pressing, as in a toolbar.

HomeorEnd

Focus the first or last item.

SpaceorEnter

Toggle the focused item, or select it in single mode.

• Single mode renders role="radiogroup" with role="radio" items and aria-checked; multiple mode renders role="group" with aria-pressed buttons. Both are labelled by label.
• Roving tabindex: only one item is a tab stop, so a toolbar with several groups stays quick to cross with Tab.
• Icon only items take their accessible name and tooltip from label. Pressed state is shown by fill and text contrast, and exposed through aria-checked or aria-pressed.
• The fills are aria-hidden decoration.

• Single: one fill with a shared layoutId moves to the chosen item on the morph spring, scoped per group by a LayoutGroup; its radius is scale corrected so it keeps its shape between items of different widths.
• Multiple: every item owns a fill that fades in over 180ms while it settles from 86% scale on the spring curve. When two neighbours are on, the fills close the gap and square off their inner corners, so a run of pressed items reads as one shape.
• Pressing an item gives its icon and label a small 92% press and spring back; the item box never scales, so neighbours never shift.
• Reduced motion moves the single fill instantly and replaces fades and presses with instant color changes.

• The strip stays on one line and sizes to its items; place groups in a wrapping flex row so they stack at 320px.
• Items are at least 36px square at md; use md on touch screens and sm in dense desktop toolbars.

• Single mode runs one Motion layout animation per change; multiple mode is pure CSS transitions on opacity, transform and inset.
• Item order for the roving tab stop is read from the DOM once per render of the group.

• Choose ToggleGroup for tool-like options that act on something else, often icon only: text formatting, view options, filters on a canvas. Choose segmented-control for a tab-like choice between views or ranges.
• Use type="multiple" for independent on/off options (bold, italic) and the default single type for mutually exclusive ones (alignment).
• Give every icon only item a label. Keep items as direct children; wrapping each in another element stops neighbouring fills from joining.
• Place several groups side by side with an 8px gap to build a toolbar; each group stays one tab stop.

The full library index for assistants is at /llms.txt.