Search Input

Buttons

Search bar with animated search icon, spinning loading indicator, and AnimatePresence clear button that appears when text is entered.

Loading preview...

Customize

Placeholder

Props

Prop	Type	Default	Description
`value`	`string`	`—`	Current search text.
`onChange`	`(value: string) => void`	`—`	Callback when text changes.
`placeholder`	`string`	`'Search...'`	Placeholder text.
`onClear`	`() => void`	`undefined`	Callback when clear button is clicked.
`loading`	`boolean`	`false`	Show spinning loading indicator instead of search icon.
`className`	`string`	`''`	Additional CSS classes.