m-checkbox

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

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

チェックボックス１番目チェックボックス２番目チェックボックス３番目

<span class="u-margin-right-md">
    <label class="m-checkbox" for="checkbox1"><input type="checkbox" name="checkbox1" id="checkbox1" value="1"><span class="m-checkbox-icon"></span><span class="m-checkbox-label">チェックボックス１番目</span></label>
</span>

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

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

module-checkbox

m-checkbox

Style guide