Search field

A search input with a clear button, a focus shortcut and a loading state. Escape clears it.

Installation

npx plankui@latest add search-field

import { SearchField } from "@/components/ui/search-field";

<SearchField value={query} onValueChange={setQuery} shortcut="/" />

Prop	Type	Default	Description
value / defaultValue	string	""	Controlled or initial text.
onValueChange	(value: string) => void		Called on every change, and with an empty string on clear.
shortcut	string		A key that focuses the field from anywhere, shown as a hint while empty.
loading	boolean	false	Swaps the search icon for a spinner.
size	"sm" \| "md" \| "lg"	"md"	Height.