ion-checkbox
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
| Description | trueの場合、チェックボックスが選択される。 |
| Attribute | checked |
| Type | boolean |
| Default | false |
color
| Description | The 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. |
| Attribute | color |
| Type | "danger" ｜ "dark" ｜ "light" ｜ "medium" ｜ "primary" ｜ "secondary" ｜ "success" ｜ "tertiary" ｜ "warning" ｜ string ｜ undefined |
| Default | undefined |
disabled
| Description | trueの場合、ユーザはチェックボックスと対話することができません。 |
| Attribute | disabled |
| Type | boolean |
| Default | false |
indeterminate
| Description | trueの場合、チェックボックスは視覚的に不定形と表示されます。 |
| Attribute | indeterminate |
| Type | boolean |
| Default | false |
mode
| Description | modeは、どのプラットフォームのスタイルを使用するかを決定します。 |
| Attribute | mode |
| Type | "ios" ｜ "md" |
| Default | undefined |
name
| Description | フォームデータとともに送信されるコントロールの名前。 |
| Attribute | name |
| Type | string |
| Default | this.inputId |
value
| Description | The 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>. |
| Attribute | value |
| Type | any |
| Default | 'on' |
Events
| Name | Description |
|---|---|
ionBlur | チェックボックスのフォーカスが外れたときに発行されます。 |
ionChange | チェックされたプロパティが変更されたときに発行されます。 |
ionFocus | チェックボックスにフォーカスが当たったときに発行されます。 |
Methods
No public methods available for this component.
CSS Shadow Parts
| Name | Description |
|---|---|
container | チェックボックスマークのコンテナです。 |
mark | チェックされた状態を示すために使用されるチェックマークです。 |
CSS Custom Properties
| Name | Description |
|---|---|
--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.