Error State

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

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

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

Import & use
import { Form2 } from "@/components/beste/piece/form2";

<Form2
  label="Work email"
  value="mira@acme"
  error="Enter a valid email address, including the domain."
/>

More Form pieces

View all Form
mira-studio
mira-studio.beste.co is available.

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

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.

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

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

lara@beste.conils@beste.coom@acmeSeparate with commas
om@acme is missing the domain ending.

Bulk invite field that tokenizes addresses into chips and flags invalid ones with a rose tint.

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.

Saved
Beste Sözen
Auto-saves as you type.Saved just now

Inline field with an autosave status pill that shifts between saved, saving, and unsaved dot colors.