Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Input Group examples · Buttons

Password Actions Input Group for React

A password input with a show/hide button and a generate button at its end.

Framework
UI library

The two actions a password field usually needs. The eye button switches the input between password and text, and its label says what it will do; the refresh button is the place to generate a strong password. Both are ghost icon buttons in inline-end addons after the input.

Preview

Preview width

Installation

Sign in to get your install command
Free with an account. It carries your token, so the CLI installs everything in one go.
GoogleGitHub
Use email insteadNo credit card

FAQ

How does the eye button show the password?

A visible flag sets the input's type to text or password, and the icon to an open or crossed-out eye.

What does the toggle say to screen readers?

Its aria-label follows the flag: Show password while hidden, Hide password while shown.

What does the generate button do?

Nothing in the demo. Generate a password in its handler and write it into the field, which then needs to be a controlled input.

In what order do the buttons appear?

In source order: the show/hide addon, then the generate addon, both with align="inline-end" after the input.

Does pressing the eye button move focus?

No. The addon ignores clicks on its buttons, so focus stays on the button and people can toggle again.

Which autocomplete value should the input have?

Add autoComplete="new-password" on a sign-up or change form so password managers offer to save the generated password, or current-password on a sign-in form.

All 39 input group examples