Search
A search field with a magnifier, a clear button and a loading state.JSX
<Search placeholder="Search" />
Installation
Package
CLI (copy source)
pnpm
pnpm add @advui/corenpm
npm install @advui/coreUsage
import { Search } from '@advui/core'
<Search placeholder="Search publications" onSearch={runSearch} />Examples
Search on Enter
Preview
Code
Live results
Filters as you type, with the loading spinner and a live result count.Preview
Code
API reference
Search
Also takes the Input props (`placeholder`, `disabled`, `id`…).| Prop | Type | Default | Description |
|---|---|---|---|
value | string | — | The text (controlled or not). Filter live from `onValueChange`. |
defaultValue | string | — | Starting `value` when uncontrolled. |
onValueChange | (value: string) => void | — | Called with the new `value`. |
onSearch | (value: string) => void | — | Enter, or the keyboard’s search key, was pressed. |
loading | boolean | false | A spinner replaces the magnifier; sets `aria-busy`. |
size | 'sm' | 'md' | 'lg' | 'md' | Height. |
aria-label | string | 'Search' | Name of the field. Say what it searches. |
clearLabel | string | 'Clear search' | Name of the clear button. |
landmark | boolean | false | Wraps it in a `search` landmark, for the page’s main search.Web only. |
Accessibility
- A
searchboxnamed byaria-label(default "Search"); the icons are hidden. - The clear button is named "Clear search", appears only with text, and returns focus to the field.
- While
loadingthe field hasaria-busy. Announce result counts in a polite live region, as in the Live example. landmarkadds asearchlandmark so screen-reader users can jump to it.
| Key | Action |
|---|---|
| Enter | Runs `onSearch`. |
| Escape | Clears the text (web). |
Platform notes
Web
The Enter key hint is "search" on phone keyboards.
iOS
The keyboard’s return key reads "Search".
Android
Same as iOS.