Navigation And Search
Search Fields
A fixed-height query input paired with fixed-height, truncating result rows — one of the most precisely evidenced patterns in /ig.
Findings
What's actually in /ig
- --search-box-height:40px and --search-result-height:50px are literal, confirmed custom properties.
- --search-modal-height / --search-modal-height-expanded / --search-modal-top-offset govern a modal-style search overlay with an expanded state.
- --search-result-list-width:375px caps the result list to a fixed column width even on wide viewports.
Usage
When to use it
Use when
Use for a query + result list — always use the 40px input / 50px row / 375px max-width combination verbatim.
Avoid when
Avoid for a plain single-line form value with no results list; use Text Fields when search behavior and result rows are not part of the interaction.
Anatomy
Anatomy
- 01
40px input box
- 02
Result list (375px max width)
- 03
50px result row
- 04
Expanded modal state
Specification
Spacing, colour, type, and motion
- Input height
- 40px via --search-box-height
- Result row height
- 50px via --search-result-height
- Result list width
- 375px via --search-result-list-width
- Modal height
- --search-modal-height with --search-modal-height-expanded for the expanded state
- Top offset
- --search-modal-top-offset positions the modal-style overlay
States
States
| State | Behaviour |
|---|---|
| Empty | Input shows placeholder text and no result rows. |
| Focused | Cursor is visible in the 40px input while no query results are shown yet. |
| Typing | Inline suggestions or partial matches can appear as the query changes. |
| Results | The 375px result list shows 50px truncating rows. |
| No results | The result area remains capped to the search width and shows concise empty copy. |
| Modal expanded | The search overlay uses the expanded modal-height token when the focused search state needs more vertical room. |
Examples
Real interface compositions
Search
Explore search overlay
The 40px query field expands the overlay height on focus, while account, tag, and audio results remain capped to the 375px result column with fixed 50px rows.
--search-box-height, --search-modal-height-expanded, --search-result-list-width
Guidance
Usage guidance
- Keep the input at exactly 40px and result rows at exactly 50px — these are confirmed tokens, not approximations.
- Cap the result list width at 375px even in a wide layout; search doesn't stretch to fill available space in the evidenced pattern.
Do / Don't
Do / Don't
Do
- Use the modal-height-expanded token's existence as license to support a taller, expanded search state on focus.
Don’t
- Let the result list grow wider than 375px to fill a wide screen.
Code
Evidence-backed CSS
.search-box { height: var(--search-box-height); /* 40px */ }
.search-result-row { height: var(--search-result-height); /* 50px */ }
.search-result-list { width: var(--search-result-list-width); /* 375px */ }