Ionic Toggle

The Ionic toggle is a type of input component which holds a Boolean value. It changes the state of a single option. It allows the user to switch a setting on or off by pressing or swiping them. It can also be checked programmatically by using the checked property. You can also apply different types of attributes such as disabled, and value to the toggle to control its behavior.

The following example shows how you can use the <ion-toggle> component in your Ionic app. Here, we can see the default toggle, checked toggle, and the disabled toggle.

Example

<ion-header>
  <ion-toolbar>
    <ion-title>
      ToggleApp
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content class="padding" color="light">
  <ion-item>
    <!-- Default Toggle -->
    <ion-label>Peter</ion-label>
    <ion-toggle></ion-toggle>
  </ion-item>
  <ion-item>
    <!-- Disabled Toggle -->
    <ion-label>Robert</ion-label>
    <ion-toggle disabled></ion-toggle>
  </ion-item>
    <ion-item>
      <!-- Checked Toggle -->
      <ion-label>Johnny</ion-label>
      <ion-toggle checked></ion-toggle>
    </ion-item>
</ion-content>

Output

Styling the Toggle

The styling of toggle elements is very easy. It uses all the colors that are available in the Ionic framework. The following example shows the use of different colors with list and toggle elements.

Example

<ion-header>
  <ion-toolbar>
    <ion-title>
      ToggleApp
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content class="padding" color="light" fullscren>
  <!-- Styling Toggles in a List -->
  <ion-list>
    <ion-item>
      <ion-label>Blueberry</ion-label>
      <ion-toggle slot="end" name="blueberry" checked></ion-toggle>
    </ion-item>

    <ion-item>
      <ion-label>Apple</ion-label>
      <ion-toggle slot="end" name="apple" color="secondary"></ion-toggle>
    </ion-item>

    <ion-item>
      <ion-label>Kiwi</ion-label>
      <ion-toggle slot="end" name="kiwi" color="success" checked></ion-toggle>
    </ion-item>

    <ion-item>
      <ion-label>Orange</ion-label>
      <ion-toggle slot="end" name="banana" color="warning"></ion-toggle>
    </ion-item>

    <ion-item>
      <ion-label>Cantaloupe</ion-label>
      <ion-toggle slot="end" name="cantaloupe" color="danger" checked></ion-toggle>
    </ion-item>

    <ion-item>
      <ion-label>Blackberry</ion-label>
      <ion-toggle slot="end" name="blackberry" color="dark"></ion-toggle>
    </ion-item>
  </ion-list>
</ion-content>

Output