Password Input

InstallCopy Anchor Link

pnpm exec vegastack-design verify password-input

pnpm dlx shadcn@4.21.0 add @vegastack/password-input

UsageCopy Anchor Link

import { Field, FieldLabel } from "@/components/ui/field";
import { PasswordInput } from "@/components/ui/password-input";

<Field>
  <FieldLabel htmlFor="password">Password</FieldLabel>
  <PasswordInput
    id="password"
    name="password"
    autoComplete="current-password"
  />
</Field>;

PasswordInput composes InputGroup with one icon button that switches the field between password and text. className styles the group root; the ref and every native input attribute — id, name, autoComplete, aria-invalid — target the inner HTMLInputElement.

ExamplesCopy Anchor Link

StatesCopy Anchor Link

Descriptions, errors and the disabled state come from Field and the shared InputGroup contract.

Inside a FieldCopy Anchor Link

Inside a Field the inner <input> takes its label, the rendered description and error ids, and aria-invalid from the Field — no id, htmlFor or aria-describedby to keep in sync.

API ReferenceCopy Anchor Link

PasswordInputCopy Anchor Link

AccessibilityCopy Anchor Link

• Name the field with a FieldLabel, aria-label, or aria-labelledby.
• The toggle is a type="button" icon button, so it never submits the form. It is named Show password or Hide password and reports its state with aria-pressed; override the names with showLabel and hideLabel.
• Tab moves from the input to the toggle; Enter or Space toggles it.

Do / Don'tCopy Anchor Link