Needless UI

Components

Select

Pick one option or many, from a short list or a huge one.

Keyboard interaction

KeyAction
Down and up arrowsOpen the list, then move through the options.
Home and EndGo to the first or last option.
Page Down and Page UpMove ten options.
Enter or SpaceOpen the list, or choose the active option.
LettersJump to the next option that starts with them.
Right and left arrowsIn a tree, expand an option or go to its first child; collapse it or go to its parent. Mirrored in right-to-left text.
Alt + up arrowChoose the active option and close the list.
TabWith one choice, choose the active option and move on.
EscapeClose the list without choosing.

Accessibility notes

  • The button is a select-only combobox with aria-expanded and aria-controls. Focus stays on it, and aria-activedescendant points at the active option.
  • The list is a listbox, or a tree with aria-level and aria-expanded. aria-setsize and aria-posinset stay right when only some rows are rendered.
  • The active option has a solid fill and, in forced colors, an outline.
  • Name it with a <label for> that points at triggerId, or with label.