Password Toggle

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

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

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

Import & use
import { Form13 } from "@/components/beste/piece/form13";

<Form13
  label="Current password"
  value="correct-horse-battery"
  defaultVisible={false}
  caps={true}
/>

More Form pieces

View all Form

Notifications

New bookings
Payment received
Weekly summary

A compact settings card listing labeled rows, each with an accent on/off toggle switch.

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

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

Two-factor authenticationRequire a verification code at sign-in.

Setting row with label, supporting copy, and a sliding switch that turns emerald when on.

sk_•••••••••••••••••••••••••••••••••••••••••••3456

Read-only value with an optional mask toggle and a copy button that flips to an emerald Copied state on click.

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

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

4
7
1
9
We sent it to m•••@beste.co just now.

OTP Input

form11

Six-cell verification code field with an active cell that rings and a caret on the next empty slot.