Skip to main content

Components

Design patterns that serve as basic building blocks.

Switch

Switches technically is the same thing as an HTML checkbox input, except it looks different and is easier to use on a touch device. It can be used by sliding or tapping the control.

<div data-toggle="switch" class="switch active">
  <div class="switch-handle"></div>
</div>

<div data-toggle="switch" class="switch">
  <div class="switch-handle"></div>
</div>

Table view with switches

<ul class="table-view">
  <li class="table-view-cell">
    Item 1
    <div data-toggle="switch" class="switch">
      <div class="switch-handle"></div>
    </div>
  </li>
  <li class="table-view-cell">
    Item 2
    <div data-toggle="switch" class="switch active">
      <div class="switch-handle"></div>
    </div>
  </li>
  <li class="table-view-cell">
    Item 3
    <div data-toggle="switch" class="switch">
      <div class="switch-handle"></div>
    </div>
  </li>
</ul>

Event

Event Type Description
changed.rc.switch This event is fired when the switch is changed.

changed.rc.switch

$('.switch').on('changed.rc.switch', function () {
  // Only needed if you want to fire a callback
})