執筆中のため、情報が古い・足りない場合があります。ご容赦ください。
チェックボックス
<label class="input-check">
<input type="checkbox" />
<span>未チェック</span>
</label>
<label class="input-check">
<input type="checkbox" checked />
<span>チェック</span>
</label>
<label class="input-check">
<input type="checkbox" checked disabled />
<span>無効</span>
</label>ラジオボタン
<label class="input-check">
<input type="radio" name="radio" />
<span>項目1</span>
</label>
<label class="input-check">
<input type="radio" name="radio" />
<span>項目2</span>
</label>
<label class="input-check">
<input type="radio" name="radio" />
<span>項目3</span>
</label>スイッチ
<label class="input-switch">
<input type="checkbox" />
<div class="switch"></div>
<span>未チェック</span>
</label>
<label class="input-switch">
<input type="checkbox" checked />
<div class="switch"></div>
<span>チェック</span>
</label>
<label class="input-switch">
<input type="checkbox" checked disabled />
<div class="switch"></div>
<span>無効</span>
</label>