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
color string

The predefined color to use. For example: "primary", "secondary", "danger".

mode string

The mode to apply to this component. Mode can be ios, wp, or md.

checked boolean

whether or not the checkbox is checked (defaults to false)

disabled boolean

whether or not the checkbox is disabled or not.

Output Events

Attr Details
ionChange

expression to evaluate 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