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.

Component

selector: ion-toggle

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>

Attributes:

Attribute Type Description
checked boolean whether the toggle it toggled or not
disabled boolean whether the toggle is disabled or not

Input Properties

Attr Type Details
checked
disabled

Output Events

Attr Details
change

expression to evaluate when the toggle value changes

Related

Toggle Component Docs

API

Native

General