Select

A component for selecting options from a dropdown list with support for single and multi-select modes.

Import

import { Select } from '@akitectio/aki-ui'

// TypeScript types
import type { SelectProps, SelectRef, SelectOption } from '@akitectio/aki-ui'

Basic Usage

Basic Select

Selected: None

import { Select } from '@akitectio/aki-ui'

const options = [
  { value: 'option1', label: 'Option 1' },
  { value: 'option2', label: 'Option 2' },
  { value: 'option3', label: 'Option 3' },
]

function BasicSelect() {
  const [value, setValue] = useState('')
  
  return (
    <Select
      placeholder="Select an option..."
      value={value}
      onChange={setValue}
      options={options}
    />
  )
}

Multi Select

Multi Select Demo

Selected: None

import { Select } from '@akitectio/aki-ui'

const fruits = [
  { value: 'apple', label: 'Apple' },
  { value: 'banana', label: 'Banana' },
  { value: 'cherry', label: 'Cherry' },
  { value: 'date', label: 'Date' },
  { value: 'elderberry', label: 'Elderberry' },
]

function MultiSelect() {
  const [values, setValues] = useState<string[]>([])
  
  return (
    <Select
      multiple
      placeholder="Select fruits..."
      value={values}
      onChange={setValues}
      options={fruits}
    />
  )
}

Variants

Different Variants

// Different sizes and states
<Select size="sm" placeholder="Small select" options={options} />
<Select size="md" placeholder="Default select" options={options} />
<Select size="lg" placeholder="Large select" options={options} />
<Select disabled placeholder="Disabled select" options={options} />

API Reference

PropTypeDefaultDescription
optionsSelectOption[][]Array of options to select from
valuestring | string[]-Selected value(s)
onChangefunction-Callback when selection changes
placeholderstring-Placeholder text
multiplebooleanfalseEnable multi-select mode
size'sm' | 'md' | 'lg''md'Size of the select
disabledbooleanfalseDisable the select
searchablebooleanfalseEnable search functionality
clearablebooleanfalseShow clear button
loadingbooleanfalseShow loading state

SelectOption Type

interface SelectOption {
  value: string
  label: string
  disabled?: boolean
  group?: string
}

Accessibility

  • Supports keyboard navigation (Arrow keys, Enter, Escape)
  • ARIA attributes for screen readers
  • Focus management and proper labeling
  • Supports disabled state with proper ARIA attributes
  • Multi-select mode with proper announcements