pleate.ui
Forms

Password Input

A password field with a show/hide toggle and an optional strength meter, fed by the built-in scorePassword() or your own scorer.
import { PasswordInput, scorePassword } from "pleate/password-input";

Toggle, strength meter, scorer

scorePassword("…") = 0

Props

showStrength

Four bars and a word under the field.

booleandefault false

scorer

Swap in zxcvbn or your own rules.

(password) => 0 | 1 | 2 | 3 | 4default scorePassword

defaultVisible

Start with the text shown.

booleandefault false

labels

Toggle names and strength words.

{ show, hide, strength, scores }

...Input props

Everything Input takes (size, variant, invalid, adornments).

InputProps

Accessibility

  • The toggle is a button with aria-pressed and a name that says what it does; it never submits the form.
  • The strength text is linked to the field (aria-describedby) and announced politely as it changes.
  • scorePassword is a hint for people, not a security check: validate on the server too.