Javatpoint Logo
Javatpoint Logo

Ionic Checkbox

A checkbox is a type of input components which holds the Boolean value. It is similar to HTML checkbox inputs. The Ionic checkboxes are styled differently on each platform as like other Ionic components. You can use checked attribute with the <ion-checkbox> element to set the default value, and disabled attribute to disable the user from changing the value.

Example

The following example shows different types of checkboxes used in an Ionic application.

Output

When you execute the app in your terminal, it will give the following output.

Ionic Checkbox

Styling Checkbox

If you want to style your checkbox, use Ionic color attribute with the checkbox prefix. The following example explains the use of the Ionic color property with the checkbox component.

Example

Output

Ionic Checkbox

Checkboxes in a List

You can also use checkbox with the list. The following example explains how checkbox can be used with the list.

Example

Home.page.html

Home.page.ts

Output

Ionic Checkbox
Next TopicIonic Radio Button




Please Share

facebook twitter google plus pinterest

Learn Latest Tutorials


Preparation


Trending Technologies


B.Tech / MCA