Selection And Input
Combo Boxes
A Text Field that opens a Menus-style result list as you type — the same two anatomies the search experience already pairs.
Findings
What's actually in /ig
- The search experience already pairs the two halves of this pattern in practice: a 40px input (--search-box-height) feeding a result list built from the Lockup row pattern.
Rationale
Why this component exists
Search is functionally a combo box — typed text narrowing a live result list — so a general-purpose combo box inherits its anatomy directly rather than inventing a new one: the input height, the result row height, and the result list's max width all carry over unchanged.
Usage
When to use it
Use when
A value should be typeable or chosen from a list of matches — entering a location, choosing from a long but searchable option set.
Avoid when
The option set is short enough to browse without typing (use Pop Up Buttons) or open-ended free text (use a plain Text Field).
Anatomy
Anatomy
- 01
Input (Text Field anatomy)
- 02
Result list (Lockup rows)
- 03
Highlighted match
- 04
Empty state
Specification
Spacing, colour, type, and motion
- Input height
- 36–40px, matching Text Fields / Search Fields
- Result row height
- 50px, matching Search Fields
- Result list width
- Matches input width, capped per Search Fields' 375px precedent on wide layouts
- Highlighted match
- rgba(var(--ig-hover-overlay-rgb), var(--ig-hover-overlay-alpha)) background
States
States
| State | Behaviour |
|---|---|
| Empty | Placeholder text in the input, result list hidden. |
| Focused | Input bordered at hover variant; cursor active. Recent or suggested entries may surface before any text is typed. |
| Typing | Result list opens as input value changes. Matching substrings in each row are highlighted with the hover-overlay token. |
| Result selected | Input fills with the selected label; list collapses instantly — matching the legacy menu's display-state close. |
| No results | Empty-state label below the input; free text entry remains available. |
Examples
Real interface compositions
Post composer
Location search field
Typing 'Lisbon' in the 36px field filters a bounded list of place rows; highlighted matches use the same hover tint as other selectable rows.
36px Text Field, 50px result rows, 375px cap precedent, hover overlay tint
Do / Don't
Do / Don't
Do
- Surface recent or suggested values before any text is typed — the search pattern primes a recency-first expectation.
- Highlight the matching substring in each result row.
Don’t
- Build a custom result surface — inherit the Search Fields/Lockup row heights and max-width exactly.
- Show more than ~6 visible rows without a scrollable list; a scroll indicator signals more results exist.
See also