Toggle

ion-toggle

Improve this doc

A toggle technically is the same thing as an HTML checkbox input, except it looks different and is easier to use on a touch device. Toggles can also have colors assigned to them, by adding any color attribute.

See the Angular 2 Docs for more info on forms and inputs.

Usage

<ion-list>

  <ion-item>
    <ion-label>Pepperoni</ion-label>
    <ion-toggle [(ngModel)]="pepperoni"></ion-toggle>
  </ion-item>

  <ion-item>
    <ion-label>Sausage</ion-label>
    <ion-toggle [(ngModel)]="sausage" disabled="true"></ion-toggle>
  </ion-item>

  <ion-item>
    <ion-label>Mushrooms</ion-label>
    <ion-toggle [(ngModel)]="mushrooms"></ion-toggle>
  </ion-item>

</ion-list>

Input Properties

Attr Type Details
checked boolean

whether the toggle it toggled or not
disabled boolean

whether the toggle is disabled or not

Output Events

Attr Details
ionChange

expression to evaluate when the toggle value changes

Related

Toggle Component Docs

API

Native

General