Browse components
React Search BarFree
Accessible React search bar with highlighted results, keyboard navigation, and polished loading and empty states.
Add to your project
Checking access...
Works with your AI tools
Claude*
Codex*
Lovable
Base44
Figma Make
Replit*
Cursor*
v0* Compatible with most projects that use the default React/Next.js framework.
Built With
React
Tailwind CSSSolar IconsProps
| 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 |
More Input Components
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.
15000
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.