Skip to Content
JoyUI
JoyUI/

输入框

标签、提示、错误态与前置图标均可配置的文本输入。

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禁用。booleantrue · falsefalse
isRequired必填。booleantrue · falsefalse
type原生 type。stringtext · email · password · …text
className合并到根节点的额外类名。string——