Checkbox

`ion-checkbox`

The Checkbox is a simple component styled based on the mode. It can be placed in an ion-item or used as a stand-alone checkbox.

See the Angular Docs for more info on forms and inputs.

Usage

<ion-list>

  <ion-item>
    <ion-label>Pepperoni</ion-label>
    <ion-checkbox [(ngModel)]="pepperoni"></ion-checkbox>
  </ion-item>

  <ion-item>
    <ion-label>Sausage</ion-label>
    <ion-checkbox [(ngModel)]="sausage" disabled="true"></ion-checkbox>
  </ion-item>

  <ion-item>
    <ion-label>Mushrooms</ion-label>
    <ion-checkbox [(ngModel)]="mushrooms"></ion-checkbox>
  </ion-item>

</ion-list>

Input Properties

Attr	Type	Details
checked	`boolean`	If true, the element is selected.

Advanced

<!-- Call function when state changes -->
 <ion-list>

   <ion-item>
     <ion-label>Cucumber</ion-label>
     <ion-checkbox [(ngModel)]="cucumber" (ionChange)="updateCucumber()"></ion-checkbox>
   </ion-item>

 </ion-list>

@Component({
  templateUrl: 'main.html'
})
class SaladPage {
  cucumber: boolean;

  updateCucumber() {
    console.log('Cucumbers new state:' + this.cucumber);
  }
}

Sass Variables

iOS Material Design Windows Platform

Property	Default	Description
`$checkbox-ios-background-color-off`	`$list-ios-background-color`	Background color of the checkbox when off
`$checkbox-ios-background-color-on`	`color($colors-ios, primary)`	Background color of the checkbox when on
`$checkbox-ios-icon-size`	`21px`	Size of the checkbox icon
`$checkbox-ios-icon-border-color-off`	`$list-ios-border-color`	Border color of the checkbox icon when off
`$checkbox-ios-icon-border-color-on`	`$checkbox-ios-background-color-on`	Border color of the checkbox icon when on
`$checkbox-ios-icon-border-width`	`1px`	Border width of the checkbox icon
`$checkbox-ios-icon-border-style`	`solid`	Border style of the checkbox icon
`$checkbox-ios-icon-border-radius`	`50%`	Border radius of the checkbox icon
`$checkbox-ios-icon-checkmark-width`	`1px`	Width of the checkbox icon checkmark
`$checkbox-ios-icon-checkmark-style`	`solid`	Style of the checkbox icon checkmark
`$checkbox-ios-icon-checkmark-color`	`color-contrast($colors-ios, $checkbox-ios-background-color-on)`	Color of the checkbox icon checkmark
`$checkbox-ios-disabled-opacity`	`.3`	Opacity of the disabled checkbox
`$checkbox-ios-item-start-margin-top`	`$item-ios-padding-media-top`	Margin top of the left checkbox item
`$checkbox-ios-item-start-margin-end`	`$item-ios-padding-end`	Margin end of the left checkbox item
`$checkbox-ios-item-start-margin-bottom`	`$item-ios-padding-media-bottom`	Margin bottom of the left checkbox item
`$checkbox-ios-item-start-margin-start`	`2px`	Margin start of the left checkbox item
`$checkbox-ios-item-end-margin-top`	`10px`	Margin top of the right checkbox item
`$checkbox-ios-item-end-margin-end`	`8px`	Margin end of the right checkbox item
`$checkbox-ios-item-end-margin-bottom`	`9px`	Margin bottom of the right checkbox item
`$checkbox-ios-item-end-margin-start`	`0`	Margin start of the right checkbox item

Property	Default	Description
`$checkbox-md-border-bottom-width`	`1px`	Border bottom width of the checkbox
`$checkbox-md-border-bottom-style`	`solid`	Border bottom style of the checkbox
`$checkbox-md-border-bottom-color`	`$list-md-border-color`	Border bottom color of the checkbox
`$checkbox-md-disabled-opacity`	`.3`	Opacity of the disabled checkbox
`$checkbox-md-icon-background-color-off`	`$list-md-background-color`	Background color of the checkbox icon when off
`$checkbox-md-icon-background-color-on`	`color($colors-md, primary)`	Background color of the checkbox icon when on
`$checkbox-md-icon-size`	`16px`	Size of the checkbox icon
`$checkbox-md-icon-checkmark-width`	`2px`	Width of the checkbox icon checkmark
`$checkbox-md-icon-checkmark-style`	`solid`	Style of the checkbox icon checkmark
`$checkbox-md-icon-checkmark-color`	`color-contrast($colors-md, $checkbox-md-icon-background-color-on)`	Color of the checkbox icon checkmark
`$checkbox-md-icon-border-width`	`2px`	Border width of the checkbox icon
`$checkbox-md-icon-border-style`	`solid`	Border style of the checkbox icon
`$checkbox-md-icon-border-radius`	`2px`	Border radius of the checkbox icon
`$checkbox-md-icon-border-color-off`	`darken($list-md-border-color, 40%)`	Border color of the checkbox icon when off
`$checkbox-md-icon-border-color-on`	`color($colors-md, primary)`	Border color of the checkbox icon when on
`$checkbox-md-transition-duration`	`280ms`	Transition duration of the checkbox
`$checkbox-md-transition-easing`	`cubic-bezier(.4, 0, .2, 1)`	Transition easing of the checkbox
`$checkbox-md-item-start-margin-top`	`$item-md-padding-media-top`	Margin top of the start checkbox item
`$checkbox-md-item-start-margin-end`	`36px`	Margin end of the start checkbox item
`$checkbox-md-item-start-margin-bottom`	`$item-md-padding-media-bottom`	Margin bottom of the start checkbox item
`$checkbox-md-item-start-margin-start`	`4px`	Margin start of the start checkbox item
`$checkbox-md-item-end-margin-top`	`11px`	Margin top of the end checkbox item
`$checkbox-md-item-end-margin-end`	`10px`	Margin end of the end checkbox item
`$checkbox-md-item-end-margin-bottom`	`10px`	Margin bottom of the end checkbox item
`$checkbox-md-item-end-margin-start`	`0`	Margin start of the end checkbox item

Property	Default	Description
`$checkbox-wp-border-bottom-width`	`1px`	Border bottom width of the checkbox
`$checkbox-wp-border-bottom-style`	`solid`	Border bottom style of the checkbox
`$checkbox-wp-border-bottom-color`	`$list-wp-border-color`	Border bottom color of the checkbox
`$checkbox-wp-disabled-opacity`	`.3`	Opacity of the disabled checkbox
`$checkbox-wp-icon-background-color-off`	`$list-wp-background-color`	Background color of the checkbox icon when off
`$checkbox-wp-icon-background-color-on`	`color($colors-wp, primary)`	Background color of the checkbox icon when on
`$checkbox-wp-icon-size`	`16px`	Size of the checkbox icon
`$checkbox-wp-icon-checkmark-width`	`1px`	Width of the checkbox icon checkmark
`$checkbox-wp-icon-checkmark-style`	`solid`	Style of the checkbox icon checkmark
`$checkbox-wp-icon-checkmark-color`	`color-contrast($colors-wp, $checkbox-wp-icon-background-color-on)`	Color of the checkbox icon checkmark
`$checkbox-wp-icon-border-width`	`2px`	Border width of the checkbox icon
`$checkbox-wp-icon-border-style`	`solid`	Border style of the checkbox icon
`$checkbox-wp-icon-border-radius`	`0`	Border radius of the checkbox icon
`$checkbox-wp-icon-border-color-off`	`#333`	Border color of the checkbox icon when off
`$checkbox-wp-icon-border-color-on`	`color($colors-wp, primary)`	Border color of the checkbox icon when on
`$checkbox-wp-item-start-margin-top`	`$item-wp-padding-media-top`	Margin top of the start checkbox item
`$checkbox-wp-item-start-margin-end`	`$item-wp-padding-end`	Margin end of the start checkbox item
`$checkbox-wp-item-start-margin-bottom`	`$item-wp-padding-media-bottom`	Margin bottom of the start checkbox item
`$checkbox-wp-item-start-margin-start`	`4px`	Margin start of the start checkbox item
`$checkbox-wp-item-end-margin-top`	`11px`	Margin top of the end checkbox item
`$checkbox-wp-item-end-margin-end`	`10px`	Margin end of the end checkbox item
`$checkbox-wp-item-end-margin-bottom`	`10px`	Margin bottom of the end checkbox item
`$checkbox-wp-item-end-margin-start`	`0`	Margin start of the end checkbox item

Checkbox Component Docs

Checkbox

`ion-checkbox`

Usage

Input Properties

Advanced

Sass Variables

Related

API

Native

General