How to build an accessible Search in React
Renders a native <input type="search"> associated with a <label> (defaulting from the i18n catalog) so the field is announced as a searchbox; the clear control is a labeled <button> and moves focus back to the input after clearing.
When to use a Search
- A query field that filters or searches content, with a built-in clear button and debounced onSearch
- Free-text search where results update as the user types (debounced) or on Enter
When not to use it
- General non-search text entry — use Input
- Search that presents an inline list of suggestions/results to pick from — use Combobox
- A bounded numeric value — use NumberInput
Keyboard interactions
Role searchbox, verified at WCAG 2.2-AA.
Enter
Common mistakes
Avoid: <Input placeholder="Search" onChange={(e) => runQuery(e.target.value)} />
Prefer: <Search onSearch={(q) => runQuery(q)} debounceMs={300} />
Search provides type="search" semantics, a magnifier affordance, a clear button, and built-in debouncing so you avoid firing a query on every keystroke
Example
<Search onSearch={(q) => runQuery(q)} />