メインコンテンツまでスキップ
Version: v6

ion-checkbox

shadow

Contents

Checkboxを使用すると、一連のオプションから複数のオプションを選択できます。選択すると、チェックマークが付いた状態(checked)で表示されます。checkboxをクリックすると、 checked プロパティーが切り替わります。checked プロパティを設定して、プログラムで checked を切り替えることもできます。

Interfaces

CheckboxChangeEventDetail

interface CheckboxChangeEventDetail<T = any> {
value: T;
checked: boolean;
}

CheckboxCustomEvent

While not required, this interface can be used in place of the CustomEvent interface for stronger typing with Ionic events emitted from this component.

interface CheckboxCustomEvent<T = any> extends CustomEvent {
detail: CheckboxChangeEventDetail<T>;
target: HTMLIonCheckboxElement;
}

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
Typeany
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