Segment Group
Inline segment control with animated sliding indicator for single-selection scenarios.
01 Examples
Time-Range Selector
Per-Item Disabled
02 Micro-Interactions
Configured Mint
03 Choosing the Right Component
SegmentGroup
Compact mode/view switcher with animated sliding indicator. Best for 2-5 mutually exclusive options that don't control content panels. Minimal API, single neutral style.
ButtonGroup selection="single"
Toolbar-style toggle with full button styling (variants, intents, connected borders). Choose this when you need visual customization, multi-select, or connected button layouts.
RadioGroup
Form input with labels, descriptions, helper/error text, and native <input type="radio">. Choose this when
collecting data in forms or when options need descriptions.
Tab
Content panel navigation where each option reveals a different panel. Uses role="tablist" semantics. Choose this when switching
between content sections, not selecting a value.
04 Customization
Theme Switcher
Dashboard Toolbar
Analytics
Last updated: just nowGradient Pricing Toggle
Neon Chart Switcher
Glassmorphism
Fully Custom (unstyled)
05 Accessibility
ARIA
The container uses role="radiogroup" with each item
as role="radio" + aria-checked. Provide ariaLabel to describe the group's purpose.
Keyboard
Arrow keys move between options and select immediately. Home / End jump to first/last option. Only the active item is in the tab order (roving tabindex).
Visual States
Active items expose data-state="active" for CSS-only styling in unstyled mode. The sliding indicator uses aria-hidden="true" since it is purely decorative.
Focus rings use focus-visible: for keyboard-only visibility.
06 API Reference
No matching properties |