Form

False (Default)

エラーテキストが非表示のデフォルトの状態です。

True

エラーテキストを有効化するためのオプションです。
フォームに不正がある場合にはエラーテキストを用いてエラー内容を提示します。

False (Default)

ヘルパーテキストが非表示のデフォルトの状態です。
ヘルパーテキストがなくてもフォームの入力に支障がない場合は省略することができます。

True

ヘルパーテキストを有効化するためのオプションです。
ラベルとフィールドだけではフォームの入力に支障をきたす場合はヘルパーテキストでフォームを補足します。

True (Default)

ヘッダーを表示するオプションです。
基本的にフォーム要素にはラベルを付与します。

False

ヘッダーを非表示にするオプションです。
ヘッダーがなくてもフォームの情報を伝達できる場合は要素を省略することができます。

False (Default)

必須バッジを非表示にするオプションです。

入力が必須ではないフィールドに対してはバッジを非表示とします。

True

必須バッジを表示するオプションです。

入力が必須なフィールドに対して必須バッジを表示します。

False (Default)

ヒントアイコンを非表示にするオプションです。

入力に関するより詳細な情報が必要ない場合はバッジを非表示とします。

True

ヒントアイコンを表示するオプションです。

入力に関するより詳細な情報を提供するためのヒントアイコンを表示します。

Hintの表示・非表示

ユーザーがヒントアイコンにマウスをホバーしたりフォーカスすることで表示されます。また、ホバーやフォーカスを解除すると、ツールチップが閉じられます。

• Vertical resizing:Hug
• Horizontal resizing:Hug
• Item spacing:4px

入力に関わる情報はプレースホルダーではなくヘルパーテキストで表示してください。

プレースホルダーに重要な情報を入力することはアクセシビリティに対応していません。値が入力されるとプレースホルダーが表示されなくなります。

期間指定など、1つのフォームに2つ以上のinputを含む場合は、それぞれラベルを付与してください。
エラーの対象が明確にわかるように、文脈を提示する必要があります。

ヘルパーテキストではフィールドに正しく入力するための特定の要件など、ヒントや役立つ情報を伝えます。

ヘルパーテキストではラベルと同じ情報を単に繰り返すだけではいけません。ユーザーにとって意味のない情報は追加しないでください。

エラーテキストは、フィールドに何を入力する必要があるか理解できる内容を明確かつ簡潔に伝えてください。

エラーテキストは、何が問題なのかを述べて解決方法を推測させるだけではいけません。

曖昧なメッセージはエラーとして認識されない場合もあることを留意してください。