Ariakit
/

Select with custom items

Rendering Select with a custom styled value and SelectItem's children.

Account
import * as Ariakit from "@ariakit/react";
import startCase from "lodash-es/startCase.js";
import { useState } from "react";
import "./style.css";
function renderValue(email: string) {
const [username = ""] = email.split("@");
const name = startCase(username.replace(/[._]/g, " "));
const image = `https://i.pravatar.cc/120?u=${email}`;
return (
<>
<img key={image} src={image} alt="" aria-hidden className="photo" />
<div className="value">
<div className="name">{name}</div>
<div className="email">{email}</div>
</div>
</>
);
}
const accounts = [
"harry.poe@example.com",
"jane.doe@example.com",
"john.doe@example.com",
"sonia.poe@example.com",
];
export default function Example() {
const [value, setValue] = useState("john.doe@example.com");
return (
<div className="wrapper">
<Ariakit.Select className="button">
{renderValue(value)}
<Ariakit.SelectPopover gutter={4} sameWidth className="popover">
{accounts.map((email) => (
key={email}
value={email}
className="select-item"
>
{renderValue(email)}
))}
</div>
);
}

Stay tuned

Join 1,000+ subscribers and receive monthly tips & updates on new Ariakit content.

No spam. Unsubscribe anytime. Read latest issue