示例
直接操作示例，查看组件在具体任务中的状态与反馈。
本地搜索条件
使用建议
把它当作组合边界而不是 Field
InputGroup 只安排 start、content 与 end 槽位，不克隆子元素，也不接管 value、事件、标签、说明或表单提交。
把原生状态传给真实控件
invalid 与 disabled 只改变组合外观；宿主必须把 aria-invalid、disabled、readOnly 和描述关联分别传给内部 input、select 或 button。
通过公开样式边界调整外观
先全局加载编译后的 styles.css，再按需使用 Provider appearance、className、classNames 或 style；方向和主题状态仍由宿主传入 Provider。
引入方式
从已验证的公开子路径导入组件；全局样式接入方式见安装指南。
import { BaseInputGroup } from '@inf-monkeys-tech/monkeys-design/components/base';当前限制
- InputGroup 不生成 Field 语义、焦点策略或状态传播，也不判断多个子控件是否构成可访问分组；这些合同必须由宿主显式组合。
- T17 尚缺 manual keyboard/focus、deterministic visual 与 packed React 18/19 证据；多控件溢出、RTL、focus-within 和移动端组合尚未完成最终人工闭环。
- Deterministic visual evidence and packed React 18/19 checks are pending T17/T23.
API
查看组件源码export interface BaseInputGroupProps
extends Omit<
HTMLAttributes<HTMLDivElement>,
'children' | 'className' | 'style'
> {
children?: ReactNode;
startElement?: ReactNode;
endElement?: ReactNode;
startAddon?: ReactNode;
endAddon?: ReactNode;
/** Visual state only. Propagate aria-invalid to the actual controls. */
invalid?: boolean;
/** Visual state only. Propagate disabled to the actual controls. */
disabled?: boolean;
appearance?: BaseAppearance;
className?: string;
classNames?: BaseInputGroupClassNames;
style?: CSSProperties;
}| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
children | 在 BaseInputGroup 内渲染的子内容；支持渲染函数时以对应的 Props 类型为准。 | ReactNode | — |
startElement | 显示在输入控件内部起始端的元素。 | ReactNode | — |
endElement | 显示在输入控件内部末端的元素。 | ReactNode | — |
startAddon | 附着在输入组起始端、位于控件边界之外的内容。 | ReactNode | — |
endAddon | 附着在输入组末端、位于控件边界之外的内容。 | ReactNode | — |
invalid | 是否进入无效状态并应用相应的校验样式与语义。 | boolean | false |
disabled | 是否禁用该组件及其可交互行为。 | boolean | false |
appearance | 覆盖组件使用的外观令牌或局部样式配置。 | BaseAppearance | — |
className | 追加到组件根元素的 CSS 类名。 | string | — |
classNames | 按组件公开的结构插槽分别追加 CSS 类名。 | BaseInputGroupClassNames | — |
style | 追加到组件根元素的内联样式。 | CSSProperties | — |