Select 选择器

从有限且具名的选项集合中选择一个稳定值。

Beta

示例

直接操作示例,查看组件在具体任务中的状态与反馈。

有限单选集合使用稳定字符串值;标签、说明和值状态保持显式连接。
本地显示密度
使用方向键、Home、End 或键入文字选择。
当前本地值:comfortable
未选择时显示清晰占位,并保留原生选择语义。
不可选项保留在列表中解释能力边界,整体禁用用于完全锁定。
必填选择缺失时,控件和字段提示共同表达修正要求。

使用建议

用于有限单选集合

选项数量可控且用户可以预期时使用 Select;大量、异步或需要编辑搜索的集合应使用专门的 Combobox 方案。

固定 value 并补足 textValue

value 必须唯一稳定;label 不是纯字符串时提供 textValue,确保 typeahead 和可访问文本不会退回内部值。

显式连接字段语义

使用 BaseField 或等价原生标记连接 label、description、required 和 error,不把 placeholder 当作字段标签。

引入方式

从已验证的公开子路径导入组件;全局样式接入方式见安装指南。

import { BaseSelect } from '@inf-monkeys-tech/monkeys-design/components/base';

当前限制

  • 当前 custom options 分支不支持 Portal/collision、可编辑搜索或全局清除;duplicate、unknown 和复杂 ReactNode identity 语义仍在 Beta 阶段。
  • T17 尚缺 mobile/manual AT、deterministic visual 与最终 packed React 18/19 证据。
  • Portal/collision/clipping behavior, editable search and clear controls, duplicate/unknown/ReactNode identity semantics, mobile and manual assistive-technology review, deterministic visual evidence, and final packed checks remain pending.
export interface BaseSelectProps
  extends Omit<
    SelectHTMLAttributes<HTMLSelectElement>,
    'children' | 'className' | 'disabled' | 'style'
  > {
  options?: BaseSelectOption[];
  placeholder?: ReactNode;
  icon?: ReactNode;
  invalid?: boolean;
  disabled?: boolean;
  openForPreview?: boolean;
  appearance?: BaseAppearance;
  className?: string;
  classNames?: BaseControlClassNames;
  style?: CSSProperties;
  children?: ReactNode;
}
属性说明类型默认值
options组件可供选择的选项列表。BaseSelectOption[]
placeholder尚未选择值时显示的占位内容。ReactNode
icon显示在主要内容旁的图标。ReactNode
invalid是否进入无效状态并应用相应的校验样式与语义。booleanfalse
disabled是否禁用该组件及其可交互行为。booleanfalse
openForPreview是否在文档或视觉测试中强制保持弹出内容可见。booleanfalse
appearance覆盖组件使用的外观令牌或局部样式配置。BaseAppearance
className追加到组件根元素的 CSS 类名。string
classNames按组件公开的结构插槽分别追加 CSS 类名。BaseControlClassNames
style追加到组件根元素的内联样式。CSSProperties
children在 BaseSelect 内渲染的子内容;支持渲染函数时以对应的 Props 类型为准。ReactNode