Need help upgrading to Ionic Framework 4.0? Get assistance with our Enterprise Migration Services EXPLORE NOW

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
color string

The predefined color to use. For example: "primary", "secondary", "danger".

mode string

The mode to apply to this component. Mode can be ios, wp, or md.

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

Sass Variables

Property Default Description
$toggle-ios-width 51px

Width of the toggle

$toggle-ios-height 32px

Height of the toggle

$toggle-ios-border-width 2px

Border width of the toggle

$toggle-ios-border-radius $toggle-ios-height / 2

Border radius of the toggle

$toggle-ios-background-color-off $list-ios-background-color

Background color of the unchecked toggle

$toggle-ios-border-color-off grayscale(lighten($list-ios-border-color, 11%))

Border color of the unchecked toggle

$toggle-ios-background-color-on color($colors-ios, primary)

Background color of the checked toggle

$toggle-ios-handle-width $toggle-ios-height - ($toggle-ios-border-width * 2)

Width of the toggle handle

$toggle-ios-handle-height $toggle-ios-handle-width

Height of the toggle handle

$toggle-ios-handle-border-radius $toggle-ios-handle-height / 2

Border radius of the toggle handle

$toggle-ios-handle-box-shadow 0 3px 12px rgba(0, 0, 0, .16), 0 3px 1px rgba(0, 0, 0, .1)

Box shadow of the toggle handle

$toggle-ios-handle-background-color $toggle-ios-background-color-off

Background color of the toggle handle

$toggle-ios-media-margin 0

Margin of the toggle handle

$toggle-ios-transition-duration 300ms

Transition duration of the toggle icon

$toggle-ios-disabled-opacity .3

Opacity of the disabled toggle

$toggle-ios-item-left-padding 6px 16px 5px 0

Padding of the toggle positioned on the left in an item

$toggle-ios-item-right-padding 6px ($item-ios-padding-right / 2) 5px ($item-ios-padding-left)

Padding of the toggle positioned on the right in an item

Property Default Description
$toggle-md-active-color color($colors-md, primary)

Color of the active toggle

$toggle-md-track-width 36px

Width of the toggle track

$toggle-md-track-height 14px

Height of the toggle track

$toggle-md-track-background-color-off $list-md-border-color

Background color of the toggle track

$toggle-md-track-background-color-on lighten($toggle-md-active-color, 25%)

Background color of the checked toggle track

$toggle-md-handle-width 20px

Width of the toggle handle

$toggle-md-handle-height 20px

Height of the toggle handle

$toggle-md-handle-border-radius 50%

Border radius of the toggle handle

$toggle-md-handle-box-shadow 0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .2), 0 1px 5px 0 rgba(0, 0, 0, .12)

Box shadow of the toggle handle

$toggle-md-handle-background-color-off $background-md-color

Background color of the toggle handle

$toggle-md-handle-background-color-on $toggle-md-active-color

Background color of the checked toggle handle

$toggle-md-media-margin 0

Margin of the toggle

$toggle-md-transition-duration 300ms

Transition duration of the toggle icon

$toggle-md-disabled-opacity .3

Opacity of the disabled toggle

$toggle-md-item-left-padding 12px 18px 12px 2px

Padding of the toggle positioned on the left in an item

$toggle-md-item-right-padding 12px ($item-md-padding-right / 2) 12px $item-md-padding-left

Padding of the toggle positioned on the right in an item

Property Default Description
$toggle-wp-inactive-color #323232

Color of the toggle

$toggle-wp-active-color color($colors-wp, primary)

Color of the checked toggle

$toggle-wp-track-width 40px

Width of the toggle track

$toggle-wp-track-height 18px

Height of the toggle track

$toggle-wp-track-background-color-off transparent

Background color of the toggle track

$toggle-wp-track-background-color-on $toggle-wp-active-color

Background color of the checked toggle track

$toggle-wp-track-border-width 2px

Border width of the toggle track

$toggle-wp-track-border-color-off $toggle-wp-inactive-color

Border color of the toggle track

$toggle-wp-track-border-color-on $toggle-wp-active-color

Border color of the checked toggle track

$toggle-wp-handle-width 10px

Width of the toggle handle

$toggle-wp-handle-height 10px

Height of the toggle handle

$toggle-wp-handle-top 2px

Top of the toggle handle

$toggle-wp-handle-left 2px

Left of the toggle handle

$toggle-wp-handle-border-radius 50%

Border radius of the toggle handle

$toggle-wp-handle-background-color-off $toggle-wp-inactive-color

Background color of the toggle handle

$toggle-wp-handle-background-color-on color-contrast($colors-wp, $toggle-wp-active-color)

Background color of the checked toggle handle

$toggle-wp-media-margin 0

Margin of the toggle

$toggle-wp-transition-duration 300ms

Transition duration of the toggle icon

$toggle-wp-disabled-opacity .3

Opacity of the disabled toggle

$toggle-wp-item-left-padding 12px 18px 12px 2px

Padding of the toggle positioned on the left in an item

$toggle-wp-item-right-padding 12px ($item-wp-padding-right / 2) 12px $item-wp-padding-left

Padding of the toggle positioned on the right in an item

Related

Toggle Component Docs

API

Native

General