示例
直接操作示例,查看组件在具体任务中的状态与反馈。
本地显示密度
使用方向键、Home、End 或键入文字选择。
使用建议
用于有限单选集合
选项数量可控且用户可以预期时使用 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.
API
查看组件源码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 | 是否进入无效状态并应用相应的校验样式与语义。 | boolean | false |
disabled | 是否禁用该组件及其可交互行为。 | boolean | false |
openForPreview | 是否在文档或视觉测试中强制保持弹出内容可见。 | boolean | false |
appearance | 覆盖组件使用的外观令牌或局部样式配置。 | BaseAppearance | — |
className | 追加到组件根元素的 CSS 类名。 | string | — |
classNames | 按组件公开的结构插槽分别追加 CSS 类名。 | BaseControlClassNames | — |
style | 追加到组件根元素的内联样式。 | CSSProperties | — |
children | 在 BaseSelect 内渲染的子内容;支持渲染函数时以对应的 Props 类型为准。 | ReactNode | — |