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."
/>

More Form pieces

View all Form
Mira & Co.
Shown on invoices and in the team directory.

Labeled Input

form1

Standard text field with a label on top and a muted helper line under the control.

Required
Oud Beste
We use this for invoices and tax documents.

Required Field

form4

Labeled input flanked by a red asterisk and a Required pill, plus an explanatory hint below.

•••••••••••••••••••••Caps

Password Toggle

form13

Masked password input with a caps-lock alert pill and an eye button that flips visibility.

Beste v3 ships real-time collaboration, custom themes, and a brand new AI editor. Available to all workspaces starting next Tuesday.
Posted to your workspace feed and email digest.132 / 280

Textarea Counter

form7

Multi-line field with a character counter that turns amber near the limit and rose past it.

mira-studio
mira-studio.beste.co is available.

Success State

form3

Validated field with an emerald ring, check mark, and a confirming note beneath.

532 000 12 34
We'll text a login code if you enable 2FA.

Phone Input

form19

Phone field with a flag and dial-code chooser on the left, then the national number in mono.