テキストフィールドは、ユーザーがテキスト情報を入力するためのコンポーネントです。
基本構造
- ラベル (Label) : 何を入力すべきかを示します。常時表示されている必要があります。
- 入力エリア (Input Container) : テキストを入力する枠。
- ヘルプテキスト (Helper Text) : 入力形式のヒント（例：「半角英数8文字以上」）。
- エラーメッセージ (Error Message) : 入力が不正な場合に表示される赤字の警告。
ベストプラクティス
1. プレースホルダーをラベル代わりにしない
プレースホルダー（入力欄内の薄い文字）は、入力し始めると消えてしまいます。ユーザーが何を入力していたか忘れたり、チェック時に困ったりするため、 必ずラベルを枠外に配置 してください。 プレースホルダーはあくまで「入力例（例: user@example.com）」を示すために使いましょう。
2. 入力形式の最適化
入力内容に応じて、適切な <input type="..."> を選びましょう。
モバイル端末でのキーボード配列が最適化され、入力しやすくなります。
- メールアドレス:
type="email" - 電話番号:
type="tel" - 数値:
type="number"またはinputmode="numeric"
3. バリデーションとフィードバック
- インラインバリデーション : 入力が完了した時点（フォーカスが外れた時など）で即座にチェックし、エラーがあればその場で伝えます。
- 明確なエラー ** : 「エラーです」だけでなく、「メールアドレスの形式で入力してください」のように、 ** どう直せばよいか を具体的に伝えます。
- 色とアイコン : エラー時は枠線を赤くし、色覚多様性に配慮してアイコンも併用するとより親切です。