ionic-toggle

A toggle is similar to a check box. However, the Ionic toggle gives a rich user experience. You will definitely love this toggle.


<label class="toggle">

<input type="checkbox">

<div class="track">

    <div class="handle"></div>

</div>

</label>

Toggle by default uses balanced color class(green color when enabled). We can change the toggle color using the standard ionic color variables.

If you want to use multiple toggles, use the toggle inside list class and add item-toggle for each item


<ul class="list">


<li class="item item-toggle">

    HTML5

    <label class="toggle toggle-assertive">

    <input type="checkbox">

    <div class="track">

    <div class="handle"></div>

    </div>

    </label>

</li>


<li class="item item-toggle">

    CSS3

    <label class="toggle">

    <input type="checkbox">

    <div class="track">

    <div class="handle"></div>

    </div>

    </label>

</li>



<li class="item item-toggle">

    JavaScript

    <label class="toggle toggle-dark">

    <input type="checkbox">

    <div class="track">

    <div class="handle"></div>

    </div>

    </label>

</li>



<li class="item item-toggle">

    Jquery

    <label class="toggle toggle-calm">

    <input type="checkbox">

    <div class="track">

    <div class="handle"></div>

    </div>

    </label>

</li>


<li class="item item-toggle">

    Bootstrap

    <label class="toggle toggle-royal">

    <input type="checkbox">

    <div class="track">

    <div class="handle"></div>

    </div>

    </label>

</li>


<li class="item item-toggle">

    Angular

    <label class="toggle toggle-positive">

    <input type="checkbox" checked="true">

    <div class="track">

    <div class="handle"></div>

    </div>

    </label>

</li>

</ul>

The above code uses a different color for each toggle.

If you want to enable the check box, add checked=”true” in input.