Labeled Input

Standard text field with a label on top and a muted helper line under the control.

Mira & Co.
Shown on invoices and in the team directory.

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

Import & use
import { Form1 } from "@/components/beste/piece/form1";

<Form1
  label="Workspace name"
  placeholder="Beste Studio"
  value="Mira & Co."
  helper="Shown on invoices and in the team directory."
/>

More Form pieces

View all Form
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.

Mira
Beste

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

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.

532 000 12 34
We'll text a login code if you enable 2FA.

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

Mira & Co.

Click-to-edit field that toggles between a plain value with a hover pencil and an input flanked by save and cancel buttons.

mira@beste.co

Focused input with the label shrunk to the top-left corner and a blinking caret after the value.