PasswordInput

<PasswordInput> is <Input type="password"> plus a reveal toggle. The browser’s built-in toggle (Edge / IE) is hidden so we control the affordance.

import from "@na/ui/components/password-input" ▶ Open in Storybook packages/ui/src/components/password-input.tsx

When to use

• Sign-in / sign-up forms.
• Anywhere a user types a password or secret.

Don’t use PasswordInput for: API tokens (the user typically pastes; a copy-on-click code field is better), OTP codes (OTPInput — planned).

Default

Password

Show password

<Label htmlFor="pw">Password</Label>
<PasswordInput id="pw" autoComplete="current-password" />

API

Prop	Type	Default	Description
autoComplete	string	—	Pass "current-password" for sign-in, "new-password" for sign-up. Browsers act on this hint.
...rest	InputHTMLAttributes	—	All native input attributes — placeholder, value, onChange, disabled, name, etc.

Design guidelines

✓ Do

• Set autoComplete="current-password" on sign-in and "new-password" on sign-up. Password managers depend on this.
• Pair with FormError when validation fails — generic "wrong password" only, never echo what was entered.
• For sign-up, use the planned password-strength helper (TBD) or at minimum hint the rule before submit.

✗ Don't

• Use a separate "Show password" checkbox. The reveal toggle inside the input is the standard.
• Disable paste. It breaks password managers and is security theater.
• Echo the password back in error messages or in the placeholder.

Accessibility

• The reveal toggle is a real <Button> with an sr-only label (“Show password” / “Hide password”).
• Native <input type="password"> semantics — works with password managers.
• The browser-vendor toggle (::-ms-reveal) is hidden via CSS so we own the affordance.

Related

• Input — For non-secret single-line text.
• OTPInput — One-time-code entry (planned).
• Form — Validation integration.

▶ Open PasswordInput stories in Storybook