Toggle

`ion-toggle`

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

iOS Material Design Windows Platform

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

Toggle Component Docs

Toggle

`ion-toggle`

Usage

Input Properties

Sass Variables

Related

API

Native

General