Password input

PasswordInput extends TextInput with a show/hide button on the trailing edge. Use it for any field that masks sensitive text — passwords, API keys, recovery phrases, tokens.

Use it for

• Login and signup password fields
• Change-password and reset-password forms
• API key and secret entry
• Any field where the user benefits from being able to verify what they typed without re-typing

For non-sensitive text, use TextInput.

Import

import { PasswordInput } from '@brikdesigns/bds';

Variants

PasswordInput inherits TextInput's full API except type (locked to password / text based on the toggle) and iconAfter (occupied by the visibility button).

Default

<PasswordInput label="Password" />

With validation error

<PasswordInput
  label="Password"
  error="Password must be at least 8 characters"
/>

With helper text

<PasswordInput
  label="New password"
  helperText="At least 8 characters with a mix of letters and numbers"
/>

Sizes

sm, md, lg — same as TextInput.

<PasswordInput label="Password" size="lg" />

When not to use

• Don't use TextInput with type="password" when you mean PasswordInput. The toggle is real, load-bearing UX — users typo passwords and need to verify.
• Don't use PasswordInput for one-time codes. Codes (2FA, magic-link) shouldn't be masked — use TextInput with inputMode="numeric" and autoComplete="one-time-code".

Accessibility

• The toggle button has aria-label="Show password" / "Hide password" reflecting current state.
• aria-pressed on the toggle reflects the current visibility state.
• The input's autocomplete attribute should be set per context — current-password for login, new-password for signup/change.

<PasswordInput label="Password" autoComplete="current-password" />
<PasswordInput label="New password" autoComplete="new-password" />

API

PasswordInput's prop type is Omit<TextInputProps, 'type' | 'iconAfter'> — it accepts everything TextInput accepts except those two.

See TextInput → API for the full prop list.

Related

• TextInput — base component
• Storybook playground