Search field
A recognizable search entry point with clear affordances.
pnpm dlx shadcn@latest add @uiarc/search-fieldLive · 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
Add Search field with the shadcn CLI, or copy the source by hand.
pnpm dlx shadcn@latest add @uiarc/search-fieldAdds the component and its local dependencies, and installs motion, lucide-react. First time? Add the @uiarc registry to components.json, or use the full URL:
example.tsx
import { SearchField } from "@/registry/components/search-field/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.