The input that answers as you type.
| Prop / event | Type | Notes |
|---|---|---|
| onSearch | (q) => void | Debounced query callback |
| results | Result[] | Rows to render in the listbox |
| clearable | boolean | Shows the × once there is a query |
| shortcut | string | Key hint that focuses the field |
| size | L · M · S | Matches Input; M is the default |
| ↑ / ↓ · Enter · Esc | — | Move results, open one, or clear + close |
Search runs a free-text query and returns ranked results. To pick from a known list use a Combobox; for a global jump-anywhere palette use the Command Menu.
Give each result a title and context, so people pick the right one.
Don't return bare strings with no context or ranking.
Make the empty state specific and calm — echo the query back.
Don't drop the magnifier. Without it, a search reads as any input.
A header search with a "/" shortcut to focus from anywhere.
A small search filtering rows in place, size S.
Live results with icon, title and the section they live in.
| Token | Value | Role |
|---|---|---|
| --search-icon | 38px left pad | Room for the leading magnifier |
| --search-affix | 44px right pad | Room for clear × or shortcut |
| --result-hover | #1E1F25 | Active / hover result row |
| --result-meta | #767B87 | Secondary meta line |
| --kbd-border | #2A2A30 | Shortcut key outline |
| --field-focus | rgba(255,122,0,.14) | Warm focus ring |
<div class="o-search">
<span class="o-input__icon"><SearchIcon /></span>
<input class="o-input o-input--m has-icon" type="search"
role="searchbox" placeholder="Search components…" />
<button class="o-input__affix" aria-label="Clear">×</button>
<div class="o-menu" role="listbox">
<button class="o-search__result" role="option">
<DocIcon /> <span><b>Combobox</b><small>Forms</small></span>
</button>
</div>
</div>