Phone Input

Phone field with a flag and dial-code chooser on the left, then the national number in mono.

Mobile number

532 000 12 34

We'll text a login code if you enable 2FA.

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

Import & use

import { Form19 } from "@/components/beste/piece/form19";

<Form19
  label="Mobile number"
  flag="🇹🇷"
  dialCode="+90"
  value="532 000 12 34"
  hint="We'll text a login code if you enable 2FA."
/>

More Form pieces

View all Form

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.

Enter the 6-digit code

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.

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.

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.

Topics

design systemstypographymotionType and press ↵

Up to 8 tags. Use hyphens instead of spaces.

Tag Input

form14

Free-form tagger that wraps committed tokens as removable chips and shows a placeholder slot at the end.

Custom domain

https://docs.beste.co

Affixed Input

form5

Input that sandwiches a value between a muted prefix and suffix for URLs, currencies, or domains.