menu

Ionic 2 Checkbox


Ionic 2 Checkbox Checkbox is an input component which enables user to select one or more items. Checkboxes in Ionic 2 are same as Html input. It is very simple to create Checkboxes in Ionic 2. Here in this tutorial we are going to explain how you can create Checkboxes In Ionic 2. You can also use our online editor to see the output of the example.


Ionic 2 Checkbox | Change Color | Disabled | Checked Example

Checkbox holds Boolean(true/false) values when you check or uncheck it.

Checkbox | Checked | Eaxmple

Here we are going to create simple checheckboxes with default checked & unchecked.

Ionic 2 Checkbox | Check | Uncheck Example

Try it ยป

The output of the above example will look something like this –

Ionic 2 Checkbox

Options Available

AttributeTypeDescription
colorstringThis is used to add/change the checkbox color. For example: “primary”, “secondary”, “danger”.
modestringThe mode to apply to this component.
checked booleanThis is used to set the check/uncheck property of checkbox(default is false).
disabledbooleanThis is used to disable the checkbox.


Learn More

Let us have some More example and demo about the Ionic 2 Checkboxes.


Ionic 2 Disabled Checkbox Eaxmple

To disable the checkbox in Ionic 2 Add attribute disabled=”true”.

How to disable Checkbox in Ionic 2 Example

The output of the above example will look something like this –

Ionic 2 Checkbox Group | Lists Eaxmple

Sometimes we need to create group of checkbox lists which enables user to select one or more than one item from the list. Here is simple example of the Ionic 2 Group.

Ionic 2 Group | Lists Eaxmple

The output of the above example will look something like this –

Ionic 2 Group List Example