Password field
Capture sensitive text with a visible reveal control.
pnpm dlx shadcn@latest add @uiarc/password-fieldLive · keyboard ready
- Sign in forms and password confirmation fields.
- Any secret the person may want to check by revealing it.
- Use password-strength when creating or changing a password.
- Use input for non-secret values.
Installation
Add Password field with the shadcn CLI, or copy the source by hand.
pnpm dlx shadcn@latest add @uiarc/password-fieldAdds the component and its local dependencies, and installs motion. First time? Add the @uiarc registry to components.json, or use the full URL:
example.tsx
import { PasswordField } from "@/registry/components/password-field/password-field"; export function SignInPassword() { return ( <PasswordField label="Password" name="password" autoComplete="current-password" required /> );}PasswordField
A password input with a show and hide toggle whose eye icon is slashed by a drawn line.
PropTypeDefaultDescription
labelRequiredstring–Visible label tied to the input.descriptionstring–Helper copy under the field, linked through aria-describedby....propsOmit<InputHTMLAttributes<HTMLInputElement>, "type">–Forwarded to the input, including ref, value, onChange, name, and autoComplete.- EnterorSpace
- On the toggle button, shows or hides the password.
- Toggle is a native button with aria-pressed and a label that switches between "Show password" and "Hide password".
- Description is linked through aria-describedby.
- Set autoComplete to current-password or new-password so password managers work.
- A slash draws across the eye and masks the outline beneath it instead of swapping icons.
- After the first toggle, the value resolves through a short CSS reveal on each change; reduced motion draws the slash instantly.
- The field fills its column; the reveal button sits inside the shell, so it never wraps below the input.
- Hover styles apply only on fine pointers.
- One ResizeObserver per field measures the helper row for its height spring; cheap for a form, but avoid hundreds in a table.
- The reveal effect is a short CSS animation, and the slash is one drawn path.
Notes for AI
Give your coding assistant the Markdown reference instead of screenshots.
- Use for sign in and password confirmation. Use password-strength when the user is creating a new password.
- Uncontrolled by default; pass value and onChange to control it like a native input.
The full library index for assistants is at /llms.txt.