PasswordInput

When to use

PasswordInput is for passwords in sign-in, change-password and sign-up forms. When a new password is created, it shows the requirements and strength.

When not to use

• For a one-time code: use OtpInput.
• For a secret key shown once or a masked value: use MaskedValue.

Anatomy

New password* required

• At least 12 characters, not met
• One capital letter, met
• One digit, met

Password strength: fair

LightDark

Copy code

import { PasswordInput, Provider } from '@bigbang/ui';

const rules = [
  { id: 'length', label: 'At least 12 characters', test: (value: string) => value.length >= 12 },
  { id: 'upper', label: 'One capital letter', test: (value: string) => /[A-Z]/.test(value) },
  { id: 'digit', label: 'One digit', test: (value: string) => /\d/.test(value) },
];

export default function NewPassword() {
  return (
    <Provider locale="en-GB">
      <PasswordInput className="max-w-sm" label="New password" autoComplete="new-password" rules={rules} showStrength defaultValue="Sample1" required />
    </Provider>
  );
}

1. Label: The name of the field.
2. Box and eye button: The button sits at the end of the box, 24, 28 or 32 px.
3. Caps Lock warning: Appears under the field while Caps Lock is on.
4. Rule list: A status icon next to each rule; screen readers read “met” or “not met”.
5. Strength bar: Three segments and a text level (weak, fair, strong).

Behaviour

• The eye button switches type between password and text; focus stays on the button.
• Paste and password managers are never blocked; autoComplete is required.
• Spell checking and auto-capitalisation are off.
• Rule progress is announced once, about 800 ms after the user stops typing.
• The Caps Lock warning disappears when focus leaves.

Guidelines

• Use current-password for sign-in and new-password for sign-up and change.
• Show the requirements up front, so users know what is needed before they get an error.
• Do not use the strength bar as a gate on its own; requirements are stated as rules.
• Rely on the eye button instead of a repeat field; a repeat field adds risk of mistakes.

Content

• Rules are short noun phrases: “At least 12 characters”, “One digit”.
• The error text says what is missing.

Turkish	English
Şifreyi göster	Show password
Büyük harf kilidi açık	Caps Lock is on
{met} / {total} koşul karşılandı	{met} of {total} requirements met
Şifre gücü: zayıf / orta / güçlü	Password strength: weak / fair / strong

Related components

• TextInput: A plain text field.
• OtpInput: A one-time code.
• Meter: The level of a measure.