组件 · 数据录入

Input 单行输入

单行文本输入;多行备注应使用 Textarea,不要因 Input 更常用而误选。

何时使用

单行文本、搜索词、邮箱、密码、日期或原生文件选择使用 Input;多行备注使用 Textarea,数值格式化与专门的步进交互按需求核对 InputNumber。Input 不提供上传请求、自动校验文案或搜索请求。

引入

tsx
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,并同步清空应用展示的文件名。不要以受控文本值模拟文件路径。文件示例只显示所选名称,不读取文件内容、不发送网络请求。

演练场

代码演示

基础用法

状态

请输入有效邮箱;invalid 本身不会执行格式校验。

尺寸

受控与类型

value = admin@example.com

前后缀

原生表单与重置

尚未读取

文件选择

仅展示文件名,不会上传。accept 是选择提示。尚未选择文件

原生 ref

API

Input

基础输入。ref 指向原生 input。

ts
(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
valuestring | number | readonly string[]是未声明;见说明/约束受控值。父级更新时本组件不改写选区。headless: @selrux/headless/dist/types/components/input/input-props.d.ts
defaultValuestring | number | readonly string[]是未声明;见说明/约束与 value 互斥。headless: @selrux/headless/dist/types/components/input/input-props.d.ts
acceptstring是未声明;见说明/约束react-native: @types/react/index.d.ts
disabledboolean是未声明;见说明/约束react-native: @types/react/index.d.ts
formstring是未声明;见说明/约束react-native: @types/react/index.d.ts
multipleboolean是未声明;见说明/约束react-native: @types/react/index.d.ts
namestring是未声明;见说明/约束react-native: @types/react/index.d.ts
placeholderstring是未声明;见说明/约束react-native: @types/react/index.d.ts
readOnlyboolean是未声明;见说明/约束react-native: @types/react/index.d.ts
requiredboolean是未声明;见说明/约束react-native: @types/react/index.d.ts
onChangeChangeEventHandler<HTMLInputElement, HTMLInputElement>是未声明;见说明/约束react-native: @types/react/index.d.ts
classNamestring是未声明;见说明/约束react-native: @types/react/index.d.ts
idstring是未声明;见说明/约束react-native: @types/react/index.d.ts
aria-describedbystring是未声明;见说明/约束Identifies the element (or elements) that describes the object.react-native: @types/react/index.d.ts
aria-labelstring是未声明;见说明/约束Defines a string value that labels the current element.react-native: @types/react/index.d.ts
onClickMouseEventHandler<HTMLInputElement>是未声明;见说明/约束react-native: @types/react/index.d.ts
invalidboolean是未声明;见说明/约束错误状态。 为真时设置 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
prefixReactNode是未声明;见说明/约束前衬内容(如图标);提供时控件外包一层 affix 壳。 装饰性图标请由调用方标记 aria-hidden。ui: @selrux/ui/dist/types/components/input/input-props.d.ts
suffixReactNode是未声明;见说明/约束后衬内容(如图标、可视切换按钮)。ui: @selrux/ui/dist/types/components/input/input-props.d.ts
refRef<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

文件选择与文本类型分开。

ts
"file"

InputProps

在无样式输入上增加视觉档与前/后衬槽。 size 不再表示原生字符宽度;prefix 收编原生 RDFa 同名属性,交给衬槽。 条件类型逐成员 Omit,保持受控/非受控/文件联合的判别结构。

ts
(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
valuestring | number | readonly string[]是未声明;见说明/约束受控值。父级更新时本组件不改写选区。headless: @selrux/headless/dist/types/components/input/input-props.d.ts
defaultValuestring | number | readonly string[]是未声明;见说明/约束与 value 互斥。headless: @selrux/headless/dist/types/components/input/input-props.d.ts
acceptstring是未声明;见说明/约束react-native: @types/react/index.d.ts
disabledboolean是未声明;见说明/约束react-native: @types/react/index.d.ts
formstring是未声明;见说明/约束react-native: @types/react/index.d.ts
multipleboolean是未声明;见说明/约束react-native: @types/react/index.d.ts
namestring是未声明;见说明/约束react-native: @types/react/index.d.ts
placeholderstring是未声明;见说明/约束react-native: @types/react/index.d.ts
readOnlyboolean是未声明;见说明/约束react-native: @types/react/index.d.ts
requiredboolean是未声明;见说明/约束react-native: @types/react/index.d.ts
onChangeChangeEventHandler<HTMLInputElement, HTMLInputElement>是未声明;见说明/约束react-native: @types/react/index.d.ts
classNamestring是未声明;见说明/约束react-native: @types/react/index.d.ts
idstring是未声明;见说明/约束react-native: @types/react/index.d.ts
aria-describedbystring是未声明;见说明/约束Identifies the element (or elements) that describes the object.react-native: @types/react/index.d.ts
aria-labelstring是未声明;见说明/约束Defines a string value that labels the current element.react-native: @types/react/index.d.ts
onClickMouseEventHandler<HTMLInputElement>是未声明;见说明/约束react-native: @types/react/index.d.ts
invalidboolean是未声明;见说明/约束错误状态。 为真时设置 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
prefixReactNode是未声明;见说明/约束前衬内容(如图标);提供时控件外包一层 affix 壳。 装饰性图标请由调用方标记 aria-hidden。ui: @selrux/ui/dist/types/components/input/input-props.d.ts
suffixReactNode是未声明;见说明/约束后衬内容(如图标、可视切换按钮)。ui: @selrux/ui/dist/types/components/input/input-props.d.ts

其余 288 个 React 原生属性按继承汇总;关键原生属性已展开。

InputSize

六档视觉尺寸。默认档来自 ConfigProvider,无配置时为 md。

ts
"xs" | "sm" | "md" | "lg" | "xl" | "2xl"

InputTextType

首轮公开的文本类型。

ts
"number" | "search" | "text" | "tel" | "url" | "email" | "date" | "time" | "password"

InputType

组件公开的 type 并集。

ts
"file" | InputTextType

InputVariantOptions

inputVariants 接受的尺寸和附加类。

ts
InputVariantOptions
属性类型可选默认值 / 证据说明来源
size"xs" | "sm" | "md" | "lg" | "xl" | "2xl"是未声明;见说明/约束尺寸。省略或非法时为 md。ui: @selrux/ui/dist/types/components/input/input-variants.d.ts
classNamestring是未声明;见说明/约束追加到结果末尾的类名。不做冲突合并。ui: @selrux/ui/dist/types/components/input/input-variants.d.ts
affixboolean是未声明;见说明/约束组合前/后衬壳;外观类落在壳上。ui: @selrux/ui/dist/types/components/input/input-variants.d.ts
affixControlboolean是未声明;见说明/约束affix 壳内的原生控件;去掉壳已承担的外观。ui: @selrux/ui/dist/types/components/input/input-variants.d.ts

其余 0 个 React 原生属性按继承汇总;关键原生属性已展开。

工具函数

组合基础类、已解析档位和调用方附加类。

ts
(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