Skip to content
fuji-ui
Component

Select

The selection family on one page: a platform-native select, a custom-styled Select, and a MultiSelect with chips. For a searchable single select, see Combobox.

Native Select

Platform-native select, best for progressive enhancement and mobile pickers.

Select

Custom-styled dropdown (wraps Base UI Select), keyboard-first and scrollable.

Disabled option

Individual items take disabled - the item is skipped by keyboard navigation and shown at reduced opacity.

Controlled

Selected: apple

Multi Select

Multi-selection combobox with removable chips. The chevron stays pinned on the right; chips stay on one line and truncate when they overflow.

Many selections overflow

With several values selected the chips truncate and the chevron never shifts.

When to use

  • A short, known list of options where users pick from what's shown rather than typing to search - Select.
  • Options users need to search or filter by typing - use Combobox instead.
  • Multiple values from one list with visible removable chips - MultiSelect.
  • A form that must work with zero JS or needs the OS's native picker UI on mobile - NativeSelect.

When not to use

  • Long lists (50+ items) without search - switch to Combobox so users can filter by typing.
  • Binary choices - a Switch or two Radio options are clearer than a one-of-two Select.

Keyboard

KeyAction
Enter / Space / ArrowDownOpens the popup from the trigger.
ArrowUp / ArrowDownMoves the highlighted option; disabled options are skipped.
EnterCommits the highlighted option and closes the popup.
EscapeCloses without changing the value.
Type a letterJumps to the next option starting with that character (native browser typeahead).

Mobile behavior

  • Select and MultiSelect open a positioned popup identical to desktop - no native picker swap.
  • NativeSelect renders the OS's own picker (wheel/sheet) on mobile, which is often the better choice for long lists on touch devices.

Accessibility notes

  • Base UI Select applies role="listbox"/"option" with aria-selected, and disabled items get aria-disabled plus removal from arrow-key traversal.
  • MultiSelect's chip removal buttons each carry their own accessible name ("Remove {label}").

Common mistakes

  • Leaving out aria-label (or a linked <label>) on an icon-only or placeholder-only trigger - it announces with no name.
  • Using Select where a long, searchable list actually needs Combobox - users are left scrolling instead of typing to filter.

Related components

ComboboxForm Field

Select / MultiSelect props

itemsNone
{ label: string; value: string; disabled?: boolean }[]

The option list. disabled items are skipped by keyboard navigation.

value / onValueChangeNone
string | string[]

Controlled value - a string for Select, a string array for MultiSelect.

defaultValueNone
string | string[]

Uncontrolled initial value.

placeholderNone
string

Shown when no value is selected.

invalidfalse
boolean

Applies the invalid visual/aria state.

CriterionStatusNote
Keyboard supportSupportedFull arrow-key/typeahead navigation; disabled items are skipped.
Focus managementSupportedFocus stays on the trigger; the popup doesn't steal it.
Screen reader labelsPartialRequires an explicit aria-label or <label> on the trigger - not automatic.
Reduced motionSupportedprefers-reduced-motion: reduce zeroes all Fuji transition durations globally.
Reduced transparencySupportedprefers-reduced-transparency: reduce flattens Glass to opaque surfaces (portals included).
RTL layoutPartialLogical flex/grid gap works under dir="rtl"; directional chevrons are not yet mirrored.

API reference

value / defaultValueNone
string

Controlled or initial selected option.

itemsNone
option data

Options rendered by Select or MultiSelect.

multiplefalse
boolean

MultiSelect supports multiple values.

classNameNone
string

Additional classes applied to the component root.