React 组件

UGInput 输入框

UGInput 适合单行文本录入场景，内置标签、错误提示与帮助文本能力。

导入方式

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

tsx

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

基础输入

基础输入、标签与搜索场景。

姓名

搜索内容

状态展示

错误态、帮助说明与禁用态。

邮箱

邮箱格式不正确

邀请码

输入后可获得团队权限

只读编码

尺寸展示

UGInput 本身高度固定，常通过容器宽度适配不同表单布局。

窄栏输入

标准输入

宽输入

代码示例

受控输入是业务表单中最常见的用法。

tsx

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

export function ProfileEmailField() {
  const [email, setEmail] = useState('')

  return (
    <UGInput
      label="邮箱地址"
      placeholder="you@example.com"
      helperText="用于接收系统通知"
      value={email}
      onChange={(event) => setEmail(event.target.value)}
    />
  )
}

Props

属性	类型	默认值	说明
label	string	—	输入框上方的标签文本。
error	string	—	错误信息，有值时边框会变红。
helperText	string	—	输入提示信息，未处于错误态时显示。
disabled	boolean	false	禁用输入与聚焦行为。