module-radio

m-radio

ラジオボタンとラベルをインライン表示する。input要素ではなく、包括している要素にクラスを付与する(ほとんどの場合、label要素となる)。
本来のUIはキーボード操作を阻害しない前提で隠され、代替として.m-radio-iconをCSSで装飾したアイコンを表示する。
余白・レイアウト等は utility > .u-paddingcomponent > .c-form で指定する。
.is-error を同時に使用するとエラーがあったときの表示となる。

参考記事
アクセシビリティで気をつけるchecbox,radioのCSS@Garyuten
アクセシビリティを考慮した、チェックボックスとラジオボタンのCSSのサンプル | ウェビンブログ
<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>