Version: v7

ion-checkbox

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

基本的な使い方

Label Placement

開発者は labelPlacement プロパティを使用して、ラベルがどのように配置されるかを制御することができます。

Justification

開発者は justify プロパティを使用して、ラベルとコントロールの行の詰め方を制御することができます。

note

ion-itemは、 justify がどのように機能するかを強調するためにデモで使用されているだけです。 justify が正しく機能するために必須ではありません。

Indeterminate Checkboxes

テーマ

CSSカスタムプロパティ

Interfaces

CheckboxChangeEventDetail

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

CheckboxCustomEvent

必須ではありませんが、このコンポーネントから発行される Ionic イベントでより強く型付けを行うために、CustomEvent インターフェースの代わりにこのインターフェースを使用することが可能です。

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

レガシーなチェックボックス構文からのマイグレーション

Ionic 7.0では、よりシンプルなチェックボックス構文が導入されました。この新しい構文は、チェックボックスの設定に必要な定型文を減らし、アクセシビリティの問題を解決し、開発者のエクスペリエンスを向上させます。

開発者は、この移行を一度に1つのチェックボックスずつ実行することができます。開発者はレガシー構文を使い続けることができますが、できるだけ早く移行することをお勧めします。

最新の構文の使い方

最新の構文を使用するには、ion-label を削除して、 ion-checkbox の中に直接ラベルを渡す必要があります。ラベルの配置は ion-checkbox の labelPlacement プロパティを使用して設定することができる。ラベルとコントロールの行の詰め方は、ion-checkbox の justify プロパティを使用して制御することができます。

JavaScript
Angular
React
Vue

<!-- Basic -->

<!-- Before -->
<ion-item>
  <ion-label>Checkbox Label</ion-label>
  <ion-checkbox></ion-checkbox>
</ion-item>

<!-- After -->
<ion-item>
  <ion-checkbox>Checkbox Label</ion-checkbox>
</ion-item>

<!-- Fixed Labels -->

<!-- Before -->
<ion-item>
  <ion-label position="fixed">Checkbox Label</ion-label>
  <ion-checkbox></ion-checkbox>
</ion-item>

<!-- After -->
<ion-item>
  <ion-checkbox label-placement="fixed">Checkbox Label</ion-checkbox>
</ion-item>

<!-- Checkbox at the start of line, Label at the end of line -->

<!-- Before -->
<ion-item>
  <ion-label slot="end">Checkbox Label</ion-label>
  <ion-checkbox></ion-checkbox>
</ion-item>

<!-- After -->
<ion-item>
  <ion-checkbox label-placement="end">Checkbox Label</ion-checkbox>
</ion-item>

<!-- Basic -->

<!-- Before -->
<ion-item>
  <ion-label>Checkbox Label</ion-label>
  <ion-checkbox></ion-checkbox>
</ion-item>

<!-- After -->
<ion-item>
  <ion-checkbox>Checkbox Label</ion-checkbox>
</ion-item>

<!-- Fixed Labels -->

<!-- Before -->
<ion-item>
  <ion-label position="fixed">Checkbox Label</ion-label>
  <ion-checkbox></ion-checkbox>
</ion-item>

<!-- After -->
<ion-item>
  <ion-checkbox labelPlacement="fixed">Checkbox Label</ion-checkbox>
</ion-item>

<!-- Checkbox at the start of line, Label at the end of line -->

<!-- Before -->
<ion-item>
  <ion-label slot="end">Checkbox Label</ion-label>
  <ion-checkbox></ion-checkbox>
</ion-item>

<!-- After -->
<ion-item>
  <ion-checkbox labelPlacement="end">Checkbox Label</ion-checkbox>
</ion-item>

{/* Basic */}

{/* Before */}
<IonItem>
  <IonLabel>Checkbox Label</IonLabel>
  <IonCheckbox></IonCheckbox>
</IonItem>

{/* After */}
<IonItem>
  <IonCheckbox>Checkbox Label</IonCheckbox>
</IonItem>

{/* Fixed Labels */}

{/* Before */}
<IonItem>
  <IonLabel position="fixed">Checkbox Label</IonLabel>
  <IonCheckbox></IonCheckbox>
</IonItem>

{/* After */}
<IonItem>
  <IonCheckbox labelPlacement="fixed">Checkbox Label</IonCheckbox>
</IonItem>

{/* Checkbox at the start of line, Label at the end of line */}

{/* Before */}
<IonItem>
  <IonLabel slot="end">Checkbox Label</IonLabel>
  <IonCheckbox></IonCheckbox>
</IonItem>

{/* After */}
<IonItem>
  <IonCheckbox labelPlacement="end">Checkbox Label</IonCheckbox>
</IonItem>

<!-- Basic -->

<!-- Before -->
<ion-item>
  <ion-label>Checkbox Label</ion-label>
  <ion-checkbox></ion-checkbox>
</ion-item>

<!-- After -->
<ion-item>
  <ion-checkbox>Checkbox Label</ion-checkbox>
</ion-item>

<!-- Fixed Labels -->

<!-- Before -->
<ion-item>
  <ion-label position="fixed">Checkbox Label</ion-label>
  <ion-checkbox></ion-checkbox>
</ion-item>

<!-- After -->
<ion-item>
  <ion-checkbox label-placement="fixed">Checkbox Label</ion-checkbox>
</ion-item>

<!-- Checkbox at the start of line, Label at the end of line -->

<!-- Before -->
<ion-item>
  <ion-label slot="end">Checkbox Label</ion-label>
  <ion-checkbox></ion-checkbox>
</ion-item>

<!-- After -->
<ion-item>
  <ion-checkbox label-placement="end">Checkbox Label</ion-checkbox>
</ion-item>

note

Ionic の過去のバージョンでは、ion-checkbox が正しく機能するために ion-item が必要でした。Ionic 7.0 からは、ion-checkbox は ion-item の中で、そのアイテムが ion-list に配置される場合にのみ使用されます。また、ion-checkboxが正しく機能するためには、ion-itemはもはや必須ではありません。

レガシーな構文の使い方

Ionicは、アプリが最新のチェックボックス構文を使用しているかどうかをヒューリスティックに検出します。場合によっては、レガシーな構文を使い続けることが望ましい場合もあります。開発者は ion-checkbox の legacy プロパティを true に設定することで、そのチェックボックスのインスタンスがレガシー構文を使用するように強制できます。

プロパティ

checked

Description	If `true`, the checkbox is selected.
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 & Record<never, never> ｜ undefined`
Default	`undefined`

disabled

Description	If `true`, the user cannot interact with the checkbox.
Attribute	`disabled`
Type	`boolean`
Default	`false`

indeterminate

Description	If `true`, the checkbox will visually appear as indeterminate.
Attribute	`indeterminate`
Type	`boolean`
Default	`false`

justify

Description	How to pack the label and checkbox within a line. `"start"`: The label and checkbox will appear on the left in LTR and on the right in RTL. `"end"`: The label and checkbox will appear on the right in LTR and on the left in RTL. `"space-between"`: The label and checkbox will appear on opposite ends of the line with space between the two elements.
Attribute	`justify`
Type	`"end" ｜ "space-between" ｜ "start"`
Default	`'space-between'`

labelPlacement

Description	Where to place the label relative to the checkbox. `"start"`: The label will appear to the left of the checkbox in LTR and to the right in RTL. `"end"`: The label will appear to the right of the checkbox in LTR and to the left in RTL. `"fixed"`: The label has the same behavior as `"start"` except it also has a fixed width. Long text will be truncated with ellipses ("...").
Attribute	`label-placement`
Type	`"end" ｜ "fixed" ｜ "start"`
Default	`'start'`

legacy

Description	Set the `legacy` property to `true` to forcibly use the legacy form control markup. Ionic will only opt checkboxes in to the modern form markup when they are using either the `aria-label` attribute or have text in the default slot. As a result, the `legacy` property should only be used as an escape hatch when you want to avoid this automatic opt-in behavior. Note that this property will be removed in an upcoming major release of Ionic, and all form components will be opted-in to using the modern form markup.
Attribute	`legacy`
Type	`boolean ｜ undefined`
Default	`undefined`

mode

Description	The mode determines which platform styles to use.
Attribute	`mode`
Type	`"ios" ｜ "md"`
Default	`undefined`

name

Description	The name of the control, which is submitted with the form data.
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'`

イベント

Name	Description
`ionBlur`	Emitted when the checkbox loses focus.
`ionChange`	Emitted when the checked property has changed as a result of a user action such as a click. This event will not emit when programmatically setting the checked property.
`ionFocus`	Emitted when the checkbox has focus.

メソッド

No public methods available for this component.

CSS Shadow Parts

Name	Description
`container`	The container for the checkbox mark.
`mark`	The checkmark used to indicate the checked state.

CSSカスタムプロパティ

Name	Description
`--border-color`	Border color of the checkbox icon
`--border-color-checked`	Border color of the checkbox icon when checked
`--border-radius`	Border radius of the checkbox icon
`--border-style`	Border style of the checkbox icon
`--border-width`	Border width of the checkbox icon
`--checkbox-background`	Background of the checkbox icon
`--checkbox-background-checked`	Background of the checkbox icon when checked
`--checkmark-color`	Color of the checkbox checkmark when checked
`--checkmark-width`	Stroke width of the checkbox checkmark
`--size`	Size of the checkbox icon
`--transition`	Transition of the checkbox icon

Slots

Name	Description
``	The label text to associate with the checkbox. Use the "labelPlacement" property to control where the label is placed relative to the checkbox.

基本的な使い方​

Label Placement​

Justification​

note

Indeterminate Checkboxes​

テーマ​

CSSカスタムプロパティ​

Interfaces​

CheckboxChangeEventDetail​

CheckboxCustomEvent​

レガシーなチェックボックス構文からのマイグレーション​

最新の構文の使い方​

note

レガシーな構文の使い方​

プロパティ​

checked​

color​

disabled​

indeterminate​

justify​

labelPlacement​

legacy​

mode​

name​

value​

イベント​

メソッド​

CSS Shadow Parts​

CSSカスタムプロパティ​

Slots​

Contents

基本的な使い方

Label Placement

Justification

Indeterminate Checkboxes

テーマ

CSSカスタムプロパティ

Interfaces

CheckboxChangeEventDetail

CheckboxCustomEvent

レガシーなチェックボックス構文からのマイグレーション

最新の構文の使い方

レガシーな構文の使い方

プロパティ

checked

color

disabled

indeterminate

justify

labelPlacement

legacy

mode

name

value

イベント

メソッド

CSS Shadow Parts

CSSカスタムプロパティ

Slots