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

Checkbox

ion-checkbox

Improve this doc

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

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

Related

Checkbox Component Docs

API

Native

General