m-radio
ラジオボタンとラベルをインライン表示する。input要素ではなく、包括している要素にクラスを付与する(ほとんどの場合、label要素となる)。
本来のUIはキーボード操作を阻害しない前提で隠され、代替として.m-radio-icon
をCSSで装飾したアイコンを表示する。
余白・レイアウト等は utility > .u-padding
や component > .c-form
で指定する。
.is-error
を同時に使用するとエラーがあったときの表示となる。
<span class="u-margin-right-md">
<label class="m-radio" for="radio1"><input type="radio" name="radio" id="radio1" value="1"><span class="m-radio-icon"></span><span class="m-radio-label">ラジオボタン1番目</span></label>
</span>
<span class="u-margin-right-md">
<label class="m-radio" for="radio2"><input type="radio" name="radio" id="radio2" value="2" checked="checked"><span class="m-radio-icon"></span><span class="m-radio-label">ラジオボタン2番目</span></label>
</span>
<label class="m-radio is-error" for="radio3"><input type="radio" name="radio" id="radio3" value="3"><span class="m-radio-icon"></span><span class="m-radio-label">ラジオボタン3番目</span></label>