Search Input

Search field. Free, MIT · Forms and input › Text

Search field: icon, clear button, Escape to clear, Enter to search, optional debounce and ⌘K-style hotkey.

Installation

npx valyro-cli@latest add search-input

npx shadcn@latest add https://valyro.xyz/r/search-input.json

npm install valyro-ui

import 'valyro-ui/styles.css';
import { SearchInput } from 'valyro-ui';

Prop	Type	Default
`value`	`string`		Controlled `value`; use with `onValueChange`.
`defaultValue`	`string`		Initial `value` when uncontrolled.
`onValueChange`	`(value: string) => void`		Called as the text changes — after `debounce` ms of no typing when set; clearing is reported immediately.
`debounce`	`number`	`0`	Quiet period before `onValueChange` fires, ms; 0 reports every keystroke.
`onSearch`	`(value: string) => void`		Called on Enter with the current text.
`shortcut`	`string`		Keyboard hint shown in the field, e.g. "mod+k" (⌘K on Apple, Ctrl K elsewhere) or "/".
`globalShortcut`	`boolean`	`false`	Also focus the field when `shortcut` is pressed anywhere on the page.
`loading`	`boolean`	`false`	Swaps the search icon for a spinner and sets aria-busy on the input.
`size`	`'sm' \| 'md' \| 'lg'`		Field height and text size.
`rightIcon`	`ReactNode`		Icon inside the field, after the text and the clear/password buttons.
`invalid`	`boolean`		Error border and aria-invalid on the input (an explicit `aria-invalid` wins).
`labels`	`Partial<TextInputLabels>`		Accessible names of the clear and show/hide password buttons.