@ug666/react 文档演示

Input 输入框

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

导入方式

所有示例均直接使用 @ug666/react 中的真实组件导出。

import { Input } from '@ug666/react'

变体预览

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

姓名

搜索内容

状态展示

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

邮箱

邮箱格式不正确

邀请码

输入后可获得团队权限

只读编码

尺寸展示

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

窄栏输入

标准输入

宽输入

代码示例

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

import { useState } from 'react'
import { Input } from '@ug666/react'

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

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

Props 说明

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