Segmented
Segmented control navigation with animated selection indicator and keyboard support
Segmented
iOS-style segmented control for switching views, filtering content and toggling options. Includes icons, sizes, variants and full-width support.
Basic usage
Use options, value and onChange to build controlled segmented controls.
View mode & layout
Selected: list
Selected: grid
Variants
Change appearance with variant: "default", "outlined", "filled" and "ghost".
Default, outlined, filled & ghost
Sizes
Use size for compact or prominent controls: "sm", "md", "lg".
Small, medium & large
With icons
Provide an icon per option for visual affordance and quick scanning.
View modes, contact methods & visibility
Full width
Use block to stretch the control to its container width for tab-like navigation.
Tabs & time ranges
Disabled state
Disable the entire control with disabled, or individual options via disabled on each option.
Control-level and option-level disabled
"Completed" and "Archived" cannot be selected.
Without animation
Turn off the sliding indicator animation with animated=false.
No animated indicator
Practical patterns
Combine segmented controls with icons and variants to model real dashboard and product use cases.
Dashboard view, status, notifications & actions
Usage
A condensed usage snippet covering controlled state, icons, variants, block and disabled options.
API overview
Usage Guidelines
When to Use
- View switching
- Filter options
- Compact tab alternatives
Accessibility
- Keyboard arrow navigation
- aria-pressed states
- Focus visible indicators
Performance
- CSS-based transitions
- Minimal state updates
Common Mistakes
- Too many segments (use Tabs)
- Labels too long for mobile
Frequently Asked Questions
Related Components
View allApplication bar with scroll effects, elevation changes, and fixed/sticky positioning
Mobile bottom navigation bar with icon labels and active state indicators
Hierarchical navigation trail with separator customization, truncation support, and ARIA navigation landmarks
Enhanced anchor element with variant system, external link indicators, and programmatic navigation integration