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

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

單行文本框

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

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="" />

紅色標(biāo)線

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

帶有圖標(biāo)的淺色主題

• 提示和輸入字體：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="" />

帶有圖標(biāo)的暗色主題

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

紅色標(biāo)線

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

帶有滾動(dòng)條的單行文本框

帶有滾動(dòng)條的單行文本框

當(dāng)單行文本框的輸入內(nèi)容很長(zhǎng)并需跨越多行的時(shí)候，則文本框應(yīng)該以滾動(dòng)形式容納文本。

在滾動(dòng)文本框中，一個(gè)圖形化的標(biāo)志出現(xiàn)在標(biāo)線的下面。點(diǎn)擊省略號(hào)，光標(biāo)返回到字符的開(kāi)頭。

淺色主題

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="" />

浮動(dòng)標(biāo)簽

浮動(dòng)標(biāo)簽

浮動(dòng)內(nèi)嵌標(biāo)簽，當(dāng)用戶在輸入文本時(shí)，標(biāo)簽會(huì)浮動(dòng)到輸入內(nèi)容的上方。

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

淺色主題

• 提示和輸入字體：Roboto Regular 16 sp
• 標(biāo)簽字體：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="" />

紅色標(biāo)線

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

多行文本框

當(dāng)光標(biāo)到達(dá)最下緣，多行文本框會(huì)自動(dòng)讓溢出的的文字?jǐn)嚅_(kāi)并形成新的行，使文本可以換行和垂直滾動(dòng)。

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
• 標(biāo)簽字體：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="" />

紅色標(biāo)線

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="" />

紅色標(biāo)線

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

字符計(jì)數(shù)器

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

單行字符計(jì)數(shù)器

計(jì)數(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="" />

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

計(jì)數(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="" />

全寬文本框的字符計(jì)數(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="" />

自動(dòng)補(bǔ)全文本框

使用自動(dòng)補(bǔ)全的文本框去呈現(xiàn)即時(shí)建議或補(bǔ)全彈出窗口，可讓用戶更準(zhǔ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="" />

全寬文本框的自動(dòng)補(bǔ)全

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

插入自動(dòng)補(bǔ)全

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)嵌自動(dòng)補(bǔ)全

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)嵌自動(dòng)補(bǔ)全

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

搜索過(guò)濾器

應(yīng)用欄可以作為一個(gè)文本框。當(dāng)用戶輸入時(shí)，文本框下方會(huì)顯示已過(guò)濾和排序的內(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="" />

在應(yīng)用程序欄中的全寬文本框

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

原文：Text fields 翻譯：SamanthaChou 校對(duì)：hyaocuk