Search Input

Basic

A fully-featured search field with built-in debounce, animated clear button, loading spinner, keyboard shortcut hint, and filled variant.

<SearchInput placeholder="Search components..." /><SearchInput placeholder="Search with shortcut..." shortcut="K" />

Installation

Install the component via the CLI in one command.

npx @work-rjkashyap/unified-ui add search-input

pnpm dlx @work-rjkashyap/unified-ui add search-input

npx @work-rjkashyap/unified-ui add search-input

bunx @work-rjkashyap/unified-ui add search-input

Or install the full package

Use this approach if you prefer to install the entire design system as a dependency instead of copying individual components.

npm install @work-rjkashyap/unified-ui

pnpm add @work-rjkashyap/unified-ui

yarn add @work-rjkashyap/unified-ui

bun add @work-rjkashyap/unified-ui

Anatomy

import { SearchInput } from "@work-rjkashyap/unified-ui";

Basic Usage

Drop SearchInput anywhere you need a search field. It manages its own internal value by default (uncontrolled).

<SearchInput placeholder="Search..." />

Sizes

<SearchInput placeholder="Small" size="sm" /><SearchInput placeholder="Medium (default)" size="md" /><SearchInput placeholder="Large" size="lg" />

Variants

<SearchInput placeholder="Default variant" variant="default" /><SearchInput placeholder="Filled variant" variant="filled" />

Debounced Change

Use onDebouncedChange for expensive operations like API calls. The callback fires after the user stops typing for debounce milliseconds (default 300ms).

<SearchInputplaceholder="Type to search..."debounce={400}onDebouncedChange={(value) => fetchResults(value)}/>

<SearchInput
	placeholder="Search users..."
	debounce={300}
	onDebouncedChange={async (query) => {
		const results = await searchUsers(query);
		setResults(results);
	}}
/>

Loading State

Show a spinner instead of the search icon while results are loading.

<SearchInput placeholder="Fetching results..." loading />

const [loading, setLoading] = useState(false);
const [results, setResults] = useState([]);

<SearchInput
	placeholder="Search..."
	loading={loading}
	onDebouncedChange={async (query) => {
		setLoading(true);
		const data = await search(query);
		setResults(data);
		setLoading(false);
	}}
/>;

Keyboard Shortcut Hint

Pass shortcut to display a keyboard hint badge in the trailing area when the input is empty. The component also registers a global Ctrl+<shortcut> / ⌘+<shortcut> listener that focuses the input.

{/* Press ⌘K or Ctrl+K to focus */}<SearchInput placeholder="Search..." shortcut="K" />{/* Press ⌘/ or Ctrl+/ to focus */}<SearchInput placeholder="Quick find..." shortcut="/" variant="filled" />

Clear Button

By default, a clear button appears (with a fade animation) when the input has a value. Set showClear={false} to disable it.

{/* Clear button enabled (default) */}<SearchInput placeholder="With clear button" />{/* Clear button disabled */}<SearchInput placeholder="Without clear button" showClear={false} />

Controlled

Use value and onChange for full programmatic control.

const [query, setQuery] = useState("");

<SearchInput
	value={query}
	onChange={setQuery}
	placeholder="Search..."
	onDebouncedChange={fetchResults}
/>;

In a Toolbar

A common pattern is to place SearchInput alongside filters in a table toolbar.

<div className="flex items-center gap-2">
	<SearchInput
		placeholder="Search users..."
		className="max-w-xs"
		onDebouncedChange={setGlobalFilter}
	/>
	<Select value={statusFilter} onValueChange={setStatusFilter}>
		<SelectTrigger className="w-36">
			<SelectValue placeholder="Status" />
		</SelectTrigger>
		<SelectContent>
			<SelectItem value="all">All</SelectItem>
			<SelectItem value="active">Active</SelectItem>
			<SelectItem value="inactive">Inactive</SelectItem>
		</SelectContent>
	</Select>
</div>

In a Command Palette Trigger

<button type="button" onClick={() => setOpen(true)} className="w-full">
	<SearchInput
		placeholder="Search or jump to..."
		shortcut="K"
		variant="filled"
		className="pointer-events-none"
		readOnly
	/>
</button>

Props

All standard <input> HTML attributes (except onChange and size) are also forwarded to the underlying input element.

Motion

• Clear button — Fades in and out using the fadeInFast preset (opacity 0 → 1, 120ms) via AnimatePresence when the input gains or loses a value.
• Animation respects prefers-reduced-motion via useReducedMotion().

Accessibility

• Renders a native <input type="search"> element — compatible with all assistive technologies.
• The clear button has aria-label="Clear search".
• The loading spinner is aria-hidden="true".
• The shortcut badge is aria-hidden and purely decorative; the global keyboard shortcut handles focus programmatically.
• Native browser search cancel button is hidden via CSS to avoid duplication with the custom clear button.
• disabled prop is forwarded to the underlying input.

Design Tokens