文本框允许用户输入、编辑和选择文本。
文本框通常出现在表单中,但也可以出现在其他地方,例如对话框和搜索框。
用法
文本框可以对输入进行验证、帮助修复错误的输入、自动完成输入的词、以及提供输入建议。
文本框类型
单行
多行
文本区域
输入类型
格式化输入
嵌套菜单和选择器

文本框通常出现在表单中,但也可以出现在其他地方,例如对话框和搜索框。
文本框可以对输入进行验证、帮助修复错误的输入、自动完成输入的词、以及提供输入建议。
单行
多行
文本区域
格式化输入
嵌套菜单和选择器

文本框应具有以下特征:
文本框应使用可点击的触摸目标,指示用户可以输入信息。
应当能在其他元素中轻松找到文本框。
文本框应该指明其状态 - 启用还是禁用、为空还是已有文本输入、通过验证还是未通过验证 - 具有清晰的标签、输入框和辅助文本。
文本框包含以下元素:
文本框标签显示字段所需的输入类型。每个文本框都应该有一个标签。
标签和输入线对齐,且始终可见。它们可以处于静止状态(当字段处于非活动状态且为空时)或浮动状态。

静止状态的标签文本
顶部内边距:16dp
底部内边距:8dp

浮动状态的标签文本
标签上方内边距:16dp
标签下方内边距:8dp
输入框下方内边距:8dp
输入线表示输入文本的位置,它位于标签下方。
当文本框处于聚焦状态或包含错误时,输入线的颜色和厚度会有所不同。

当文本框为空时,标签位于输入线上方静止显示。

当文本框处于聚焦状态或有输入的文本时,标签会向上浮动。
光标指示用户当前输入的位置。

光标与标签保持缩进对齐,直到用户开始输入。
向文本框中键入的文本称为输入文本。
输入文本的首字母(以及每个句子的首字母)在适用时应大写。例如:

在聚焦的文本框中的输入文本

输入文本
顶部内边距:8dp
底部内边距:8dp
输入文本可以和自动完成一起使用,以帮助读写能力有限的用户、或使用外语输入的用户。例如自动完成可以:
按下确定键(如回车键)即可接受当前自动完成建议的文本。

降低建议文本的不透明度,同时保证输入文本完全不透明。
占位符文本停留在输入框中,直到用户开始输入。它可以显示一个操作或示例,例如一个手机号或邮件地址。

占位符文本可以在空的文本框中显示,直到用户输入。

占位符文本
标签上方内边距:16dp
占位符文本上方内边距:8dp
占位符文本下方内边距:8dp
辅助文本为输入框提供上下文信息,例如说明输入内容的用途。
它应该持续显示、或只在聚焦时显示。
规格:

辅助文本可以在文本框下方提供额外的信息。

辅助文本
辅助文本上方内边距:8dp

辅助文本可以借助占位符文本来指导用户进行输入。
当输入存在错误时,可以在输入线下方显示错误信息,并提供如何修复错误的说明。在错误修复之前,错误信息将代替辅助文本。
如果可能的话,错误信息应尽量显示在一行内。

错误信息会指导用户修复错误的输入。

错误信息
错误信息上方内边距:8dp
错误信息前面带有 “Error” 文本(或者一个错误图标),以使色盲用户能更清楚地看到错误状态。

在错误信息之前的 “Error:” (包含冒号)

错误图标与错误信息在同一行
要指示一个字段是必填的,请在标签旁边显示一个星号(*)。在表单底部,注明星号表示必填字段。

空的文本框中的必填星号指示符

已输入的文本框中的必填星号指示符。
要指示一个字段是可选的,请在字段标签旁用括号标注“可选”。

空文本框中的可选指示文本

已输入文本框中的可选指示文本
在同时存在必填字段的表单中,应标出所有必填字段;但如果可选字段更少,则改为标出可选字段。

Name 和 zip code 是表单中仅有的必填字段。

Description 是表单中唯一的可选字段。
文本框有字数限制时,可以使用字符计数器。
规格:

字符计数器显示最多可输入 10 个字符,已输入了 5 个。

字符计数器
输入线下方内边距:8dp
图标描述了文本框需要的输入类型。它们显示在文本框左侧。
图标也可以作为嵌套组件的触摸目标。例如,日历图标可以在触摸时展开日期选择器。

日历图标表示此文本框用于输入日期。

图标符号
宽度:24dp
图标符号和标签之间的间距:16dp
麦克风图标表示用户可以使用语音输入。
语音输入图标右对齐,始终启用。

点击图标后,用户可以使用语音进行输入。

语音输入图标
宽度:24dp
图标下方内边距:8dp
下拉箭头表示文本框包含一个嵌套的下拉选择。

点击下拉箭头,可以展开嵌套的下拉选择组件。

下拉箭头容器
宽度:24dp
高度:24dp
图标底部内边距:8dp
清除按钮可以使用户清空整个输入字段。
它们在文本框中右对齐。

当在文本框中输入字符后,清除图标将启用。

清除图标
宽度:24dp
高度:24dp
图标底部内边距:8dp
在具有很多个字段的表单中,可以缩短文本框。
规格:

普通间距
标签上方内边距:16dp
标签下方内边距:8dp
输入线上方内边距:8dp
输入线下方内边距:8dp

紧凑间距
标签上方内边距:8dp
标签下方内边距:4dp
输入线上方内边距:8dp
输入线下方内边距:4dp
文本框有两个主要状态:启用或禁用。
在启用状态下,可以使用这些交互:
文本框输入可以是:

在亮色和暗色主题中的文本框状态
启用
启用的文本框默认为空。
规格
无障碍功能
输入线应该具有 3:1 的对比度,以提高可识别性,和大号文本相同的 AA 级无障碍标准。

亮色主题
输入线
标签文本
辅助文本(可选)

暗色主题
输入线
标签文本
辅助文本(可选)
禁用
禁用的文本框是不能编辑的。它们使用虚线作为输入线,以及使用较低的不透明度,使它们看起来不可点击。

亮色主题
输入线
标签文本
输入文本

暗色主题
输入线
标签文本
输入文本
鼠标悬停
悬停状态给了输入线更多的不透明度,使文本框在桌面端更加醒目。
亮色主题
输入线
标签文本
辅助文本(可选)
暗色主题
输入线
标签文本
辅助文本(可选)
按下
按下时,文本框标签缩小并浮动到字段上方,显示出光标和占位符文本。
为了指示出该字段已被激活,在输入线、标签文本和光标上使用 UI 的主色。
亮色主题
输入线
标签文本
占位符文本(可选)
辅助文本(可选)
暗色主题
输入线
标签文本
占位符文本(可选)
辅助文本(可选)
聚焦
当用户在文本框中输入文本时,输入的文本会代替占位符文本。自动完成的文本显示在光标的右侧,且使用和占位符文本相同的字体大小和颜色。

亮色主题
输入线
标签文本
输入文本
辅助文本(可选)
暗色主题
输入线
标签文本
输入文本
辅助文本(可选)
闲置和已输入
当用户把焦点切换到另一个元素时,已输入的文本会保持可见。

亮色主题
输入线
标签文本
输入文本
辅助文本(可选)

暗色主题
输入线
标签文本
输入文本
辅助文本(可选)
错误
如果文本框没有通过验证,当用户将焦点移动到另一个元素时,会显示错误信息。要指示一个错误,可以在输入线和标签上使用较暖色调的颜色,例如红色或橙色。
规格

亮色主题
输入线
标签文本
输入文本
错误文本
暗色主题
输入线
标签文本
输入文本
错误文本
文本框有多种类型:
单行文本框
当输入的文本长度超过文本框的长度时,当光标到达文本框右边缘时,它会自动向左滚动。
当光标达到单行文本框的右侧时,输入文本会向左滚动。

单行文本框

单行文本框
多行文本框
多行文本框通过扩展文本框的底部,把文本换行到新的一行上,并把屏幕中位于文本框下方的元素向下移动。
多行文本框允许用户一次性看到他们输入的所有内容。
当光标到达文本框右侧时,输入文本换行到新的一行,并使该文本框增高。

多行文本框

多行文本框
文本区域
文本区域比文本框要高,并可将溢出的文本换行到新行上。当光标到达文本区域的底部时,它们会垂直滚动。
当光标到达文本区域的右下角时,输入文本会向上滚动。

此消息框是一个文本区域

此消息框是一个文本区域
文本区域应该有一个可见的边框,边框颜色和厚度和输入线相同。

亮色和暗色状态的文本区域
文本框可以通过使用占位符文本、预设布局、和字数限制,来表示可以输入的数据类型。只有在按下、聚焦或输入文本时才应显示文本格式。
字符可以使用以下方式进行格式化:
分组字符
输入文本可以以不同的方式进行分组,并在适当的位置添加特殊字符,例如添加到电话号码上的连字符。一旦完成第一个特殊字符,光标会自动跳转到下一个分组。

为了表示电话号码,对输入文本进行了分组和格式化

为了表示信用卡号码,对输入文本进行了分组和格式化
前缀 & 后缀
前缀和后缀可用于明确单位、或添加预输入文本。前缀在文本框中左对齐;后缀在文本框中右对齐。文本框可以同时拥有前缀和后缀。

美元前缀

重量后缀

邮箱域名后缀

时区后缀
密码遮蔽
密码输入默认会隐藏密码。每个密码字符都用一个居中的圆点表示(例如 •••••••)。
当文本框中显示可见性图标时,它指示该字段输入的时候是否可见。可以通过该图标来切换输入文本的可见性。

当开启可见性时,可见性图标会显示,且密码字符可见。

当关闭可见性时,隐藏图标会显示,且密码字符会隐藏。
使用这些样式的变体来把额外的焦点添加到文本框:
当文本框是屏幕上的主要操作时,可以移除它的标签,或者把标签当作标题。
占位符文本在闲置状态会出现,在用户输入文本时,输入的文本会代替占位符文本。

标签可以从文本框中移除,并作为标题显示。

标签可以从文本框中移除,并作为对话框中的标题显示。

桌面端,浮动文本框形式的搜索操作

移动端,浮动文本框形式的搜索操作

应用栏作为文本输入框

应用栏中有一个嵌套的文本输入框
全宽文本框对于更深入的任务或输入复杂信息会很有用。

全宽文本框

全宽文本框可以拥有单行或多行文本框的行为

普通间距的全宽文本框
高度:56dp
顶部内边距:20dp
底部内边距:20dp

紧凑间距的全宽文本框
高度:48dp
顶部内边距:16dp
底部内边距:16dp
填充式文本框使用透明的矩形填充包裹住标签和输入文本,以增强文本框的可识别性和可扫描性。
填充式文本框使用颜色来使其更容易被发现,同时保留了输入线。
填充式文本框使用矩形填充作为主要特征,遮盖住输入线的末端。涟漪动效在鼠标悬停和按下时触发。

包裹着矩形的文本框状态
矩形填充
输入线
闲置状态 & 为空状态
鼠标悬停
按下
聚焦、闲置、已输入、错误和禁用状态的间距和按下状态相同。
填充式文本框使紧凑布局更容易阅读。

普通间距
高度:56dp
标签上方内边距:8dp
标签下方内边距:8dp
文本框下方内边距:8dp
辅助文本上方内边距:8dp

紧凑间距
高度:44dp
标签上方内边距:8dp
标签下方内边距:4dp
文本框下方内边距:8dp
辅助文本上方内边距:4dp
单行填充式文本框中的文本滚动行为

单行填充式文本框,使用标签作为标题
多行填充式文本框中的文本换行和滚动行为

按下状态的多行填充式文本框

闲置和已输入状态的多行填充式文本框
文本框区域的文本换行和滚动行为

为空和闲置的文本区域

按下状态的文本区域

填充式文本框中的下拉列表

填充式文本框中的图标和日期选择器