SearchInput
A field that behaves like a search box: a clear affordance and Escape to reset.
@luc/uiExamples
A field that behaves like a search box
`onValueChange` fires on every keystroke for a caller that filters as the reader types; the clear affordance is a real button with a name, and it returns focus to the field it cleared.
Bound value: sharpe
const [query, setQuery] = useState("");
<SearchInput
placeholder="Search runs"
value={query}
onValueChange={setQuery}
aria-label="Search runs"
/>Sizes
The size scale is `Input`'s, so the search icon and the clear button follow it.
<SearchInput placeholder="Search" size="sm" aria-label="Small search" />Without a clear button, and disabled
`clearable={false}` for a filter the surrounding page owns; the clear button's accessible name is a prop, so a product in another language passes its own instead of forking the component.
<SearchInput placeholder="Filter owned by the page" clearable={false} aria-label="Filter owned by the page" />
<SearchInput placeholder="Locked filter" defaultValue="sector:technology" disabled aria-label="Locked filter" />Usage
import { SearchInput } from "@luc/ui";<SearchInput placeholder="Search runs" aria-label="Search runs" />Package setup — peer requirements, the stylesheet and the provider — is on installation.
API
Read from the published TypeScript API, so a prop that is not listed here does not exist and a default that is listed is the one the compiler sees.
| Export | Kind | Signature |
|---|---|---|
SearchInput | 6 documented props | ({ className, onValueChange, clearable, clearLabel, value, defaultValue, onChange, ref, ...props }: SearchInputProps) => import("@types/react").JSX.Element |
SearchInput props
Type: SearchInputProps
Values the compiler reads from the declaration.
| Prop | Type | Default | Notes |
|---|---|---|---|
clearable? | boolean | undefined | — | Show a clear button when the field has content. Default `true`. |
clearLabel? | string | undefined | — | Accessible name for the clear button. The default is English; a product in another language passes its own string instead of forking the component. |
inputClassName? | string | undefined | — | Applied to the `<input>` element itself; `className` styles the shell. |
invalid? | boolean | undefined | — | |
onValueChange? | ((value: string) => void) | undefined | — | Fires on every keystroke (controlled-ish convenience). |
size? | ControlSize | undefined | — |
Guidelines
Do
- Use `onValueChange` when the page filters as the reader types; the field stays uncontrolled, which is what keeps fast typing from dropping characters.
- Pass `clearLabel` in a product that is not English: the clear button needs a name, and the default is English.
- Keep `clearable` on when the field holds a filter the reader will want to remove; turn it off when the surrounding page owns the value.
Don't
- Submit a search on every keystroke — the callback is for filtering, not for a request per letter.
- Use a search field as a general text input: the icon, the clear button and Escape all promise searching.
- Rely on the placeholder as the field's name.
Accessibility
The clear affordance is a real button with an accessible name (a prop, so it can be translated), and it returns focus to the field it cleared rather than dropping focus to the document.
Family
Forms
Inputs, their validation surfaces and the form lifecycle around them.
24 documented entries in this family. Open the family index
Related