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

New here? Read the installation guide.

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

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

Mira & Co.

Inline Edit

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

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

One email when we open the doors. Nothing else.

Inline Subscribe Row

A single-row capture card with a labelled email field, an accent submit button beside it, and fine print underneath.

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

Autosave Field

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

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.

Markdown version