Select 选择器

Select 用于从一组选项中选择一个或多个值。组件使用 Rue 当前的原生 select 语义：单选仍然是浏览器自己的下拉行为，mode="multiple" 默认切到紧凑下拉标签模式，而显式传入 nativeSize 或原生 multiple 时会回到浏览器 listbox；同时补上 options 数据源、fieldNames、allowClear、status、variant、语义回调与前后缀 shell 等更接近业务开发的 API。

基础能力

先展示 children 写法，再把数据驱动、分组和 shell 组合能力补进来。

# Select

当前选择：Amber

# Data source and groups

当前部署区域：杭州 Hangzhou

适用场景多级地区、分组资源池、后端枚举字典。
支持方式保持 children，同时允许后续切换到 options。

# Prefix, suffix and allowClear

Owner @ stable

当前 owner：Platform team

这个场景适合做环境、Owner、命名空间、租户等“选择器本身需要上下文”的表单。

# Label in value and semantic callbacks

当前结构：{"value":"release","key":"release","label":"Release digest"}

最新事件：init:release

适用场景表单引擎、埋点上报、需要同步 label 与 value 的配置面板。
保持原生回调升级了，但实际交互仍然是原生单选下拉，不额外引入自定义弹层。

# Ghost

# With fieldset and labels

BrowsersOptional

# Color variants

Primary

Secondary

Accent

Neutral

Info

Success

Warning

Error

增强场景

status、variant、紧凑多选、loading 与空态覆盖常见业务表单场景。

# Status and variants

# Sizes

# Multiple selection

已选择：Release digest / Labs rollout

默认是紧凑下拉多选，不再自动占满垂直空间

已选项会以内联标签展示，并保持下拉面板勾选态

# Native multiple listbox via nativeSize

仍可通过 nativeSize 回退到原生 listbox：Release digest / Labs rollout

这个模式适合后台工具、批量操作或需要一次性看到更多可选项的场景。只要显式传入 nativeSize，Select 就会保持浏览器自己的多选列表框行为。

# Multiple with maxCount

最多保持 2 项：Release digest / Design infra

这个限制发生在原生 listbox 选择完成后，组件会把超出的选择自动裁剪回允许范围，适合权限绑定、通知订阅、灰度批次等固定上限场景。

# Disabled

# Loading and empty states

Empty

原生语义

需要时仍可直接退回原生 select 的细粒度控制，例如 appearance 与浏览器默认下拉箭头处理。

# Using OS native style

API

下面列出组件后最值得关注的 Select API。原生 select 的 name、disabled、required、multiple、onChange 等属性仍全部透传，单选下拉也仍然由浏览器自己渲染。

属性	说明	类型	默认值
`allowClear`	在 shell 模式下追加清空按钮，点击后会派发原生 change 事件	`boolean`	`false`
`color`	使用 Rue 当前 select-<tone> 颜色层	`'neutral' \| 'primary' \| 'secondary' \| 'accent' \| 'info' \| 'success' \| 'warning' \| 'error'`	`-`
`fieldNames`	自定义 options 数据源里的 label、value、options、groupLabel 字段名	`SelectFieldNames`	`{ label, value, options, groupLabel }`
`ghost`	支持API，等价于 variant="ghost" 的快捷写法	`boolean`	`false`
`loading`	显示 loading 状态并暂时禁用选择器	`boolean`	`false`
`labelInValue`	让 onValueChange / onSelect / onDeselect 返回 { value, label, key } 结构	`boolean`	`false`
`maxCount`	多选模式下限制可选数量，超出后回退到允许范围内的选择结果	`number`	`-`
`mode`	当前支持 `multiple`；默认渲染紧凑下拉多选，配合 nativeSize 时回退到原生 listbox	`multiple`	`-`
`nativeSize`	原生 size 属性；在 mode="multiple" 下显式传入时会启用浏览器 listbox 形态并控制可见行数	`number \| string`	`-`
`notFoundContent`	当没有 children 与 options 时渲染的空态 option 文案	`any`	`暂无可选项`
`onClear`	点击清空按钮后触发，适合做埋点或同步外部状态	`(event: MouseEvent) => void`	`-`
`onDeselect`	多选取消或单选切换掉原值时触发，返回被移除的值与 option 信息	`(value, option, event) => void`	`-`
`onSelect`	选择某个 option 时触发，返回新增值与 option 信息	`(value, option, event) => void`	`-`
`onValueChange`	比原生 onChange 更语义化，直接返回 value 与 labels / options 上下文	`(value, context) => void`	`-`
`options`	使用结构化数据声明 option / optgroup，而不是手写 children	`SelectOptionData[]`	`-`
`optionLabelProp`	指定语义回调和 labelInValue 优先读取哪个字段作为 label	`string`	`label` / 文本内容
`placeholder`	在单选模式下注入占位 option，可与 allowClear 联动	`any`	`-`
`prefix / suffix / addonBefore / addonAfter`	进入 shell 布局，把说明性内容嵌入到选择器两侧	`any`	`-`
`selectClassName`	shell 模式下追加到内部原生 select，普通模式下与 className 合并	`string`	`-`
`showArrow / suffixIcon`	shell 模式下控制默认箭头或自定义后置图标，不改变原生下拉行为	`boolean / any`	`true / -`
`size / uiSize`	支持 xs-sm-md-lg-xl 与 small-middle-large 别名；数字仍按原生 size 处理	`SelectVisualSize \| number \| string`	`-`
`status`	表单状态色，优先级高于 color，适合校验反馈	`success` \| `warning` \| `error`	`-`
`variant`	选择器外观变体，补充 filled / ghost / borderless 语义	`outlined` \| `filled` \| `ghost` \| `borderless`	`outlined`