Mention Picker

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

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

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

Import & use
import { Form15 } from "@/components/beste/piece/form15";

<Form15
  label="Mention a teammate"
  leading="Looks good, "
  query="mir"
  suggestions={[
    {
      "name": "Beste Sözen",
      "handle": "mira",
      "initials": "BS",
      "imageSrc": "https://oud.pics/sm/l/gmail.jpeg",
      "alt": "Beste Sözen"
    },
    {
      "name": "Miranda Chase",
      "handle": "miranda",
      "initials": "MC",
      "imageSrc": "https://oud.pics/sm/l/stripe.jpeg",
      "alt": "Miranda Chase"
    },
    {
      "name": "Mirko Petrov",
      "handle": "mirko",
      "initials": "MP",
      "imageSrc": "https://oud.pics/sm/l/notion.png",
      "alt": "Mirko Petrov"
    }
  ]}
/>

More Form pieces

View all Form
Start typing to search
Beste Sözen
Beste SözenDesign lead
Mirko Petrov
Mirko PetrovEngineer
Noor Ahmed
Noor AhmedProduct

Contact Picker

form29

Searchable people picker with a focused search input above a list that tints the selected row.

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.

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.

Saved
Beste Sözen
Auto-saves as you type.Saved just now

Autosave Field

form28

Inline field with an autosave status pill that shifts between saved, saving, and unsaved dot colors.

Required
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.

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.