Copyable Field

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

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

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

Import & use
import { Form32 } from "@/components/beste/piece/form32";

<Form32
  label="API key"
  value="sk_live_51N3kXyZAbCdEf4g5HiJkLmNoPqRsTuVwXyZ123456"
  masked={true}
  visible={false}
  copied={true}
/>

More Form pieces

View all Form
Two-factor authenticationRequire a verification code at sign-in.

Toggle Switch

form21

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

Mira & Co.

Inline Edit

form31

Click-to-edit field that toggles between a plain value with a hover pencil and an input flanked by save and cancel buttons.

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

Success State

form3

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

Notifications

New bookings
Payment received
Weekly summary

Preferences Toggles

form35

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

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

Password Toggle

form13

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

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.