Skip to content

Select 选择器

基于原生 <select> 的下拉选择;支持标签、placeholder(首项空值选项)、尺寸、反馈说明与插槽类名。

示例

可访问性

label 会通过 htmlFor 与原生 select 关联。传入 helperText 时,组件会自动通过 aria-describedby 将说明文本关联到 select;传入 error 时,组件会自动设置 aria-invalid="true",并将错误信息作为可访问描述。

如果你同时传入自定义 aria-describedby,组件会保留已有描述并追加内部 helper/error 描述,避免覆盖业务侧已有的说明关系。

API

继承除 size(与组件尺寸 prop 冲突)、onChange(见下表)以外的 SelectHTMLAttributes<HTMLSelectElement>(如 classNamedisablednameidmultiple 等)。

属性说明类型默认值
options选项列表SelectOption[]-
label可选标签(与 select 通过 id/htmlFor 关联)ReactNode-
helperText帮助说明,会自动关联到 select 描述ReactNode-
error错误说明,会自动设置错误状态并关联到 select 描述ReactNode-
placeholder若提供,会渲染 value="" 的首项作为占位string-
value受控值string-
defaultValue非受控初始值string-
onChange选中值变化(已抽象为字符串,非原生事件)(value: string) => void-
size视觉高度'sm' | 'md' | 'lg''md'
disabled是否禁用boolean-
slotClassNames插槽类名(根 / 标签 / 输入){ root?: string; label?: string; input?: string }-

SelectOption

属性说明类型默认值
label选项展示内容ReactNode-
value选项值(对应 <option value>string-
disabled是否禁用该选项boolean-

说明

  • 搜索 / 虚拟滚动 / 自定义下拉:非原生 <select> 能力范围;需要时请使用 Combobox 类方案或演进计划中的重型实现。