PasswordInput

The example below loads live from Storybook; open it there to use the controls.

Live example, StorybookOpen in Storybook

Default

The eye button shows and hides the value; its pressed state is reported with aria-pressed.

Password

LightDark

Copy code

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

export default function Default() {
  return (
    <Provider locale="en-GB">
      <PasswordInput label="Password" autoComplete="current-password" className="max-w-sm" />
    </Provider>
  );
}

States

With a description, invalid and disabled.

Password

Help text goes here.

Password

The password does not meet the requirements.

Password

LightDark

Copy code

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

export default function States() {
  return (
    <Provider locale="en-GB">
      <div className="flex max-w-sm flex-col gap-lg">
        <PasswordInput label="Password" autoComplete="current-password" description="Help text goes here." />
        <PasswordInput label="Password" autoComplete="current-password" defaultValue="short" error="The password does not meet the requirements." />
        <PasswordInput label="Password" autoComplete="current-password" defaultValue="sample-value-1" disabled />
      </div>
    </Provider>
  );
}

New password

rules shows a checklist under the field and links it to the field; a met rule turns green. showStrength adds a three-step strength bar.

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>
  );
}

Light and dark mode

Rule and strength colours are semantic status tokens.

Light

New password* required

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

Password strength: fair

Dark

New password* required

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

Password strength: fair

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>
  );
}