Selection And Input
Pickers
A bounded value-set selector presented as a Sheet on touch and a Menus flyout on pointer input — there's no third, wheel-style picker surface in this system.
Findings
What's actually in /ig
- Bounded selection resolves through surfaces the system already has: the general flyout menu documented under Menus and the Sheet pattern used on touch.
Rationale
Why this component exists
Instagram's interaction model already branches by input method for presentation surfaces (sheets on touch, flyouts on pointer — see Menus' responsive guidance), so a picker is that same branch applied to a bounded value set rather than a third, novel surface like an iOS wheel picker.
Usage
When to use it
Use when
Choosing one value from a small, bounded set with no need for inline persistence (use Pop Up Buttons for that case instead).
Avoid when
The set is large enough to need search — combine with Combo Boxes instead.
Anatomy
Anatomy
- 01
Trigger
- 02
Sheet (touch) or flyout (pointer)
- 03
Option row
- 04
Selected-state check
Specification
Spacing, colour, type, and motion
- Touch surface
- Action Sheet anatomy
- Pointer surface
- Menus flyout anatomy
- Selected indicator
- Check mark, leading or trailing, rgb(var(--ig-primary-text))
States
States
| State | Behaviour |
|---|---|
| Default | Trigger rests inline while the bounded value set remains closed. |
| Hover | Pointer triggers and option rows receive rgba(var(--ig-hover-overlay-rgb), var(--ig-hover-overlay-alpha)). |
| Pressed/Active | Pressed triggers or option rows use an overlay slightly deeper than hover overlay until selection or dismissal. |
| Focused | The focused trigger or option row uses a 2px var(--ig-stop-magenta) outline with a --radius-xs offset. |
| Open | Touch opens the Action Sheet surface; pointer opens the Menus flyout surface with the same option-row anatomy. |
| Selected | The selected option row shows a check mark in rgb(var(--ig-primary-text)) and the trigger reflects the committed value. |
| Disabled | Disabled pickers have opacity reduced and pointer-events none, and the trigger does not open a surface. |
Examples
Real interface compositions
Composer privacy
Audience picker
Followers, Close Friends, and Subscribers appear in a sheet on touch and a flyout on pointer screens, with a check mark on the current audience.
Action Sheet on touch, Menus flyout on pointer, selected check indicator
Do / Don't
Do / Don't
Do
- Branch presentation by input method, matching Menus rather than building a single fixed surface.
Don’t
- Introduce a wheel/drum picker style — it belongs to native OS controls rather than Instagram's menu/sheet grammar.
See also