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

Edit example

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

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 * as Ariakit from "@ariakit/react";
import "./style.css";

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.

Select with ComboboxCombining Select and Combobox to create a dropdown with a search field that can be used to filter items.

Select with Combobox and TabsAbstracting Select to work alongside Combobox and Tab components, presenting a searchable, tabbed dropdown.

Select with Next.js App RouterControlling the value of a Select component via the URL using the Next.js App Router and React.useOptimistic to ensure a responsive and accessible UI.

View all Select examples

API

useSelectStore()
useSelectContext()

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

<SelectProvider>
  <SelectLabel />
  <Select>
    <SelectValue />
    <SelectArrow />
  </Select>
  <SelectPopover>
    <SelectHeading />
    <SelectDismiss />
    <SelectList>
      <SelectGroup>
        <SelectGroupLabel />
        <SelectRow>
          <SelectItem>
            <SelectItemCheck />
          </SelectItem>
          <SelectSeparator />
        </SelectRow>
      </SelectGroup>
    </SelectList>
  </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;
}

Learn more on the Styling guide.

Related components

ButtonTrigger an action or event, such as submitting a Form, opening a Dialog, canceling an action, or performing a delete operation in React. This component is based on the WAI-ARIA Button Pattern.

ComboboxFill in a React input field with autocomplete & autosuggest functionalities. Choose from a list of suggested values with full keyboard support. This component is based on the WAI-ARIA Combobox Pattern.

FormSubmit information with accessible interactive controls in React. Take advantage of the browser's built-in validation with screen reader support. This component is based on the WAI-ARIA Form Role.

MenuAccess a set of commands within a dropdown menu. This component is based on the WAI-ARIA Menu Pattern and the WAI-ARIA Menu Button Pattern.

PopoverShow a popup dialog positioned relative to an anchor element. This component can be either modal or non-modal and optionally rendered in a React portal.

CompositeProvide a single tab stop on the page and navigate through the focusable descendants with arrow keys. This abstract component is based on the WAI-ARIA Composite Role.

View all components

Select

Examples

API

Styling

Styling the active item

Stay tuned