Assignee Picker

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

Assign to

Filter people…

Beste Sözen

Andrea Kim

Noor Ahmed

Jules Park

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

Import & use

import { Form20 } from "@/components/beste/piece/form20";

<Form20
  label="Assign to"
  query=""
  people={[
    {
      "name": "Beste Sözen",
      "initials": "BS",
      "imageSrc": "https://oud.pics/sm/l/gmail.jpeg",
      "alt": "Beste Sözen",
      "selected": true
    },
    {
      "name": "Andrea Kim",
      "initials": "AK",
      "imageSrc": "https://oud.pics/sm/l/stripe.jpeg",
      "alt": "Andrea Kim",
      "selected": true
    },
    {
      "name": "Noor Ahmed",
      "initials": "NA",
      "imageSrc": "https://oud.pics/sm/l/notion.png",
      "alt": "Noor Ahmed"
    },
    {
      "name": "Jules Park",
      "initials": "JP",
      "imageSrc": "https://oud.pics/sm/l/slack.svg",
      "alt": "Jules Park"
    }
  ]}
/>