Select

Experimental

Low-level select primitive that helps achieve accessible select menus that can be styled as needed.

Access to Fuegokit npm packages, source code repositories, and some content is limited to Appfire staff. Log in with Slack to continue.

Source Storybook

Select is a low-level, accessible UI primitive that helps achieve ecosystem-agnostic, fully accessible select menus that can be styled as needed.

Select follows the WAI-ARIA authoring practices for a listbox that displays a menu to the user, such as a set of actions or functions triggered by a button.

Import

import {Select} from '@fuegokit/react'

Usage

<Select>
  <Select.Trigger aria-label="Food">
    <Select.Value placeholder="Select a fruit…" />
    <Select.Icon>
      <AkChevronDownIcon />
    </Select.Icon>
  </Select.Trigger>
  <Select.Portal>
    <Select.Content>

Accessibility

Select adheres to the listBox WAI-ARIA design pattern.

See the W3C Select-Only Combobox example for more information.

Keyboard interactions

Key	Description
Space	When focus is on `Select.Trigger`, opens the select and focuses the selected item. When focus is on an item, selects the focused item. When focus is on `Select.Trigger`, opens the select and focuses the first item.
Enter	When focus is on `Select.Trigger`, opens the select and focuses the first item. When focus is on an item, selects the focused item.
ArrowDown	When focus is on `Select.Trigger`, opens the select. When focus is on an item, moves focus to the next item.
ArrowUp	When focus is on `Select.Trigger`, opens the select. When focus is on an item, moves focus to the previous item.
Esc	Closes the select and moves focus to `Select.Trigger`.