module-radio

echo-radio

ラジオボタンとラベルをインライン表示する。input要素ではなく、包括している要素にクラスを付与する(ほとんどの場合、label要素となる)。
本来のUIはキーボード操作を阻害しない前提で隠され、代替として.echo-radio-iconをCSSで装飾したアイコンを表示する。

アイコンの色は $default (文字色と同じ)が定義されている。Sassを使用している場合は _scss/_config_basic.scss 内の変数 $ui-icon-color で一括変更ができる。

余白・レイアウト等は utility > .echo-paddingcomponent > .echo-form で指定する。
.is-error を付与するとエラー表示となり、色が $important に変わる。

参考記事
アクセシビリティで気をつけるchecbox,radioのCSS@Garyuten
アクセシビリティを考慮した、チェックボックスとラジオボタンのCSSのサンプル | ウェビンブログ
<span class="echo-margin-right-md">
    <label class="echo-radio" for="radio1"><input type="radio" name="radio" id="radio1" value="1"><span class="echo-radio-icon"></span><span class="echo-radio-label">ラジオボタン1番目</span></label>
</span>

<span class="echo-margin-right-md">
    <label class="echo-radio" for="radio2"><input type="radio" name="radio" id="radio2" value="2" checked="checked"><span class="echo-radio-icon"></span><span class="echo-radio-label">ラジオボタン2番目</span></label>
</span>

<label class="echo-radio is-error" for="radio3"><input type="radio" name="radio" id="radio3" value="3"><span class="echo-radio-icon"></span><span class="echo-radio-label">ラジオボタン3番目</span></label>