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 Svelte, Ark UI does not invent a password for the refresh button.
Installation
Anatomy
Usage
<InputGroup class="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">{#if visible}<EyeOffIcon aria-hidden="true" />{:else}<EyeIcon aria-hidden="true" />{/if}</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.
