示例
直接操作示例，查看组件在具体任务中的状态与反馈。
项目名称
权限与校验对照
使用建议
单行信息保持单一目的
一个 Input 只收集一种短信息，并由可见标签说明含义；placeholder 不能代替标签。
区分只读与禁用
readOnly 适合允许复制但不可编辑的值，disabled 适合当前不可参与提交或操作的控件。
尺寸跟随表单密度
同一表单区域保持统一 controlSize，不用尺寸变化暗示字段重要程度。
引入方式
从已验证的公开子路径导入组件；全局样式接入方式见安装指南。
import { BaseInput } from '@inf-monkeys-tech/monkeys-design/components/base';当前限制
- Input 不解析、清洗或提交业务值；格式化、异步校验和敏感信息处理必须由宿主应用实现。
- Deterministic visual evidence is pending T17/T23.
API
查看组件源码export interface BaseInputProps
extends Omit<
InputHTMLAttributes<HTMLInputElement>,
'className' | 'disabled' | 'readOnly' | 'style'
> {
icon?: ReactNode;
trailing?: ReactNode;
invalid?: boolean;
disabled?: boolean;
readOnly?: boolean;
controlSize?: BaseControlSize;
appearance?: BaseAppearance;
className?: string;
classNames?: BaseControlClassNames;
style?: CSSProperties;
}| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
icon | 显示在主要内容旁的图标。 | ReactNode | — |
trailing | 显示在主要内容末尾的附加内容。 | ReactNode | — |
invalid | 是否进入无效状态并应用相应的校验样式与语义。 | boolean | false |
disabled | 是否禁用该组件及其可交互行为。 | boolean | false |
readOnly | 是否将控件设为只读，同时保留聚焦与内容读取能力。 | boolean | false |
controlSize | 内部表单控件使用的预设尺寸。 | BaseControlSize | — |
appearance | 覆盖组件使用的外观令牌或局部样式配置。 | BaseAppearance | — |
className | 追加到组件根元素的 CSS 类名。 | string | — |
classNames | 按组件公开的结构插槽分别追加 CSS 类名。 | BaseControlClassNames | — |
style | 追加到组件根元素的内联样式。 | CSSProperties | — |