Select a value from a list of options presented in a dropdown menu, similar to the native HTML select element. This component is based on the WAI-ARIA Combobox Pattern.
npm install ariakit
Learn more in Getting started.
useSelectState() <SelectLabel /> <Select> <SelectArrow /> </Select> <SelectList|SelectPopover> <SelectGroup> <SelectGroupLabel /> <SelectRow> <SelectItem> <SelectItemCheck /> </SelectItem> <SelectSeparator /> </SelectRow> </SelectGroup> </SelectList|SelectPopover>
When browsing the list with a keyboard (or hovering over items with the mouse when the focusOnHover
prop is true
), the active item element will have a data-active-item
attribute. You can use this attribute to style the active item:
.select-item[data-active-item] {
background-color: hsl(204 100% 40%);
color: white;
}
Learn more in Styling.