Contact Picker
Start typing to search
Nils FrahmDesign lead
Hania RaniEngineer
Ólafur ArnaldsProduct
Searchable people picker with a focused search input above a list that tints the selected row.
The import and the props worth knowing about, in one place.
import { Form29 } from "@/components/beste/piece/form29";
<Form29
label="Primary contact"
selectedHint="Start typing to search"
items={[
{
"name": "Nils Frahm",
"hint": "Design lead",
"initial": "N",
"imageSrc": "https://oud.pics/sm/l/gmail.jpeg",
"alt": "Nils Frahm"
},
{
"name": "Hania Rani",
"hint": "Engineer",
"initial": "H",
"imageSrc": "https://oud.pics/sm/l/stripe.jpeg",
"alt": "Hania Rani"
},
{
"name": "Ólafur Arnalds",
"hint": "Product",
"initial": "Ó",
"imageSrc": "https://oud.pics/sm/l/notion.png",
"alt": "Ólafur Arnalds"
}
]}
selectedIndex={0}
bordered={false}
/>