shadcn.io is an independent project built on shadcn/ui
An eye button at the end switches the field between masked and visible. Its name flips between Show password and Hide password. A refresh button sits beside it and does nothing until you write a password into the field.
Use it on a sign-up where people both reveal and generate a password. Showing and hiding alone is Password Input. In React, Base UI does not invent a password for the refresh button.
Installation
Anatomy
Usage
<InputGroup className="w-full max-w-sm bg-background">
<InputGroupInput
aria-label="Password"
placeholder="Enter password"
type={visible ? "text" : "password"}
/>
<InputGroupAddon align="inline-end">
<InputGroupButton
aria-label={visible ? "Hide password" : "Show password"}
onClick={handleVisibilityToggle}
size="icon-xs"
variant="ghost"
>
{visible ? (
<EyeOffIcon aria-hidden="true" />
) : (
<EyeIcon aria-hidden="true" />
)}
</InputGroupButton>
</InputGroupAddon>
<InputGroupAddon align="inline-end">
<InputGroupButton
aria-label="Generate password"
size="icon-xs"
variant="ghost"
>
<RefreshCwIcon aria-hidden="true" />
</InputGroupButton>
</InputGroupAddon>
</InputGroup>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.
API Reference
Input Group
Sets aria-label="Password", placeholder="Enter password", type={visible ? "text" : "password"}, align="inline-end", aria-label={visible ? "Hide password" : "Show password"} and onClick={handleVisibilityToggle}. The rest is on the Input Group page.
