Separating Select items into groups using the SelectGroup
and SelectGroupLabel
components.
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364import { Select, SelectGroup, SelectGroupLabel, SelectItem, SelectLabel, SelectPopover, SelectSeparator, useSelectState, } from "ariakit/select"; import "./style.css"; export default function Example() { const select = useSelectState({ defaultValue: "Apple", sameWidth: true, gutter: 4, }); return ( <div className="wrapper"> <SelectLabel state={select}>Favorite food</SelectLabel> <Select state={select} className="select" /> <SelectPopover state={select} className="popover"> <SelectGroup className="group"> <SelectGroupLabel className="group-label"> Fruits & Vegetables </SelectGroupLabel> <SelectItem // Enables scroll on key down so pressing ArrowUp will scroll up and // reveals the group label. preventScrollOnKeyDown={false} className="select-item" value="Apple" /> <SelectItem className="select-item" value="Banana" /> <SelectItem className="select-item" value="Grape" /> <SelectItem className="select-item" value="Orange" /> </SelectGroup> <SelectSeparator className="separator" /> <SelectGroup className="group"> <SelectGroupLabel className="group-label">Dairy</SelectGroupLabel> <SelectItem className="select-item" value="Milk" /> <SelectItem className="select-item" value="Cheese" /> <SelectItem className="select-item" value="Yogurt" /> </SelectGroup> <SelectSeparator className="separator" /> <SelectGroup className="group"> <SelectGroupLabel className="group-label">Beverages</SelectGroupLabel> <SelectItem className="select-item" value="Water" /> <SelectItem className="select-item" value="Juice" /> <SelectItem className="select-item" value="Soda" /> </SelectGroup> <SelectSeparator className="separator" /> <SelectGroup className="group"> <SelectGroupLabel className="group-label">Snacks</SelectGroupLabel> <SelectItem className="select-item" value="Chips" /> <SelectItem className="select-item" value="Nuts" /> <SelectItem className="select-item" value="Candy" /> </SelectGroup> </SelectPopover> </div> ); }