Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React Input Group - Search Button
A React search input with labeled button combining text and icon using secondary variant built with shadcn/ui InputGroup components
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Icon-only search buttons confuse first-time users. This React input group adds a Search button with both text label and SearchIcon using secondary variant and small size. Built with shadcn/ui InputGroup with inline-end alignment and pr-2 padding for visual balance, it's perfect for search forms, filter interfaces, data exploration tools, or any interface where explicit search action helps users understand when results will update versus live filtering.
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
Copy Button
Input with icon-only copy button
Multiple Action Buttons
Input with multiple button controls
Password Toggle
Input with visibility toggle button
Search with Icon
Search input with icon addon only
Search Form
Form with search and filter fields
Standard Input
Basic input without buttons
Questions you might have
React Input Group - Multiple Action Buttons
A React input field with multiple action buttons for info and favorite actions using separate InputGroupAddon components built with shadcn/ui
React Input Group - Password Actions
A React password input with visibility toggle and generate buttons using Eye icons and RefreshCw built with shadcn/ui InputGroup components