示例
直接操作示例，查看组件在具体任务中的状态与反馈。
本地可见列
选择数量较小时使用；搜索、异步与虚拟化不在当前能力内。
名称状态+1
使用建议
限制在规模有限的多选
适合用户可以浏览完的短选项列表；大量、异步、可搜索或虚拟化集合应使用更专门的输入方案。
保持每个值唯一稳定
宿主保存 string[]，避免 duplicate option value、未知已选值和动态复用身份，并明确禁用已选项的处理策略。
由宿主完成校验与提交
组件只上报本地选择；required、跨字段校验、外部 form 归属、提交和错误恢复仍由宿主应用负责。
引入方式
从已验证的公开子路径导入组件；全局样式接入方式见安装指南。
import { BaseMultiSelect } from '@inf-monkeys-tech/monkeys-design/components/base';当前限制
- 当前不支持 search、async options、virtualization、global clear、token keyboard removal、Portal 或 collision-aware positioning。
- required/native validation、external form ownership、identity 边界、mobile/manual AT、deterministic visual 与 packed React 18/19 仍未完成。
- Search, async options, virtualization, global clear, and token keyboard removal are not supported.
- Portal rendering and collision-aware positioning are not supported.
- Required/native validation and external form ownership are not supported.
- Duplicate option values, unknown selected values, and disabled-selected identity behavior are not finalized.
- Mobile and manual assistive-technology validation are pending.
- Deterministic visual evidence and final packed React 18/19 checks are pending T17/T23.
API
查看组件源码export interface BaseMultiSelectProps
extends Omit<
HTMLAttributes<HTMLDivElement>,
'children' | 'className' | 'defaultValue' | 'onChange' | 'style'
> {
options?: BaseMultiSelectOption[];
value?: string[];
defaultValue?: string[];
name?: string;
placeholder?: ReactNode;
icon?: ReactNode;
invalid?: boolean;
disabled?: boolean;
required?: boolean;
openForPreview?: boolean;
maxTagCount?: number;
removeLabel?: (option: BaseMultiSelectOption) => string;
emptyLabel?: ReactNode;
appearance?: BaseAppearance;
className?: string;
classNames?: BaseMultiSelectClassNames;
style?: CSSProperties;
onValueChange?: (value: string[]) => void;
}| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
options | 组件可供选择的选项列表。 | BaseMultiSelectOption[] | — |
value | 多选控件当前选中项值的受控数组。 | string[] | — |
defaultValue | 非受控模式下使用的初始值。 | string[] | — |
name | 提交表单时使用的字段名称。 | string | — |
placeholder | 尚未选择值时显示的占位内容。 | ReactNode | — |
icon | 显示在主要内容旁的图标。 | ReactNode | — |
invalid | 是否进入无效状态并应用相应的校验样式与语义。 | boolean | false |
disabled | 是否禁用该组件及其可交互行为。 | boolean | false |
required | 是否将该字段标记为必填。 | boolean | false |
openForPreview | 是否在文档或视觉测试中强制保持弹出内容可见。 | boolean | false |
maxTagCount | 折叠为汇总提示前最多直接显示的已选标签数量。 | number | — |
removeLabel | 为指定已选项生成移除按钮可访问名称的函数。 | (option: BaseMultiSelectOption) => string | — |
emptyLabel | 没有可选项或匹配结果时显示的内容。 | ReactNode | — |
appearance | 覆盖组件使用的外观令牌或局部样式配置。 | BaseAppearance | — |
className | 追加到组件根元素的 CSS 类名。 | string | — |
classNames | 按组件公开的结构插槽分别追加 CSS 类名。 | BaseMultiSelectClassNames | — |
style | 追加到组件根元素的内联样式。 | CSSProperties | — |
onValueChange | 值变化时调用的回调；参数结构以当前组件的 Props 类型为准。 | (value: string[]) => void | — |