ToggleGroup
Button
Grouped toggle buttons with single or multiple selection modes and visual state persistence
Single Selection
Only one item can be selected at a time.
Text Alignment
List Style
Multiple Selection
Multiple items can be selected simultaneously.
Text Formatting
Content Types
Variants
Default
Primary
Secondary
Accent
Outline
Ghost
Sizes
Small
Default
Large
Spacing
No Spacing (Attached)
Spacing 2
Spacing 4
Orientation
Horizontal (Default)
Vertical
Disabled
Entire Group Disabled
Individual Items Disabled
Usage Guidelines
When to Use
- Mutually exclusive options
- Multiple selection toggles
- Toolbar groups
Accessibility
- Group semantics
- Selection state announced
Performance
- Efficient state batching
- Memoized children
Common Mistakes
- Mixed single/multiple selection
- No initial selection when required
Frequently Asked Questions
ToggleGroup is a set of toggles where one or multiple can be active, like alignment buttons.
Yes, ToggleGroup can be configured for single or multiple selection.
Related Components
View allButton
Primary action component with variant system, size options, loading states, icon slots, and optional shimmer effects
ButtonGroup
Grouped button layout with shared borders, orientation control, and seamless visual connection between actions
FloatingActionButton
Fixed-position FAB for primary screen actions with animation, positioning options, and extended label support
IconButton
Icon-only button with size variants, accessibility labels, and interaction states