A search input on Base UI's Input.
import { SearchField } from "@/components/eased/search-field/search-field";
<SearchField aria-label="Search members" value={q} onValueChange={setQ} loading={fetching} />| Prop | Type | Default | |
|---|---|---|---|
value, defaultValue, onValueChange | Controlled or uncontrolled. | ||
onClear | () => void | After the clear button or Escape empties it. | |
loading | boolean | false | The spinner takes the magnifier's slot. |
shortcut | string | false | "k" | ⌘ (Apple) or Ctrl + this letter focuses the field; shown as a Kbd hint while empty and unfocused. One field per shortcut: the first mounted keeps it, later ones warn in development and show no hint. |
size | "sm" | "md" | "lg" | "md" | |
clearLabel | string | "Clear search (Escape)" | Names the Escape path for screen readers. |
className | string | Classes for the bordered shell. | |
controlClassName | string | Classes for the <input> inside it. | |
placeholder | string | "Search…" |
Plus Base UI Input props.
Accessibility: Escape clears the text, or blurs when empty. The clear button stays out of the tab order, as in macOS and Spectrum: Escape is the keyboard path, and the button's name says so. A pointer press on it keeps focus in the input. The input sets aria-keyshortcuts and aria-busy while loading.
Motion signature: the clear button pops in once text exists, the ⌘K hint fades out on focus, and Eased's Spinner sits inside the icon slot rather than shifting the layout.