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.
Developers can use the labelPlacement property to control how the label is placed relative to the control. This property mirrors the flexbox flex-direction property.
Developers can use the alignment property to control how the label and control are aligned on the cross axis. This property mirrors the flexbox align-items property.
Stacked checkboxes can be aligned using the alignment property. This can be useful when the label and control need to be centered horizontally.
Developers can use the justify property to control how the label and control are packed on a line. This property mirrors the flexbox justify-content property.
ion-item is only used in the demos to emphasize how justify works. It is not needed in order for justify to function correctly.
Checkbox labels can sometimes be accompanied with links. These links can provide more information related to the checkbox. However, clicking the link should not check the checkbox. To achieve this, we can use stopPropagation to prevent the click event from bubbling. When using this approach, the rest of the label still remains clickable.
Helper & Error Text
Helper and error text can be used inside of a checkbox with the helperText and errorText property. The error text will not be displayed unless the ion-invalid and ion-touched classes are added to the ion-checkbox. This ensures errors are not shown before the user has a chance to enter data.
In Angular, this is done automatically through form validation. In JavaScript, React and Vue, the class needs to be manually added based on your own validation.
interface CheckboxChangeEventDetail<T = any> {
value: T;
checked: boolean;
}
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;
}
| Description | 十字軸上のチェックボックスとラベルの配置を制御する方法。"start"：ラベルとコントロールはLTRでは横軸の左側に、RTLでは右側に表示されます。"center"：ラベルとコントロールはLTRでもRTLでも横軸の中央に表示されます。このプロパティを設定すると、チェックボックス display が block に変更されます。 |
| Attribute | alignment |
| Type | "center" ｜ "start" ｜ undefined |
| Default | undefined |
| Description | trueの場合、チェックボックスが選択される。 |
| Attribute | checked |
| Type | boolean |
| Default | false |
| Description | アプリケーションのカラーパレットから使用する色を指定します。デフォルトのオプションは以下の通りです。 "primary", "secondary", "tertiary", "success", "warning", "danger", "light", "medium", と "dark" です．色に関する詳しい情報は theming を参照してください。 |
| Attribute | color |
| Type | "danger" ｜ "dark" ｜ "light" ｜ "medium" ｜ "primary" ｜ "secondary" ｜ "success" ｜ "tertiary" ｜ "warning" ｜ string ｜ undefined |
| Default | undefined |
| Description | trueの場合、ユーザはチェックボックスと対話することができません。 |
| Attribute | disabled |
| Type | boolean |
| Default | false |
errorText
| Description | チェックボックスのラベルの下に配置され、エラーが検出されたときに表示されるテキスト。 |
| Attribute | error-text |
| Type | string ｜ undefined |
| Default | undefined |
helperText
| Description | チェックボックスのラベルの下に配置され、エラーが検出されなかった場合に表示されるテキスト。 |
| Attribute | helper-text |
| Type | string ｜ undefined |
| Default | undefined |
| Description | trueの場合、チェックボックスは視覚的に不定形と表示されます。 |
| Attribute | indeterminate |
| Type | boolean |
| Default | false |
| Description | ラベルとチェックボックスを1行にまとめる方法。"start"：ラベルとチェックボックスはLTRでは左に、RTLでは右に表示されます。"end"：ラベルとチェックボックスはLTRでは右に、RTLでは左に表示されます。"space-between"：ラベルとチェックボックスは行の反対側に表示され、2つの要素の間にはスペースが入ります。このプロパティを設定すると、チェックボックスの display が block に変更されます。 |
| Attribute | justify |
| Type | "end" ｜ "space-between" ｜ "start" ｜ undefined |
| Default | undefined |
| Description | チェックボックスに対するラベルの位置。"start"：ラベルはLTRではチェックボックスの左に、RTLでは右に表示されます。"end"：ラベルはLTRではチェックボックスの右、RTL では左に表示されます。"fixed"：ラベルの幅が固定される以外は "start" と同じ動作をします。長いテキストは省略記号("...")で切り捨てられます。"stacked"：ラベルは向きに関係なくチェックボックスの上に表示されます。ラベルの整列は alignment プロパティで制御できます。 |
| Attribute | label-placement |
| Type | "end" ｜ "fixed" ｜ "stacked" ｜ "start" |
| Default | 'start' |
| Description | modeは、どのプラットフォームのスタイルを使用するかを決定します。
This is a virtual property that is set once during initialization and will not update if you change its value after the initial render. |
| Attribute | mode |
| Type | "ios" ｜ "md" |
| Default | undefined |
| Description | フォームデータとともに送信されるコントロールの名前。 |
| Attribute | name |
| Type | string |
| Default | this.inputId |
| Description | true の場合、スクリーンリーダーは必須項目として読み上げます。このプロパティはアクセシビリティ目的でのみ機能し、値が無効でもフォーム送信は妨げません。 |
| Attribute | required |
| Type | boolean |
| Default | false |
| Description | チェックボックスの値は、チェックされているかどうかを意味するものではなく、checkedプロパティを使用します。 チェックボックスの値は <input type="checkbox"> の値に似ており、チェックボックスがネイティブの <form> に参加する場合にのみ使用されます。 |
| Attribute | value |
| Type | any |
| Default | 'on' |
| Name | Description | Bubbles |
|---|
ionBlur | チェックボックスのフォーカスが外れたときに発行されます。 | true |
ionChange | クリックなどのユーザーアクションの結果、checkedプロパティが変更されたときに発行される。 プログラムで checked プロパティを設定した場合は、このイベントは発生しません。 | true |
ionFocus | チェックボックスにフォーカスが当たったときに発行されます。 | true |
No public methods available for this component.
| Name | Description |
|---|
container | チェックボックスマークのコンテナです。 |
error-text | チェックボックスが無効かつ操作されたときに、ラベルの下に表示される補助テキスト。 |
helper-text | チェックボックスが有効なときに、ラベルの下に表示される補助テキスト。 |
label | チェックボックスを表すラベルテキスト。 |
mark | チェックされた状態を示すために使用されるチェックマークです。 |
supporting-text | チェックボックスのラベルの下に表示される補助テキスト。 |
| Name | Description |
|---|
--border-color | チェックボックスアイコンのボーダーカラー |
--border-color-checked | チェックボックスのアイコンがチェックされたときのボーダーカラー |
--border-radius | チェックボックスアイコンの境界半径 |
--border-style | チェックボックスアイコンのボーダースタイル |
--border-width | チェックボックスアイコンのボーダー幅 |
--checkbox-background | チェックボックスアイコンの背景 |
--checkbox-background-checked | チェックしたときのチェックボックスアイコンの背景 |
--checkmark-color | チェックボックス のチェックマークがチェックされたときの色 |
--checkmark-width | チェックボックス・チェックマークのストローク幅 |
--size | チェックボックスのアイコンの大きさ |
--transition | チェックボックスアイコンの遷移 |
| Name | Description |
|---|
--border-color | チェックボックスアイコンのボーダーカラー |
--border-color-checked | チェックボックスのアイコンがチェックされたときのボーダーカラー |
--border-radius | チェックボックスアイコンの境界半径 |
--border-style | チェックボックスアイコンのボーダースタイル |
--border-width | チェックボックスアイコンのボーダー幅 |
--checkbox-background | チェックボックスアイコンの背景 |
--checkbox-background-checked | チェックしたときのチェックボックスアイコンの背景 |
--checkmark-color | チェックボックスのチェックマークがチェックされたときの色 |
--checkmark-width | チェックボックス・チェックマークのストローク幅 |
--size | チェックボックスのアイコンの大きさ |
--transition | チェックボックスアイコンの遷移 |
| Name | Description |
|---|
| `` | チェックボックスと関連付けるラベルテキスト。"labelPlacement"プロパティを使用して、チェックボックスに対するラベルの配置を制御します。 |