Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Input examples · Types

Password with Toggle Input for React

A password field with a button that shows or hides what was typed.

Framework
UI library

Typing a password blind leads to typos. This example adds an eye button at the end of the password field: pressing it switches the input between password and text, and the icon changes to match. Use it on sign-in, sign-up and password-change forms.

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 button show the password?

Whether the password is visible lives in state. The input's type is text while it's visible and password otherwise, and the button flips the state.

How is the button placed inside the field?

It's an InputGroupButton in an InputGroupAddon with align inline-end, after the InputGroupInput. The group draws one border around both, so the button sits inside the field.

Which icon shows when?

EyeIcon while the password is hidden, EyeOffIcon while it's shown, both with aria-hidden.

How do screen readers know what the button does?

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

Is there a ready-made password field?

Yes. Password Input has the toggle built in. This example builds it from an input group, for when you want to add more to the field.

How is Password tied to the field?

Clicking the label focuses the field, and screen readers announce it with the field. FieldLabel sets htmlFor to password-toggle, the input's id.

All 24 input examples