Checkbox
ion-checkbox
ion-checkbox
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 |