Ariakit
/

SelectGroup

Separating Select items into groups using the SelectGroup and SelectGroupLabel components.

Open preview in a new tab
Favorite food
Edit withViteNext.js
import "./style.css";
import {
} from "@ariakit/react";
export default function Example() {
return (
<div className="wrapper">
<SelectLabel>Favorite food</SelectLabel>
<Select className="button" />
<SelectPopover gutter={4} sameWidth className="popover">
<SelectGroup className="group">
<SelectGroupLabel className="group-label">
Fruits &amp; Vegetables
<SelectItem className="select-item" value="Apple" />
<SelectItem className="select-item" value="Banana" />
<SelectItem className="select-item" value="Grape" />
<SelectItem className="select-item" value="Orange" />
<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" />
<SelectSeparator className="separator" />
<SelectGroup className="group">
<SelectGroupLabel className="group-label">
Beverages
<SelectItem className="select-item" value="Water" />
<SelectItem className="select-item" value="Juice" />
<SelectItem className="select-item" value="Soda" />
<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" />
</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.