December 27, 2015

Ionic Checkbox

❮❮ Previous
Next ❯❯

Ionic Checkbox: Checkbox is basically used for selecting items from the set of choice. Ionic provides classes to create beautiful checkboxes. A label wrapper with class checkbox is used to wrap the input checkbox. It will represent both the selected and unselected checkboxes in beautiful design. We are going to explain the ionic Checkboxes with example and online demo.

Ionic Checkbox Example

Here is simple example of ionic checkbox with shows both states of checkbox.

Ionic Checkbox Example And Demo

<ul class="list">
<li class="item item-checkbox">
   Item 1
   <label class="checkbox">
   <input type="checkbox">
   </label>
</li>

<li class="item item-checkbox">
   Item 2
   <label class="checkbox">
   <input type="checkbox" checked="Checked">
   </label>
</li>
</ul>

Try it »

The above example produce the following output as below-

Ionic Checkbox Example

Ionic Multiple Checkboxes

You can create multiple checkboxes in ionic. The li class .item-checkbox is used to create multiple checkboxes in ionic framwork.

Ionic Checkbox Example And Demo

<ul class="list">

<li class="item item-checkbox">
   Item 1
   <label class="checkbox">
   <input type="checkbox" checked="Checked">
   </label>
</li>
<li class="item item-checkbox">
   Item 2
   <label class="checkbox">
   <input type="checkbox" checked="Checked">
   </label>
</li>
<li class="item item-checkbox">
   Item 3
   <label class="checkbox">
   <input type="checkbox" checked="Checked">
   </label>
</li>
<li class="item item-checkbox">
   Item 4
   <label class="checkbox">
   <input type="checkbox" checked="Checked">
   </label>
</li>
<li class="item item-checkbox">
   Item 5
   <label class="checkbox">
   <input type="checkbox" checked="Checked">
   </label>
</li>
<li class="item item-checkbox">
   Item 6
   <label class="checkbox">
   <input type="checkbox" checked="Checked">
   </label>
</li>
<li class="item item-checkbox">
   Item 7
   <label class="checkbox">
   <input type="checkbox" checked="Checked">
   </label>
</li>
</ul>

Try it »

The above example produce the following output as below-

Ionic Multiple List Example

Ionic Colored Checkbox

You can add colors to the ionic checkboxes using color classes available in ionic to create colored Checkboxes-

Ionic Colored Checkbox

<ul class="list">

<li class="item item-checkbox checkbox-light">
   Item 1
   <label class="checkbox">
   <input type="checkbox" checked="Checked">
   </label>
</li>
<li class="item item-checkbox checkbox-royal">
   Item 2
   <label class="checkbox">
   <input type="checkbox" checked="Checked">
   </label>
</li>
<li class="item item-checkbox checkbox-assertive">
   Item 3
   <label class="checkbox">
   <input type="checkbox" checked="Checked">
   </label>
</li>
<li class="item item-checkbox checkbox-energized">
   Item 4
   <label class="checkbox">
   <input type="checkbox" checked="Checked">
   </label>
</li>
<li class="item item-checkbox checkbox-calm">
   Item 5
   <label class="checkbox">
   <input type="checkbox" checked="Checked">
   </label>
</li>
<li class="item item-checkbox checkbox-stable">
   Item 6
   <label class="checkbox">
   <input type="checkbox" checked="Checked">
   </label>
</li>
<li class="item item-checkbox checkbox-positive">
   Item 7
   <label class="checkbox">
   <input type="checkbox" checked="Checked">
   </label>
</li>
</ul>

Try it »

The above example produce the following output as below-

Ionic Colored checkbox example


Advertisements

Add Comment

📖 Read More


❮❮ Previous
Next ❯❯
,