shadcn.io is an independent project built on shadcn/ui
A Password label and a masked field, with an eye button at the end. The button is named Show password. Pressing it reveals the text and swaps the icon.
Use it on sign-in and password change so people can check typos. Rules for a strong password belong on the Field, not in the eye icon. In React, Base UI does not remember whether the password is visible.
Installation
Anatomy
Usage
<Field className="w-full max-w-sm">
<FieldLabel htmlFor="password-toggle">Password</FieldLabel>
<InputGroup className="bg-background">
<InputGroupInput
id="password-toggle"
placeholder="Enter your password"
type={showPassword ? "text" : "password"}
/>
<InputGroupAddon align="inline-end">
<InputGroupButton
aria-label={showPassword ? "Hide password" : "Show password"}
onClick={handleToggle}
size="icon-xs"
>
{showPassword ? (
<EyeOffIcon aria-hidden="true" />
) : (
<EyeIcon aria-hidden="true" />
)}
</InputGroupButton>
</InputGroupAddon>
</InputGroup>
</Field>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.
API Reference
Field
Sets htmlFor="password-toggle". The rest is on the Field page.
Input Group
Sets id="password-toggle", placeholder="Enter your password", type={showPassword ? "text" : "password"}, align="inline-end", aria-label={showPassword ? "Hide password" : "Show password"} and onClick={handleToggle}. The rest is on the Input Group page.
