Password Strength

Password field with a four-segment meter underneath that shifts color and label with strength.

••••••••••••
Strong
Use 12+ characters, mixed case, and a number or symbol.

Requires shadcn/ui initialized. Run npx shadcn@latest init if you haven't.

Import & use
import { Form12 } from "@/components/beste/piece/form12";

<Form12
  label="Choose a password"
  value="••••••••••••"
  strength="strong"
  hint="Use 12+ characters, mixed case, and a number or symbol."
/>