Skip to main content
Version: v6

ion-checkbox

shadow

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.

Basic Usage

Indeterminate Checkboxes

Theming

CSS Custom Properties

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;
}

Properties

checked

Descriptiontrueの場合、チェックボックスが選択される。
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
Type"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string & Record<never, never> | undefined
Defaultundefined

disabled

Descriptiontrueの場合、ユーザはチェックボックスと対話することができません。
Attributedisabled
Typeboolean
Defaultfalse

indeterminate

Descriptiontrueの場合、チェックボックスは視覚的に不定形と表示されます。
Attributeindeterminate
Typeboolean
Defaultfalse

mode

Descriptionmodeは、どのプラットフォームのスタイルを使用するかを決定します。
Attributemode
Type"ios" | "md"
Defaultundefined

name

Descriptionフォームデータとともに送信されるコントロールの名前。
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
ionBlurチェックボックスのフォーカスが外れたときに発行されます。
ionChangeチェックされたプロパティが変更されたときに発行されます。
ionFocusチェックボックスにフォーカスが当たったときに発行されます。

Methods

No public methods available for this component.

CSS Shadow Parts

NameDescription
containerチェックボックスマークのコンテナです。
markチェックされた状態を示すために使用されるチェックマークです。

CSS Custom Properties

NameDescription
--backgroundチェックボックスアイコンの背景
--background-checkedチェックしたときのチェックボックスアイコンの背景
--border-colorチェックボックスアイコンのボーダーカラー
--border-color-checkedチェックボックスのアイコンがチェックされたときのボーダーカラー
--border-radiusチェックボックスアイコンの境界半径
--border-styleチェックボックスアイコンのボーダースタイル
--border-widthチェックボックスアイコンのボーダー幅
--checkmark-colorチェックボックスのチェックマークがチェックされたときの色
--checkmark-widthチェックボックス・チェックマークのストローク幅
--sizeチェックボックスのアイコンの大きさ
--transitionチェックボックスアイコンの遷移

Slots

No slots available for this component.