Skip to main content
v1.0.0 | View in Storybook

When to use

  • A list, table, or dataset where the user needs to locate specific items quickly.
  • Content-heavy pages where scrolling to find something isn’t practical.
  • Global search across the whole application (scoped to the Command).

When not to use

  • Choosing from a known set of options — use Combobox or Select.
  • Filtering by multiple attributes simultaneously — use filter controls alongside or instead.
  • Free text input unrelated to finding content — use a plain Input.

Dos and don’ts

  • Do scope the search clearly — make it obvious whether it’s searching the current list, the current page, or the whole app.
  • Do show a no-results state when the query returns nothing; don’t leave an empty list with no explanation.
  • Do debounce live search to avoid excessive requests while the user is still typing.
  • Do use expected placeholder text that describes the scope: “Search assets” is more useful than “Search…”.
  • Do make sure search and filters work together — applying a filter shouldn’t silently clear the search query.
  • Don’t trigger search only on form submit if live filtering is possible — users expect immediate feedback.

Often used with

The list, Data grid, or page being filtered; optional adjacent filters (Select, Combobox); clear affordance; scope called out in placeholder or Helper text.

Visual examples

The examples below are interactive and follow the doc site’s theming: light mode when the docs site is in light mode, and dark mode when you switch the docs site to dark mode.

Filled

Use the filled variant when the search field should read as a primary, prominent control—for example, at the top of a list or data grid where filtering is the main action.

Disabled

Use a disabled search field when filtering is temporarily unavailable, and pair it with helper text or a tooltip that explains why search cannot be used.

Read only

Use read-only search when the current query should be visible but not editable—for example, showing an active filter applied by another control or a saved search view.

Controlled

Use a controlled search field when the query must sync with application state—for example, URL parameters, a parent filter panel, or programmatic clear and reset.
Last modified on September 16, 2026