Build · New

Password Input

A password field with a show / hide toggle, and an optional strength meter for new passwords.

Preview

Mirrored is the same English content laid out right to left: it separates a mirroring bug from a translation one.

Installation

SoonInstalling from the registry opens at launch. Until then the command below is what it will be.

npx shadcn@latest add @ritla/password-input

Dependencies it brings: @base-ui/react, @phosphor-icons/react

Usage

import { PasswordInput } from "@/components/ui/password-input";

<PasswordInput label="Password" autoComplete="current-password" />
<PasswordInput label="New password" autoComplete="new-password" strength={score(value)} />

Examples

Strength and states

strength: none, weak, fair, strong. Kanz doesn't score passwords: pass your estimator's result. A sign-in field has no meter.

API reference

PasswordInput

Also takes every <input> prop except type.

Prop	Type	Description
`label`	`ReactNode`	Figma's Label.
`strength`	`"none" \| "weak" \| "fair" \| "strong"`	Figma's Show strength meter and Strength. Leave it out for no meter.
`strengthLabels`	`Partial<Record<Strength, string>>`	Your own meter words. Default: in the page language.
`required / helperText / error / disabled / readOnly`	`…`	As on Input Field.

Accessibility

Keyboard

Keys are written for left-to-right. In right-to-left the arrow keys swap: the one pointing toward the reading direction moves forward.

Key	Action
`Tab`	From the field to the show button.
`EnterSpace`	Shows or hides the password.

ARIA

The toggle is named “Show password” in both states; aria-pressed says whether the password shows.
The meter is role="meter", named “Password strength”, with a text value (“Fair”).
Use autoComplete="current-password" to sign in and "new-password" to sign up, so password managers work.

Arabic and RTL notes

Mirrors

The show button sits at the end of the field (the left).
The meter fills from the inline start (the right), its word at the end.

Does not mirror

The eye icon doesn't mirror.

Numerals: No numbers in the field itself.
Arabic typography: The meter word is label-12, in the page language.

All components ›