Affixed Input

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

Custom domain

https://docs.beste.co

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

Import & use

import { Form5 } from "@/components/beste/piece/form5";

<Form5
  label="Custom domain"
  prefix="https://"
  suffix=".beste.co"
  value="docs"
  placeholder="your-subdomain"
/>

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.

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.

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.

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.

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.