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 Vue, Ark UI does not remember whether the password is visible.
Installation
Anatomy
Usage
<Field class="w-full max-w-sm">
<FieldLabel>Password</FieldLabel>
<InputGroup class="bg-background">
<InputGroupInput
placeholder="Enter your password"
:type='showPassword ? "text" : "password"'
/>
<InputGroupAddon align="inline-end">
<InputGroupButton
:aria-label='showPassword ? "Hide password" : "Show password"'
@click="handleToggle"
size="icon-xs"
>
<EyeOffIcon v-if="showPassword" aria-hidden="true" />
<EyeIcon v-else 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
No extra props in this demo. The rest is on the Field page.
Input Group
Sets placeholder="Enter your password", type="showPassword ? text : password", align="inline-end", aria-label="showPassword ? Hide password : Show password", click="handleToggle" and size="icon-xs". The rest is on the Input Group page.
