组件 · 数据录入
Input 单行输入
单行文本输入;多行备注应使用 Textarea,不要因 Input 更常用而误选。
何时使用
单行文本、搜索词、邮箱、密码、日期或原生文件选择使用 Input;多行备注使用 Textarea,数值格式化与专门的步进交互按需求核对 InputNumber。Input 不提供上传请求、自动校验文案或搜索请求。
引入
import '@selrux/ui/tokens.css';
import '@selrux/ui/styles.css';
import { Input } from '@selrux/ui/input';样式在应用入口引入一次。Input 无必需 Provider;size 省略时读取 ConfigProvider,未配置时为 md。不要从 dist 内部路径导入。
组合与状态归属
Input 是一个原生 input。Label 与 id/htmlFor 关联可见标签;Form 或应用管理提交、校验和错误文本。ref 指向 HTMLInputElement,即使存在 prefix / suffix 也不指向外层壳。
prefix / suffix 接受 ReactNode;至少一个不是 undefined 时渲染前后缀壳,null 仍会创建对应槽位。外观 className 在有壳时落在壳上,原生属性与 style 仍传给 input。交互后缀由应用管理事件、可访问名称和 disabled 状态,不会自动继承输入框禁用状态。
值、事件与表单
受控文本使用 value 并在 onChange 中同步更新状态;刻意只读时声明 readOnly。非受控文本使用 defaultValue,由浏览器管理后续输入。不要混用 value 与 defaultValue,也不要在同一个实例生命周期内切换受控模式。
onChange 接收 React 原生 ChangeEvent<HTMLInputElement>,从 event.currentTarget.value 读取字符串。type="number" 的输入事件也不是自动转换后的 number;需要数字时由应用解析。没有 onValueChange 或自动格式化回调。组件不拦截组合输入、不更改选区,外部 value 更新不会合成一次用户输入事件。
带 name 的非禁用输入参与 FormData;readOnly 文本仍可提交,disabled 输入不参与且不能聚焦编辑。原生表单 reset 恢复非受控 defaultValue;受控值需要应用在 onReset 中恢复自己的状态。invalid 只设置错误语义,不阻止提交、不生成错误文本,也不替代 required、type、min 等原生校验。
文件选择
type="file" 的值由浏览器管理,禁止 value 和 defaultValue。onChange 从 event.currentTarget.files 读取 FileList;accept 仅提示选择器允许的类型,multiple 允许多选,不执行上传或安全校验。服务端仍需验证实际文件内容。
清空文件选择使用原生表单 reset,并同步清空应用展示的文件名。不要以受控文本值模拟文件路径。文件示例只显示所选名称,不读取文件内容、不发送网络请求。
演练场
代码演示
基础用法
状态
尺寸
受控与类型
前后缀
原生表单与重置
文件选择
原生 ref
API
Input
基础输入。ref 指向原生 input。
(props: InputProps & React.RefAttributes<HTMLInputElement>) => React.ReactNode| 属性 | 类型 | 可选 | 默认值 / 证据 | 说明 | 来源 |
|---|---|---|---|---|---|
| type | "number" | "search" | "text" | "tel" | "url" | "email" | "date" | "time" | "password" | "file" | 是 | 未声明;见说明/约束 | 文本类原生 type。省略时按 text 渲染。 | headless: @selrux/headless/dist/types/components/input/input-props.d.ts |
| value | string | number | readonly string[] | 是 | 未声明;见说明/约束 | 受控值。父级更新时本组件不改写选区。 | headless: @selrux/headless/dist/types/components/input/input-props.d.ts |
| defaultValue | string | number | readonly string[] | 是 | 未声明;见说明/约束 | 与 value 互斥。 | headless: @selrux/headless/dist/types/components/input/input-props.d.ts |
| accept | string | 是 | 未声明;见说明/约束 | react-native: @types/react/index.d.ts | |
| disabled | boolean | 是 | 未声明;见说明/约束 | react-native: @types/react/index.d.ts | |
| form | string | 是 | 未声明;见说明/约束 | react-native: @types/react/index.d.ts | |
| multiple | boolean | 是 | 未声明;见说明/约束 | react-native: @types/react/index.d.ts | |
| name | string | 是 | 未声明;见说明/约束 | react-native: @types/react/index.d.ts | |
| placeholder | string | 是 | 未声明;见说明/约束 | react-native: @types/react/index.d.ts | |
| readOnly | boolean | 是 | 未声明;见说明/约束 | react-native: @types/react/index.d.ts | |
| required | boolean | 是 | 未声明;见说明/约束 | react-native: @types/react/index.d.ts | |
| onChange | ChangeEventHandler<HTMLInputElement, HTMLInputElement> | 是 | 未声明;见说明/约束 | react-native: @types/react/index.d.ts | |
| className | string | 是 | 未声明;见说明/约束 | react-native: @types/react/index.d.ts | |
| id | string | 是 | 未声明;见说明/约束 | react-native: @types/react/index.d.ts | |
| aria-describedby | string | 是 | 未声明;见说明/约束 | Identifies the element (or elements) that describes the object. | react-native: @types/react/index.d.ts |
| aria-label | string | 是 | 未声明;见说明/约束 | Defines a string value that labels the current element. | react-native: @types/react/index.d.ts |
| onClick | MouseEventHandler<HTMLInputElement> | 是 | 未声明;见说明/约束 | react-native: @types/react/index.d.ts | |
| invalid | boolean | 是 | 未声明;见说明/约束 | 错误状态。 为真时设置 aria-invalid,不渲染错误文案。显式 aria-invalid 优先。 说明节点的 id 由调用方通过 aria-describedby、aria-errormessage 传入。 | headless: @selrux/headless/dist/types/components/input/input-props.d.ts |
| size | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | 是 | 未声明;见说明/约束 | 尺寸。省略时使用 ConfigProvider,无配置时为 md。 | ui: @selrux/ui/dist/types/components/input/input-props.d.ts |
| prefix | ReactNode | 是 | 未声明;见说明/约束 | 前衬内容(如图标);提供时控件外包一层 affix 壳。 装饰性图标请由调用方标记 aria-hidden。 | ui: @selrux/ui/dist/types/components/input/input-props.d.ts |
| suffix | ReactNode | 是 | 未声明;见说明/约束 | 后衬内容(如图标、可视切换按钮)。 | ui: @selrux/ui/dist/types/components/input/input-props.d.ts |
| ref | Ref<HTMLInputElement> | 是 | 未声明;见说明/约束 | Allows getting a ref to the component instance. Once the component unmounts, React will set ref.current to null (or call the ref with null if you passed a callback ref). | react-native: @types/react/index.d.ts |
其余 289 个 React 原生属性按继承汇总;关键原生属性已展开。
InputFileType
文件选择与文本类型分开。
"file"InputProps
在无样式输入上增加视觉档与前/后衬槽。 size 不再表示原生字符宽度;prefix 收编原生 RDFa 同名属性,交给衬槽。 条件类型逐成员 Omit,保持受控/非受控/文件联合的判别结构。
(Omit<InputControlledProps, "prefix"> | Omit<InputUncontrolledProps, "prefix"> | Omit<InputFileProps, "prefix">) & { size?: InputSize; prefix?: ReactNode; suffix?: ReactNode; }| 属性 | 类型 | 可选 | 默认值 / 证据 | 说明 | 来源 |
|---|---|---|---|---|---|
| type | "number" | "search" | "text" | "tel" | "url" | "email" | "date" | "time" | "password" | "file" | 是 | 未声明;见说明/约束 | 文本类原生 type。省略时按 text 渲染。 | headless: @selrux/headless/dist/types/components/input/input-props.d.ts |
| value | string | number | readonly string[] | 是 | 未声明;见说明/约束 | 受控值。父级更新时本组件不改写选区。 | headless: @selrux/headless/dist/types/components/input/input-props.d.ts |
| defaultValue | string | number | readonly string[] | 是 | 未声明;见说明/约束 | 与 value 互斥。 | headless: @selrux/headless/dist/types/components/input/input-props.d.ts |
| accept | string | 是 | 未声明;见说明/约束 | react-native: @types/react/index.d.ts | |
| disabled | boolean | 是 | 未声明;见说明/约束 | react-native: @types/react/index.d.ts | |
| form | string | 是 | 未声明;见说明/约束 | react-native: @types/react/index.d.ts | |
| multiple | boolean | 是 | 未声明;见说明/约束 | react-native: @types/react/index.d.ts | |
| name | string | 是 | 未声明;见说明/约束 | react-native: @types/react/index.d.ts | |
| placeholder | string | 是 | 未声明;见说明/约束 | react-native: @types/react/index.d.ts | |
| readOnly | boolean | 是 | 未声明;见说明/约束 | react-native: @types/react/index.d.ts | |
| required | boolean | 是 | 未声明;见说明/约束 | react-native: @types/react/index.d.ts | |
| onChange | ChangeEventHandler<HTMLInputElement, HTMLInputElement> | 是 | 未声明;见说明/约束 | react-native: @types/react/index.d.ts | |
| className | string | 是 | 未声明;见说明/约束 | react-native: @types/react/index.d.ts | |
| id | string | 是 | 未声明;见说明/约束 | react-native: @types/react/index.d.ts | |
| aria-describedby | string | 是 | 未声明;见说明/约束 | Identifies the element (or elements) that describes the object. | react-native: @types/react/index.d.ts |
| aria-label | string | 是 | 未声明;见说明/约束 | Defines a string value that labels the current element. | react-native: @types/react/index.d.ts |
| onClick | MouseEventHandler<HTMLInputElement> | 是 | 未声明;见说明/约束 | react-native: @types/react/index.d.ts | |
| invalid | boolean | 是 | 未声明;见说明/约束 | 错误状态。 为真时设置 aria-invalid,不渲染错误文案。显式 aria-invalid 优先。 说明节点的 id 由调用方通过 aria-describedby、aria-errormessage 传入。 | headless: @selrux/headless/dist/types/components/input/input-props.d.ts |
| size | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | 是 | 未声明;见说明/约束 | 尺寸。省略时使用 ConfigProvider,无配置时为 md。 | ui: @selrux/ui/dist/types/components/input/input-props.d.ts |
| prefix | ReactNode | 是 | 未声明;见说明/约束 | 前衬内容(如图标);提供时控件外包一层 affix 壳。 装饰性图标请由调用方标记 aria-hidden。 | ui: @selrux/ui/dist/types/components/input/input-props.d.ts |
| suffix | ReactNode | 是 | 未声明;见说明/约束 | 后衬内容(如图标、可视切换按钮)。 | ui: @selrux/ui/dist/types/components/input/input-props.d.ts |
其余 288 个 React 原生属性按继承汇总;关键原生属性已展开。
InputSize
六档视觉尺寸。默认档来自 ConfigProvider,无配置时为 md。
"xs" | "sm" | "md" | "lg" | "xl" | "2xl"InputTextType
首轮公开的文本类型。
"number" | "search" | "text" | "tel" | "url" | "email" | "date" | "time" | "password"InputType
组件公开的 type 并集。
"file" | InputTextTypeInputVariantOptions
inputVariants 接受的尺寸和附加类。
InputVariantOptions| 属性 | 类型 | 可选 | 默认值 / 证据 | 说明 | 来源 |
|---|---|---|---|---|---|
| size | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | 是 | 未声明;见说明/约束 | 尺寸。省略或非法时为 md。 | ui: @selrux/ui/dist/types/components/input/input-variants.d.ts |
| className | string | 是 | 未声明;见说明/约束 | 追加到结果末尾的类名。不做冲突合并。 | ui: @selrux/ui/dist/types/components/input/input-variants.d.ts |
| affix | boolean | 是 | 未声明;见说明/约束 | 组合前/后衬壳;外观类落在壳上。 | ui: @selrux/ui/dist/types/components/input/input-variants.d.ts |
| affixControl | boolean | 是 | 未声明;见说明/约束 | affix 壳内的原生控件;去掉壳已承担的外观。 | ui: @selrux/ui/dist/types/components/input/input-variants.d.ts |
其余 0 个 React 原生属性按继承汇总;关键原生属性已展开。
工具函数
组合基础类、已解析档位和调用方附加类。
(options?: InputVariantOptions) => string尺寸与关键限制
- size 仅为 xs / sm / md / lg / xl / 2xl 六档外观尺寸;不是原生 input 的字符宽度数字。显式有效 size 优先于 ConfigProvider,最终回退 md。
- 文本 type 支持 text / password / email / search / tel / url / number / date / time;另有 file 分支。checkbox、radio、range 不属于 Input。
- value 与 defaultValue 互斥;file 两者都不能传。属性表的 optional 不能解释为所有联合分支可任意组合。
- 没有 Input.Password、Input.Search、allowClear、onValueChange、label 或 error 等公开 API;密码切换、清空、标签与错误说明通过现有组件组合实现。
- inputVariants 只返回样式类,不管理值、事件或 ConfigProvider;其 size 省略或非法时直接回退 md。InputVariantOptions 的 affix / affixControl 是样式选项,不是 Input 的同名 props。
- 原生日期、时间和文件控件的外观与操作取决于浏览器;本批验证范围见交付记录,不能承诺跨浏览器一致。
无障碍
优先给输入提供可见 Label,并通过 useId 生成稳定 id;特殊紧凑场景至少提供 aria-label。placeholder 不替代标签。错误说明通过 aria-describedby / aria-errormessage 关联;显式 aria-invalid 优先于 invalid。
保留原生 Tab、文本编辑和焦点行为。prefix 的装饰文本可标 aria-hidden;密码显示按钮等交互后缀应有可见操作名称、type="button" 及对应状态。不要自动抢焦点;ref.focus() / select() 应由明确用户操作触发。
文档快照:edbed4e3949112ae4797ba611a523984