フォーム

• ラベル: 入力内容を端的に表す名詞で書く。「〜を入力してください」のような動詞表現は使わない。
• 入力コントロール: Input・Select・Combobox・Textarea・DatePicker など、データ型に合ったコンポーネントを使う。
• エラーメッセージ: 入力が不正なときのみ、コントロールの直下に表示する。何が間違いで、どう直せばよいかを具体的に伝える。

必須項目

ラベルの右に「必須」バッジを付ける。赤背景・赤文字の小さなラベルで視覚的に目立たせる。

任意項目

ラベルの右に「任意」テキストをグレーで添える。バッジではなくプレーンテキストにして、必須と明確に区別する。

どちらを基準にするか

フォーム内で必須が多い場合は任意のみ表示し、任意が多い場合は必須のみ表示する。両方同数の場合は必須を基準にする。

縦積みレイアウト

フィールドは常に縦方向に積む。横並びにするとラベルと入力の対応が取りにくくなるため、業務フォームでは使わない。フィールド間の余白は spacing-m を基準とする。

入力幅

入力幅は入力内容の期待される長さに合わせる。電話番号・郵便番号など短い値は幅を狭く、フリーテキストは広く設定する。フォームコンテナの最大幅は 640px を目安にする。

• 「保存」「登録」などの確定ボタンを右端に置く。
• 「キャンセル」は確定ボタンの左に並べる。
• ボタンエリアの上に区切り線（Separator）を入れてフィールド群と分離する。
• 送信中は確定ボタンを disabled にしてラベルを「保存中…」に変える（Spinner は使わない）。