The toggle is the same as the HTML checkbox entry, but it looks different and easier to use on a touchscreen device. It is an input component that holds the boolean value. Toggle changes the status of one option. Same as the checkbox, switches are often used to allow the user to on or off a setting. By using the checked attribute, it can also be checked programmatically. You can also apply various types of features such as disabled, and value to the toggle to control their behavior.

Example: The following example shows that how can you use the ionic toggle component in the ionic application. Here, you can see the various types of toggles like as: checked toggle, default toggle, and the disabled toggle.

Output: After executing this code, you will get the output, which is shown in below screenshot.

Ionic Toggle

Multiple Toggles: When you add more than one component of the same type in ionic, the best way is to use list items. <ion-toggle> is the class used for multiple toggles. Here, you can create and select various toggles at a time.

Styling the Toggle: The styling of the toggle element is very easy and simple. Toggles uses all the different colors which are available in the ionic framework.

Example: The following example shows how toggles can use the different colors and list in the ionic application.

Output: After executing this code, you will get the output, which is shown in below screenshot.

Ionic Toggle 1

Pin It on Pinterest

Share This