React 组件

UGInput 输入框

用于单行文本录入，提供前后缀、清空、密码、计数、格式化、尺寸、状态和原生输入能力。

导入方式

按需从包入口导入组件，并在应用入口引入一次样式文件。

tsx

import { UGInput } from '@ug666/ui-react'

基础用法

标签与实际输入元素保持关联，前缀可用于搜索等常见场景。

项目名称

组件搜索

前后缀与快捷操作

前后缀属于控件结构；清空、密码切换和字数统计只在满足条件时出现。

账号

密码

项目代号

组合输入与字符计数

prepend/append 与输入框形成连续边框；中文输入法选字期间不会提前格式化或截断，组合完成后再按自定义计数规则提交。

站点地址

https://

.ug666.dev

发布标题

格式化与解析

展示值与业务值可以分离，适合金额、手机号等格式。

预算

字段状态

错误、帮助、只读和禁用状态具有不同语义与交互行为。

邮箱

请输入有效邮箱地址；追踪标识 trace_20260805_workspace_member_invitation 必须与当前请求一致

邀请码

填写后加入对应团队；邀请链接将在首次成功加入后自动失效

只读编号

禁用字段

尺寸与原生表单

未显式指定时继承 ConfigProvider 的全局尺寸；name、required 和其余原生属性直接作用于真实 input。

属性

属性	类型	默认值	说明
value / defaultValue	string \| number	—	受控值或非受控初始值。
onValueChange	(value: string) => void	—	提供解析后的字符串值，便于直接更新业务状态。
label	ReactNode	—	与真实 input 关联的字段标签。
prefix / suffix	ReactNode	—	输入框内的前置或后置内容。
prepend / append	ReactNode	—	与输入框边框连续的外侧组合内容。
clearable	boolean	false	有值且可编辑时显示清空操作。
clearIcon	ReactNode	X	覆盖默认清空图标。
showPassword	boolean	false	type=password 时显示密码可见性切换。
passwordVisibleIcon / passwordHiddenIcon	ReactNode	EyeOff / Eye	覆盖密码显示与隐藏图标。
showWordLimit	boolean	false	配合 maxLength 显示字符计数。
wordLimitPosition	'inside' \| 'outside'	'inside'	字符计数位于输入框内或外侧。
countCharacters	(value: string) => number	String.length	覆盖字符计算规则，可按 Unicode 字符或业务规则计数。
formatter	(value: string) => string	—	控制输入框展示值。
parser	(value: string) => string	—	将用户输入转换成业务值。
size	'sm' \| 'default' \| 'lg'	ConfigProvider / default	控制高度、字号和横向内边距。
error	ReactNode	—	错误信息，并同步设置无障碍错误状态。
helperText	ReactNode	—	无错误时显示的辅助说明。
disabled	boolean	ConfigProvider / false	禁用输入与内部操作。
readOnly	boolean	false	只读但仍可聚焦和复制。
onClear	() => void	—	点击清空操作后触发。
ref	Ref<HTMLInputElement>	—	获取真实 input，可调用 focus、select 等原生方法。
原生属性	InputHTMLAttributes<HTMLInputElement>	—	透传 type、name、autoComplete、aria-* 等原生属性。