PlumUI

Password Input

A password field with a hand-drawn eye toggle, a strength meter that fills segment by segment, and a live checklist.

Inputs

Playground

Tweak the props, the preview and the code follow.

Password strengthFair
Props
<PasswordInput placeholder="Password" showStrength />

Installation

npx @plumsydev/plum-ui add password-input

Also pulls in input automatically.

Usage

import { PasswordInput } from "@/components/ui/password-input"
<PasswordInput showStrength requirements />

Examples

Strength & requirements

Password strength
  • At least 8 characters
  • Upper and lowercase letters
  • A number
  • A symbol

Sign up form

Use the exported getStrength() to gate the submit button.

Create your account

The button wakes up once the password is good enough.

Password strength

Use 8+ characters with a mix of letters, numbers and symbols.

API Reference

PasswordInput

Extends Input, except type.

PropTypeDefault
showStrength

Show the four-segment strength meter.

booleanfalse
requirements

Show a checklist. Pass your own rules or `true` for the defaults.

boolean | { label: string; test: (v: string) => boolean }[]false
size

Height of the field.

"sm" | "default" | "lg""default"
containerClassName

Classes for the wrapper.

string—

getStrength

getStrength(value, rules?) returns a score from 0 to 4.

Notes

  • The toggle sets aria-pressed and swaps its label between Show and Hide password.
PreviousPaginationNextPopover