Select

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.

Select Dropdowns Form controls

Favorite fruit

Edit withVite Next.js

12345678910111213141516171819202122
import "./style.css";
import * as Ariakit from "@ariakit/react";

export default function Example() {
  return (
    <div className="wrapper">
      <Ariakit.SelectProvider defaultValue="Apple">
        <Ariakit.SelectLabel className="label">
          Favorite fruit
        </Ariakit.SelectLabel>
        <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" />
        </Ariakit.SelectPopover>
      </Ariakit.SelectProvider>
    </div>
  );
}

import "./style.css";
import * as Ariakit from "@ariakit/react";

export default function Example() {
  return (
    <div className="wrapper">
      <Ariakit.SelectProvider defaultValue="Apple">
        <Ariakit.SelectLabel className="label">
          Favorite fruit
        </Ariakit.SelectLabel>
        <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" />
        </Ariakit.SelectPopover>
      </Ariakit.SelectProvider>
    </div>
  );
}

Examples

Animated SelectAnimating Select using CSS transitions in React. The component waits for the transition to finish before completely hiding the popover.

View all Select examples

API

useSelectStore()
useSelectContext()

<SelectProvider>
  <SelectLabel />
  <Select>
    <SelectArrow />
  </Select>
  <SelectList />
  <SelectPopover>
    <SelectGroup>
      <SelectGroupLabel />
      <SelectRow>
        <SelectItem>
          <SelectItemCheck />
        </SelectItem>
        <SelectSeparator />
      </SelectRow>
    </SelectGroup>
  </SelectPopover>
</SelectProvider>
useSelectStore()
useSelectContext()

<SelectProvider>
  <SelectLabel />
  <Select>
    <SelectArrow />
  </Select>
  <SelectList />
  <SelectPopover>
    <SelectGroup>
      <SelectGroupLabel />
      <SelectRow>
        <SelectItem>
          <SelectItemCheck />
        </SelectItem>
        <SelectSeparator />
      </SelectRow>
    </SelectGroup>
  </SelectPopover>
</SelectProvider>

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;
}
.select-item[data-active-item] {
  background-color: hsl(204 100% 40%);
  color: white;
}