Search

Search (COMPONENT_SPEC §12): the search bar (Compose SearchBar with SearchBarDefaults.InputField), its four expanded views and AppBarWithSearch. The collapsed bar is plain HTML with m3e-css classes; expanding needs <m3e-search> (m3e-elements) or <SearchBar> (m3e-react), which share one behavior: a role="search" landmark around an ARIA combobox (the input keeps focus, ArrowDown / ArrowUp move through the results, Enter picks one, Escape collapses).

Search bar

Collapsed bars (CSS only): 56dp tall, 360dp wide (narrower when the space is), a leading icon 16dp from the edge, placeholder, trailing icon buttons or an avatar.

Expanded views

Click a bar, type, or press ArrowDown. The expanded view moves into the top layer; Escape, the back button, a click outside (docked) or the scrim (with gap), Enter or a result collapse it. Under reduced motion the spatial springs jump.

Full-screen (ExpandedFullScreenSearchBar)

The bar grows into the window: its corners straighten, the input field moves to the top and widens, and the results fade in under a divider (slow spatial expand, default spatial collapse).

Suggestion 0Suggestion 1Suggestion 2Suggestion 3

Full-screen contained (ExpandedFullScreenContainedSearchBar)

The window surface fades in while the input field keeps its pill, moving to the top with 8dp at the sides; the results fade in on their own (fast spatial springs).

Suggestion 0Suggestion 1Suggestion 2Suggestion 3

Docked (ExpandedDockedSearchBar)

One panel grows from the bar to fit the results: at least 240dp, at most two thirds of the window (slow spatial expand, default spatial collapse).

Suggestion 0Suggestion 1Suggestion 2Suggestion 3

Docked with gap (ExpandedDockedSearchBarWithGap)

A scrim fades in and the results open in their own box 2dp under the bar, sliding in from half their height (default spatial expand, fast spatial collapse).

Suggestion 0Suggestion 1Suggestion 2Suggestion 3

Last event: none

AppBarWithSearch

A top app bar (.m3e-top-app-bar--search) holding the search bar between the navigation icon and the actions: 64dp tall, the bar centered with 8dp beside and 4dp above and below it. With enter-always (attachTopAppBarScroll) it hides on scroll down and returns on any scroll up; once content scrolls under it the bar takes the on-scroll container color (animated) and the search bar surface-container-highest (not animated).

Suggestion 0Suggestion 1Suggestion 2Suggestion 3
  • Text 0
  • Text 1
  • Text 2
  • Text 3
  • Text 4
  • Text 5
  • Text 6
  • Text 7
  • Text 8
  • Text 9
  • Text 10
  • Text 11
  • Text 12
  • Text 13
  • Text 14
  • Text 15
  • Text 16
  • Text 17
  • Text 18
  • Text 19
  • Text 20
  • Text 21
  • Text 22
  • Text 23
  • Text 24
  • Text 25
  • Text 26
  • Text 27
  • Text 28
  • Text 29

React

<AppBarWithSearch navigationIcon actions scrollBehavior="enter-always"><SearchBar variant value onChange onSearch onSelect><SearchResult …/></SearchBar></AppBarWithSearch>

Sources

androidx Compose Material3 1.5.0-beta01 (19991f2c): SearchBar.kt (SearchBar, AppBarWithSearch, the four Expanded*SearchBar views, SearchBarState and its remember*State functions, SearchBarDefaults, the enter-always scroll behavior and the layouts), SearchBarTokens.kt, SearchViewTokens.kt, internal/TextFieldImpl.kt (the input field paddings), ListItem.kt /ListTokens.kt (result rows), the values Compose renders in components/search-defaults.css, and SearchBarSamples.kt for the configurations above.