Search field
A recognizable search entry point with clear affordances.
npm install https://animui.stracture.net/__local/package.tgzLive · keyboard ready
- Filtering a visible list or table in place.
- Toolbar search where the query should be clearable with one click.
- Use expanding-search for compact header search with results.
- Use combobox when the search sets a form value.
- Use filter-toolbar when search sits with other filters and sort.
Installation
Install animui once, then import any component or block from its typed package entry.
animui · 250 components and blocks
React 19 and React DOM 19 are required. The package includes Free and Pro entries, styles and TypeScript declarations.
npm install https://animui.stracture.net/__local/package.tgzLoad the stylesheet once at your app root, then use the typed component import:
import 'animui/styles.css';
import { SearchField } from 'animui/search-field';Read the Code tab for the implementation files and the API reference below for required props.
Download animui 0.3.0 · Agent guideexample.tsx
import { SearchField } from "animui/search-field"; export function MemberFilter() { const [query, setQuery] = useState(""); return ( <SearchField label="Search members" placeholder="Name or email" value={query} onValueChange={setQuery} /> );}SearchField
A controlled search input with a clear button that scales in inside a reserved slot.
PropTypeDefaultDescription
labelRequiredstring–Visible label tied to the input.valueRequiredstring–Current query.onValueChangeRequired(value: string) => void–Called on every keystroke and with an empty string when cleared....propsOmit<InputHTMLAttributes<HTMLInputElement>, "type">–Forwarded to the input, including ref, placeholder, and name.- Escape
- Clears the field (native type="search" behavior in most browsers).
- Native input type="search" with a real label.
- Clear button is labelled "Clear search" and returns focus to the input.
- The search icon is aria-hidden.
- The clear button scales in from 0.8 with a slight blur on a snappy spring and presses to 0.96.
- Reduced motion fades it in and out without scale or blur; the reserved slot keeps the field width fixed either way.
- The clear button has a reserved slot, so the field width never shifts when it appears.
- It fills its column with min-width 0 and shrinks inside narrow toolbars.
- onValueChange fires on every keystroke; debounce expensive filtering or fetching yourself.
Notes for AI
Give your coding assistant the Markdown reference instead of screenshots.
- Use to filter a visible list in place. Use expanding-search for a compact header search with results, and combobox to choose a value.
- Always controlled: pass value and onValueChange, and debounce expensive filtering yourself.
The full library index for assistants is at /llms.txt.