文字輸入欄

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

類型
字數統計
錯誤訊息
規範

類型

  • 單行當輸入超過欄位寬時,會自動將文字向左滾動。

  • 含浮動標籤當開始輸入時,提示文字會向左上縮小變成浮動標籤

  • 同畫面寬

字數統計

錯誤訊息

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

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

規範

寬版代表行數相同,欄位較高,反之則較低。

文字
字體:16 sp(寬版),13 sp(窄版)
顏色:同文字顏色

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

  • 單行

欄位高: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(窄版)
顏色:強調色(輸入中),同分割線(未輸入)

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

寬版多行

窄版多行

寬版多行

窄版多行

亮色系單行和多行

暗色系單行和多行

  • 同畫面寬

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

文字
字體:16 sp(寬版),13 sp(窄版)
顏色:同文字顏色
上下間距:20 dp(寬版),16 dp(窄版)

  • 字數統計

文字
字體:12 sp
顏色:屬於提示,同文字顏色
上下間距(從下劃線算起):8 dp

含浮動標籤

  • 錯誤訊息

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

單行

浮動標籤和字數統計