Toggle Switch

スイッチデザインのチェックボックスです。
Class
kk-toggle トグルスイッチ
Attribute
指定なし ON/OFF式デザイン
theme="select" 選択式デザイン

ON/OFF Switch

ON/OFF式スイッチ

ON/OFF式のトグルスイッチです。kk-toggleを指定してください。 
<div class="kk-col6@m kk-col12" cell>
  <div class="kk-input-field">
    <input id="toggle1" class="kk-toggle" type="checkbox">
    <label for="toggle1">ON/OFFスイッチ</label>
    <label class="kk-input-label">default</label>
  </div>
</div>
<div class="kk-col6@m kk-col12" cell>
  <div class="kk-input-field">
    <input id="toggle2" class="kk-toggle" type="checkbox" size-s>
    <label for="toggle2">小さいサイズを使用する</label>
    <label class="kk-input-label">size-s</label>
  </div>
</div>
<div class="kk-col6@m kk-col12" cell>
  <div class="kk-input-field">
    <input id="toggle3" class="kk-toggle" type="checkbox" size-l>
    <label for="toggle3">大きいサイズを使用する</label>
    <label class="kk-input-label">size-l</label>
  </div>
</div>

Select Switch

選択式スイッチ

選択式のトグルスイッチです。
kk-toggleと合わせて、属性theme="select"を指定してください。
属性data-on=とdata-off=で選択肢の文言を設定できます。
下記サンプルを参考にしてください。 
<div class="kk-col4@m kk-col12" cell>
  <div class="kk-input-field">
    <input id="toggle4" class="kk-toggle" type="checkbox" theme="select">
    <label for="toggle4" data-on="ON" data-off="OFF"></label>
    <label class="kk-input-label">default</label>
  </div>
</div>
<div class="kk-col4@m kk-col12" cell>
  <div class="kk-input-field">
    <input id="toggle5" class="kk-toggle" type="checkbox" theme="select" size-s>
    <label for="toggle5" data-on="はい" data-off="いいえ"></label>
    <label class="kk-input-label">size-s</label>
  </div>
</div>
<div class="kk-col4@m kk-col12" cell>
  <div class="kk-input-field">
    <input id="toggle6" class="kk-toggle" type="checkbox" theme="select" size-l>
    <label for="toggle6" data-on="小さいサイズ" data-off="大きいサイズ"></label>
    <label class="kk-input-label">size-l</label>
  </div>
</div>