Search bars let users enter a query to find information within an app. This is a compact, pill-shaped bar (the M3 "search bar", not the full-screen "search view") with a leading search icon and a trailing clear button that appears once there's a value.
The Search component implements the Material Design 3 Search Bar pattern: a pill-shaped, fully-rounded field with a focus ring, distinct from the filled rectangular
Text Field.
It's a plain labelled <input> under the hood (no
bits-ui primitive) — pass any remaining native input attributes via ...restProps.
import { Search } from '@noxlovette/material'; See it live, with Controls, in Storybook rather than a hand-rolled preview here.
Playground
Open the Search story with Controls for placeholder and value.
Bind value to read the query text:
<script lang="ts">
import { Search } from '@noxlovette/material';
let query = $state('');
</script>
<Search placeholder="Search" bind:value={query} /> | Prop | Type | Default | Description |
|---|---|---|---|
value | string | null | — | The current query text. Bindable. |
placeholder | string | 'Поиск' | Placeholder text shown in the empty input. Note: the component's built-in default is Russian ('Поиск', i.e. 'Search') — pass an explicit placeholder for other locales. |
elementRef | HTMLInputElement | — | Bindable reference to the underlying input element. |
leadingIconProps | IconProps | { name: 'search' } | Props for the leading icon. |
trailingIconProps | IconProps | { name: 'close' } | Props for the trailing icon button, shown only while value is non-empty. |
trailingClick | () => void | () => (value = '') | Click handler for the trailing icon button. Defaults to clearing the value. |
children | Snippet | — | Reserved for custom layout content; not rendered by the current implementation. |
Label association
The input is wrapped in a <label for="search"> so the whole bar is a clickable/tappable hit target.
Clear affordance
The trailing clear button only renders once there is a value, avoiding a dead click target on an empty field.
Focus ring
A visible focus-inside ring is drawn on the bar when the input receives keyboard focus.