The toolbar search input: leading glyph, accent focus ring, and a clear button that restores focus and re-reports the empty query.
EmptyWith queryDisabled
4 of 4 services
<SearchField bind:value={search} placeholder="Search services" />Installation
pnpm add @chanrg/4uiImport the stylesheet once, at the root of your app:
import '@chanrg/4ui/styles.css';Usage
import { SearchField } from '@chanrg/4ui';<SearchField bind:value={search} placeholder="Search services" />With query
The clear button appears once there is a query, and restores focus to the input.
1 of 4 services
<SearchField bind:value={query} placeholder="Search services" />Disabled
Blocks input while a request is in flight.
Input is blocked while the request is in flight
<SearchField bind:value={query} placeholder="Search services" disabled />API reference
Props
| Prop | Type | Default | Description |
|---|---|---|---|
value | string | '' | Bindable query. |
oninput | (value: string) => void | — | Called on every keystroke and on clear. |
placeholder / ariaLabel | string | '' / placeholder | The accessible name falls back to the placeholder. |
clearLabel | string | 'Clear search' | Label of the clear button. |
disabled | boolean | false | Blocks input. |
CSS variables
| Variable | Description |
|---|---|
--4ui-surface | Primary component surface. |
--4ui-text | Primary foreground color. |
--4ui-border | Default control and panel border. |
Accessibility
- The wrapper is a search landmark and the input always carries a name.
- Clearing returns focus to the input so typing can continue.