ラベルコントロール
component入力欄の上に置く「項目名 ＋ 必須/任意などのバッジ ＋ 補足説明」のセットです。
size
default (label 16) / small (label 14)
default
サポートテキスト
small
サポートテキスト
バッジ
ラベルに付与できる 5 種
label-badge-required
赤の outlined
label-badge-optional
グレーの outlined
label-badge-disabled
塗りグレー
label-badge-private
白＋グレー枠
label-badge-support
warning 系 + アイコン
使用例
input と組み合わせて
ログインに使用します
他のユーザーにも見えます
機能
このコンポーネントの用途
フォーム項目のラベル＋バッジ（必須/任意等）＋サポートテキストのまとまり。
入力欄（input / selector / textarea 等）の直上に置く。
使用法
推奨される使い方と、やりがちな NG パターン
OK
- ✓必須/任意は label-badge-required / label-badge-optional で示す。
- ✓補足は label-control-support に書く。
NG
- ✕必須を色だけで示さない → テキストの label-badge-required を使う。
- ✕対象フィールドと切り離して遠くに置かない → 直上に置く。
必須・任意はバッジで明示
入力可否の手がかり必須・任意をバッジ＋テキストで示す。色だけに頼らず、どの欄が必須か一目で分かる。
<div class="label-control-row"> <label class="label-control-text">電話番号</label> <span class="label-badge label-badge-required">必須</span> </div>
バッジが無いと必須か任意か分からない。「＊」の色や記号だけで示さない。
<div class="label-control-row"> <label class="label-control-text">電話番号</label> <!-- 必須/任意 不明 --> </div>
ラベルコントロールのアクセシビリティ
ラベルコントロールは「項目名＋バッジ＋補足」の見た目を提供します。入力欄との関連付け（for／id・aria-describedby）はプロダクト側で必ず行います。WCAG 2.2 全基準は アクセシビリティ ページを参照。
期待される配慮
Presentation / Adaptability / Interaction / Assistive Technology
必須・任意・非公開などはバッジ＋テキストで示し、色だけに頼らない。補足はサポートテキストで明示する。
ラベル・バッジ・補足は rem / トークンで拡大に追従し、折り返しても崩れない。
ラベルを入力欄と関連付けると、ラベルのクリックで入力欄にフォーカスできる。
<label for>／id で名前を、サポート文は aria-describedby で説明を、必須は required で状態を入力欄に結び付ける。
DS が担保する機能
追加実装なしで満たされる
- ✓必須／任意／編集不可／非公開／入力サポートの各バッジはテキスト入りで、色だけに依存しない
- ✓ラベル・バッジ・補足のコントラストを
fgロールで確保 - ✓サポートテキスト（
label-control-support）の下地を提供
実装時の必須対応
プロダクト側で担保する
- !
label-control-textを<label for>にして入力欄のidと結び付ける - !サポート文に
idを付け、入力欄のaria-describedbyで参照する - !必須は
label-badge-required（視覚）＋入力欄のrequired（プログラム的）を両方付ける - !1 つのラベルは 1 つの入力欄に対応させる（複数欄をまとめるなら
fieldset/legend）
テスト方法
キーボード / スクリーンリーダー / 自動チェック
- 操作ラベルのテキストをクリックすると対応する入力欄にフォーカスが移る
- SR入力欄で「ラベル名、必須、サポート文」がまとめて読まれる
- 自動axe / Lighthouse で label 関連付け・
aria-describedbyの参照先・コントラストを確認
ラベルと入力欄を for／id で関連付ける
達成基準：WCAG 1.3.1 情報及び関係性 / 3.3.2 ラベル又は説明文
ログインに使用します
label for／id で名前を、補足は aria-describedby で、必須は required で結び付ける。
<label class="label-control-text" for="email">メールアドレス</label> <p class="label-control-support" id="sup">ログインに使用します</p> <input id="email" type="email" required aria-describedby="sup" />
ログインに使用します
見た目だけで関連付けない。for／id が無いと名前も補足も必須も入力欄に伝わらない。
<span class="label-control-text">メールアドレス</span> <!-- for なし --> <input type="email" class="input" /> <!-- id/aria/required なし -->