Toggle Group
A set of two-state buttons that can be toggled in single or multiple selection modes.
Last updated: March 8, 2026
This page now includes toggle patterns for filters, settings, formatting, devices, permissions, and data views.
Basic Toggle Group
A single-select alignment control for compact toolbars.
Selected alignment: center
Multi Toggle Group
A multi-select text formatting control with live selected state.
Active styles: bold
Device Type Toggle Group
Single-select device preview toggles.
Language Selector Toggle Group
Language/region quick selector.
Currency Selector Toggle Group
Currency switcher with icon cues.
Media Type Filter Toggle Group
Multiple media type filters.
Content Type Toggle Group
Content mode selection with icons.
Privacy Toggle Group
Private/public/shared visibility toggles.
Display Mode Toggle Group
Compact and expanded layout toggle.
Visibility Toggle Group
Toggle control for visible UI layers.
Difficulty Level Toggle Group
Easy, medium, and hard difficulty selector.
Select All Toggle Group
Single-select all/none state pattern.
Text Alignment Toggle Group
Classic alignment toolbar control.
View Mode Toggle Group
Grid vs list view toggle.
Chart Type Toggle Group
Chart style quick switch.
Volume Control Toggle Group
Simple mute/medium volume selector.
medium volume
Theme Switcher Toggle Group
Light and dark mode toggle.
Text Formatting Toggle Group
Multi-select formatting toolbar.
Priority Filter Toggle Group
Priority level filter control.
Sort Direction Toggle Group
Ascending and descending sort toggle.
Status Filter Toggle Group
Status multi-filter selection.
Period Selector Toggle Group
Day, week, month, year period selector.
View data by week