Checkbox
ion-checkbox
ion-checkboxThe 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: |
| mode | string |
The mode to apply to this component. Mode can be |
| 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 |