示例
直接操作示例，查看组件在具体任务中的状态与反馈。
受控名称校验
用于导航和成员邀请，最多 40 个字符。
错误信息
仅接受 HTTPS 地址。
地址格式不正确，请输入完整的 HTTPS 地址。
成员邮箱
用于发送团队邀请。
项目标识
保存后不可自动修改。
当前标识可用。
回调地址
请输入完整的 HTTPS 地址。
使用建议
让标签指向真实控件
优先使用 render props 把 id、描述和错误关联属性传给输入控件，避免仅靠视觉邻近。
说明与错误各司其职
description 解释格式或约束，error 说明当前问题和修正方式；错误出现时不会重复普通消息。
统一表达必填和禁用
Field 的 required、disabled 应与内部原生控件保持一致，宿主仍需执行最终校验。
引入方式
从已验证的公开子路径导入组件；全局样式接入方式见安装指南。
import { BaseField } from '@inf-monkeys-tech/monkeys-design/components/base';当前限制
- Field 只为直接子控件提供关联属性；包含多个输入的复合字段仍需宿主设计分组、焦点与错误汇总。
- Deterministic visual evidence is pending T17/T23.
API
查看组件源码export interface BaseFieldProps
extends Omit<
HTMLAttributes<HTMLDivElement>,
'children' | 'className' | 'style' | 'title'
> {
label?: ReactNode;
description?: ReactNode;
message?: ReactNode;
error?: ReactNode;
required?: boolean;
disabled?: boolean;
htmlFor?: string;
descriptionId?: string;
messageId?: string;
errorId?: string;
children?: ReactNode | ((controlProps: BaseFieldControlProps) => ReactNode);
appearance?: BaseAppearance;
className?: string;
classNames?: BaseFieldClassNames;
style?: CSSProperties;
}| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
label | 字段控件上方显示并与控件关联的标签。 | ReactNode | — |
description | 用于补充标题或标签含义的说明内容。 | ReactNode | — |
message | 字段下方显示的帮助、成功或校验消息。 | ReactNode | — |
error | 字段校验失败时显示的错误内容。 | ReactNode | — |
required | 是否将该字段标记为必填。 | boolean | false |
disabled | 是否禁用该组件及其可交互行为。 | boolean | false |
htmlFor | 标签关联的表单控件 id。 | string | — |
descriptionId | 说明文本元素的 id，用于建立 aria-describedby 关联。 | string | — |
messageId | 消息元素的 id，用于建立可访问性关联。 | string | — |
errorId | 错误文本元素的 id，用于建立可访问性关联。 | string | — |
children | 在 BaseField 内渲染的子内容；支持渲染函数时以对应的 Props 类型为准。 | ReactNode | ((controlProps: BaseFieldControlProps) => ReactNode) | — |
appearance | 覆盖组件使用的外观令牌或局部样式配置。 | BaseAppearance | — |
className | 追加到组件根元素的 CSS 类名。 | string | — |
classNames | 按组件公开的结构插槽分别追加 CSS 类名。 | BaseFieldClassNames | — |
style | 追加到组件根元素的内联样式。 | CSSProperties | — |