Password Input

A password field with a reveal toggle built in.

Import

1import { PasswordInput } from "@yuhuanowo/yunui";

Usage

It forwards every <input> attribute, so it drops into a form exactly where a plain <Input type="password"> would — controlled or uncontrolled, with name, autoComplete, required and the rest.

Notes

• The toggle is a flex sibling of the input, not an absolutely-positioned overlay. Safari mis-placed the absolute version outside the field; the flex row renders identically everywhere.
• The toggle is tabIndex={-1}, so tabbing through a sign-in form goes password → submit, without a detour through a button that only changes what you can see.
• It carries aria-pressed and a label that flips between show/hide — override the English defaults with labels={{ show, hide }}.
• error sets aria-invalid and links the message with aria-describedby.

Props