Pieces/Form(40)

Form pieces from Beste UI, drop-in widgets built with shadcn/ui and Tailwind CSS.

DesignPolishGood first issueAdd label

Multi Select

Picker that keeps chosen options as removable violet pills next to a chevron to open the list.

Looks good, @mir
Beste Sözen
Beste Sözen@mira
Miranda Chase
Miranda Chase@miranda
Mirko Petrov
Mirko Petrov@mirko

Mention Picker

Inline @-mention typed into a field, paired with an avatar-led autocomplete dropdown beneath.

design systemstypographymotionType and press ↵
Up to 8 tags. Use hyphens instead of spaces.

Tag Input

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

•••••••••••••••••••••Caps

Password Toggle

Masked password input with a caps-lock alert pill and an eye button that flips visibility.

••••••••••••
Strong
Use 12+ characters, mixed case, and a number or symbol.

Password Strength

Password field with a four-segment meter underneath that shifts color and label with strength.

4
7
1
9
We sent it to m•••@beste.co just now.

OTP Input

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

lara@beste.co
They'll get an email with a link that expires in 72 hours.

Input With Action

Joined input and dark action button sharing a border, typical for invite, subscribe, or apply flows.

Billing addressUsed on invoices and receipts.
221B Riverside Ave
Istanbul
34381

Fieldset Group

Bordered card bundling a legend, description, and a short stack of related inputs.

Mira
Beste

Input Row

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

Beste v3 ships real-time collaboration, custom themes, and a brand new AI editor. Available to all workspaces starting next Tuesday.
Posted to your workspace feed and email digest.132 / 280

Textarea Counter

Multi-line field with a character counter that turns amber near the limit and rose past it.

mira@beste.co

Floating Label

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

https://docs.beste.co

Affixed Input

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

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

Required Field

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

mira-studio
mira-studio.beste.co is available.

Success State

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

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

Error State

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

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

Labeled Input

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

Markdown version