输入框
标签、提示、错误态与前置图标均可配置的文本输入。
label / hint / errorMessage / leadingIcon / isRequired / isDisabled 均为可配置 props。下方为同一 Input 的多种状态。
安装
npx @joyui/cli add input --yes或通过 JoyUI MCP / CLI 安装。
状态
默认、带提示、必填、错误、禁用——都通过 props 切换,无需另写组件。
支持项目与文件名
工号用于登录
请输入有效邮箱
应用场景
登录表单:邮箱 + 密码,字段均可替换为业务文案与校验。
API
Input
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| label | 字段标签。 | ReactNode | — | — |
| placeholder | 占位文案。 | string | — | — |
| hint | 辅助说明。 | ReactNode | — | — |
| errorMessage | 校验错误文案。 | ReactNode | — | — |
| leadingIcon | 左侧图标引用。 | ComponentType | — | — |
| isDisabled | 禁用。 | boolean | true · false | false |
| isRequired | 必填。 | boolean | true · false | false |
| type | 原生 type。 | string | text · email · password · … | text |
| className | 合并到根节点的额外类名。 | string | — | — |