FormControl

FormControlコンポーネントは、フォームとしての入力要素に対応するラベルとメッセージテキストを表示するためのコンポーネントです。

使用上の注意

入力要素が1つの場合にのみ使用する

FormControlは、入力要素が1つだけの場合にのみ使用できます。

姓名や電話番号のように値を分割して入力する場合や、CheckboxやRadioButtonといった複数の入力要素を持つフォームに対してラベルやメッセージテキストを表示したい場合は、Fieldsetを使用してください。

レイアウト

ステータスラベルやメッセージテキストの有無で、コンポーネント内のレイアウトにバリエーションがあります。

ステータスラベルの有無

フォーム入力が入力必須か任意かをユーザーが区別できるようにするために使用します。 代表的なステータスラベルは次の通りです。

フォーム入力が必須の場合の表示例

フォーム入力が任意の場合の表示例

ステータスラベルの省略

ステータスラベルは視覚的に強い注意を惹くことから、認知負荷を減らすために省略する場合があります。 具体的には、以下のケースには省略を検討してください。

必須を省略するケース

• フォーム入力が極めて少なく、すべて必須であることが自明な場合
• 任意のフォームよりも入力必須のフォームが多い場合

ステータスラベル自体を省略するケース

• フォームの説明文などで、すべての項目が必須、または任意であることが明記されている場合

メッセージテキストの有無

以下の種類別のメッセージテキストを目的に応じて組み合わせて使用できます。

メッセージテキストの表示例

エラーメッセージ

エラーメッセージは、入力必須の入力要素の値が空の場合や、データ型が異なるなどの適切な値が入力されていない場合に表示します。

どの入力要素がエラーとなっているかを視覚的に見つけやすくするために、入力要素にもerror状態を付加します。

同一画面上でエラーをリアルタイムに判定できる場合は、エラーの原因が解消されたらメッセージの表示を止めます。

初期状態の場合

適切な値が入力されていない場合

状態

無効（disabled）

フォームの操作ができない状態を表現したスタイルです。

FormControlにdisabledを適用すると、内包する入力要素にも自動でdisabledが適用されるため、個別に設定する必要はありません。

ユーザーはなぜ無効になっているのかわからないことがあります。権限による表示制御のデザインパターンを参考にして、そもそも無効ではなくフォーム自体を非表示にしたり、無効状態の理由を付近に表示することを検討してください。

読み取り専用

FormControl自体には、読み取り専用の状態は存在しません。

入力内容の確認時など、すでに入力済みの書き換えできない値として表示する際は、InputのreadOnlyを使用してください。

Props