Search Input With Icon

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

Add to your project

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

MCP ID

component:input/search-input-with-icon

Claude*

Codex*

Lovable

Base44

Figma Make

Replit*

Cursor*

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

React

Tailwind CSSLucide

Prop	Type	Description
`onSearch`	`(query: string) => void`	Called when the form is submitted with a search query
`value`	`string`	Controlled search query
`defaultValue`	`string`	Initial query when uncontrolled
`placeholder`	`string`	Text shown before a query is entered
`disabled`	`boolean`	Disables the input and submit action
`className`	`string`	Styles for the outer form

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

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

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 minimalist input spinner for choosing quantities with buttons, typing, or arrow keys.