diff --git a/BREAKING.md b/BREAKING.md
index 3f015668a20..cc1495d4636 100644
--- a/BREAKING.md
+++ b/BREAKING.md
@@ -18,6 +18,7 @@ This is a comprehensive list of the breaking changes introduced in the major ver
- [Global Styles](#version-8x-global-styles)
- [Components](#version-8x-components)
- [Button](#version-8x-button)
+ - [Checkbox](#version-8x-checkbox)
- [Content](#version-8x-content)
- [Datetime](#version-8x-datetime)
- [Input](#version-8x-input)
@@ -137,6 +138,10 @@ For more information on the dynamic font, refer to the [Dynamic Font Scaling doc
- Button text now wraps by default. If this behavior is not desired, add the `ion-text-nowrap` class from the [CSS Utilities](https://ionicframework.com/docs/layout/css-utilities).
+
Checkbox
+
+ The `legacy` property and support for the legacy syntax, which involved placing an `ion-checkbox` inside of an `ion-item` with an `ion-label`, have been removed. For more information on migrating from the legacy checkbox syntax, refer to the [Checkbox documentation](https://ionicframework.com/docs/api/checkbox#migrating-from-legacy-checkbox-syntax).
+
Content
- Content no longer sets the `--background` custom property when the `.outer-content` class is set on the host.
diff --git a/core/api.txt b/core/api.txt
index c79d645c2a1..1a6de552dd9 100644
--- a/core/api.txt
+++ b/core/api.txt
@@ -297,7 +297,6 @@ ion-checkbox,prop,disabled,boolean,false,false,false
ion-checkbox,prop,indeterminate,boolean,false,false,false
ion-checkbox,prop,justify,"end" | "space-between" | "start",'space-between',false,false
ion-checkbox,prop,labelPlacement,"end" | "fixed" | "stacked" | "start",'start',false,false
-ion-checkbox,prop,legacy,boolean | undefined,undefined,false,false
ion-checkbox,prop,mode,"ios" | "md",undefined,false,false
ion-checkbox,prop,name,string,this.inputId,false,false
ion-checkbox,prop,value,any,'on',false,false
diff --git a/core/src/components.d.ts b/core/src/components.d.ts
index 9eaf6d01308..f8368e8e7cd 100644
--- a/core/src/components.d.ts
+++ b/core/src/components.d.ts
@@ -630,10 +630,6 @@ export namespace Components {
* 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 ("..."). `"stacked"`: The label will appear above the checkbox regardless of the direction. The alignment of the label can be controlled with the `alignment` property.
*/
"labelPlacement": 'start' | 'end' | 'fixed' | 'stacked';
- /**
- * 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.
- */
- "legacy"?: boolean;
/**
* The mode determines which platform styles to use.
*/
@@ -3639,7 +3635,6 @@ declare global {
"ionChange": CheckboxChangeEventDetail;
"ionFocus": void;
"ionBlur": void;
- "ionStyle": StyleEventDetail;
}
interface HTMLIonCheckboxElement extends Components.IonCheckbox, HTMLStencilElement {
addEventListener(type: K, listener: (this: HTMLIonCheckboxElement, ev: IonCheckboxCustomEvent) => any, options?: boolean | AddEventListenerOptions): void;
@@ -5323,10 +5318,6 @@ declare namespace LocalJSX {
* 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 ("..."). `"stacked"`: The label will appear above the checkbox regardless of the direction. The alignment of the label can be controlled with the `alignment` property.
*/
"labelPlacement"?: 'start' | 'end' | 'fixed' | 'stacked';
- /**
- * 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.
- */
- "legacy"?: boolean;
/**
* The mode determines which platform styles to use.
*/
@@ -5347,10 +5338,6 @@ declare namespace LocalJSX {
* Emitted when the checkbox has focus.
*/
"onIonFocus"?: (event: IonCheckboxCustomEvent) => void;
- /**
- * Emitted when the styles change.
- */
- "onIonStyle"?: (event: IonCheckboxCustomEvent) => void;
/**
* 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 ``, it's only used when the checkbox participates in a native `