material-search-app-bar

MD3 Expressive search variant. Scroll to see the search container shift to surface container highest.

Generic search

Leading menu, trailing avatar outside the search container.

Type and press Enter to fire materialSearchSubmit.

(no events)
Tall content…

Specific area — "Search inbox"

Inside-trailing mic icon, two trailing icons outside.

Tall content…

With material-search slotted — suggestions in the app bar

A material-search in the search slot replaces the built-in input: the app bar keeps the chrome (leading/trailing, scroll color), the search brings the docked suggestion view. Focus widening is disabled inside the bar (--search-focus-expand: 0).

unpaid invoices warehouse stock Purchase orders Reports 
(no events)
Tall content…

Form-associated

Bar lives inside a <form>. Enter triggers form submit.

Submit serializes FormData.
(submit to see FormData)
Sample usage 
<material-search-app-bar placeholder="Search Photos" name="q">
  <material-icon-button slot="leading" variant="standard" icon="menu" aria-label="Menu"></material-icon-button>
  <material-icon-button slot="inside-trailing" variant="standard" icon="mic" aria-label="Voice search"></material-icon-button>
  <material-icon-button slot="trailing" variant="standard" icon="account_circle" aria-label="Account"></material-icon-button>
</material-search-app-bar>

<script>
  document.querySelector('material-search-app-bar')
    .addEventListener('materialSearchSubmit', e => console.log(e.detail.value));
</script>