文本框可以讓用戶輸入文本。它們可以是單行的，帶或不帶滾動條，也可以是多行的，并且?guī)в幸粋€圖標。點擊文本框后顯示光標，并自動顯示鍵盤。除了輸入，文本框可以進行其他任務操作，如文本選擇（剪切，復制，粘貼）以及數(shù)據(jù)的自動查找功能。詳情見 模式 > 選擇 文本選擇的設計。

文本框可以有不同的輸入類型。輸入類型決定文本框內(nèi)允許輸入什么樣的字符，有的可能會提示虛擬鍵盤并調(diào)整其布局來顯示最常用的字符。常見的類型包括數(shù)字，文本，電子郵件地址，電話號碼，個人姓名，用戶名，URL，街道地址，信用卡號碼，PIN 碼，以及搜索查詢。

單行文本框

當文本輸入光標到達輸入?yún)^(qū)域的最右邊，單行文本框中的內(nèi)容會自動滾動到左邊。

http://wiki.jikexueyuan.com/project/material-design/images/components-textfields-singlelinetextfields-textfields_single_03_large_mdpi.png" alt="" />

http://wiki.jikexueyuan.com/project/material-design/images/components-textfields-singlelinetextfields-textfields_single_04_large_mdpi.png" alt="" />

淺色主題

• 提示和輸入字體：Roboto Regular 16 sp
• 輸入框高度：48 dp
• 文本頂部和底部填充：16 dp
• 文本字段分隔填充：8 dp

http://wiki.jikexueyuan.com/project/material-design/images/components-textfields-singlelinetextfields-textfields_single_06_large_mdpi.png" alt="" />

暗色主題

http://wiki.jikexueyuan.com/project/material-design/images/components-textfields-singlelinetextfields-textfields_single_08_large_mdpi.png" alt="" />

紅色標線

http://wiki.jikexueyuan.com/project/material-design/images/components-textfields-singlelinetextfields-textfields_redlines_03_large_mdpi.png" alt="" />

帶有圖標的淺色主題

• 提示和輸入字體：Roboto Regular 16 sp
• 輸入框高度：48 dp
• 文本頂部和底部填充：16 dp
• 文本字段分隔填充：8 dp

http://wiki.jikexueyuan.com/project/material-design/images/components-textfields-singlelinetextfields-textfields_single_10_large_mdpi.png" alt="" />

帶有圖標的暗色主題

http://wiki.jikexueyuan.com/project/material-design/images/components-textfields-singlelinetextfields-textfields_single_12_large_mdpi.png" alt="" />

紅色標線

http://wiki.jikexueyuan.com/project/material-design/images/components-textfields-singleline-redline_06_large_mdpi.png" alt="" />

帶有滾動條的單行文本框

帶有滾動條的單行文本框

當單行文本框的輸入內(nèi)容很長并需跨越多行的時候，則文本框應該以滾動形式容納文本。

在滾動文本框中，一個圖形化的標志出現(xiàn)在標線的下面。點擊省略號，光標返回到字符的開頭。

淺色主題

http://wiki.jikexueyuan.com/project/material-design/images/components-textfields-singlelinewithscrolling-textfields_single_scroll_03_large_mdpi.png" alt="" />

深色主題

http://wiki.jikexueyuan.com/project/material-design/images/components-textfields-singlelinewithscrolling-textfields_single_scroll_06_large_mdpi.png" alt="" />

浮動標簽

浮動標簽

浮動內(nèi)嵌標簽，當用戶在輸入文本時，標簽會浮動到輸入內(nèi)容的上方。

http://wiki.jikexueyuan.com/project/material-design/images/components-textfields-floatinglabels-textfields_single_14_large_mdpi.png" alt="" />

淺色主題

• 提示和輸入字體：Roboto Regular 16 sp
• 標簽字體：Roboto Regular 12 sp
• 輸入框高度：72 dp
• 文本頂部和底部填充：16 dp
• 文本字段分隔填充：8 dp

http://wiki.jikexueyuan.com/project/material-design/images/components-textfields-floatinglabels-textfields_single_17_large_mdpi.png" alt="" />

深色主題

http://wiki.jikexueyuan.com/project/material-design/images/components-textfields-floatinglabels-textfields_single_21_large_mdpi.png" alt="" />

紅色標線

http://wiki.jikexueyuan.com/project/material-design/images/components-textfields-floatinglabels-redlines_08_large_mdpi.png" alt="" />

多行文本框

當光標到達最下緣，多行文本框會自動讓溢出的的文字斷開并形成新的行，使文本可以換行和垂直滾動。

http://wiki.jikexueyuan.com/project/material-design/images/components-textfields-multilinetextfield-textfields_multi_03a_large_mdpi.png" alt="" />

http://wiki.jikexueyuan.com/project/material-design/images/components-textfields-multilinetextfield-textfields_multi_03b_large_mdpi.png" alt="" />

淺色主題

• 提示和輸入字體：Roboto Regular 16 sp
• 標簽字體：Roboto Regular 12 sp
• 文本頂部和底部填充：16 dp
• 文本字段分隔填充：8 dp

http://wiki.jikexueyuan.com/project/material-design/images/components-textfields-multilinetextfield-textfields_multi_06_large_mdpi.png" alt="" />

深色主題

http://wiki.jikexueyuan.com/project/material-design/images/components-textfields-multilinetextfield-textfields_multi_08_large_mdpi.png" alt="" />

紅色標線

http://wiki.jikexueyuan.com/project/material-design/images/components-textfields-fullwidthtextfield-textfields_redlines_12_large_mdpi.png" alt="" />

全寬文本框

全寬文本框適用于更深入的工作。

http://wiki.jikexueyuan.com/project/material-design/images/components-textfields-fullwidthtextfield-textfields_multi_10a_large_mdpi.png" alt="" />

http://wiki.jikexueyuan.com/project/material-design/images/components-textfields-fullwidthtextfield-textfields_multi_10b_large_mdpi.png" alt="" />

單行和多行文本框

• 提示和輸入字體：Roboto Regular 16 sp
• 頂部和底部填充文本：20 dp

http://wiki.jikexueyuan.com/project/material-design/images/components-textfields-fullwidthtextfield-textfields_multi_12_large_mdpi.png" alt="" />

紅色標線

http://wiki.jikexueyuan.com/project/material-design/images/components-textfields-fullwidthtextfield-textfields_redlines_12_large_mdpi.png" alt="" />

字符計數(shù)器

當要是當?shù)叵拗谱址麜r可在文本框中使用字符計數(shù)器。

單行字符計數(shù)器

計數(shù)器文本：Roboto Regular 12 sp

http://wiki.jikexueyuan.com/project/material-design/images/components-textfields-charactercounter-textfields_counter_03a_large_mdpi.png" alt="" />

http://wiki.jikexueyuan.com/project/material-design/images/components-textfields-charactercounter-textfields_counter_03b_large_mdpi.png" alt="" />

多行文本框的字符計數(shù)器

計數(shù)器文本：Roboto Regular 12 sp

http://wiki.jikexueyuan.com/project/material-design/images/components-textfields-charactercounter-textfields_counter_06a_large_mdpi.png" alt="" />

http://wiki.jikexueyuan.com/project/material-design/images/components-textfields-charactercounter-textfields_counter_06b_large_mdpi.png" alt="" />

http://wiki.jikexueyuan.com/project/material-design/images/components-textfields-charactercounter-textfields_counter_08_large_mdpi.png" alt="" />

全寬文本框的字符計數(shù)器

http://wiki.jikexueyuan.com/project/material-design/images/components-textfields-charactercounter-textfields_counter_14_large_mdpi.png" alt="" />

http://wiki.jikexueyuan.com/project/material-design/images/components-textfields-charactercounter-textfields_counter_14b_large_mdpi.png" alt="" />

http://wiki.jikexueyuan.com/project/material-design/images/components-textfields-charactercounter-textfields_counter_16_large_mdpi.png" alt="" />

自動補全文本框

使用自動補全的文本框去呈現(xiàn)即時建議或補全彈出窗口，可讓用戶更準確，更高效地輸入信息。

http://wiki.jikexueyuan.com/project/material-design/images/components-textfields-autocompletetextfield-textfields_autocomplete_03a_large_mdpi.png" alt="" />

http://wiki.jikexueyuan.com/project/material-design/images/components-textfields-autocompletetextfield-textfields_autocomplete_03b_large_mdpi.png" alt="" />

全寬文本框的自動補全

http://wiki.jikexueyuan.com/project/material-design/images/components-textfields-autocompletetextfield-textfields_autocomplete_06_large_mdpi.png" alt="" />

插入自動補全

http://wiki.jikexueyuan.com/project/material-design/images/components-textfields-autocompletetextfield-textfields_autocomplete_08a_large_mdpi.png" alt="" />

http://wiki.jikexueyuan.com/project/material-design/images/components-textfields-autocompletetextfield-textfields_autocomplete_08b_large_mdpi.png" alt="" />

http://wiki.jikexueyuan.com/project/material-design/images/components-textfields-autocompletetextfield-textfields_autocomplete_10_large_mdpi.png" alt="" />

全寬文本框的內(nèi)嵌自動補全

http://wiki.jikexueyuan.com/project/material-design/images/components-textfields-autocompletetextfield-textfields_autocomplete_12a_large_mdpi.png" alt="" />

http://wiki.jikexueyuan.com/project/material-design/images/components-textfields-autocompletetextfield-textfields_autocomplete_12b_large_mdpi.png" alt="" />

http://wiki.jikexueyuan.com/project/material-design/images/components-textfields-autocompletetextfield-textfields_autocomplete_15_large_mdpi.png" alt="" />

內(nèi)嵌自動補全

http://wiki.jikexueyuan.com/project/material-design/images/components-textfields-autocompletetextfield-textfields_autocomplete_18_large_mdpi.png" alt="" />

搜索過濾器

應用欄可以作為一個文本框。當用戶輸入時，文本框下方會顯示已過濾和排序的內(nèi)容。

http://wiki.jikexueyuan.com/project/material-design/images/components.textfields_search_filtering_A_large_mdpi.png" alt="" />

http://wiki.jikexueyuan.com/project/material-design/images/components.textfields_search_filtering_B_large_mdpi.png" alt="" />

在應用程序欄中的全寬文本框

http://wiki.jikexueyuan.com/project/material-design/images/components-textfields-searchfilter-textfields_filter_06_large_mdpi.png" alt="" />

原文：Text fields 翻譯：SamanthaChou 校對：hyaocuk