组件 文本框

文本框

文本框允许用户输入文本,选择文本,以及通过自动完成查找数据。

文本框通常出现在表单中。

用户可以输入文本、数值或者混合格式的数据。

文本框类型

单行
多行
全宽

可用的功能

字数统计
自动完成
搜索过滤
必填字段
密码隐藏

输入 展开或收起内容 当内容收起时,箭头向下,当内容展开时,箭头向上。

轻触文本框会触发两个操作:

  • 文本框内出现光标
  • 显示键盘

文本框分解

  • 标签描述每个字段中需要输入的类别
  • 提示文本是占位符文本,表明所需信息的类型,有时候是输入示例
  • 帮助文本出现在输入字段的下方,提供了额外的情境

输入类型

文本框的类型决定了字段内允许输入什么样的字符,虚拟键盘可以提供用户常用的字符。

需要优化的输入类型:

  • 数字:手机号、信用卡号、PIN 码
  • 文本:专有名称、用户名、URL
  • 混合格式:邮件地址、街道地址、搜索关键词

自动大写

在进行本地化时,如有必要可以大写每个文本框的句首字母。特别在以下场景中:

  • 对事物命名,例如蓝牙设备、用户、指纹或闹钟
  • 包含像句子一样的消息,例如短信

1、标签
2、提示文本
3、帮助文本

标签 展开或收起内容 当内容收起时,箭头向下,当内容展开时,箭头向上。

当用户使用文本输入框时,浮动行内标签会浮动到输入框的上方。

浮动行内标签

浮动行内标签

标签颜色

标签颜色应当参考应用的调色板,同时要有适当的对比度。

亮色主题

亮色主题下的浮动行内标签:带提示文本/标签的普通状态、聚焦状态、带输入文本和标签的普通状态、禁用状态

暗色主题

暗色主题下的浮动行内标签:带提示文本/标签的普通状态、聚焦状态、带输入文本和标签的普通状态、禁用状态

规格

浮动标签

  • 12sp Roboto Regular

提示和输入文本

  • 常规标签:16sp Roboto Regular
  • 紧凑型标签:13sp Roboto Regular

在聚焦到输入框之前,浮动标签文本为 16sp(紧凑型标签为 13sp)。聚焦到输入框后,标签移动到输入框上方,字号变为 12sp(包括常规和紧凑型文本)。

浮动标签
磁帖高度:72dp

标签文本
字号:12sp
上边距:16dp
下边距:8dp

提示和输入文本
字号:16sp
下边距:8dp

输入线
下边距:8dp


紧凑型浮动标签
磁帖高度:60dp

标签文本
字号:12sp
上边距:12dp
下边距:4dp

提示和输入文本
字号:13sp
下边距:12dp

输入线
下边距:4dp

样式 展开或收起内容 当内容收起时,箭头向下,当内容展开时,箭头向上。

紧凑型

在鼠标键盘为主要输入方式时,尺寸可以被压缩以适应紧凑型的布局。

颜色

标签颜色应当参考应用的调色板。推荐使用下列颜色:

  • 文本框和光标:使用调色板中的强调色,或对比度色
  • 错误状态:使用对比度色,例如暖色调(如红色或橙色)

亮色主题 - 暗色文本(#000000)

不透明度

正常

38%

鼠标悬停

54%

按下

54%

聚焦

87%

有文本的正常状态

87%

错误

100%

禁用

38%

暗色主题 - 亮色文本(#ffffff)

不透明度

正常

50%

鼠标悬停

70%

按下

70%

聚焦

100%

有文本的正常状态

100%

出错

100%

禁用

50%

单行文本框 展开或收起内容 当内容收起时,箭头向下,当内容展开时,箭头向上。

单行文本框

单行文本框在光标到达右边缘时,文本会自动向左侧滚动。

单行文本框

单行文本框

文本框的颜色应参考应用的调色板。

亮色主题

  • 提示和输入文本字体:16sp Roboto Regular
  • 磁帖高度:48dp
  • 文本上下边距:16dp
  • 文本框分割线边距:8dp
  • 按下状态的提示文本:54% black

亮色主题的单行文本框

暗色主题

  • 按下状态的提示文本:70% white

暗色主题单行文本框

单行文本框

高度:48dp
文本上下边距:16dp
分隔线下边距:8dp

紧凑型单行文本框

提示和输入文本: 13sp
高度:40dp
文本上下边距:12dp
分隔线下边距:4dp

带图标的亮色主题

  • 提示和输入文本字体:16sp Roboto Regular
  • 磁帖高度:48dp
  • 文本上下边距:16dp
  • 文本框分割线边距:8dp

亮色主题以及普通状态的提示文本、聚焦状态、含输入文本的普通状态

带图标的暗色主题

暗色主题以及普通状态提示文本、聚焦状态、含输入文本的普通状态

带图标的单行文本框

高度:48dp
文本上下边距:16dp
分隔线下边距:8dp
图标:24dp

带图标的紧凑型单行文本框

提示和输入文本: 13sp
高度:40dp
文本上下边距:12dp
分隔线下边距:4dp
图标:20dp

多行文本框 展开或收起内容 当内容收起时,箭头向下,当内容展开时,箭头向上。

多行文本框会自动把文本换行,当光标到达文本框底部边缘时,会垂直滚动。

多行文本框

文本框的颜色应参考应用的配色方案。

亮色主题

  • 提示和输入文本字体:16sp Roboto Regular
  • 标签字体:12sp Roboto Regular
  • 文本上下边距:16dp
  • 文本框分割线边距:8dp

亮色主题的多行文本框:带提示文本的普通状态、聚焦状态、带输入文本的普通状态

暗色主题

暗色主题的多行文本框:带提示文本的普通状态、聚焦状态、带输入文本的普通状态

暗色主题规格:

标签上下边距:16dp

紧凑型暗色主题规格:

标签和文本字号:13sp
标签文本上下边距:12dp

全宽文本框 展开或收起内容 当内容收起时,箭头向下,当内容展开时,箭头向上。

全宽文本框用于更深入的任务。

全宽文本框

全宽文本框

单行和多行文本框

  • 提示和输入文本字体:16sp Roboto Regular
  • 文本上下边距:20dp

单行和多行文本框的状态:普通状态、聚焦状态、带输入文本的普通状态

全宽单行文本框的规格:

高度:56dp
文本上下边距:20dp

紧凑型全宽单行文本框的规格:

提示和输入文本: 13sp
高度:48dp
文本上下边距:16dp

字数统计 展开或收起内容 当内容收起时,箭头向下,当内容展开时,箭头向上。

在有字数限制的字段中使用字数统计。

带字数统计的单行文本框

统计文本:12sp Roboto Regular

文本框为色绿时,说明还没有超过字数限制。

文本框为红色时,则说明超过了字数限制

带字数统计的多行文本框

统计文本:12sp Roboto Regular

文本框为色绿时,说明还没有超过字数限制。

文本框为红色时,则说明超过了字数限制

带字数统计全宽文本框

带字数统计全宽文本框

单行和多行聚焦状态的文本框

自动完成文本框 展开或收起内容 当内容收起时,箭头向下,当内容展开时,箭头向上。

使用自动完成文本框可以在下拉菜单中实时显示输入建议,以便用户准确、高效地输入信息。

自动完成对于读写能力有限或拼写有困难的用户尤其有用,尤其在使用非母语的情况下。(有些网页没有提供本地语言版,用户只能使用英语浏览)

自动完成文本框

下拉菜单中的自动完成文本

内嵌式自动完成

内嵌式自动完成

内嵌式自动完成

全宽的行内自动完成

带提示文本的普通状态

聚焦且显示建议

行内自动完成

行内自动完成

搜索过滤 展开或收起内容 当内容收起时,箭头向下,当内容展开时,箭头向上。

应用栏可以充当文本框。随着用户的输入,下面的内容会跟着被筛选和排序。

应用栏充当文本输入框

应用栏充当文本输入框,并对下面的内容进行过滤和排序

必填字段 展开或收起内容 当内容收起时,箭头向下,当内容展开时,箭头向上。

要该字段是必填项,需要在输入框的左侧显示星号(*)。在表单底部添加说明,告知用户星号为必填字段。

帮助文本

帮助文本显示在文本框下面,可以永久显示,也可以在聚焦到文本框时显示。

必填字段标有星号。帮助文本可以在聚焦到文本框时显示,也可以永久显示。

提示文本

提示文本应该显示文本框需要的信息类型。它可以以示例的形式显示,例如电话号码或 URL。

提示文本给出了文本和数字的示例。带提示文本的输入框也可以有下拉菜单,用户可以输入,也可以直接选择。

密码输入 展开或收起内容 当内容收起时,箭头向下,当内容展开时,箭头向上。

密码输入默认会隐藏密码。用居中的省略号来表示密码的字符(例如•••••••)。

密码可见和不可见

当可见性图标显示在文本框中时,表示可以选择密码是否可见。

可见性图标可以切换密码的可见性:

密码可见

显示可见图标,并显示密码

密码不可见

显示不可见图标,密码用居中省略号表示

可见性图标显示在文本框的右侧

密码文本有以下透明度值:

普通带提示文本t

密码可见

密码不可见

密码错误

图标:38%

提示文本:38%

帮助文本:54%

图标:54%

浮动提示文本:100%

输入文本:87%

帮助文本:54%

图标:54%

浮动提示文本:100%

输入省略号:87%

帮助文本:54%

图标:100%

浮动提示文本:100%

输入文本:N/A

帮助文本:100%