Tag Input

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

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

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

Import & use
import { Form14 } from "@/components/beste/piece/form14";

<Form14
  label="Topics"
  tags={[
    "design systems",
    "typography",
    "motion"
  ]}
  placeholder="Type and press ↵"
  hint="Up to 8 tags. Use hyphens instead of spaces."
/>

More Form pieces

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

Mira & Co.

Inline Edit

form31

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

https://docs.beste.co

Affixed Input

form5

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

Mira
Beste

Input Row

form8

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

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

Mention Picker

form15

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

Friendly
FormalNeutralFriendlyPlayful

Tick Slider

form25

Labeled-tick slider with a primary fill, a value pill in the header, and the active tick bolded.