Mention Picker
Looks good, @mir
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="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"
}
]}
/>Click-to-edit field that toggles between a plain value with a hover pencil and an input flanked by save and cancel buttons.
Searchable people picker with a focused search input above a list that tints the selected row.
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.
A single-row capture card with a labelled email field, an accent submit button beside it, and fine print underneath.