OTP Input

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

Enter the 6-digit code

We sent it to m•••@beste.co just now.

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

Import & use

import { Form11 } from "@/components/beste/piece/form11";

<Form11
  label="Enter the 6-digit code"
  digits={[
    "4",
    "7",
    "1",
    "9",
    "",
    ""
  ]}
  activeIndex={4}
  hint="We sent it to m•••@beste.co just now."
/>

More Form pieces

View all Form

Mobile number

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.

Full legal nameRequired

Oud Beste

We use this for invoices and tax documents.

Required Field

form4

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

Workspace name

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.

Subdomain

mira-studio

mira-studio.beste.co is available.

Success State

form3

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

First name

Mira

Last name

Beste

Input Row

form8

Two inputs arranged side by side on a responsive grid for first/last names and paired fields.

Work email

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.