Mention Picker
Looks good, @ni
Inline @-mention typed into a field, paired with an avatar-led autocomplete dropdown beneath.
The import and the props worth knowing about, in one place.
import { Form15 } from "@/components/beste/piece/form15";
<Form15
label="Mention a teammate"
leading="Looks good, "
query="ni"
suggestions={[
{
"name": "Nils Frahm",
"handle": "nils",
"initials": "NF",
"imageSrc": "https://oud.pics/sm/l/gmail.jpeg",
"alt": "Nils Frahm"
},
{
"name": "Nina Simone",
"handle": "nina",
"initials": "NS",
"imageSrc": "https://oud.pics/sm/l/stripe.jpeg",
"alt": "Nina Simone"
},
{
"name": "Nico Muhly",
"handle": "nico",
"initials": "NM",
"imageSrc": "https://oud.pics/sm/l/notion.png",
"alt": "Nico Muhly"
}
]}
bordered={false}
/>