Selection And Input
Segmented Controls
Peer choices sharing one pill-shaped track — Stories Progress's segmented shape, made interactive and given a selected state instead of a fill timer.
Findings
What's actually in /ig
- The segmented pill shape is confirmed by Stories Progress; Segmented Controls transfer that shape from passive time progress into selectable peer options.
Rationale
Why this component exists
The segmented track shape already exists in the system; adding selection keeps the visual vocabulary closed — a row of equal pill segments always means 'one track, several positions' whether the position changes by time (Stories Progress) or by tap (Segmented Controls).
Usage
When to use it
Use when
Switching between 2–4 peer views inline, where each option is equally weighted (a toggle between Grid/List view).
Avoid when
There are more than 4 options (use Tab Views) or the options aren't mutually exclusive.
Anatomy
Anatomy
- 01
Track (pill, var(--radius-pill))
- 02
Segment (equal width)
- 03
Selected-segment fill
- 04
Divider between unselected segments
Specification
Spacing, colour, type, and motion
- Track height
- 36px, matching the button height tier
- Track radius
- var(--radius-pill) — 999px
- Selected fill
- rgb(var(--ig-elevated-background)) inset within rgb(var(--ig-secondary-background)) track
- Motion
- Selected-fill position transitions with Ease Glide, 200ms
States
States
| State | Behaviour |
|---|---|
| Default | All segments equal weight, track at --ig-secondary-background. |
| Selected | One segment's fill at --ig-elevated-background, text at --ig-primary-text; others at --ig-secondary-text. |
| Disabled | Opacity .5 on the whole control, matching Buttons. |
Examples
Real interface compositions
Messaging
Inbox filter switcher
Primary, General, and Requests share one pill track; the selected segment slides between positions while unread counts stay inside each segment label.
36px pill track, equal segments, selected fill, Ease Glide 200ms
Do / Don't
Do / Don't
Do
- Animate the selected-segment fill sliding between positions rather than crossfading.
Don’t
- Use this for passive, time-driven progress — that's Stories Progress, a different component despite the shared shape.
See also