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

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-left-margin $item-ios-padding-media-top $item-ios-padding-right $item-ios-padding-media-bottom 2px

Margin of the left checkbox item

$checkbox-ios-item-right-margin 10px 8px 9px 0

Margin 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-padding $item-md-padding-top ($item-md-padding-right / 2) $item-md-padding-bottom 0

Padding of the checkbox

$checkbox-md-margin 0

Margin 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-left-margin $item-md-padding-media-top 36px $item-md-padding-media-bottom 4px

Margin of the left checkbox item

$checkbox-md-item-right-margin 11px 10px 10px 0

Margin of the right 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-padding $item-wp-padding-top ($item-wp-padding-right / 2) $item-wp-padding-bottom 0

Padding of the checkbox

$checkbox-wp-margin 0

Margin 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-left-margin $item-wp-padding-media-top $item-wp-padding-right $item-wp-padding-media-bottom 4px

Margin of the left checkbox item

$checkbox-wp-item-right-margin 11px 10px 10px 0

Margin of the right checkbox item

Related

Checkbox Component Docs

API

Native

General