Components / Inputs / Search and filterOpen in Figma
Search and filter
ReadyA search field and a filter button that sit above a list to narrow what it shows.
When to use
- A list is long enough that people look for one item by name or ID.
- The list can be narrowed by fields such as status, site or date.
When not to use
| If people need to | Use |
|---|---|
| Switch between a few fixed groups of the list | Primary tabs or chips |
| Choose a value inside a form | Dropdown or picker field |
| Set many filters at once | Filter screen (opened by the filter button) |
Anatomy
searchSearch
tune
- Row · required; white, sits in the white top block of a list screen
- Search field · required
- Search icon · required, left
- Hint text · required; "Search"
- Filter button · optional; only when the list has filters
Variants
| Variant | Purpose | Figma |
|---|---|---|
| Standard | Search 40 tall in Light grey, corners 8, and a 40 × 40 filter button, gap 8. Use by default | Designed |
| Outlined | White with a Line border, 44 to 48 tall, 14 Regular text; when the search needs more weight, as on tablet list headers | Designed |
| Raised | White with a soft shadow, 56 tall; when search is the main task of the screen, on a tinted page | Designed |
States
| State | When | What changes | Figma |
|---|---|---|---|
| Empty | Nothing typed, no filters on | Hint text "Search"; filter button in Light grey | Designed |
| Typing | A search term is entered | Term in Ink, a close icon appears on the right to clear it; the count line reads "Results (n)" | Temporary rule |
| Filters on | One or more filters are applied | Filter button turns Teal ink with a white icon and a Coral badge with the number of filters | Temporary rule |
Behaviour
- Results update as people type, after a short pause; no Search button.
- The close icon clears the term and puts the full list back; the keyboard stays open.
- The filter button opens the filter screen. Applying filters returns to the list with the badge showing how many are on.
- Search and filters combine: the list shows items that match the term and every filter.
- The row stays at the top of the list when the list scrolls.
- When nothing matches, the list area says so in one line; the filters stay visible so people can clear them.
Phone and tablet
| Phone | Tablet | |
|---|---|---|
| Row padding | 12 top and bottom, 16 sides | 12 top and bottom, 20 sides |
| Search width | Fills the row | Fills the list panel; in a list and detail split it sits on top of the list |
| Variant used most | Standard | Standard or Outlined |
Content
| Part | Rule |
|---|---|
| Hint text | "Search" on its own, or "Search" plus the noun when the screen holds more than one list |
| Count line | Noun (n) above the list: "Results (6)" |
| Badge | The number of filters on, never the number of results |
Do and don't
searchSearch
tune
DoMake the search and filter button the same height and fill.
searchSearch
tune
Don'tMix sizes, corners and styles in one row.
searchSearch
tune2
DoShow that filters are on, with their number.
searchSearch
tune
Don'tLeave the button unchanged while filters hide part of the list.
Related
Specs
Click a value to copy it.
| Part | Property | Phone | Tablet |
|---|---|---|---|
| Row | Fill | ||
| Padding | |||
| Gap | |||
| Search | Height | ||
| Fill | |||
| Corners | |||
| Padding | |||
| Gap icon to text | |||
| Search icon | Size | ||
| Hint and term | Type | ||
| Colour | |||
| Filter button | Size | ||
| Fill | |||
| Corners | |||
| Filter icon | Size | ||
| Filter button, on | Fill | ||
| Badge | Fill | ||
| Type | |||
| Size | |||
| Outlined | Height | ||
| Fill | |||
| Padding | |||
| Text | |||
| Icon | |||
| Raised | Height | ||
| Fill | |||
| Shadow | |||
| Padding left and right | |||
| Text | |||
| Icon | |||
| Count line | Type |
Accessibility
- The search field has a label "Search" for screen readers even though only hint text shows.
- The filter button is announced as "Filters", plus "2 on" when the badge shows.
- The close icon is labelled "Clear search".
- The 40 search and filter button keep a 44 touch area through the row padding.
- Hint text in Ink on Light grey scores 7.2 for readability; the 12 size is the floor, so keep the term short.
Changes
| Date | Change |
|---|---|
| 26 Oct 2026 | Standard set to 40 tall Light grey with corners 8 and a 40 × 40 filter button; outlined and raised kept for more or less prominence. |
| 26 Oct 2026 | Typing and filters-on added as temporary rules until designed in Figma. |