Geist Design System

Multi Select

A keyboard-navigable dropdown for selecting multiple items with advanced focus management.

Select Actions

The component provides different selection behaviors based on current state:

  • Checkbox focus + Enter/Space: Toggle individual item
  • Button focus + Enter/Space: Smart selection (Select Only, Select All, or Toggle based on context)
  • Hidden action labels: Appear on hover/focus to show available actions

Hover over items to see action labels. Different actions appear based on selection state.

Keyboard Navigation

The Multi Select component supports comprehensive keyboard navigation:

  • Up/Down arrows: Navigate between rows while maintaining checkbox/button focus state
  • Left/Right arrows: Switch between checkbox and button focus within the current row
  • Tab: Focus away from the menu (natural tab behavior)
  • Enter/Space: Execute actions based on current focus (checkbox toggle or button click)

Try keyboard navigation: ↑ ↓ for rows, ← → for checkbox/button focus, Tab to cycle through all elements

Controlled State

Use controlled state to manage selections programmatically.

Clear All, Core Features, Advanced Features

Best Practices

When to use

  • Pick <MultiSelect> when users pick more than one value from a known list (regions, scopes, tags).
  • For a single value from a short list, use Select.
  • When typing to filter is more important than seeing every option at once, use Combobox.
  • Skip <MultiSelect> for boolean settings; Toggle handles those.

Behavior

  • Show the selected count in the trigger (3 regions selected); show the single name when only one is picked.
  • Use controlled mode when state lives in the URL or syncs to the server so the trigger label and stored value stay in lockstep.
  • Keep checkbox focus and button focus distinct so Up/Down navigates rows and Left/Right toggles between the row’s checkbox and action button.
  • For empty filters, render No {items} match "{query}" rather than No results.

Accessibility

  • Each row checkbox needs an aria-label that names the item (Select us-east-1); a bare Select is unanchored for screen readers.
  • The trigger button needs a stable accessible name even when zero items are selected; don’t rely on the placeholder alone.
  • Trap focus inside the menu while it’s open and return focus to the trigger on close.
  • Announce bulk actions (Select All, Select Only) through the visible button label so the action matches what the screen reader speaks.