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.

Sizes

sm / md / lg, matching Input and Button heights.

States

Disabled and invalid.

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

Key	Action
Enter / Space / ArrowDown	Opens the popup from the trigger.
ArrowUp / ArrowDown	Moves the highlighted option; disabled options are skipped.
Enter	Commits the highlighted option and closes the popup.
Escape	Closes without changing the value.
Type a letter	Jumps 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

Combobox Form Field

Select / MultiSelect props

Prop	Type	Default	Description
items	{ label: string; value: string; disabled?: boolean }[]	None	The option list. On Select, disabled items are skipped by keyboard navigation.
value / onValueChange	string \| null / MultiSelectItem[]	None	Controlled value - the selected item's value for Select, the selected item objects for MultiSelect.
defaultValue	string \| null / MultiSelectItem[]	None	Uncontrolled initial value.
placeholder	string	None	Shown when no value is selected.
invalid	boolean	false	Applies the invalid visual/aria state.

itemsNone

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

The option list. On Select, disabled items are skipped by keyboard navigation.

value / onValueChangeNone

string | null / MultiSelectItem[]

Controlled value - the selected item's value for Select, the selected item objects for MultiSelect.

defaultValueNone

string | null / MultiSelectItem[]

Uncontrolled initial value.

placeholderNone

string

Shown when no value is selected.

invalidfalse

boolean

Applies the invalid visual/aria state.

Criterion	Status	Note
Keyboard support	Supported	Full arrow-key/typeahead navigation; disabled items are skipped.
Focus management	Supported	Focus stays on the trigger; the popup doesn't steal it.
Screen reader labels	Partial	Requires an explicit aria-label or <label> on the trigger - not automatic.
Reduced motion	Supported	prefers-reduced-motion: reduce zeroes all Fuji transition durations globally.
Reduced transparency	Supported	prefers-reduced-transparency: reduce flattens Glass to opaque surfaces (portals included).
RTL layout	Partial	Logical flex/grid gap works under dir="rtl"; directional chevrons are not yet mirrored.

API reference

Prop	Type	Default	Description
items *	SelectItem[]	None	Options to render.
aria-label	string	None	Accessible name for the trigger button. Required when there is no visible `<label>` for this select.
aria-labelledby	string	None	Points at an existing visible label's id, as an alternative to `aria-label`.
className	string	None	Extra classes merged onto the trigger.
invalid	boolean	None	Paints the error state. Pair with `FormField`'s `error` for the message.
placeholder	string	"Select…"	Text shown while nothing is selected.
size	ComponentSize	"md"	Control height, matching `Input` and `Button` at the same size.

items *None

SelectItem[]

Options to render.

aria-labelNone

string

Accessible name for the trigger button. Required when there is no visible `<label>` for this select.

aria-labelledbyNone

string

Points at an existing visible label's id, as an alternative to `aria-label`.

classNameNone

string

Extra classes merged onto the trigger.

invalidNone

boolean

Paints the error state. Pair with `FormField`'s `error` for the message.

placeholder"Select…"

string

Text shown while nothing is selected.

size"md"

ComponentSize

Control height, matching `Input` and `Button` at the same size.

Also accepts everything from Omit<React.ComponentPropsWithoutRef<typeof import("@base-ui/react/select").Select.Root<Value>>, "items" | "children">.

Coding agents read this reference, with its examples, from the version your project has installed, through the Fuji UI MCP server. Set up your agent