Component reference

Search Bar

Material 3 Expressive Search Bar component for global or local searching.

Material 3Web ComponentFramework agnostic

Basic Usage

Basic Search Bar

<m3-search-bar placeholder="Search in your files"></m3-search-bar>

With Leading Icon

<m3-search-bar placeholder="Search products...">
    <span slot="leading" class="material-symbols-outlined">search</span>
</m3-search-bar>

With Leading and Trailing Content

more_vert

<m3-search-bar placeholder="Search with clear button...">
    <span slot="leading" class="material-symbols-outlined">search</span>
    <m3-button icon-only slot="trailing" variant="text">
        <span slot="icon" class="material-symbols-outlined">close</span>
    </m3-button>
</m3-search-bar>

With Menu Button (Leading)

<m3-search-bar placeholder="Search with menu...">
    <m3-button icon-only slot="leading" variant="text">
        <span slot="icon" class="material-symbols-outlined">menu</span>
    </m3-button>
</m3-search-bar>

Disabled State

<m3-search-bar placeholder="Disabled search..." disabled>
    <span slot="leading" class="material-symbols-outlined">search</span>
</m3-search-bar>

API Reference

Properties

placeholder: string - Placeholder text for the input

value: string - Current value of the input

disabled: boolean - Disables the search bar

name: string | null - Name attribute for form submission

form: string | null - Form attribute to associate with a form

aria-label: string | null - ARIA label for accessibility

Slots

leading: Content to display before the input (e.g., search icon, menu button)

trailing: Content to display after the input (e.g., clear button, avatar)

Events

input: Native event fired when the input value changes

change: Native event fired when the value is committed or cleared

submit: Use the owner form's native submit event