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.

<!-- Default Checkbox -->
<ion-checkbox></ion-checkbox>

<!-- Disabled Checkbox -->
<ion-checkbox disabled></ion-checkbox>

<!-- Checked Checkbox -->
<ion-checkbox checked></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>
    <ion-label>Pepperoni</ion-label>
    <ion-checkbox slot="end" value="pepperoni" checked></ion-checkbox>
  </ion-item>

  <ion-item>
    <ion-label>Sausage</ion-label>
    <ion-checkbox slot="end" value="sausage" disabled></ion-checkbox>
  </ion-item>

  <ion-item>
    <ion-label>Mushrooms</ion-label>
    <ion-checkbox slot="end" value="mushrooms"></ion-checkbox>
  </ion-item>
</ion-list>

Properties

checked

boolean

If true, the checkbox is selected. Defaults to false.

color

string

The color to use. Default options are: "primary", "secondary", "danger", "light", and "dark".

disabled

boolean

If true, the user cannot interact with the checkbox. Defaults to false.

mode

The mode determines which platform styles to use. Possible values are: "ios" or "md".

name

string

The name of the control, which is submitted with the form data.

value

string

the value of the checkbox.

Attributes

checked

boolean

If true, the checkbox is selected. Defaults to false.

color

string

The color to use. Default options are: "primary", "secondary", "danger", "light", and "dark".

disabled

boolean

If true, the user cannot interact with the checkbox. Defaults to false.

mode

The mode determines which platform styles to use. Possible values are: "ios" or "md".

name

string

The name of the control, which is submitted with the form data.

value

string

the value of the checkbox.

Events

ionBlur

Emitted when the toggle loses focus.

ionChange

Emitted when the checked property has changed.

ionFocus

Emitted when the toggle has focus.

ionStyle

Emitted when the styles change.

Built with StencilJS