Ariakit
/

Multi-Select

Allowing the Select component to select multiple values by passing an array to the defaultValue prop on the SelectProvider component.

Open preview in a new tab
Favorite food
Edit withViteNext.js
import "./style.css";
import { useState } from "react";
import {
} from "@ariakit/react";
import list from "./list.js";
function renderValue(value: string[]) {
if (value.length === 0) return "No food selected";
if (value.length === 1) return value[0];
return `${value.length} food selected`;
}
export default function Example() {
const [value, setValue] = useState(["Apple", "Cake"]);
return (
<div className="wrapper">
<SelectProvider value={value} setValue={setValue}>
<SelectLabel>Favorite food</SelectLabel>
<Select className="button">
{renderValue(value)}
</Select>
<SelectPopover gutter={4} sameWidth unmountOnHide className="popover">
{list.map((value) => (
<SelectItem key={value} value={value} className="select-item">
{value}
))}
</div>
);
}

Follow updates

Join 1,000+ subscribers and receive monthly updates with the latest improvements on Examples.

Read latest issue

No Spam. Unsubscribe at any time.