Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React Input Group - Dual Icons
A React input group with dual icons showing CreditCard plus Lock icons and Lock plus HelpCircle icons at both start and end positions using shadcn/ui InputGroup
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Inputs need context and help—this React pattern shows dual icon inputs with CreditCard and Lock icons for card number and Lock and HelpCircle icons for password using icons from Lucide React at both inline-start and inline-end positions. Built with shadcn/ui InputGroup, InputGroupInput, and InputGroupAddon components featuring bg-background styling, flex-col gap-4 stacking, type password attribute, align inline-end positioning for right icons, and Card number, Password placeholders. The dual-icon inputs create rich context—perfect for payment forms, security fields, complex inputs, or anywhere combining field type indication with help or security affordance benefits user understanding.
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
Search with Icon
Single icon at end position
Contact Fields with Icons
Email and phone with single icons
Multiple Icons
Three or more icons with inputs
Password with Toggle
Password with Eye icon toggle
Currency Input
Input with DollarSign icon
Standard Input
Basic text input field
Questions you might have
React Input Group - Contact Fields with Icons
A React contact form with email and phone input groups showing MailIcon and PhoneIcon at inline-end positions using shadcn/ui InputGroup components
React Input Group - Multiple Icons
A React input group with multiple icons showing Eye, RefreshCw at end for password and Key, EyeOff, RefreshCw for API key using shadcn/ui InputGroup