Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
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
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Users hate retyping passwords when they mistype one character. This React password input adds visibility toggle with EyeIcon and EyeOffIcon switching between password and text types plus RefreshCwIcon for password generation. Built with shadcn/ui InputGroup with separate InputGroupAddon components and ghost variant buttons, it's perfect for registration forms, password creation flows, account settings, or any password field where users need to verify input or generate secure passwords without leaving the field.
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
Copy Button
Input with single copy button
Multiple Action Buttons
Input with multiple button controls
Search Button
Input with search action button
Password Strength Validation
Password with validation rules
Required Field
Input with required indicator
Standard Input
Basic input without buttons
Questions you might have
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
React Input Group - Textarea with Actions
A React textarea with submit button positioned at bottom-right using block-end alignment and ml-auto built with shadcn/ui InputGroup