UI Pattern
フォームバリデーション（Form Validation）の設計
フォームバリデーションは、入力内容の誤りや不足をユーザーが修正できる形で伝えるUIパターンです。
30秒でわかる要点
フォームバリデーションは、入力内容の誤りや不足をユーザーが修正できる形で伝えるUIパターンです。
設計ガイドライン
- ・送信前と送信後のエラーを分ける
- ・エラーは入力欄の近くに置く
- ・修正方法を具体的に書く
関連コンポーネント
テキスト入力（Input）テキスト入力（Input）は、ユーザーがテキストを入力するための単行・複数行フォームフィールド。バリデーション状態（エラー・無効）の表現も含む。選択ボックス（Select）選択ボックス（Select）は、ドロップダウン形式で選択肢の一覧を表示し、ユーザーが選択するための入力コンポーネント。単一・複数選択のバリエーションがある。チェックボックス（Checkbox）チェックボックス（Checkbox）は、複数の選択肢からユーザーが任意の数を選択できるコンポーネント。グループで使用されることが多い。アラート（Alert）アラート（Alert）は、エラー・警告・成功・情報など重要な状態をページ内に固定表示するコンポーネント。トーストと異なりユーザーが閉じるまで表示を維持する。ボタン（Button）ボタン（Button）は、ユーザーがアクションを実行するためのクリック可能な要素。バリアント（プライマリ・セカンダリ・ゴーストなど）やサイズのバリエーションを持つ。
運営・更新・参照元
- 著者 / 運営
- Component Gallery 編集部
- 最終更新日
- 2026-07-16
- レビュー状態
- 未レビュー
参照元
- W3C Web Content Accessibility Guidelines (WCAG)参照確認日: 2026-07-16
- WAI-ARIA Authoring Practices Guide参照確認日: 2026-07-16
- MDN Web Docs - Accessibility参照確認日: 2026-07-16
FAQ
エラーはいつ表示しますか？
入力中に即時表示するものと、送信時にまとめて表示するものを分けます。ユーザーが修正できる粒度で伝えることが重要です。