Form
Input Search
Search field with a leading icon and a one-click clear button. Controlled or uncontrolled.
Install
pnpm add @codefast/ui
Import path
@codefast/ui/input-search
Examples
Controlled with clear
A leading icon, a one-click clear button, and a live query readout.
Type to search — the × clears the field
Live filtering
Drive a results list from the controlled value.
- Apple
- Apricot
- Banana
- Blueberry
- Cherry
- Grape
- Mango
- Orange
Disabled
A non-interactive search field.
Anatomy
How the parts compose. Copy this skeleton and fill in the slots.
import { InputSearch } from "@codefast/ui/input-search";
<InputSearch
value={query}
onChange={(value) => setQuery(value ?? "")}
/>
API reference
Props for each part of the component. All native element props are also forwarded.
InputSearch
A search field with a leading icon and a clear (×) button.
| Prop | Type | Default | Description |
|---|---|---|---|
| value / onChange | string / (value?: string) => void | — | Controlled query. onChange also fires with an empty value on clear. |
| defaultValue | string | — | Initial query when uncontrolled. |
| placeholder | string | — | Hint text shown when empty. |
Accessibility
Built to be keyboard-navigable and screen-reader friendly out of the box.
| Key | Function |
|---|---|
| Esc | Clears the field when it has focus. |
- Renders type=search with an accessible clear button.
- Give it a label (visible or aria-label) describing what is searched.
- Debounce expensive queries; don’t fetch on every keystroke.
Guidelines
Conventions that keep usage consistent across an app.
Do
- Use for filtering lists and global search.
- Show the active query and a way to clear it.
Don’t
- Don’t use it for non-search text entry.
- Don’t hide the clear affordance once there’s a value.