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|

错误

输入敏感个人信息(例如密码或卡号)时默认使用隐藏功能,使密码等敏感用户信息的输入不可见。

新昵称

例如:飞翔的企鹅

正确

新昵称

新昵称

错误

预留文案内容不要和标题重复使用。

DESIGN

中文