Ionic Toggle

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.

 
 
 Toggle
 
 
 
 
 
 
 Setting
 
 
 
 
 Application
 
 
 
 
 Android
 
 
  

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

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.

 
  
  
 Toggle 
  
  
  
 


 
 Blackberry
 
 
 
 Fruites
 
 
 
 Apple
 
 
 
 orange
 
 
 
 kiwi
 
 
 
 small
 
 
 
 automobile
 
 
 
  

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