Ariakit
/

select

Open preview in a new tab
Favorite fruit
Edit withViteNext.js
import "./style.css";
import * as Ariakit from "@ariakit/react";
export default function Example() {
return (
<div className="wrapper">
<Ariakit.SelectLabel className="label">
Favorite fruit
<Ariakit.Select className="button" />
<Ariakit.SelectPopover gutter={4} sameWidth className="popover">
<Ariakit.SelectItem className="select-item" value="Apple" />
<Ariakit.SelectItem className="select-item" value="Banana" />
<Ariakit.SelectItem className="select-item" value="Grape" disabled />
<Ariakit.SelectItem className="select-item" value="Orange" />
</div>
);
}

Stay tuned

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

No spam. Unsubscribe anytime. Read latest issue