Skip to main content
Version: v7

ion-checkbox

shadow

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

基本的な使い方

Label Placement

開発者は labelPlacement プロパティを使用して、ラベルをコントロールに対してどのように配置するかを制御できます。このプロパティはフレックスボックスの flex-direction プロパティを反映しています。

Alignment

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.

note

Stacked checkboxes can be aligned using the alignment property. This can be useful when the label and control need to be centered horizontally.

Justification

開発者は justify プロパティを使用して、ラベルとコントロールの行の詰め方を制御することができます。このプロパティはフレックスボックスの justify-content プロパティを反映しています。

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-checkboxlabelPlacement プロパティを使用して設定することができる。ラベルとコントロールの行の詰め方は、ion-checkboxjustify プロパティを使用して制御することができます。

<!-- 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-checkboxion-item の中で、そのアイテムが ion-list に配置される場合にのみ使用されます。また、ion-checkboxが正しく機能するためには、ion-itemはもはや必須ではありません。

レガシーな構文の使い方

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

プロパティ

alignment

Description横軸上のチェックボックスとラベルの配置を制御する方法。start":ラベルとコントロールはLTRでは横軸の左側に、RTLでは右側に表示されます。center":ラベルとコントロールはLTRでもRTLでも十字軸の中央に表示されます。
Attributealignment
Type"center" | "start"
Default'center'

checked

Descriptiontrueの場合、チェックボックスが選択される。
Attributechecked
Typeboolean
Defaultfalse

color

Descriptionアプリケーションのカラーパレットから使用する色を指定します。デフォルトのオプションは以下の通りです。 "primary", "secondary", "tertiary", "success", "warning", "danger", "light", "medium", と "dark" です.色に関する詳しい情報は theming を参照してください。
Attributecolor
Type"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string | undefined
Defaultundefined

disabled

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

indeterminate

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

justify

Descriptionラベルとチェックボックスを1行にまとめる方法。"start":ラベルとチェックボックスは、LTRでは左に、RTLでは右に表示されます。"end":ラベルとチェックボックスは、LTRでは右に、RTLでは左に表示されます。"space-between":ラベルとチェックボックスは、2つの要素の間にスペースがある状態で、行の反対側の端に表示されます。
Attributejustify
Type"end" | "space-between" | "start"
Default'space-between'

labelPlacement

Descriptionチェックボックスに対するラベルの位置。start":ラベルはLTRではチェックボックスの左に、RTLでは右に表示されます。end":ラベルはLTRではチェックボックスの右、RTLでは左に表示されます。fixed":ラベルの幅が固定される以外は "start" と同じ動作をします。長いテキストは省略記号("...")で切り捨てられます。積み重ね":ラベルは向きに関係なくチェックボックスの上に表示されます。ラベルの整列は alignment プロパティで制御できます。
Attributelabel-placement
Type"end" | "fixed" | "stacked" | "start"
Default'start'

legacy

Descriptionlegacyプロパティをtrueに設定すると、強制的にレガシーフォームコントロールのマークアップを使用することができます。Ionicは、チェックボックスがaria-label属性を使用しているか、デフォルトスロットにテキストがある場合にのみ、モダンなフォームマークアップを選択します。そのため、legacyプロパティは、この自動オプトイン動作を回避したい場合にのみ、エスケープハッチとして使用する必要があります。なお、このプロパティはIonicの今後のメジャーリリースで削除され、すべてのフォームコンポーネントは最新のフォームマークアップを使用するようオプトインされる予定です。
Attributelegacy
Typeboolean | undefined
Defaultundefined

mode

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

name

Descriptionフォームデータとともに送信されるコントロールの名前。
Attributename
Typestring
Defaultthis.inputId

value

Descriptionチェックボックスの値は、チェックされているかどうかを意味するものではなく、checkedプロパティを使用します。 チェックボックスの値は <input type="checkbox"> の値に似ており、チェックボックスがネイティブの <form> に参加する場合にのみ使用されます。
Attributevalue
Typeany
Default'on'

イベント

NameDescription
ionBlurチェックボックスのフォーカスが外れたときに発行されます。
ionChangeクリックなどのユーザー操作によりcheckedプロパティが変更された場合に発生します。プログラムによってcheckedプロパティを設定した場合は、このイベントは発生しません。
ionFocusチェックボックスにフォーカスが当たったときに発行されます。

メソッド

No public methods available for this component.

CSS Shadow Parts

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

CSSカスタムプロパティ

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

Slots

NameDescription
``チェックボックスと関連付けるラベルテキスト。"labelPlacement"プロパティを使用して、チェックボックスに対するラベルの配置を制御します。