Search Input

A search-typed input with built-in clear button, debounced onSearch callback, and a loading state. Two convenience variants ship for common patterns: CommandSearch (with a Cmd+K shortcut hint) and AutocompleteSearch (dropdown with grouping).

Command Search

A search bar that displays a keyboard shortcut and triggers when the user presses it from anywhere on the page.

⌘k

Autocomplete Search

A search bar with a dropdown of suggestions. Supports grouping, custom filter functions, and full keyboard navigation.

Installation

Props (SearchInput)

Prop	Type	Default	Description
`value`	`string`	—	Controlled value.
`onChange`	`(value: string) => void`	—	Called as the user types.
`onSearch`	`(value: string) => void`	—	Called after the debounce window.
`onClear`	`() => void`	—	Called when the user clicks the clear button.
`loading`	`boolean`	`false`	Show a Spinner instead of the search icon.
`showClearButton`	`boolean`	`true`	Show an X button when there's a value.
`searchOnEnter`	`boolean`	`false`	Only call onSearch on Enter (skip the debounce).
`debounceMs`	`number`	`300`	Debounce window for onSearch.