Input 输入框
基本表单组件,并在原生控件基础上进行了功能扩展,可以组合使用。Input 输入框分为三类Input输入框、Compound Input组合输入框、TextArea文本域
构成
标题
请输入内容
Text
额外提示语,文字过多时输入框宽度折行
1
6
2
3
4
5
1: 标题
可选
2: 前缀
可选,可切换为文字、icon、下拉选择
3: 预留文案
必有,一般为输入框提示语,输入框激活后会被输入的文案替代掉
4: 容器
必有,用于承载输入的文字
5: 后缀
可选,可切换为文字、icon、下拉选择
4: 辅助文案
可选,对此输入框信息的额外补充
变体/类型
请输入内容
请输入内容
请输入内容
+86
请输入内容
+86
请输入内容
请输入内容
交易输入框:
密码输入框:
多功能输入框(默认输入框):
文本域输入框:
选择器输入框:
选择器输入框:
多功能输入框:
除了以上典型主要变体以外,可以利用多功能输入框的figma属性来控制想要的形态 例如【前缀 icon +后缀文字】【前缀文字+后缀下拉】等
使用场景
地址
数量
All
数量
数量
补充
在大多数情况下输入框是横向拉通放置,在交易页面居左/右根据容器的宽度放置
交互
请输入内容
Default
此时输入框属于未激活状态未与用户发生交互。如果区域被选中,则状态变为已聚焦。
|请输入内容
focus
这是用户点击了输入框还未输入文本的状态,显示光标,显示描边。
123456|
Active
这是用户输入文本字段的状态。显示光标与一键清空 icon,显示描边。
123456
Down
这是用户输入完成点击其他交互后的状态。
123456
额外提示语,文字过多时输入框宽度折行
Error
这是用户输入的内容与条件不匹配,显示一键清空 icon与导致报错的提示文字。并显示红色描边。若用户继续点击该区域,会回到 Active 的状态让用户继续输入。
123456
Disable
由于某种原因,用户无法输入。虽然字段中存在已输入的详细信息,但会变暗后显示。即使选择该区域,也不会获得焦点。
标注
8px
12px
8px
标题
请输入内容
额外提示语,文字过多时输入框宽度折行
12px
多语言适配
kasndfasdiufeabsdf8asdjkfhhiuosdaaskdf
数量
All
1238947612834612839461829364182364812123123123364
All
适应内容
例如提币地址输入框可将输入框的高度设置成适应内容,这样可以保证地址的尾数始终可以展示出来
缩小字号+截断
在绝大多数输入框上,当内容超长时,有限缩小字号,字号最小缩小到 10px,若还超长则末尾...截断。
RTL
标题
请输入内容
LTR
标题
|654321
RTL
123456
额外提示语,文字过多时输入框宽度折行
LTR
654321
额外提示语,文字过多时输入框宽度折行
RTL
用法
标题*
请输入内容
正确
标题(必填)
请输入内容
慎用
当向用户索取信息时,必须填写的必填项目可以在标签右侧显示红色*标记。慎用文字将必填信息告知用户“必填”。如果文字量增加,用户会觉得表单复杂,难以填写。
输入手机号
正确
+86
输入手机号
错误
手机号输入框默认国家不展示。
正确
123456|
错误
输入敏感个人信息(例如密码或卡号)时默认使用隐藏功能,使密码等敏感用户信息的输入不可见。
新昵称
例如:飞翔的企鹅
正确
新昵称
新昵称
错误
预留文案内容不要和标题重复使用。