ZartUI · 输入框

单行输入框(五种状态)· 多行输入框 · 前缀图标 + 后缀

单行输入框 · 状态展示
默认
悬停(无内容)
悬停(有内容,显示清除图标)
激活(无内容)
激活(有内容,显示清除图标)
禁用
错误
请输入正确的格式
单行输入框 · 交互演示
输入框(悬停查看描边变化,输入内容后悬停/聚焦显示清除)
状态描边背景其他
默认#DDE1EB#FFFFFF占位文字 #A8B4C8
悬停#3388FF#FFFFFF有内容时右侧显示清除图标
激活#3388FF#FFFFFF外发光 0 0 0 2px #D6EDFF;有内容时右侧显示清除图标
禁用#E9ECF2#F5F7FA不可交互,cursor: not-allowed
错误#FF4433#FFFFFF框下方错误说明文字 12px #FF4433
多行输入框 · 状态展示
默认
0 / 200
禁用
0 / 200
错误
9 / 200
输入内容不符合要求
接近字数上限
42 / 50
属性值
最小高度84px(单行 32px + 增量 52px)
内边距8px 12px 24px 12px(底部留字数统计空间)
resizevertical(可拖拽高度,不可横向拉伸)
字数统计位置输入框右下角,绝对定位
字数统计颜色正常 #A8B4C8;接近上限 #FF6600;超出上限 #FF4433
其余状态悬停 / 激活 / 禁用 / 错误与单行一致
输入框 · 前缀图标 + 后缀内容
默认(前缀账号图标)
@example.com
悬停(前缀 + 后缀)
@example.com
激活(有内容,前缀 + 后缀 + 清除图标)
@example.com
禁用(前缀 + 后缀)
@example.com
交互演示(输入后悬停/聚焦显示清除)
@example.com
属性值
前缀图标账号线状图标,16×16px,stroke #A8B4C8,绝对定位 left: 8px
有前缀时左内边距padding-left: 32px
后缀文字颜色#223355
后缀提示图标线状 info 图标,16×16px,stroke #A8B4C8
清除图标与后缀共存清除图标偏移至后缀左侧,right 值随后缀宽度调整
输入框 · 前置选择 + 后缀文字
默认
手机号 @example.com
悬停
手机号 @example.com
激活(有内容,显示清除图标)
手机号 @example.com
禁用
手机号 @example.com
错误
手机号 @example.com
请输入正确的手机号
交互演示(输入后悬停/聚焦显示清除)
手机号 @example.com
属性值
前置区域背景#F5F7FA
前置已选文字颜色#223355
前置下拉箭头线状,12×12px,stroke #A8B4C8
前置与输入框拼接共用描边,hover/focus 时两侧同步变色为 #3388FF
后缀文字颜色#223355;禁用时 #A8B4C8
其余状态悬停 / 激活 / 禁用 / 错误与基础单行一致
输入框 · 前置选择 + 后置选择
默认(点击前置查看下拉)
手机号 .com
悬停
手机号 .com
激活
手机号 .com
禁用
手机号 .com
错误
手机号 .com
请输入正确的手机号
前置下拉选项 · 展开示意
下拉展开(已选"手机号")
手机号 .com
手机号
邮箱
用户名
工号
属性值
前置背景默认 #F5F7FA;激活时变 #FFFFFF
后置背景始终 #F5F7FA(不随激活变化)
描边联动hover / focus / error 时前置、输入框、后置描边同步
下拉菜单距触发元素 4px,圆角 4px,选中项 #3388FF / 背景 #F0F9FF
下拉 hover背景 #F5F7FA
返回组件首页