ZartUI · 数字输入框

第一种：左侧数字输入 + 中间上下箭头 + 右侧单位

状态演示
默认
px
悬停
px
激活（聚焦）
px
点击上箭头
px
点击下箭头
px
禁用
px
错误
px
数值不能小于 0
交互演示

点击上下箭头可 +1 / −1，也可直接在输入框内输入数字

宽度
px
高度
px
不透明度
%
第二种：数字输入 + 后置单位选择
默认
px
px
%
em
rem
悬停
px
激活（输入框聚焦）
px
后置展开
px
px
%
em
rem
禁用
px
错误
px
数值不能小于 0

可点击后置选择切换单位，点击上下箭头 ±1

px
px
%
em
rem
第三种：减号 | 数字输入框 | 加号
默认
悬停
激活（聚焦）
点击减号
点击加号
禁用
错误
数值不能小于 0

点击减号 −1，点击加号 +1

规范参数
属性值
整体高度32px，圆角 4px
默认描边1px solid #DDE1EB
悬停描边1px solid #3388FF
激活描边1px solid #3388FF + 外发光 0 0 0 2px #D6EDFF
错误描边1px solid #FF4433
禁用背景#F5F7FA，描边 #E9ECF2
禁用文字/单位色#A8B4C8
输入区内边距左 8px，字号 14px，色 #223355
Placeholder 色#A8B4C8
上下箭头区宽度20px，左侧无分隔线，上下箭头之间无边框；单位区左侧有 1px solid #E9ECF2 分隔线
箭头图标尺寸10×10px，stroke #A8B4C8，stroke-width 1.5
箭头悬停背景 #F5F7FA，箭头色 #3388FF
箭头点击态箭头色变为 #3388FF，数字 ±1
禁用箭头色#C5CDD9，pointer-events none
单位区内边距0 10px，字号 13px，色 #6B7A99
错误提示输入框下方，margin-top 4px，字号 12px，色 #FF4433
返回组件首页