Allowing the Select component to select multiple values by passing an array to the defaultValue prop on the useSelectState hook.
defaultValue
useSelectState
123456789101112131415161718192021222324252627282930313233343536373839404142434445import { Select, SelectArrow, SelectItem, SelectItemCheck, SelectLabel, SelectPopover, useSelectState, } from "ariakit/select"; import list from "./list"; 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 select = useSelectState({ defaultValue: ["Apple", "Cake"], sameWidth: true, gutter: 4, }); return ( <div className="wrapper"> <SelectLabel state={select}>Favorite food</SelectLabel> <Select state={select} className="select"> {renderValue(select.value)} <SelectArrow /> </Select> {select.mounted && ( <SelectPopover state={select} className="popover"> {list.map((value) => ( <SelectItem key={value} value={value} className="select-item"> <SelectItemCheck /> {value} </SelectItem> ))} </SelectPopover> )} </div> ); }
import { Select, SelectArrow, SelectItem, SelectItemCheck, SelectLabel, SelectPopover, useSelectState, } from "ariakit/select"; import list from "./list"; 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 select = useSelectState({ defaultValue: ["Apple", "Cake"], sameWidth: true, gutter: 4, }); return ( <div className="wrapper"> <SelectLabel state={select}>Favorite food</SelectLabel> <Select state={select} className="select"> {renderValue(select.value)} <SelectArrow /> </Select> {select.mounted && ( <SelectPopover state={select} className="popover"> {list.map((value) => ( <SelectItem key={value} value={value} className="select-item"> <SelectItemCheck /> {value} </SelectItem> ))} </SelectPopover> )} </div> ); }