一个 React 输入框，采用 Liquid Glass 字段与图标插槽。
Input 渲染包裹原生 <input> 的玻璃控件，并提供可选的前后图标。输入框负责玻璃表面与原生表单行为；若要显示可见标签、说明与校验信息，请使用 Field 包裹。
使用 value + onValueChange 创建受控输入框，或使用 defaultValue 创建非受控输入框。type、name、placeholder、required、readOnly 等原生输入属性会透传；size 保留给组件的视觉尺寸，style 会和 className 一起合并到外层 root。
Enter an email address.
提供 xs、sm、md、lg、xl 五种尺寸；高度、内边距、圆角、文字与图标尺寸会同步缩放。若希望标签与信息尺寸一致，请为 Field 传入相同的 size。
leadingIcon 渲染在输入框前方，trailingIcon 渲染在后方。两个插槽都是装饰性的，会带有 aria-hidden="true"；可访问名称请使用 Field 提供的可见标签，没有可见标签时使用 aria-label。
disabled 会透传给原生输入框并淡化控件。输入框位于 Field 内时，请把 disabled 设在 Field 上，让标签与信息一起淡出。readOnly 保留焦点与文本选择能力，但阻止修改。
Input 渲染原生 <input>。用 Field 包裹即可获得可见标签、说明与校验信息；Field 会自动关联 aria-describedby 与 aria-invalid。只有在没有可见标签时才使用 aria-label 或 aria-labelledby；占位文本不是标签。图标插槽是装饰性的。required、name 与 type 等原生属性会保留原生表单行为。标签模式见可访问性指南。
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
leadingIcon | ReactNode | — | 输入框前的装饰图标。 |
trailingIcon | ReactNode | — | 输入框后的装饰图标。 |
size | "xs" | "sm" | "md" | "lg" | "xl" | "md" | 控制高度、内边距、圆角、文字与图标尺寸。 |
value | string | number | readonly string[] | — | 受控值。 |
defaultValue | string | number | readonly string[] | — | 非受控时的初始值。 |
onValueChange | (value: string, details) => void | — | 值变化时调用。 |
type | HTMLInputTypeAttribute | "text" | 原生输入类型。 |
placeholder | string | — | 占位文字。 |
name | string | — | 表单字段名。 |
id | string | 自动生成 | 输入框 ID；省略时会自动生成。 |
disabled | boolean | false | 禁用输入框并淡化整个控件。 |
readOnly | boolean | false | 阻止修改，但保留焦点与文本选择能力。 |
required | boolean | false | 表单提交前必须有值。 |
aria-label | string | — | 没有可见标签时使用的可访问名称。 |
aria-labelledby | string | — | 指向外部可访问名称的 ID 引用。 |
aria-describedby | string | — | 指向额外辅助说明的 ID 引用。Field 的说明与错误信息会与它合并。 |
render | ReactElement | ((props, state) => ReactElement) | — | 替换输入元素。 |
ref | Ref<HTMLElement> | — | 转发到输入元素的 ref。 |
className | string | — | Tailwind 类名，合并到外层 root。 |
style | CSSProperties | — | 内联样式，合并到与 className 相同的元素。 |
ui | { root?: ClassValue; control?: ClassValue; glass?: ClassValue; overlay?: ClassValue; leadingIcon?: ClassValue; input?: ClassValue; trailingIcon?: ClassValue } | — | 按 data-slot 组织的内部槽位类名。 |
| 属性 | 说明 |
|---|---|
data-disabled | 输入框禁用时存在。 |
data-valid | 输入框包裹在 Field 中且有效时存在。 |
data-invalid | 输入框包裹在 Field 中且无效时存在。 |
data-touched | 输入框包裹在 Field 中并被触碰后存在。 |
data-dirty | 输入框包裹在 Field 中且值变化后存在。 |
data-filled | 输入框包裹在 Field 中且有值时存在。 |
data-focused | 输入框包裹在 Field 中且聚焦时存在。 |
data-slot | 标记内部部件（root、control、glass、overlay、leading-icon、input、trailing-icon），用于样式选择。 |
组件使用共享玻璃材质。可以在父级调整 --ui-glass-* token，用 className 与 style 控制布局，并通过 ui 按 data-slot 调整内部槽位。style 作用于外层 root；原生输入框请使用 ui.input。组件级数值位于 src/theme/input.ts。Token 分层与预设见主题指南。