テキストフィールドについて
情報
テキストフィールドがインタラクティブに見えるようにする
塗りつぶしとアウトラインの 2 種類(基本的にビジュアルに合わせて表示を出し分ける)
塗りつぶし
アウトライン
塗りつぶしより強調されないため、フォーム入力などに向いている
状態(空白、入力あり、エラーなど)が一目でわかるようにする必要がある
ラベルとエラーメッセージは簡潔にし、対処しやすいようにする
https://scrapbox.io/files/66497fd67261ee001d34c118.png
使用方法
連絡先情報や支払い情報の入力など、UI にテキストを入力する必要がある場合に使用する
デザイン注意
同じ画面で両方のタイプのテキストフィールドを使用しない
必須フィールドの場合はラベルテキストの横にアスタリスク「*」を表示する
ほとんど必須の場合はオプションフィールドの隣に「オプション」と表示する
https://scrapbox.io/files/6649826f4102d4001c353f36.png
アイコンと画像
テキストフィールドのアイコンはオプション
1. アイコンシグニファイア
2. 有効またはエラーのアイコン
3. クリアアイコン
4. 音声入力
5. ドロップダウンアイコン
6. 画像
https://scrapbox.io/files/6649832db198af001cb06a84.png