Select 下拉选择

用于从一组选项中选择一个值。

基础用法

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

function Demo() {
  const options = [
    { label: '苹果', value: 'apple' },
    { label: '香蕉', value: 'banana' },
    { label: '橙子', value: 'orange' },
  ]

  return <Select options={options} placeholder="请选择水果" />
}

受控与非受控

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

const options = [
  { label: '苹果', value: 'apple' },
  { label: '香蕉', value: 'banana' },
  { label: '橙子', value: 'orange' },
]

function ControlledDemo() {
  const [value, setValue] = useState<string | number | null>(null)

  return (
    <Select
      value={value}
      onChange={(val, option) => {
        setValue(val)
        console.log('选中的选项:', option)
      }}
      options={options}
      placeholder="受控选择"
    />
  )
}

function UncontrolledDemo() {
  return (
    <Select
      defaultValue="banana"
      options={options}
      placeholder="非受控选择"
    />
  )
}

可清空

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

function Demo() {
  return <Select options={options} placeholder="可清空选择" clearable />
}

禁用

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

const options = [
  { label: '苹果', value: 'apple' },
  { label: '香蕉', value: 'banana', disabled: true },
  { label: '橙子', value: 'orange' },
]

function Demo() {
  return (
    <>
      <Select options={options} placeholder="整体禁用" disabled />
      <Select options={options} placeholder="选项2已禁用" />
    </>
  )
}

尺寸

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

function Demo() {
  return (
    <>
      <Select options={options} size="sm" placeholder="小尺寸" />
      <Select options={options} size="md" placeholder="中尺寸" />
      <Select options={options} size="lg" placeholder="大尺寸" />
    </>
  )
}

API

Props

名称	类型	默认值	说明
value	string | number | null	—	受控模式选中值
defaultValue	string | number | null	—	非受控模式默认选中值
options	SelectOption[]	—	选项列表
placeholder	string	—	占位文本
disabled	boolean	false	是否禁用
clearable	boolean	false	是否可清空
size	'sm' | 'md' | 'lg'	'md'	尺寸
onChange	(value: SelectValue, option: SelectOption | null) => void	—	选中项变化时触发

SelectOption

属性	类型	说明
label	string	显示文本
value	string | number	选项值
disabled	boolean	是否禁用该选项