Overview
When to use
- Content breaks into distinct, independent sections at the same level of hierarch
- Switching views or filtering content within a page or panel
- Space is limited and users only need one section visible at a time
- Page-level navigation within a page header (use the onPage style)
When not to use
- Content is sequential, users need to follow a defined order, use a Stepper instead
- You need 5 or more options in a constrained space, use a Select instead
- Users would benefit from seeing multiple sections simultaneously
- Content is minimal and a single view would work
- Users must constantly switch between options to complete a single task — that signals a layout problem, not a picker problem
Content
Labels should be short, related, and work as natural completions of an invisible noun from the surrounding context. For example, in a schedule view, labels like "Day", "Week", "Month" implicitly complete "View by ___".
- Make the relationship between options obvious at a glance
- ✅ "Week, Month, Year"
- ❌ "30-day period, Week, Yearly view"
- Sentence case
- 1–3 words per label; aim for 10 characters, 15 max
- Keep label lengths similar across options — uneven lengths create visual imbalance
- No text wrapping — if labels would truncate, use the scrollable layout
Content patterns
|
Pattern |
Examples |
|
Noun |
Day, Week, Month · Essentials, Plus, Basics |
|
Noun + adjective |
Personal details, Job details |
Variants
Segment Picker
Default for most use cases. Use for filtering or navigating between sections within a card, panel, or page body.
On Page
Use when the Segment Picker lives in a page header, within the Page Templates component. Applies a darker surface style so the picker reads clearly against the page background. Only use onPage in a page header. Don't apply it inside cards, panels, or drawers.
Best practices
Immediate selection
Selecting an option updates the associated content immediately — no confirmation or submit step. Don't use Segment Picker for actions that are hard to undo or that require a save step.
Width behaviour
- Fill — stretches edge-to-edge within its container; use when there is ample horizontal space across all supported languages. Don't use Fill when labels risk truncating in any supported language.
- Scrollable — use when labels would truncate or wrap in longer translations (e.g. Spanish)
Indicators
Attach a badge or icon to surface an alert without requiring the user to switch sections.
- Badge — use when a count is meaningful (e.g. number of pending requests)
- Warning / critical icon — use when a count isn't needed or for lower-priority alerts
Badges and icons are not rendered on disabled options.
Disabled options
Individual options can be disabled. Use sparingly. If most options are disabled, reconsider whether Segment Picker is the right component for the context.
Number of options
2–4 options is ideal. Beyond 4, prefer the scrollable layout. If options are dynamic or user-generated, consider a Select instead.
Default selection
Always set a default selected option. If an option has an active alert, default to that option rather than the first.
Animation
The selected indicator animates between options. Duration scales with the distance traveled. Reduced motion preference (prefers-reduced-motion: reduce) is respected automatically.