Required Field

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

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

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

Import & use
import { Form4 } from "@/components/beste/piece/form4";

<Form4
  label="Full legal name"
  requiredLabel="Required"
  placeholder="As shown on your ID"
  value="Oud Beste"
  hint="We use this for invoices and tax documents."
/>

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.

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

Autosave Field

form28

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

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.

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.

Consent Row

form33

Legal consent card with a custom checkbox, inline underlined policy links, and a red asterisk when required.

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

Error State

form2

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