Search field

An Input with a magnifier in front and a clear button behind once there is a query.

Source: SearchField.tsx. When a screen gets search, filters, both or neither: search-filter.

When to use it

• At the top of an index long enough to need it — the search-filter chapter gives the counts.
• First on the screen, above any filter chips, so the field and the chips stay put while the results change below them.

Not for a list of ten rows a person can scan. Not as a form field — a search is a query, not a value that gets saved.

Anatomy

States

• Empty: magnifier and placeholder.
• Focus: 2px border.focus frame, exactly as the input.
• With a query: the clear button appears. Clearing keeps focus in the field.
• Results loading: the previous results stay visible; the list never blanks per keystroke.
• No results: the field and chips stay on screen, and the list says what matched nothing.
• Disabled, error: none of its own.

Content

• The placeholder names what is searched: "Search students…", never bare "Search".
• Never autofocus it on a tab home. A keyboard over the content someone came to browse is the most hostile thing a list screen can do.

Accessibility

• Role search, and the return key is "search".
• The accessible name defaults to the placeholder, which already says what is searched.
• The clear button is its own stop: role button, "Clear search", testID <testID>-clear.

Do and don't

Code

import { SearchField } from '../../components/ui';

<SearchField
  value={query}
  onChangeText={setQuery}
  onClear={() => setQuery('')}
  placeholder="Search students…"
  testID="roster-search"
/>