テキストフィールド
Text Fieldラベルと1行の入力欄からなる、フォームで最も基本的な文字入力UI。
ラベルは常に表示、placeholderは未入力時だけのヒントで入力すると消える(別物)
○ 使う場面
- 名前・メール・住所など、単一行で完結する自由記述を集めたいとき
- 入力候補が絞り込めない、あるいは事実上無数にあるとき
× 避ける場面
- 複数行にわたる長文入力が必要なとき(→テキストエリア)
- 入力候補を提示して選ばせたいとき(→オートコンプリートやドロップダウン)
別名
テキストボックス、テキスト入力欄
近縁種との比較
「テキストフィールド」は、文字(テキスト)を入力するための欄(field)という文字通りの名称で、紙の書類における記入欄の概念をそのまま画面上の入力欄に転用した呼び名である。
| 近縁種 | 違い・使い分け |
|---|---|
| テキストエリア | 1行で完結する値にはテキストフィールド、改行を含む長文にはテキストエリアを使う。 |
| オートコンプリート | 候補選択を伴わせたい場合はオートコンプリートに発展させる。 |
| インラインバリデーション | 送信前にその場でエラーを伝えたい場合はインラインバリデーションを組み合わせる。 |
| カレンダーピッカー | 日付という特定のデータ型に特化させたものがカレンダーピッカーで、表記ゆれが起きやすいかどうかで汎用のテキストフィールドに任せるかカレンダーUIに任せるかを判断する。 |
分類
機能・役割
- ナビゲーション
- 入力・操作
- 表示・整理
- フィードバック・状態
表示レイヤー
- インライン
- 固定・追従
- オーバーレイ
- 全画面・遷移
複雑さ
- 単体パーツ
- 複合パーツ
- セクション