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

Favorite food
import {
} from "@ariakit/react";
import { useState } from "react";
import list from "./list.ts";
import "./style.css";
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">
<SelectPopover gutter={4} sameWidth unmountOnHide className="popover">
{ => (
<SelectItem key={value} value={value} className="select-item">

Stay tuned

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

No spam. Unsubscribe anytime. Read latest issue