选择器 Select

选择器用于从一组选项中选择一个或多个选项。

何时使用

• 需要从多个选项中选择一个值时
• 选项数量较多，不适合使用单选框时
• 表单中需要用户提供选择时

代码演示

基础用法

最简单的选择器使用方式。

不同状态

选择器支持多种状态：正常、选中/聚焦、加载中、禁用。

正常状态

选中/聚焦状态

加载状态

禁用状态

下拉框展开

带滚动条（超过5个选项）

Inflow 模式

在 Inflow 模式下，下拉框会展开容器高度。

Float 模式（默认）

在 Float 模式下，下拉框会浮动在内容之上。

带禁用选项

受控模式

在受控模式下，可以通过 value 和 onChange 属性控制选择器的值。

API

Select Props

参数	说明	类型	默认值
value	当前选中的值（受控模式）	string | number	-
defaultValue	默认选中的值（非受控模式）	string | number	-
options	选项列表	SelectOption[]	[]
placeholder	占位文本	string	'Placeholder goes here'
disabled	是否禁用	boolean	false
loading	是否加载中	boolean	false
inflow	是否使用 inflow 模式（撑开容器）	boolean	false
onChange	选中值改变时的回调	(value: string | number, option: SelectOption) => void	-
className	自定义类名	string	-
onOpenChange	下拉框展开/收起回调	(open: boolean) => void	-

SelectOption

参数	说明	类型	默认值
label	选项标签	ReactNode	-
value	选项值	string | number	-
disabled	是否禁用该选项	boolean	-

注意事项

1. 选择器支持两种模式：
   • 受控模式：通过 value 和 onChange 属性控制值
   • 非受控模式：通过 defaultValue 属性设置默认值
2. 通过 inflow 属性可以切换下拉框的显示模式：
   • inflow=false（默认）：下拉框浮动显示
   • inflow=true：下拉框撑开容器显示
3. 在加载状态下，选择器会显示加载图标，此时无法进行交互
4. 可以为选项设置 disabled 属性来禁用特定选项
5. 选择器支持键盘导航：
   • Enter 或空格键：打开/关闭下拉框
   • Escape 键：关闭下拉框
   • 方向键：导航选项
6. 选择器会自动处理点击外部区域关闭下拉框的逻辑
7. 在暗色模式下，选择器会自动适配主题颜色