Shadcn.io is not affiliated with official shadcn/ui
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
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.
Dual Icons preview
Installation
Related Components
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
FAQ
Was this page helpful?
Sign in to leave feedback.
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
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