Forms

PasswordInput

A password field with Show and Hide, and live requirements.

import { PasswordInput } from "@flinbu/seed";

Creating a password

New password

At least 12 characters, not yet
A number, done
Not your email, done

import { Field, PasswordInput } from "@flinbu/seed";

<div className="w-full max-w-xs">
  <Field label="New password">
    <PasswordInput autoComplete="new-password" defaultValue="seedling1" requirements={[
      { label: "At least 12 characters", test: (v) => v.length >= 12 },
      { label: "A number", test: (v) => /\d/.test(v) },
      { label: "Not your email", test: (v) => !!v && !v.includes("@") },
    ]} />
  </Field>
</div>

Use it for

Sign-in and new passwords.

Props

Prop	Type	Default	Description
`requirements`	`{ label, test(value) }[]`	–	Rules, never errors.
`autoComplete`	`string`	`'current-password'`	new-password when creating one.
`…`	`InputProps`	–	Everything Input takes.

Accessibility

Show is a pressed/unpressed button named Show password; requirements are linked to the field and say done or not yet.