Toggles change the state of a single option. Toggles can be switched on or off by pressing or swiping them. They can also be checked programmatically by setting the checked property.

Usage

Angular

<!-- Default Toggle -->
<ion-toggle></ion-toggle>

<!-- Disabled Toggle -->
<ion-toggle disabled></ion-toggle>

<!-- Checked Toggle -->
<ion-toggle checked></ion-toggle>

<!-- Toggle Colors -->
<ion-toggle color="primary"></ion-toggle>
<ion-toggle color="secondary"></ion-toggle>
<ion-toggle color="danger"></ion-toggle>
<ion-toggle color="light"></ion-toggle>
<ion-toggle color="dark"></ion-toggle>

<!-- Toggles in a List -->
<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>

Javascript

<!-- Default Toggle -->
<ion-toggle></ion-toggle>

<!-- Disabled Toggle -->
<ion-toggle disabled></ion-toggle>

<!-- Checked Toggle -->
<ion-toggle checked></ion-toggle>

<!-- Toggle Colors -->
<ion-toggle color="primary"></ion-toggle>
<ion-toggle color="secondary"></ion-toggle>
<ion-toggle color="danger"></ion-toggle>
<ion-toggle color="light"></ion-toggle>
<ion-toggle color="dark"></ion-toggle>

<!-- Toggles in a List -->
<ion-list>
  <ion-item>
    <ion-label>Pepperoni</ion-label>
    <ion-toggle slot="end" value="pepperoni" checked></ion-toggle>
  </ion-item>

  <ion-item>
    <ion-label>Sausage</ion-label>
    <ion-toggle slot="end" value="sausage" disabled></ion-toggle>
  </ion-item>

  <ion-item>
    <ion-label>Mushrooms</ion-label>
    <ion-toggle slot="end" value="mushrooms"></ion-toggle>
  </ion-item>
</ion-list>

React

import React from 'react';

import { IonToggle, IonList, IonItem, IonLabel } from '@ionic/react';

const Example: React.SFC<{}> = () => (
  <>
    {/*-- Default Toggle --*/}
    <IonToggle></IonToggle>

    {/*-- Disabled Toggle --*/}
    <IonToggle disabled></IonToggle>

    {/*-- Checked Toggle --*/}
    <IonToggle checked></IonToggle>

    {/*-- Toggle Colors --*/}
    <IonToggle color="primary"></IonToggle>
    <IonToggle color="secondary"></IonToggle>
    <IonToggle color="danger"></IonToggle>
    <IonToggle color="light"></IonToggle>
    <IonToggle color="dark"></IonToggle>

    {/*-- Toggles in a List --*/}
    <IonList>
      <IonItem>
        <IonLabel>Pepperoni</IonLabel>
        <IonToggle value="pepperoni" onChange={() => {}}></IonToggle>
      </IonItem>

      <IonItem>
        <IonLabel>Sausage</IonLabel>
        <IonToggle value="sausage" onChange={() => {}} disabled={true}></IonToggle>
      </IonItem>

      <IonItem>
        <IonLabel>Mushrooms</IonLabel>
        <IonToggle value="mushrooms" onChange={() => {}}></IonToggle>
      </IonItem>
    </IonList>
  </>
);

export default Example;

Properties

Property	Attribute	Description	Type	Default
`checked`	`checked`	If `true`, the toggle is selected.	`boolean`	`false`
`color`	`color`	The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see theming.	`string \| undefined`	`undefined`
`disabled`	`disabled`	If `true`, the user cannot interact with the toggle.	`boolean`	`false`
`mode`	`mode`	The mode determines which platform styles to use.	`"ios" \| "md"`	`undefined`
`name`	`name`	The name of the control, which is submitted with the form data.	`string`	`this.inputId`
`value`	`value`	The value of the toggle does not mean if it's checked or not, use the `checked` property for that. The value of a toggle is analogous to the value of a `<input type="checkbox">`, it's only used when the toggle participates in a native `<form>`.	`null \| string \| undefined`	`'on'`

Events

Event	Description	Type
`ionBlur`	Emitted when the toggle loses focus.	`CustomEvent<void>`
`ionChange`	Emitted when the value property has changed.	`CustomEvent<ToggleChangeEventDetail>`
`ionFocus`	Emitted when the toggle has focus.	`CustomEvent<void>`

CSS Custom Properties

Name	Description
`--background`	Background of the toggle
`--background-checked`	Background of the toggle when checked
`--handle-background`	Background of the toggle handle
`--handle-background-checked`	Background of the toggle handle when checked

Built with StencilJS