Select

A WAI-ARIA select-only combobox (arrow keys, type-ahead, Home/End, Escape, outside-click, viewport-aware flip). Unlike AutoComplete, there’s no text input — the trigger just shows the selected option’s label.

Usage


import { Select } from '@mav-labs-inc/mavkit-react'
 
<Select
  options={[{ value: 'a', label: 'Option A' }, { value: 'b', label: 'Option B' }]}
  placeholder="Choose…"
  onSelectionChange={onChange}
/>

Examples

Basic

Grouped options

Consecutive options sharing the same group render under one group label, with a separator before each new group.

Props

Prop	Type	Default	Description
options*	SelectOption[]	—	{ value: string; label: string; disabled?: boolean; note?: string; group?: string }[]
value	string \| null	—	Controlled selected value — pair with onSelectionChange.
defaultValue	string \| null	—
onSelectionChange	(change: { value: string; label: string }) => void	—
placeholder	string	'Choose…'
name	string	—	Renders a hidden input for plain-form submission.
ariaLabel	string	—
className	string	—
disabled	boolean	—	Disables the trigger with a real disabled attribute.
ref	Ref<SelectHandle>	—	{ open(), close(), setValue(value) }