Input
input输入框 · Base UI Field + 前后缀 + invalid
用法
基础用法
最简输入框，传 placeholder 占位。
tsx
<Input placeholder="请输入…" className="w-64" />前后缀
prefix / suffix 槽嵌入单位、货币符号等。
¥.00
tsx
<Input prefix="¥" suffix=".00" placeholder="0" className="w-64" />尺寸
size 提供 sm / md（默认）/ lg 三档。
tsx
<>
<Input size="sm" placeholder="sm" className="w-64" />
<Input size="md" placeholder="md" className="w-64" />
<Input size="lg" placeholder="lg" className="w-64" />
</>无效态
invalid 标红边框与焦点环（独立使用时手动传）。
tsx
<Input invalid defaultValue="错的值" className="w-64" />禁用态
disabled 降透明度并屏蔽交互。
tsx
<Input disabled defaultValue="禁用态" className="w-64" />何时用
单行文本输入。多行文本用 Textarea；从固定选项里选一项用 Select；布尔/多选/单选分别用 Switch / Checkbox / Radio。放进 hulian Field 内会自动接管 label/error/aria 关联。
导入
ts
import { Input, inputShellVariants } from "@hulianui/ui"Props
继承原生 <input> 属性（除 size/prefix 被下方覆盖外，如 value/onChange/type/placeholder/disabled…）。
| 名称 | 类型 | 默认 | 说明 |
|---|---|---|---|
| size | "sm" ｜ "md" ｜ "lg" | "md" | 尺寸（CVA 变体，覆盖原生 size） |
| invalid | boolean | false | 独立使用时标红；在 hulian Field 内由 Field.Root invalid 自动驱动，无需重复传 |
| disabled | boolean | false | 禁用 |
Events
| 事件 | 类型 | 说明 |
|---|---|---|
| onChange | (e: ChangeEvent<HTMLInputElement>) => void | 透传原生输入回调（受控时配合 value 使用） |
Slots
| 插槽 | 类型 | 说明 |
|---|---|---|
| prefix | ReactNode | 前缀内容（如 ¥） |
| suffix | ReactNode | 后缀内容（如 .00） |
禁忌 / 坑
在 hulian Field 内时不要重复传 invalid——Field.Root 的 invalid 会自动驱动标红，手动再传会冲突。invalid 只在脱离 Field 独立使用时手动传。
相关
Textarea · Select · Checkbox · CheckboxGroup · Radio · Switch
Playground
<Input size="md" placeholder="请输入…" />