チェックボックス／Checkbox

単一ないし複数の選択肢から、独立して選択できるコンポーネントです。
設定の有効化やリストのフィルタリングなどにも使用されます。

<div class="c-form__item">
  <p id="group-label" class="c-form__label ">
    <span class="c-form__labelText">ラベル</span>
    <span class="c-form__description">入力項目の説明文が入ります。</span>
  </p>
  <div class="c-checkboxGroup"
    role="group"
    aria-labelledby="group-label">
    <div class="c-checkbox">
      <input type="checkbox" id="checkbox1" name="item.name"   />
      <label for="checkbox1">選択肢1</label>
    </div>
    <div class="c-checkbox">
      <input type="checkbox" id="checkbox2" name="item.name"   />
      <label for="checkbox2">選択肢2</label>
    </div>
    <div class="c-checkbox">
      <input type="checkbox" id="checkbox3" name="item.name"   />
      <label for="checkbox3">選択肢3</label>
    </div>
  </div>
</div>

原則

項目ラベル、入力必須項目、サポートテキストは入力を補助する要素がコンポーネントに予め用意されていますが、必要に応じて表示／非表示を切り替えて利用します。
利用不可（Disabled）の状態を表示させる際は、サポートテキストを利用してユーザーに利用することができない理由を知らせる必要があります。