Input.tsx

基本信息

• 类型: React 组件 (shadcn/ui)
• 路径: ./src/components/ui/input.tsx

功能描述

输入框组件，用于接收用户文本输入。支持文件上传、禁用状态、焦点环、错误状态样式。

导出内容

• Input - 输入框组件

Props 接口

Input

属性	类型	必填	默认值	说明
type	string	否	-	输入类型 (text, email, password, file等)
className	string	否	-	自定义CSS类名
disabled	boolean	否	-	是否禁用
...props	React.ComponentProps<'input'>	否	-	input原生属性

特殊类型样式

• type="file" - 文件上传样式，适配按钮外观
• 错误状态 - 通过 aria-invalid 属性触发红色边框

依赖

• @/lib/utils - 工具函数 (cn)

使用示例

import { Input } from "@/components/ui/input";

// 基础输入框
<Input placeholder="请输入内容" />

// 带类型
<Input type="email" placeholder="邮箱地址" />
<Input type="password" placeholder="密码" />

// 文件上传
<Input type="file" />

// 禁用状态
<Input disabled placeholder="禁用状态" />

// 与 Label 配合使用
<div className="grid w-full max-w-sm items-center gap-1.5">
  <Label htmlFor="email">邮箱</Label>
  <Input type="email" id="email" placeholder="邮箱地址" />
</div>

// 在 Form 中使用
<FormControl>
  <Input placeholder="用户名" {...field} />
</FormControl>