文字輸入欄(Text Field)

用於使用者輸入,可以單行或是雙行呈現,可以接受字元、數字或圖示等輸入。

類型

  • 單行
    當輸入超過欄位寬時,會自動將文字向左滾動。
  • 含浮動標籤
    當開始輸入時,提示文字會向左上縮小變成浮動標籤
  • 同畫面寬

字數統計

錯誤訊息

資料輸入期間或送出時,必須要做輸入資料的判斷,並依照狀況顯示錯誤訊息在畫面上方或欄位底下。

>

錯誤顯示在畫面上方或欄位底下

規範

文字
字體:16 sp(寬版),13 sp(窄版)
顏色:同[文字顏色](../style/color.html#文字顏色)

下劃線
高:1 dp
下間距:8 dp(寬版),4 dp(窄版)
顏色:強調色(輸入中),同[分割線](divider.html)(未輸入)

  • 單行

欄位高:48 dp(寬版),40 dp(窄版)

圖示
大小:24 dp(寬版),20 dp(窄版)
上下左右間距:12 dp(寬版),10 dp(窄版)

文字
上下間距:16 dp(寬版),12 dp(窄版)

>

寬版

>

窄版

亮色系

暗色系

  • 含浮動標籤

欄位高:至少 72 sp(寬版),至少 60 dp(窄版)

標籤
字體:12 sp
上間距:16 dp(寬版),12 dp(窄版)
下間距:8 dp(寬版),4 dp(窄版)
顏色:強調色(輸入中),同[分割線](divider.html)(未輸入)

文字
下間距:16 dp(寬版),12 dp(窄版)

>

寬版多行

>

窄版多行

>

寬版多行

>

窄版多行

亮色系單行和多行

暗色系單行和多行

  • 同畫面寬

欄位高:至少56 dp(寬版),至少 48 dp(窄版)

文字
字體:16 sp(寬版),13 sp(窄版)
顏色:同[文字顏色](../style/color.html#文字顏色)
上下間距:20 dp(寬版),16 dp(窄版)

  • 字數統計

文字
字體:12 sp
顏色:屬於提示,同[文字顏色](../style/color.html#文字顏色)
上下間距(從下劃線算起):8 dp

>

含浮動標籤

  • 錯誤訊息

文字
字體:12 sp
顏色:#DD2C00
上下間距(從下劃線算起):4 dp

>

單行

>

浮動標籤和字數統計