module-checkbox

echo-checkbox

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

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

余白・レイアウト等は utility > .echo-paddingcomponent > .echo-form で指定する。
.is-error を同時に使用するとエラーがあったときの表示となる。

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

<span class="echo-margin-right-md">
    <label class="echo-checkbox echo-margin-right-md" for="checkbox2"><input type="checkbox" name="checkbox2" id="checkbox2" value="2" checked="checked"><span class="echo-checkbox-icon"></span><span class="echo-checkbox-label">チェックボックス2番目</span></label>
</span>

<label class="echo-checkbox is-error" for="checkbox3"><input type="checkbox" name="checkbox3" id="checkbox3" value="3"><span class="echo-checkbox-icon"></span><span class="echo-checkbox-label">チェックボックス3番目</span></label>