PasswordInput

Password field with reveal toggle + 4-bar strength meter. The built-in scorer checks length, mixed case, digits, and symbols — override with your own strength() for stricter or zxcvbn-style policies.

Type a password — the meter scores it 0–4. Click the eye to toggle visibility.

Usage

import { PasswordInput } from '@bwo-ui/react';

<PasswordInput
  placeholder="At least 8 characters"
  onChange={(e) => setPassword(e.target.value)}
/>

// Custom scorer — return { score: 0..4, label }
<PasswordInput
  strength={(v) => myZxcvbn(v)}
  error={errors.password}
/>

Props

Prop	Type	Default	Description
`toggleable`	`boolean`	`true`	Show the eye reveal button.
`meter`	`boolean`	`true`	Render the 4-bar strength meter.
`strength`	`(value: string) => { score: 0..4; label: string }`	—	Custom strength function.
`error`	`string`	—	Error message rendered below the field.