インプットテキスト（使い方）
外観
コンポーネント要素
入力フィールド（必須）
項目ラベル（必須）
要否ラベル
サポートテキスト
エラーテキスト
サイズ
周囲のUI密度に応じた適切なサイズを使用してください。
横幅
入力フィールドの横幅は、入力内容に相応しい長さにしてください。
整列
項目ラベルとサポートテキストは垂直方向に積み重ねて配置します。また、入力フィールドとエラーテキストも垂直方向に積み重ねて配置します。項目ラベルとサポートテキストの組み合わせと、入力フィールドとエラーテキストの組み合わせは、フォーム全体のボリュームやサイトの特性に応じて、垂直方向に積むか、水平方向に並べるかを決定します。読み物サイトにおけるフォームでは、多くの場合、垂直方向に積んで配置します。
良い例
垂直方向に積み重ねている。様々なコントロールを含めることができ、モバイル表示への耐性が高く、多くの場合で推奨できる。
良い例
水平方向に並べ、ラベルとサポートテキストを右寄せにしている。コントロールとの余白が一定に保たれている。
良い例
水平方向に並べ、ラベルとサポートテキストを左寄せにしている。ラベル左端の面が揃っている。
良い例
水平方向に並べ、ラベルの直後にコントロールを配置している。ラベルの左端の面が揃い、コントロールとの余白が一定に保たれている。
コンテンツ
要否ラベル
入力項目の必要性に応じて、「※必須」「※任意」またはステート表示を付与できます。「※必須」「※任意」の要否ラベルは「※（全角米印）」から書き始め、地の文章とは異なるテキストであることを明示します。
サポートテキスト
- 入力形式の条件や例を簡潔かつ具体的に記述します。
- サポートテキストを企図して、プレースホルダーテキストを使用してはなりません。
悪い例
サポートテキストがなく、エラーが出て初めて入力条件が分かる。必要十分なサポートテキストをあらかじめ提示しなければなりません。
良い例
サポートテキストが、間違いようのない入力条件になっている。
エラーテキスト
- 入力内容にエラーがある場合に、具体的なエラー内容および訂正方法を記述します。
- エラーテキストの冒頭に「＊（全角アスタリスク）」を付与し、地の文章とは異なるテキストであることを明示します。
良い例
エラーの箇所および修正方法が具体的に示されている。
良い例
空欄だとしても、入力すべき値として不適切なことに変わりがないため、同様のエラーを示している。
悪い例
何が誤りなのかが示されておらず、具体的な修正方法が分かりにくい。
悪い例
何が正しい入力なのかが示されておらず、具体的な修正方法が分かりにくい。
穴埋め文章ではなく、項目ごとに入力する
インプットテキストで穴埋め文章を表現することはできません。入力目的を示す見出しやサポートテキストに続いて、入力項目ごとのラベルとインプットテキストの組み合わせで構成します。
悪い例
良い例
名前、年齢、住所をそれぞれ個別のインプットテキストとして並べます。年齢の項目のように、単位のみをインプットテキストに付随させることは可能です（ほかにも、年月日など）。
入力値の文字種を限定しない
原則として、入力できる文字種を限定しないようにします。
既存システムの制約等により入力文字種を限定しなければならない場合は、下記の点に留意してください。
- 半角カタカナ、全角英数、ハイフンまたは長音記号等の入力を求める場合、それら文字種の入力のしにくさを鑑みて、自動変換による入力支援を行うことを推奨します。
- 自動変換するタイミングは、送信ボタン押下時または確認画面表示時が望ましい。
- 入力直後やインプットテキストのフォーカスアウト時に自動変換すると、入力内容と異なる値が表示されることから混乱を招く場合があることに留意すること。
- 自動変換を実施しない場合は、エラーを表示します。
- エラーを表示するタイミングは、送信ボタン押下時または押下後が望ましい。
- 入力直後やインプットテキストのフォーカスアウト時にエラー表示をすることは、表示位置がずれたり、一連の入力を通じて正しい値を入力しようとする場合に煩わしかったりするので、避けたほうが望ましい。
- 確認画面等で自動変換した結果の文字列を表示し、ユーザーが承認または修正できるようにします。