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.

disabled boolean

If true, the user cannot interact with this element.

Output Events

Attr Details
ionChange

Emitted when the checkbox value changes.

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