Select

Dropdown selector with keyboard navigation. The panel opens with ease-out animation, options support hover highlight and arrow key navigation.

Basic Usage

import { Select } from '@airo-ui/react'
import { useState } from 'react'

const fruits = [
  { label: 'Apple', value: 'apple' },
  { label: 'Banana', value: 'banana' },
  { label: 'Cherry', value: 'cherry' },
  { label: 'Durian', value: 'durian', disabled: true },
  { label: 'Lemon', value: 'lemon' },
]

function Demo() {
  const [value, setValue] = useState(null)

  return (
    <div>
      <Select
        value={value}
        onChange={(v) => setValue(v)}
        options={fruits}
        placeholder="Choose a fruit"
      />
      <p style={{ marginTop: 12, fontSize: 13 }}>
        Value: {value ?? 'null'}
      </p>
    </div>
  )
}

Clearable

<Select value={value} onChange={setValue} options={options} clearable />

Disabled Item & Disabled Select

<Select value={value} onChange={setValue} options={options} />
<Select value={null} options={options} disabled placeholder="Not selectable" />

Size

<Select value={value} onChange={setValue} options={options} size="sm" placeholder="sm" />
<Select value={value} onChange={setValue} options={options} size="md" placeholder="md" />
<Select value={value} onChange={setValue} options={options} size="lg" placeholder="lg" />

API

Props

Name	Type	Default	Description
value	string | number | null	--	Controlled selected value
defaultValue	string | number | null	null	Default value (uncontrolled)
options	SelectOption[]	[]	Options array
placeholder	string	--	Placeholder when nothing selected
disabled	boolean	false	Disable entire select
clearable	boolean	false	Show clear button
size	'sm' | 'md' | 'lg'	'md'	Size
onChange	(value: SelectValue, option: SelectOption | null) => void	--	Selection change handler

SelectOption

interface SelectOption {
  label: string
  value: string | number
  disabled?: boolean
}

Keyboard Interaction

Key	Behavior
Space / Enter	Open panel; confirm highlighted item when open
ArrowDown / ArrowUp	Move highlight, skip disabled items
Escape	Close panel
Tab	Close panel and focus next element

Accessibility

• Trigger uses native <button>, aria-haspopup="listbox" and aria-expanded reflect state
• Panel uses role="listbox", options use role="option" with aria-selected
• Disabled items exposed via aria-disabled
• Auto-closes on outside click or Escape