Contact Picker

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

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

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

Import & use
import { Form29 } from "@/components/beste/piece/form29";

<Form29
  label="Primary contact"
  selectedHint="Start typing to search"
  items={[
    {
      "name": "Beste Sözen",
      "hint": "Design lead",
      "initial": "M",
      "imageSrc": "https://oud.pics/sm/l/gmail.jpeg",
      "alt": "Beste Sözen"
    },
    {
      "name": "Mirko Petrov",
      "hint": "Engineer",
      "initial": "M",
      "imageSrc": "https://oud.pics/sm/l/stripe.jpeg",
      "alt": "Mirko Petrov"
    },
    {
      "name": "Noor Ahmed",
      "hint": "Product",
      "initial": "N",
      "imageSrc": "https://oud.pics/sm/l/notion.png",
      "alt": "Noor Ahmed"
    }
  ]}
  selectedIndex={0}
/>

More Form pieces

View all Form
Assign to
Filter people…
Beste Sözen
Beste Sözen
Andrea Kim
Andrea Kim
Noor Ahmed
Noor Ahmed
Jules Park
Jules Park

Assignee Picker

form20

Popover with a header label, filter bar, and a selectable person list that checks chosen rows.

DesignPolishGood first issueAdd label

Multi Select

form16

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

Mira Studio
acm
Beste StudioDesign · 12 members
BesteworksEngineering · 34 members
Beste LabsResearch · 6 members

Combobox

form18

Searchable single-select with a query bar above a filtered list and a check for the active row.

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.

Delivery speed
Standard3–5 business days · Free
ExpressNext business day · $8
Same-dayOrder by noon · $14

Radio Group

form23

Radio-card list where the selected row picks up a primary ring and a tinted background.

Notifications

New bookings
Payment received
Weekly summary

Preferences Toggles

form35

A compact settings card listing labeled rows, each with an accent on/off toggle switch.