echo-radio
ラジオボタンとラベルをインライン表示する。input要素ではなく、包括している要素にクラスを付与する(ほとんどの場合、label要素となる)。
本来のUIはキーボード操作を阻害しない前提で隠され、代替として.echo-radio-icon
をCSSで装飾したアイコンを表示する。
アイコンの色は $default
(文字色と同じ)が定義されている。Sassを使用している場合は _scss/_config_basic.scss
内の変数 $ui-icon-color
で一括変更ができる。
余白・レイアウト等は utility > .echo-padding
や component > .echo-form
で指定する。
.is-error
を付与するとエラー表示となり、色が $important
に変わる。
<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>