Validation Message
Validation Message は、フォーム入力の検証結果をユーザーに伝えるテキストコンポーネントです。
1. 概要 (Overview)
説明
Textfield などの入力コントロールの下に配置し、入力が受け入れられない場合のエラーや、入力が有効であることなどの検証結果を伝えます。テキスト入力が受け入れられない場合、エラーメッセージはそれを修正する方法の指示を表示します。
リンク
2. 構成要素 (Anatomy)
検証結果を伝えるメッセージテキストで構成されます。対象の入力コントロールの下に配置します。
3. 使い分け (Usage)
いつ使うか
- 入力内容がバリデーションを通らなかったときに、エラーの内容と修正する方法を伝えるとき
- 入力内容が有効であることや、エラーではないものの注意があることを伝えるとき
いつ使わないか
- 使用方法など入力フィールドに関する永続的なガイダンスは、検証結果とぶつかって消えてしまわないよう Helper text として Label の直下に配置する（Form を参照）
- フォーム全体や画面レベルの通知には Callout や Snackbar を使用する
4. バリエーション (Variants)
Color
検証結果の意味に応じて色を決定します。
| Modifier class | |
|---|---|
| Informative | .-color-informative |
| Neutral* | .-color-neutral |
| Positive | .-color-positive |
| Notice | .-color-notice |
| Negative | .-color-negative |
| Attention | .-color-attention |
入力したテキストが有効な状態には Positive、無効な状態・エラーには Negative、無効やエラーではないものの注意がある場合には Notice を使用します。
5. ステート (States)
Validation Message 自体はインタラクションを起こさないため、固有のステートは持ちません。
6. アクセシビリティ (Accessibility)
このコンポーネント固有のチェック項目です。コントラスト・フォーカス可視化など全コンポーネント共通の原則はアクセシビリティガイドラインを参照してください。
aria-describedbyなどで対象の入力コントロールとメッセージを関連付け、支援技術にも検証結果が伝わるようにする- エラーであることを色だけで伝えず、メッセージのテキストでも伝える
7. ライティング (Writing)
- エラーメッセージには、何が受け入れられなかったかに加えて、それを修正する方法の指示を書く
- エラーを明確に説明するのに十分なスペースがない場合、長いメッセージは複数行に折り返される。周囲のレイアウトにぶつからないよう、できるだけ簡潔に書く