React Search Bar

Accessible React search bar with highlighted results, keyboard navigation, and polished loading and empty states.

Add to your project

Connect Uniquel to your coding agent before using the component ID.

MCP ID

component:input/react-search-bar

Claude*

Codex*

Lovable

Base44

Figma Make

Replit*

Cursor*

* Compatible with most projects that use the default React/Next.js framework.

React

Tailwind CSSSolar Icons

Prop	Type	Description
`results`	`SearchResult[]`	Results displayed in the listbox
`value`	`string`	Controlled search query
`defaultValue`	`string`	Initial uncontrolled query
`onQueryChange`	`(query: string) => void`	Called whenever the query changes
`onSelect`	`(result: SearchResult) => void`	Called when a result is selected
`loading`	`boolean`	Show the loading state
`emptyText`	`string`	Message shown when no results exist
`className`	`string`	Styles for the outer wrapper

Labeled React number input with an optional unit, stacked controls, bounds, and empty values.

A six-digit PIN input with paste support and keyboard navigation for verification codes.

1500

A vertical range input with configurable value labels, thumb shapes, colors, and height.

A premium search input with a focused state and an icon that becomes a submit action as you type.

A minimalist input spinner for choosing quantities with buttons, typing, or arrow keys.