Toggle group

​

Toggle group

​

When to use

• 2–4 options that are mutually exclusive and always visible.
• The current selection needs to be immediately obvious.

​

When to use something else

• More than ~4–5 options: use Select or Menu.
• Options fire one-off commands: use Button or grouped buttons, not a Toggle group.
• Multi-select filters: use Checkbox or filter chips (Badge / closeable patterns).
• Single-select filter of a small set: use Segmented control.
• Page navigation: use Tabs or routing, not Toggle group.

​

Dos and don’ts

• Do keep labels short — one or two words per option or use icons only.
• Don’t mix icons and text labels across options in the same group — be consistent.

​

Behavior

• Selection updates immediately; supports single or multi-select per configuration. Do not use for destructive one-shot actions without confirmation.

​

Often used with

• Toolbar formatting tools; Tooltip when icon-only; mutually exclusive or multi-select state next to the canvas or preview it affects.