Success State

mira-studio
mira-studio.beste.co is available.
About this piece

Success State

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

Usage

The import and the props worth knowing about, in one place.

import { Form3 } from "@/components/beste/piece/form3";

<Form3
  label="Subdomain"
  value="mira-studio"
  confirmation="mira-studio.beste.co is available."
/>

More Form pieces

View all Form
mira@acme
Enter a valid email address, including the domain.

Error State

Invalid field with a rose ring, alert icon inside the input, and a descriptive error under it.

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

OTP Input

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

Create your workspace

Form Autofill

Name, email and company get typed in one after another behind a caret, then the Continue button spins through a loading state and morphs into an emerald check that says you're in.

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

Required Field

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

sk_••••••••••••••••••••••••••••0000

Copyable Field

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

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

Password Strength

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