スイッチは、タップ/クリックで "On" と "Off" の状態をトグルします：
スイッチは、<div class="switch"> を使用して作成します。
<div> の中に、ユニークな id を持つ <input type="checkbox"> と
チェックボックスの（for 属性の値として）id に一致する <label> 要素を追加します：
<div class="switch">
<input id="mySwitch" type="checkbox">
<label for="mySwitch"></label>
</div>
結果：
スイッチのサイズを変更するには、.large、.small または .tiny を使います：
<div class="switch large">...</div>
<div class="switch">...</div>
<div class="switch small">...</div>
<div
class="switch tiny">...</div>
結果：
.radius と .round クラスは、ボタンの角に丸みを加えます：
<div class="switch">...</div>
<div class="switch
radius">...</div>
<div
class="switch round">...</div>
結果：
限られた数の選択肢の中から、ユーザに 1 つだけ選択して欲しい場合は、ラジオボタンを使います。
注: スイッチを一緒のグループにするためには、同じ値（下の例では "myGroup"）を持つ
name 属性を使用します。
これは、それぞれが他方をオフに切り替えます：
<div class="switch">
<input id="mySwitch1" type="radio" name="myGroup">
<label for="mySwitch1"></label>
</div>
<div class="switch">
<input id="mySwitch2" type="radio" name="myGroup"
checked>
<label
for="mySwitch2"></label>
</div>
結果：