Skip to main content

ion-checkbox

shadow

Contents

Checkboxes allow the selection of multiple options from a set of options. They appear as checked (ticked) when activated. Clicking on a checkbox will toggle the checked property. They can also be checked programmatically by setting the checked property.

Usage#

<!-- Default Checkbox --><ion-checkbox></ion-checkbox>
<!-- Disabled Checkbox --><ion-checkbox disabled="true"></ion-checkbox>
<!-- Checked Checkbox --><ion-checkbox checked="true"></ion-checkbox>
<!-- Checkbox Colors --><ion-checkbox color="primary"></ion-checkbox><ion-checkbox color="secondary"></ion-checkbox><ion-checkbox color="danger"></ion-checkbox><ion-checkbox color="light"></ion-checkbox><ion-checkbox color="dark"></ion-checkbox>
<!-- Checkboxes in a List --><ion-list>  <ion-item *ngFor="let entry of form">    <ion-label>{{entry.val}}</ion-label>    <ion-checkbox slot="end" [(ngModel)]="entry.isChecked"></ion-checkbox>  </ion-item></ion-list>
import { Component } from '@angular/core';
@Component({  selector: 'app-page-home',  templateUrl: 'home.page.html',  styleUrls: ['home.page.scss']})export class HomePage {  public form = [      { val: 'Pepperoni', isChecked: true },      { val: 'Sausage', isChecked: false },      { val: 'Mushroom', isChecked: false }    ];}

Properties#

checked#

DescriptionIf true, the checkbox is selected.
Attributechecked
Typeboolean
Defaultfalse

color#

DescriptionThe color to use from your application's color palette.
Default options are: "primary", "secondary", "tertiary", "success", "warning", "danger", "light", "medium", and "dark".
For more information on colors, see theming.
Attributecolor
Typestring ๏ฝœ undefined
Defaultundefined

disabled#

DescriptionIf true, the user cannot interact with the checkbox.
Attributedisabled
Typeboolean
Defaultfalse

indeterminate#

DescriptionIf true, the checkbox will visually appear as indeterminate.
Attributeindeterminate
Typeboolean
Defaultfalse

mode#

DescriptionThe mode determines which platform styles to use.
Attributemode
Type"ios" ๏ฝœ "md"
Defaultundefined

name#

DescriptionThe name of the control, which is submitted with the form data.
Attributename
Typestring
Defaultthis.inputId

value#

DescriptionThe value of the checkbox does not mean if it's checked or not, use the checked
property for that.

The value of a checkbox is analogous to the value of an <input type="checkbox">,
it's only used when the checkbox participates in a native <form>.
Attributevalue
Typestring
Default'on'

Events#

NameDescription
ionBlurEmitted when the checkbox loses focus.
ionChangeEmitted when the checked property has changed.
ionFocusEmitted when the checkbox has focus.

CSS Shadow Parts#

NameDescription
containerThe container for the checkbox mark.
markThe checkmark used to indicate the checked state.

CSS Custom Properties#

NameDescription
--backgroundBackground of the checkbox icon
--background-checkedBackground of the checkbox icon when checked
--border-colorBorder color of the checkbox icon
--border-color-checkedBorder color of the checkbox icon when checked
--border-radiusBorder radius of the checkbox icon
--border-styleBorder style of the checkbox icon
--border-widthBorder width of the checkbox icon
--checkmark-colorColor of the checkbox checkmark when checked
--checkmark-widthStroke width of the checkbox checkmark
--sizeSize of the checkbox icon
--transitionTransition of the checkbox icon
View Source