コンテンツにスキップ

ラジオボタン/Radiobutton

複数項目から1つを選択できるコンポーネントです。

<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-radioGroup" role="radiogroup" aria-labelledby="group-label">
<div class="c-radioButton">
<input type="radio" id="radio1" name="radio_sample" value="" />
<label for="radio1">選択肢1</label>
</div>
<div class="c-radioButton">
<input type="radio" id="radio2" name="radio_sample" value="" />
<label for="radio2">選択肢2</label>
</div>
<div class="c-radioButton">
<input type="radio" id="radio3" name="radio_sample" value="" />
<label for="radio3">選択肢3</label>
</div>
</div>
</div>

原則

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