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

If true, the element is selected.

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-start-padding-top 6px

Padding top of the toggle positioned on the start in an item

$toggle-ios-item-start-padding-end 16px

Padding end of the toggle positioned on the start in an item

$toggle-ios-item-start-padding-bottom 5px

Padding bottom of the toggle positioned on the start in an item

$toggle-ios-item-start-padding-start 0

Padding start of the toggle positioned on the start in an item

$toggle-ios-item-end-padding-top 6px

Padding top of the toggle positioned on the end in an item

$toggle-ios-item-end-padding-end ($item-ios-padding-end / 2)

Padding end of the toggle positioned on the end in an item

$toggle-ios-item-end-padding-bottom 5px

Padding bottom of the toggle positioned on the end in an item

$toggle-ios-item-end-padding-start $item-ios-padding-start

Padding start of the toggle positioned on the end 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-top 0

Margin top of the toggle

$toggle-md-media-margin-end $toggle-md-media-margin-top

Margin end of the toggle

$toggle-md-media-margin-bottom $toggle-md-media-margin-top

Margin bottom of the toggle

$toggle-md-media-margin-start $toggle-md-media-margin-end

Margin start 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-padding-top 12px

Padding top of standalone toggle

$toggle-md-padding-end $toggle-md-padding-top

Padding end of standalone toggle

$toggle-md-padding-bottom $toggle-md-padding-top

Padding bottom of standalone toggle

$toggle-md-padding-start $toggle-md-padding-end

Padding start of standalone toggle

$toggle-md-item-start-padding-top 12px

Padding top of the toggle positioned on the start in an item

$toggle-md-item-start-padding-end 18px

Padding end of the toggle positioned on the start in an item

$toggle-md-item-start-padding-bottom 12px

Padding bottom of the toggle positioned on the start in an item

$toggle-md-item-start-padding-start 2px

Padding start the toggle positioned on the start in an item

$toggle-md-item-end-padding-top 12px

Padding top of the toggle positioned on the end in an item

$toggle-md-item-end-padding-end ($item-md-padding-end / 2)

Padding end of the toggle positioned on the end in an item

$toggle-md-item-end-padding-bottom 12px

Padding bottom of the toggle positioned on the end in an item

$toggle-md-item-end-padding-start $item-md-padding-start

Padding start of the toggle positioned on the end 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-start-padding-top 12px

Padding top of the toggle positioned on the start in an item

$toggle-wp-item-start-padding-end 18px

Padding end of the toggle positioned on the start in an item

$toggle-wp-item-start-padding-bottom 12px

Padding bottom of the toggle positioned on the start in an item

$toggle-wp-item-start-padding-start 2px

Padding start the toggle positioned on the start in an item

$toggle-wp-item-end-padding-top 12px

Padding top of the toggle positioned on the end in an item

$toggle-wp-item-end-padding-end ($item-wp-padding-end / 2)

Padding end of the toggle positioned on the end in an item

$toggle-wp-item-end-padding-bottom 12px

Padding bottom of the toggle positioned on the end in an item

$toggle-wp-item-end-padding-start $item-wp-padding-start

Padding start of the toggle positioned on the end in an item

Related

Toggle Component Docs

API

Native

General