Search

Search lets someone navigate a product with a query. The search bar and the view that shows its results are one component, which is how Material 3 named them together in 2025.

Usage#

A search bar carries a leading search icon, hinted search text and any trailing icons you add. Put the suggestions or results inside as children; they show once the field has focus, and the field reports them to assistive technology as a combobox. The view they open floats over the page rather than pushing it down, and closes again as soon as focus leaves it.

<script lang="ts">
	import { Item, Search } from 'noph-ui'

	const dishes = ['Simple Classic Tacos', 'Mexican street corn', 'Chilaquiles verdes']

	let query = $state('')

	const matches = (q: string) =>
		q ? dishes.filter((d) => d.toLowerCase().includes(q.toLowerCase())) : dishes
</script>

<div style="width:26rem;max-width:100%">
	<Search bind:value={query} placeholder="Search product">
		{#each matches(query) as dish (dish)}
			<Item variant="button">{dish}</Item>
		{/each}
	</Search>
</div>

Semantics#

The container holding the results brings no role of its own, because what goes in it is a list one time and categories, avatars and chips the next. Give it one through resultsAttributes when the children have earned it. Name a role a combobox is allowed to own, such as listbox, and the field turns itself into that combobox, wired up with aria-expanded and aria-controls; name nothing and it stays a plain search field with the results as ordinary content below it.

<Search placeholder="Search product" resultsAttributes={{ role: 'listbox' }}>
	<Item variant="button" role="option">Simple Classic Tacos</Item>
</Search>

Options a person steps through with the arrow keys are a different component: autocomplete is the full combobox, and it handles the active option and aria-activedescendant for you.

Styles#

contained, the default, keeps the field's pill shape and colour while the results show. Material recommends it. divided squares the field off and separates it from the results with a rule.

<script lang="ts">
	import { Item, Search } from 'noph-ui'

	const dishes = ['Simple Classic Tacos', 'Mexican street corn', 'Chilaquiles verdes']

	let dividedQuery = $state('')

	const matches = (q: string) =>
		q ? dishes.filter((d) => d.toLowerCase().includes(q.toLowerCase())) : dishes
</script>

<div style="width:26rem;max-width:100%">
	<Search bind:value={dividedQuery} variant="divided" placeholder="Search product">
		{#each matches(dividedQuery) as dish (dish)}
			<Item variant="button">{dish}</Item>
		{/each}
	</Search>
</div>

Trailing icons#

The trailing slot takes an avatar or actions. A clear button appears next to it on its own once there is a query.

<script lang="ts">
	import { IconButton, Item, Search } from 'noph-ui'
	import { Icon } from 'noph-ui/icons'
</script>

<div style="width:26rem;max-width:100%">
	<Search placeholder="Search product">
		{#snippet trailing()}
			<IconButton title="Filter"><Icon>settings</Icon></IconButton>
		{/snippet}
		<Item variant="button">Simple Classic Tacos</Item>
	</Search>
</div>

Layout#

docked, the default, drops the results under the field, growing them to two thirds of the screen at the most. full-screen takes over the viewport once the field has focus, which suits a small screen.

<script lang="ts">
	import { Item, Search } from 'noph-ui'

	const dishes = ['Simple Classic Tacos', 'Mexican street corn', 'Chilaquiles verdes']

	let fullScreenQuery = $state('')

	const matches = (q: string) =>
		q ? dishes.filter((d) => d.toLowerCase().includes(q.toLowerCase())) : dishes
</script>

<div style="width:26rem;max-width:100%">
	<Search bind:value={fullScreenQuery} view="full-screen" placeholder="Search product">
		{#each matches(fullScreenQuery) as dish (dish)}
			<Item variant="button">{dish}</Item>
		{/each}
	</Search>
</div>

Motion#

Material 3 Expressive grows the search bar when it takes focus, by shrinking the margin it keeps to its pane from 24dp to 12dp. The component owns that margin, so the growth needs nothing from you. Change how far it travels with the two custom properties, or set them both to the same value to hold the bar still.

<script lang="ts">
	import { Item, Search } from 'noph-ui'
</script>

<div style="width:26rem;max-width:100%">
	<Search
		placeholder="Search product"
		--np-search-pane-margin="4rem"
		--np-search-view-margin="0rem"
	>
		<Item variant="button">Simple Classic Tacos</Item>
	</Search>
</div>

Search app bar#

Use a search app bar as an emphasised, global entry point. It is the app bar's search variant, which carries a field in place of a headline.

<AppBar variant="search">
	{#snippet leading()}
		<IconButton title="Open navigation"><Icon>menu</Icon></IconButton>
	{/snippet}
	{#snippet search()}
		<Search bind:value={query} placeholder="Search product" />
	{/snippet}
</AppBar>

Opening it yourself#

Focusing the field opens the view, so most of the time nothing is needed from you. Where the bar has no room to sit at rest, a narrow app bar say, a trigger elsewhere can open it through show, and close puts it away again. Both take care of the caret, and show puts the bar in the document before it moves focus there, so a bar that is hidden until it opens still works. It does that synchronously, which is what lets Safari on iOS open the keyboard: the tap that called show is still on the stack.

<script lang="ts">
	import { IconButton, Item, Search } from 'noph-ui'
	import { Icon } from 'noph-ui/icons'

	let search: ReturnType<typeof Search> | undefined = $state()
	let expanded = $state(false)
</script>

<IconButton title="Open search" onclick={() => search?.show()}>
	<Icon>search</Icon>
</IconButton>

<!-- The bar has nowhere to sit until it opens, so it is out of the layout while at rest. -->
<div class={['view', !expanded && 'resting']}>
	<Search bind:this={search} bind:expanded view="full-screen" placeholder="Search product">
		<Item variant="button">Simple Classic Tacos</Item>
	</Search>
</div>

<style>
	.view.resting {
		display: none;
	}
</style>

Theming#

Accessibility#

The field is a native <input type="search"> named by label. The clear button and the back arrow are named by clearLabel and backLabel, so all three can be translated.

Focus opens the view and moving focus out of it closes it again, which keeps the keyboard and the pointer in step. Escape closes it from the field and leaves the query alone. Results are yours to fill, so the roles inside are yours too: see Semantics for when to make them a listbox, and reach for autocomplete when arrow keys should walk the options.

API#

Renders a <div> holding the field and its results, and takes its attributes. bind:element gives you that wrapper and bind:inputElement the input.

Methods#

Attributes#