Search

Search lets people enter a keyword or phrase to get relevant information.

Overview Api

Developer experience

query is controlled; defaultQuery initializes uncontrolled usage.
expanded is controlled; defaultExpanded initializes uncontrolled usage.
Search renders the inline contained variant. Use a SideSheet, dialog, or another surface primitive when the surrounding feature needs a modal presentation; those primitives own the docked/full-screen composition.
leadingIcon is decorative and is not a button. Navigation or dismissal belongs to the surrounding SideSheet or surface; use trailingActions for interactive Search actions.
The inline results surface uses one shared Anime.js height/opacity transition. Reduced motion applies the final state immediately.
When projected results are expanded, a pointer outside Search closes the local results surface; surrounding modal dismissal remains owned by SideSheet or the parent surface.
Use trailingActions for one or two interactive trailing controls, normally IconButton instances. Do not pass a bare Icon; a trailing icon shown in the Search bar is an action.
Use avatar for the optional non-interactive avatar slot. It occupies the same trailing area as an action, counts as one trailing slot, and should not be used for an interactive account control.
When the built-in clear action is visible, it occupies one of Material 3's two trailing action slots; provide at most one additional trailing action in that state.
Project suggestions or results as children. For listbox semantics, give each selectable child role="option" and a tabIndex of -1.
onSearch receives the current query when the user presses Enter or the search IME action.

Accessibility

Uses a search landmark and input[type="search"] with a required accessible name.
When projected content exists, the input becomes a WAI-ARIA combobox linked to the results surface; Arrow Up/Down, Enter, and Escape preserve the shared focus model.
The leading icon is hidden from assistive technology because it is decorative. The clear and trailing controls remain native actions with explicit accessible names and 48 px targets; the optional avatar slot is non-interactive.

Known limitations

The component does not filter or render result data itself; consumers own the projected result content and should provide role="option" children when using the default listbox role.
The component does not own modal layout or responsive presentation. Compose it with SideSheet or another surface when the surrounding feature must block and inert the rest of the application.

Props

React props
Name	Type	Required	Default	Description
`leadingIcon`	`Icon`	No	`—`	Decorative icon shown in the leading 48 px slot; the search icon is used by default.
`className`	`string \| Partial<Record<"container" \| "search" \| "input" \| "stateLayer" \| "inputField" \| "leadingIcon" \| "trailingActions" \| "avatarSlot" \| "clearButton" \| "results", string>> \| ClassNameComponent<...>`	No	`—`	Root classes (string), static element classes (object), or state-aware element classes (function).
`autoFocus`	`boolean`	No	`—`	Focuses the input once, on mount.
`id`	`string`	No	`—`	Id of the search input. Auto-generated if not provided.
`spellCheck`	`boolean`	No	`true`	Native spell-check preference.
`inputMode`	`SearchInputMode`	No	`—`	Native input mode hint.
`label`	`string`	Yes	`—`	Accessible name for the native search input.
`query`	`string`	No	`—`	Controlled query. Providing it makes the search controlled for its lifetime.
`defaultQuery`	`string`	No	`''`	Initial query for uncontrolled usage.
`onQueryChange`	`(query: string) => void`	No	`—`	Called once for each accepted query transition.
`expanded`	`boolean`	No	`—`	Controlled expanded state. Providing it makes the state controlled for its lifetime.
`defaultExpanded`	`boolean`	No	`false`	Initial expanded state for uncontrolled usage.
`onExpandedChange`	`(expanded: boolean) => void`	No	`—`	Called once for each accepted expanded-state transition.
`onSearch`	`(query: string) => void`	No	`—`	Called when the user submits the current query with the search action.
`placeholder`	`string`	No	`'Search'`	Hint displayed while the query is empty.
`disabled`	`boolean`	No	`false`	Prevents query editing and activation.
`clearable`	`boolean`	No	`true`	Clears the query when the clear action is activated.
`name`	`string`	No	`—`	Native form name forwarded to the search input.
`autoComplete`	`string`	No	`'off'`	Native autocomplete hint.
`maxLength`	`number`	No	`—`	Native maximum query length.
`minLength`	`number`	No	`—`	Native minimum query length.
`required`	`boolean`	No	`—`	Requires a non-empty query when the input participates in a form.
`readOnly`	`boolean`	No	`—`	Prevents editing while preserving the search value and semantics.
`resultsRole`	`SearchResultsRole`	No	`'listbox'`	Role used by the projected results surface.
`resultsLabel`	`string`	No	`'Search suggestions'`	Accessible name for the projected results surface.
`clearLabel`	`string`	No	`'Clear search'`	Accessible name of the clear action.
`trailingActions`	`ReactNode`	No	`—`	Interactive trailing controls, normally one or two `IconButton` instances.
`avatar`	`ReactNode`	No	`—`	Optional non-interactive avatar rendered in the trailing avatar slot.