diff --git a/docs/api/item.md b/docs/api/item.md
index cc15d8b6265..cffbe64ded2 100644
--- a/docs/api/item.md
+++ b/docs/api/item.md
@@ -236,17 +236,6 @@ import CSSProps from '@site/static/usage/v7/item/theming/css-properties/index.md
 
 <CSSProps />
 
-
-### Input Highlight
-
-Items containing an input will highlight the bottom border of the input with a different color when focused, valid, or invalid. By default, `md` items have a highlight with a height set to `2px` and `ios` has no highlight (technically the height is set to `0`). The height can be changed using the `--highlight-height` CSS property. To turn off the highlight, set this variable to `0`.
-
-The highlight color changes based on the item state, but all of the states use Ionic colors by default. When focused, the input highlight will use the `primary` color. If the input is valid it will use the `success` color, and invalid inputs will use the `danger` color. This can be customized using the provided CSS properties.
-
-import InputHighlight from '@site/static/usage/v7/item/theming/input-highlight/index.md';
-
-<InputHighlight />
-
 ## Guidelines
 
 The following guidelines will help ensure your list items are easy to understand and use.
diff --git a/docs/api/label.md b/docs/api/label.md
index 4d5aab0a928..c3761074f8d 100644
--- a/docs/api/label.md
+++ b/docs/api/label.md
@@ -17,8 +17,9 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
 <EncapsulationPill type="scoped" />
 
-Label is a wrapper element that can be used in combination with `ion-item`, `ion-input`, `ion-toggle`, and more. The position of the label inside of an item can be inline, fixed, stacked, or floating.
+Label is an element used primarily to add text content to [Item](./item.md) components. Label can also be used inside of form control components such as [Input](./input.md) or [Radio](./radio.md) when specifying the visible label, but it is not required.
 
+The position of the label inside of an item can be inline, fixed, stacked, or floating.
 
 ## Basic Usage
 
@@ -32,12 +33,6 @@ import Item from '@site/static/usage/v7/label/item/index.md';
 
 <Item />
 
-## Input Labels
-
-import Input from '@site/static/usage/v7/label/input/index.md';
-
-<Input />
-
 ## Theming
 
 ### Colors
diff --git a/static/usage/v7/backdrop/basic/angular.md b/static/usage/v7/backdrop/basic/angular.md
index c98b5316ebb..64250c98aa0 100644
--- a/static/usage/v7/backdrop/basic/angular.md
+++ b/static/usage/v7/backdrop/basic/angular.md
@@ -8,8 +8,7 @@
   </ion-header>
   <ion-content class="ion-padding">
     <ion-item>
-      <ion-checkbox slot="start"></ion-checkbox>
-      <ion-label>Checkbox</ion-label>
+      <ion-checkbox>Checkbox</ion-checkbox>
     </ion-item>
     <ion-button expand="block">Button</ion-button>
   </ion-content>
diff --git a/static/usage/v7/backdrop/basic/demo.html b/static/usage/v7/backdrop/basic/demo.html
index 383542a21da..355a8bb220a 100644
--- a/static/usage/v7/backdrop/basic/demo.html
+++ b/static/usage/v7/backdrop/basic/demo.html
@@ -21,8 +21,7 @@
         </ion-header>
         <ion-content class="ion-padding">
           <ion-item>
-            <ion-checkbox slot="start"></ion-checkbox>
-            <ion-label>Checkbox</ion-label>
+            <ion-checkbox>Checkbox</ion-checkbox>
           </ion-item>
           <ion-button expand="block">Button</ion-button>
         </ion-content>
diff --git a/static/usage/v7/backdrop/basic/javascript.md b/static/usage/v7/backdrop/basic/javascript.md
index 1a9d09c2da3..f74060cbcd1 100644
--- a/static/usage/v7/backdrop/basic/javascript.md
+++ b/static/usage/v7/backdrop/basic/javascript.md
@@ -8,8 +8,7 @@
   </ion-header>
   <ion-content class="ion-padding">
     <ion-item>
-      <ion-checkbox slot="start"></ion-checkbox>
-      <ion-label>Checkbox</ion-label>
+      <ion-checkbox>Checkbox</ion-checkbox>
     </ion-item>
     <ion-button expand="block">Button</ion-button>
   </ion-content>
diff --git a/static/usage/v7/backdrop/basic/react.md b/static/usage/v7/backdrop/basic/react.md
index 9d6529c0cac..518119a0dd8 100644
--- a/static/usage/v7/backdrop/basic/react.md
+++ b/static/usage/v7/backdrop/basic/react.md
@@ -8,7 +8,6 @@ import {
   IonContent,
   IonItem,
   IonCheckbox,
-  IonLabel,
   IonButton,
 } from '@ionic/react';
 
@@ -24,8 +23,7 @@ function Example() {
         </IonHeader>
         <IonContent className="ion-padding">
           <IonItem>
-            <IonCheckbox slot="start"></IonCheckbox>
-            <IonLabel>Checkbox</IonLabel>
+            <IonCheckbox>Checkbox</IonCheckbox>
           </IonItem>
           <IonButton expand="block">Button</IonButton>
         </IonContent>
diff --git a/static/usage/v7/backdrop/basic/vue.md b/static/usage/v7/backdrop/basic/vue.md
index a42da95a2e8..fe78016963e 100644
--- a/static/usage/v7/backdrop/basic/vue.md
+++ b/static/usage/v7/backdrop/basic/vue.md
@@ -9,8 +9,7 @@
     </ion-header>
     <ion-content class="ion-padding">
       <ion-item>
-        <ion-checkbox slot="start"></ion-checkbox>
-        <ion-label>Checkbox</ion-label>
+        <ion-checkbox>Checkbox</ion-checkbox>
       </ion-item>
       <ion-button expand="block">Button</ion-button>
     </ion-content>
@@ -25,13 +24,12 @@
     IonContent,
     IonItem,
     IonCheckbox,
-    IonLabel,
     IonButton,
   } from '@ionic/vue';
   import { defineComponent } from 'vue';
 
   export default defineComponent({
-    components: { IonBackdrop, IonHeader, IonToolbar, IonTitle, IonContent, IonItem, IonCheckbox, IonLabel, IonButton },
+    components: { IonBackdrop, IonHeader, IonToolbar, IonTitle, IonContent, IonItem, IonCheckbox, IonButton },
   });
 </script>
 ```
diff --git a/static/usage/v7/item/theming/input-highlight/angular/example_component_css.md b/static/usage/v7/item/theming/input-highlight/angular/example_component_css.md
deleted file mode 100644
index 5d7cfd49c7c..00000000000
--- a/static/usage/v7/item/theming/input-highlight/angular/example_component_css.md
+++ /dev/null
@@ -1,8 +0,0 @@
-```css
-ion-item {
-  --highlight-height: 2px;
-  --highlight-color-focused: #43e7f3;
-  --highlight-color-valid: #6f58d8;
-  --highlight-color-invalid: #ff46be;
-}
-```
diff --git a/static/usage/v7/item/theming/input-highlight/angular/example_component_html.md b/static/usage/v7/item/theming/input-highlight/angular/example_component_html.md
deleted file mode 100644
index 59a5e5928a9..00000000000
--- a/static/usage/v7/item/theming/input-highlight/angular/example_component_html.md
+++ /dev/null
@@ -1,16 +0,0 @@
-```html
-<ion-item lines="full" class="item-has-focus ion-touched">
-  <ion-label position="stacked">Custom Input Highlight: Focused</ion-label>
-  <ion-input></ion-input>
-</ion-item>
-
-<ion-item lines="full" class="item-has-focus ion-touched ion-valid">
-  <ion-label position="stacked">Custom Input Highlight: Focused & Valid</ion-label>
-  <ion-input></ion-input>
-</ion-item>
-
-<ion-item lines="full" class="item-has-focus ion-touched ion-invalid">
-  <ion-label position="stacked">Custom Input Highlight: Focused & Invalid</ion-label>
-  <ion-input></ion-input>
-</ion-item>
-```
diff --git a/static/usage/v7/item/theming/input-highlight/demo.html b/static/usage/v7/item/theming/input-highlight/demo.html
deleted file mode 100644
index c112dd699fe..00000000000
--- a/static/usage/v7/item/theming/input-highlight/demo.html
+++ /dev/null
@@ -1,48 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Item</title>
-    <link rel="stylesheet" href="../../../../common.css" />
-    <script src="../../../../common.js"></script>
-    <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
-
-    <style>
-      .container {
-        display: block;
-      }
-
-      ion-item {
-        --highlight-height: 2px;
-        --highlight-color-focused: #43e7f3;
-        --highlight-color-valid: #6f58d8;
-        --highlight-color-invalid: #ff46be;
-      }
-    </style>
-  </head>
-
-  <body>
-    <ion-app>
-      <ion-content>
-        <div class="container">
-          <ion-item lines="full" class="item-has-focus ion-touched">
-            <ion-label position="stacked">Custom Input Highlight: Focused</ion-label>
-            <ion-input></ion-input>
-          </ion-item>
-
-          <ion-item lines="full" class="item-has-focus ion-touched ion-valid">
-            <ion-label position="stacked">Custom Input Highlight: Focused & Valid</ion-label>
-            <ion-input></ion-input>
-          </ion-item>
-
-          <ion-item lines="full" class="item-has-focus ion-touched ion-invalid">
-            <ion-label position="stacked">Custom Input Highlight: Focused & Invalid</ion-label>
-            <ion-input></ion-input>
-          </ion-item>
-        </div>
-      </ion-content>
-    </ion-app>
-  </body>
-</html>
diff --git a/static/usage/v7/item/theming/input-highlight/index.md b/static/usage/v7/item/theming/input-highlight/index.md
deleted file mode 100644
index 4782bfdd6a5..00000000000
--- a/static/usage/v7/item/theming/input-highlight/index.md
+++ /dev/null
@@ -1,33 +0,0 @@
-import Playground from '@site/src/components/global/Playground';
-
-import javascript from './javascript.md';
-
-import react_main_css from './react/main_css.md';
-import react_main_tsx from './react/main_tsx.md';
-
-import vue from './vue.md';
-
-import angular_example_component_css from './angular/example_component_css.md';
-import angular_example_component_html from './angular/example_component_html.md';
-
-<Playground
-  version="7"
-  code={{
-    javascript,
-    react: {
-      files: {
-        'src/main.css': react_main_css,
-        'src/main.tsx': react_main_tsx,
-      },
-    },
-    vue,
-    angular: {
-      files: {
-        'src/app/example.component.css': angular_example_component_css,
-        'src/app/example.component.html': angular_example_component_html,
-      },
-    },
-  }}
-  src="usage/v7/item/theming/input-highlight/demo.html"
-  size="250px"
-/>
diff --git a/static/usage/v7/item/theming/input-highlight/javascript.md b/static/usage/v7/item/theming/input-highlight/javascript.md
deleted file mode 100644
index b26cebd530e..00000000000
--- a/static/usage/v7/item/theming/input-highlight/javascript.md
+++ /dev/null
@@ -1,25 +0,0 @@
-```html
-<ion-item lines="full" class="item-has-focus ion-touched">
-  <ion-label position="stacked">Custom Input Highlight: Focused</ion-label>
-  <ion-input></ion-input>
-</ion-item>
-
-<ion-item lines="full" class="item-has-focus ion-touched ion-valid">
-  <ion-label position="stacked">Custom Input Highlight: Focused & Valid</ion-label>
-  <ion-input></ion-input>
-</ion-item>
-
-<ion-item lines="full" class="item-has-focus ion-touched ion-invalid">
-  <ion-label position="stacked">Custom Input Highlight: Focused & Invalid</ion-label>
-  <ion-input></ion-input>
-</ion-item>
-
-<style>
-  ion-item {
-    --highlight-height: 2px;
-    --highlight-color-focused: #43e7f3;
-    --highlight-color-valid: #6f58d8;
-    --highlight-color-invalid: #ff46be;
-  }
-</style>
-```
diff --git a/static/usage/v7/item/theming/input-highlight/react/main_css.md b/static/usage/v7/item/theming/input-highlight/react/main_css.md
deleted file mode 100644
index 5d7cfd49c7c..00000000000
--- a/static/usage/v7/item/theming/input-highlight/react/main_css.md
+++ /dev/null
@@ -1,8 +0,0 @@
-```css
-ion-item {
-  --highlight-height: 2px;
-  --highlight-color-focused: #43e7f3;
-  --highlight-color-valid: #6f58d8;
-  --highlight-color-invalid: #ff46be;
-}
-```
diff --git a/static/usage/v7/item/theming/input-highlight/react/main_tsx.md b/static/usage/v7/item/theming/input-highlight/react/main_tsx.md
deleted file mode 100644
index 67d46a73267..00000000000
--- a/static/usage/v7/item/theming/input-highlight/react/main_tsx.md
+++ /dev/null
@@ -1,28 +0,0 @@
-```tsx
-import React from 'react';
-import { IonInput, IonItem, IonLabel } from '@ionic/react';
-
-import './main.css';
-
-function Example() {
-  return (
-    <>
-      <IonItem lines="full" class="item-has-focus ion-touched">
-        <IonLabel position="stacked">Custom Input Highlight: Focused</IonLabel>
-        <IonInput></IonInput>
-      </IonItem>
-
-      <IonItem lines="full" class="item-has-focus ion-touched ion-valid">
-        <IonLabel position="stacked">Custom Input Highlight: Focused & Valid</IonLabel>
-        <IonInput></IonInput>
-      </IonItem>
-
-      <IonItem lines="full" class="item-has-focus ion-touched ion-invalid">
-        <IonLabel position="stacked">Custom Input Highlight: Focused & Invalid</IonLabel>
-        <IonInput></IonInput>
-      </IonItem>
-    </>
-  );
-}
-export default Example;
-```
diff --git a/static/usage/v7/item/theming/input-highlight/vue.md b/static/usage/v7/item/theming/input-highlight/vue.md
deleted file mode 100644
index 52713eb0ca5..00000000000
--- a/static/usage/v7/item/theming/input-highlight/vue.md
+++ /dev/null
@@ -1,36 +0,0 @@
-```html
-<template>
-  <ion-item lines="full" class="item-has-focus ion-touched">
-    <ion-label position="stacked">Custom Input Highlight: Focused</ion-label>
-    <ion-input></ion-input>
-  </ion-item>
-
-  <ion-item lines="full" class="item-has-focus ion-touched ion-valid">
-    <ion-label position="stacked">Custom Input Highlight: Focused & Valid</ion-label>
-    <ion-input></ion-input>
-  </ion-item>
-
-  <ion-item lines="full" class="item-has-focus ion-touched ion-invalid">
-    <ion-label position="stacked">Custom Input Highlight: Focused & Invalid</ion-label>
-    <ion-input></ion-input>
-  </ion-item>
-</template>
-
-<script lang="ts">
-  import { IonInput, IonItem, IonLabel } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonInput, IonItem, IonLabel },
-  });
-</script>
-
-<style>
-  ion-item {
-    --highlight-height: 2px;
-    --highlight-color-focused: #43e7f3;
-    --highlight-color-valid: #6f58d8;
-    --highlight-color-invalid: #ff46be;
-  }
-</style>
-```
diff --git a/static/usage/v7/label/input/angular.md b/static/usage/v7/label/input/angular.md
deleted file mode 100644
index 75278afd44b..00000000000
--- a/static/usage/v7/label/input/angular.md
+++ /dev/null
@@ -1,31 +0,0 @@
-```html
-<ion-item>
-  <ion-label>Default Label</ion-label>
-  <ion-input placeholder="Enter text"></ion-input>
-</ion-item>
-
-<ion-item>
-  <ion-label position="fixed">Fixed Label</ion-label>
-  <ion-input placeholder="Enter text"></ion-input>
-</ion-item>
-
-<ion-item>
-  <ion-label position="floating">Floating Label</ion-label>
-  <ion-input placeholder="Enter text"></ion-input>
-</ion-item>
-
-<ion-item>
-  <ion-label position="stacked">Stacked Label</ion-label>
-  <ion-input placeholder="Enter text"></ion-input>
-</ion-item>
-
-<ion-item>
-  <ion-label>Toggle</ion-label>
-  <ion-toggle slot="end" checked></ion-toggle>
-</ion-item>
-
-<ion-item>
-  <ion-checkbox slot="start" checked></ion-checkbox>
-  <ion-label>Checkbox</ion-label>
-</ion-item>
-```
diff --git a/static/usage/v7/label/input/demo.html b/static/usage/v7/label/input/demo.html
deleted file mode 100644
index f35f297e34b..00000000000
--- a/static/usage/v7/label/input/demo.html
+++ /dev/null
@@ -1,56 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Label</title>
-    <link rel="stylesheet" href="../../../common.css" />
-    <script src="../../../common.js"></script>
-    <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
-
-    <style>
-      .container {
-        display: block;
-      }
-    </style>
-  </head>
-
-  <body>
-    <ion-app>
-      <ion-content>
-        <div class="container">
-          <ion-item>
-            <ion-label>Default Label</ion-label>
-            <ion-input placeholder="Enter text"></ion-input>
-          </ion-item>
-
-          <ion-item>
-            <ion-label position="fixed">Fixed Label</ion-label>
-            <ion-input placeholder="Enter text"></ion-input>
-          </ion-item>
-
-          <ion-item>
-            <ion-label position="floating">Floating Label</ion-label>
-            <ion-input placeholder="Enter text"></ion-input>
-          </ion-item>
-
-          <ion-item>
-            <ion-label position="stacked">Stacked Label</ion-label>
-            <ion-input placeholder="Enter text"></ion-input>
-          </ion-item>
-
-          <ion-item>
-            <ion-label>Toggle</ion-label>
-            <ion-toggle slot="end" checked></ion-toggle>
-          </ion-item>
-
-          <ion-item>
-            <ion-checkbox slot="start" checked></ion-checkbox>
-            <ion-label>Checkbox</ion-label>
-          </ion-item>
-        </div>
-      </ion-content>
-    </ion-app>
-  </body>
-</html>
diff --git a/static/usage/v7/label/input/index.md b/static/usage/v7/label/input/index.md
deleted file mode 100644
index a1e95d3ab95..00000000000
--- a/static/usage/v7/label/input/index.md
+++ /dev/null
@@ -1,8 +0,0 @@
-import Playground from '@site/src/components/global/Playground';
-
-import javascript from './javascript.md';
-import react from './react.md';
-import vue from './vue.md';
-import angular from './angular.md';
-
-<Playground version="7" code={{ javascript, react, vue, angular }} src="usage/v7/label/input/demo.html" size="medium" />
diff --git a/static/usage/v7/label/input/javascript.md b/static/usage/v7/label/input/javascript.md
deleted file mode 100644
index 75278afd44b..00000000000
--- a/static/usage/v7/label/input/javascript.md
+++ /dev/null
@@ -1,31 +0,0 @@
-```html
-<ion-item>
-  <ion-label>Default Label</ion-label>
-  <ion-input placeholder="Enter text"></ion-input>
-</ion-item>
-
-<ion-item>
-  <ion-label position="fixed">Fixed Label</ion-label>
-  <ion-input placeholder="Enter text"></ion-input>
-</ion-item>
-
-<ion-item>
-  <ion-label position="floating">Floating Label</ion-label>
-  <ion-input placeholder="Enter text"></ion-input>
-</ion-item>
-
-<ion-item>
-  <ion-label position="stacked">Stacked Label</ion-label>
-  <ion-input placeholder="Enter text"></ion-input>
-</ion-item>
-
-<ion-item>
-  <ion-label>Toggle</ion-label>
-  <ion-toggle slot="end" checked></ion-toggle>
-</ion-item>
-
-<ion-item>
-  <ion-checkbox slot="start" checked></ion-checkbox>
-  <ion-label>Checkbox</ion-label>
-</ion-item>
-```
diff --git a/static/usage/v7/label/input/react.md b/static/usage/v7/label/input/react.md
deleted file mode 100644
index ff11fd1f176..00000000000
--- a/static/usage/v7/label/input/react.md
+++ /dev/null
@@ -1,41 +0,0 @@
-```tsx
-import React from 'react';
-import { IonCheckbox, IonInput, IonItem, IonLabel, IonToggle } from '@ionic/react';
-
-function Example() {
-  return (
-    <>
-      <IonItem>
-        <IonLabel>Default Label</IonLabel>
-        <IonInput placeholder="Enter text"></IonInput>
-      </IonItem>
-
-      <IonItem>
-        <IonLabel position="fixed">Fixed Label</IonLabel>
-        <IonInput placeholder="Enter text"></IonInput>
-      </IonItem>
-
-      <IonItem>
-        <IonLabel position="floating">Floating Label</IonLabel>
-        <IonInput placeholder="Enter text"></IonInput>
-      </IonItem>
-
-      <IonItem>
-        <IonLabel position="stacked">Stacked Label</IonLabel>
-        <IonInput placeholder="Enter text"></IonInput>
-      </IonItem>
-
-      <IonItem>
-        <IonLabel>Toggle</IonLabel>
-        <IonToggle slot="end" checked></IonToggle>
-      </IonItem>
-
-      <IonItem>
-        <IonCheckbox slot="start" checked></IonCheckbox>
-        <IonLabel>Checkbox</IonLabel>
-      </IonItem>
-    </>
-  );
-}
-export default Example;
-```
diff --git a/static/usage/v7/label/input/vue.md b/static/usage/v7/label/input/vue.md
deleted file mode 100644
index cd05ef82b44..00000000000
--- a/static/usage/v7/label/input/vue.md
+++ /dev/null
@@ -1,42 +0,0 @@
-```html
-<template>
-  <ion-item>
-    <ion-label>Default Label</ion-label>
-    <ion-input placeholder="Enter text"></ion-input>
-  </ion-item>
-
-  <ion-item>
-    <ion-label position="fixed">Fixed Label</ion-label>
-    <ion-input placeholder="Enter text"></ion-input>
-  </ion-item>
-
-  <ion-item>
-    <ion-label position="floating">Floating Label</ion-label>
-    <ion-input placeholder="Enter text"></ion-input>
-  </ion-item>
-
-  <ion-item>
-    <ion-label position="stacked">Stacked Label</ion-label>
-    <ion-input placeholder="Enter text"></ion-input>
-  </ion-item>
-
-  <ion-item>
-    <ion-label>Toggle</ion-label>
-    <ion-toggle slot="end" checked></ion-toggle>
-  </ion-item>
-
-  <ion-item>
-    <ion-checkbox slot="start" checked></ion-checkbox>
-    <ion-label>Checkbox</ion-label>
-  </ion-item>
-</template>
-
-<script lang="ts">
-  import { IonCheckbox, IonInput, IonItem, IonLabel, IonToggle } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonCheckbox, IonInput, IonItem, IonLabel, IonToggle },
-  });
-</script>
-```
diff --git a/static/usage/v7/menu/type/angular/example_component_html.md b/static/usage/v7/menu/type/angular/example_component_html.md
index fd995d7a32f..25ff9c152e0 100644
--- a/static/usage/v7/menu/type/angular/example_component_html.md
+++ b/static/usage/v7/menu/type/angular/example_component_html.md
@@ -22,22 +22,19 @@
     <h2>Select an overlay type:</h2>
     <ion-radio-group [(ngModel)]="menuType">
       <ion-item>
-        <ion-label>
+        <ion-radio value="overlay">
           <code>overlay</code>
-        </ion-label>
-        <ion-radio value="overlay"></ion-radio>
+        </ion-radio>
       </ion-item>
       <ion-item>
-        <ion-label>
+        <ion-radio value="reveal">
           <code>reveal</code>
-        </ion-label>
-        <ion-radio value="reveal"></ion-radio>
+        </ion-radio>
       </ion-item>
       <ion-item>
-        <ion-label>
+        <ion-radio value="push">
           <code>push</code>
-        </ion-label>
-        <ion-radio value="push"></ion-radio>
+        </ion-radio>
       </ion-item>
     </ion-radio-group>
     <br />
diff --git a/static/usage/v7/menu/type/demo.html b/static/usage/v7/menu/type/demo.html
index cecfb27d688..15aeda9fe6f 100644
--- a/static/usage/v7/menu/type/demo.html
+++ b/static/usage/v7/menu/type/demo.html
@@ -35,22 +35,19 @@
           <h2>Select an overlay type:</h2>
           <ion-radio-group value="overlay">
             <ion-item>
-              <ion-label>
+              <ion-radio value="overlay">
                 <code>overlay</code>
-              </ion-label>
-              <ion-radio value="overlay"></ion-radio>
+              </ion-radio>
             </ion-item>
             <ion-item>
-              <ion-label>
+              <ion-radio value="reveal">
                 <code>reveal</code>
-              </ion-label>
-              <ion-radio value="reveal"></ion-radio>
+              </ion-radio>
             </ion-item>
             <ion-item>
-              <ion-label>
+              <ion-radio value="push">
                 <code>push</code>
-              </ion-label>
-              <ion-radio value="push"></ion-radio>
+              </ion-radio>
             </ion-item>
           </ion-radio-group>
           <br />
diff --git a/static/usage/v7/menu/type/javascript.md b/static/usage/v7/menu/type/javascript.md
index c8b49975b84..100e2e2d091 100644
--- a/static/usage/v7/menu/type/javascript.md
+++ b/static/usage/v7/menu/type/javascript.md
@@ -22,22 +22,19 @@
     <h2>Select an overlay type:</h2>
     <ion-radio-group value="overlay">
       <ion-item>
-        <ion-label>
+        <ion-radio value="overlay">
           <code>overlay</code>
-        </ion-label>
-        <ion-radio value="overlay"></ion-radio>
+        </ion-radio>
       </ion-item>
       <ion-item>
-        <ion-label>
+        <ion-radio value="reveal">
           <code>reveal</code>
-        </ion-label>
-        <ion-radio value="reveal"></ion-radio>
+        </ion-radio>
       </ion-item>
       <ion-item>
-        <ion-label>
+        <ion-radio value="push">
           <code>push</code>
-        </ion-label>
-        <ion-radio value="push"></ion-radio>
+        </ion-radio>
       </ion-item>
     </ion-radio-group>
     <br />
diff --git a/static/usage/v7/menu/type/react.md b/static/usage/v7/menu/type/react.md
index 946707cba38..3caca163c30 100644
--- a/static/usage/v7/menu/type/react.md
+++ b/static/usage/v7/menu/type/react.md
@@ -5,7 +5,6 @@ import {
   IonContent,
   IonHeader,
   IonItem,
-  IonLabel,
   IonMenu,
   IonMenuToggle,
   IonPage,
@@ -48,22 +47,19 @@ function Example() {
             }}
           >
             <IonItem>
-              <IonLabel>
+              <IonRadio value="overlay">
                 <code>overlay</code>
-              </IonLabel>
-              <IonRadio value="overlay"></IonRadio>
+              </IonRadio>
             </IonItem>
             <IonItem>
-              <IonLabel>
+              <IonRadio value="reveal">
                 <code>reveal</code>
-              </IonLabel>
-              <IonRadio value="reveal"></IonRadio>
+              </IonRadio>
             </IonItem>
             <IonItem>
-              <IonLabel>
+              <IonRadio value="push">
                 <code>push</code>
-              </IonLabel>
-              <IonRadio value="push"></IonRadio>
+              </IonRadio>
             </IonItem>
           </IonRadioGroup> <br />
           <IonMenuToggle>
diff --git a/static/usage/v7/menu/type/vue.md b/static/usage/v7/menu/type/vue.md
index 8277d7a3179..f10b90a0a9a 100644
--- a/static/usage/v7/menu/type/vue.md
+++ b/static/usage/v7/menu/type/vue.md
@@ -23,22 +23,19 @@
       <h2>Select an overlay type:</h2>
       <ion-radio-group value="overlay" v-model="menuType">
         <ion-item>
-          <ion-label>
+          <ion-radio value="overlay">
             <code>overlay</code>
-          </ion-label>
-          <ion-radio value="overlay"></ion-radio>
+          </ion-radio>
         </ion-item>
         <ion-item>
-          <ion-label>
+          <ion-radio value="reveal">
             <code>reveal</code>
-          </ion-label>
-          <ion-radio value="reveal"></ion-radio>
+          </ion-radio>
         </ion-item>
         <ion-item>
-          <ion-label>
+          <ion-radio value="push">
             <code>push</code>
-          </ion-label>
-          <ion-radio value="push"></ion-radio>
+          </ion-radio>
         </ion-item>
       </ion-radio-group>
       <br />
@@ -55,7 +52,6 @@
     IonContent,
     IonHeader,
     IonItem,
-    IonLabel,
     IonMenu,
     IonMenuToggle,
     IonPage,
@@ -72,7 +68,6 @@
       IonContent,
       IonHeader,
       IonItem,
-      IonLabel,
       IonMenu,
       IonMenuToggle,
       IonPage,
diff --git a/static/usage/v7/modal/can-dismiss/boolean/angular/example_component_html.md b/static/usage/v7/modal/can-dismiss/boolean/angular/example_component_html.md
index 60d566d3437..593098daca1 100644
--- a/static/usage/v7/modal/can-dismiss/boolean/angular/example_component_html.md
+++ b/static/usage/v7/modal/can-dismiss/boolean/angular/example_component_html.md
@@ -20,8 +20,9 @@
         <ion-content>
           <p class="ion-padding-horizontal">You must accept the terms and conditions to close this modal.</p>
           <ion-item>
-            <ion-label class="ion-text-wrap" for="terms">Do you accept the terms and conditions?</ion-label>
-            <ion-checkbox id="terms" (ionChange)="onTermsChanged($event)" [checked]="canDismiss"></ion-checkbox>
+            <ion-checkbox id="terms" (ionChange)="onTermsChanged($event)" [checked]="canDismiss">
+              <div class="ion-text-wrap">Do you accept the terms and conditions?</div>
+            </ion-checkbox>
           </ion-item>
         </ion-content>
       </ng-template>
diff --git a/static/usage/v7/modal/can-dismiss/boolean/demo.html b/static/usage/v7/modal/can-dismiss/boolean/demo.html
index 284005eda4c..2c820ac0b47 100644
--- a/static/usage/v7/modal/can-dismiss/boolean/demo.html
+++ b/static/usage/v7/modal/can-dismiss/boolean/demo.html
@@ -33,8 +33,9 @@
             <ion-content>
               <p class="ion-padding-horizontal">You must accept the terms and conditions to close this modal.</p>
               <ion-item>
-                <ion-label class="ion-text-wrap" for="terms">Do you accept the terms and conditions?</ion-label>
-                <ion-checkbox id="terms"></ion-checkbox>
+                <ion-checkbox id="terms">
+                  <div class="ion-text-wrap">Do you accept the terms and conditions?</div>
+                </ion-checkbox>
               </ion-item>
             </ion-content>
           </ion-modal>
diff --git a/static/usage/v7/modal/can-dismiss/boolean/javascript.md b/static/usage/v7/modal/can-dismiss/boolean/javascript.md
index 845ff0ec8c5..af2ab152fc9 100644
--- a/static/usage/v7/modal/can-dismiss/boolean/javascript.md
+++ b/static/usage/v7/modal/can-dismiss/boolean/javascript.md
@@ -20,8 +20,9 @@
       <ion-content>
         <p class="ion-padding-horizontal">You must accept the terms and conditions to close this modal.</p>
         <ion-item>
-          <ion-label class="ion-text-wrap" for="terms">Do you accept the terms and conditions?</ion-label>
-          <ion-checkbox id="terms"></ion-checkbox>
+          <ion-checkbox id="terms">
+            <div class="ion-text-wrap">Do you accept the terms and conditions?</div>
+          </ion-checkbox>
         </ion-item>
       </ion-content>
     </ion-modal>
diff --git a/static/usage/v7/modal/can-dismiss/boolean/react.md b/static/usage/v7/modal/can-dismiss/boolean/react.md
index 22a72819b2b..f136b0e28fb 100644
--- a/static/usage/v7/modal/can-dismiss/boolean/react.md
+++ b/static/usage/v7/modal/can-dismiss/boolean/react.md
@@ -10,7 +10,6 @@ import {
   IonTitle,
   IonPage,
   IonItem,
-  IonLabel,
   IonCheckbox,
 } from '@ionic/react';
 
@@ -52,16 +51,15 @@ function Example() {
           <IonContent>
             <p className="ion-padding-horizontal">You must accept the terms and conditions to close this modal.</p>
             <IonItem>
-              <IonLabel className="ion-text-wrap" {...{ for: 'terms' }}>
-                Do you accept the terms and conditions?
-              </IonLabel>
               <IonCheckbox
                 id="terms"
                 checked={canDismiss}
                 onIonChange={(ev) => {
                   setCanDismiss(ev.detail.checked);
                 }}
-              ></IonCheckbox>
+              >
+                <div className="ion-text-wrap">Do you accept the terms and conditions?</div>
+              </IonCheckbox>
             </IonItem>
           </IonContent>
         </IonModal>
diff --git a/static/usage/v7/modal/can-dismiss/boolean/vue.md b/static/usage/v7/modal/can-dismiss/boolean/vue.md
index 4aeded0aef7..3504c7230cd 100644
--- a/static/usage/v7/modal/can-dismiss/boolean/vue.md
+++ b/static/usage/v7/modal/can-dismiss/boolean/vue.md
@@ -21,8 +21,9 @@
         <ion-content>
           <p class="ion-padding-horizontal">You must accept the terms and conditions to close this modal.</p>
           <ion-item>
-            <ion-label class="ion-text-wrap" for="terms">Do you accept the terms and conditions?</ion-label>
-            <ion-checkbox id="terms" @ionChange="onTermsChanged" :checked="canDismiss"></ion-checkbox>
+            <ion-checkbox id="terms" @ionChange="onTermsChanged" :checked="canDismiss">
+              <div class="ion-text-wrap">Do you accept the terms and conditions?</div>
+            </ion-checkbox>
           </ion-item>
         </ion-content>
       </ion-modal>
@@ -42,7 +43,6 @@
     IonTitle,
     IonItem,
     IonCheckbox,
-    IonLabel,
     IonPage,
   } from '@ionic/vue';
   import { defineComponent } from 'vue';
@@ -58,7 +58,6 @@
       IonTitle,
       IonItem,
       IonCheckbox,
-      IonLabel,
       IonPage,
     },
     data() {
diff --git a/static/usage/v7/modal/inline/basic/angular/example_component_html.md b/static/usage/v7/modal/inline/basic/angular/example_component_html.md
index d89c7626f3d..2097cde4503 100644
--- a/static/usage/v7/modal/inline/basic/angular/example_component_html.md
+++ b/static/usage/v7/modal/inline/basic/angular/example_component_html.md
@@ -22,8 +22,13 @@
       </ion-header>
       <ion-content class="ion-padding">
         <ion-item>
-          <ion-label position="stacked">Enter your name</ion-label>
-          <ion-input type="text" placeholder="Your name" [(ngModel)]="name"></ion-input>
+          <ion-input
+            label="Enter your name"
+            labelPlacement="stacked"
+            type="text"
+            placeholder="Your name"
+            [(ngModel)]="name"
+          ></ion-input>
         </ion-item>
       </ion-content>
     </ng-template>
diff --git a/static/usage/v7/modal/inline/basic/demo.html b/static/usage/v7/modal/inline/basic/demo.html
index 9ea5eab1699..1c8145597f0 100644
--- a/static/usage/v7/modal/inline/basic/demo.html
+++ b/static/usage/v7/modal/inline/basic/demo.html
@@ -34,8 +34,12 @@
           </ion-header>
           <ion-content class="ion-padding">
             <ion-item>
-              <ion-label position="stacked">Enter your name</ion-label>
-              <ion-input type="text" placeholder="Your name"></ion-input>
+              <ion-input
+                label="Enter your name"
+                label-placement="stacked"
+                type="text"
+                placeholder="Your name"
+              ></ion-input>
             </ion-item>
           </ion-content>
         </ion-modal>
diff --git a/static/usage/v7/modal/inline/basic/javascript.md b/static/usage/v7/modal/inline/basic/javascript.md
index cffa297eebd..318f29e7611 100644
--- a/static/usage/v7/modal/inline/basic/javascript.md
+++ b/static/usage/v7/modal/inline/basic/javascript.md
@@ -21,8 +21,7 @@
     </ion-header>
     <ion-content class="ion-padding">
       <ion-item>
-        <ion-label position="stacked">Enter your name</ion-label>
-        <ion-input type="text" placeholder="Your name"></ion-input>
+        <ion-input label="Enter your name" label-placement="stacked" type="text" placeholder="Your name"></ion-input>
       </ion-item>
     </ion-content>
   </ion-modal>
diff --git a/static/usage/v7/modal/inline/basic/react.md b/static/usage/v7/modal/inline/basic/react.md
index aa465052e4c..1ca9670066a 100644
--- a/static/usage/v7/modal/inline/basic/react.md
+++ b/static/usage/v7/modal/inline/basic/react.md
@@ -10,7 +10,6 @@ import {
   IonTitle,
   IonPage,
   IonItem,
-  IonLabel,
   IonInput,
 } from '@ionic/react';
 import { OverlayEventDetail } from '@ionic/core/components';
@@ -61,8 +60,13 @@ function Example() {
           </IonHeader>
           <IonContent className="ion-padding">
             <IonItem>
-              <IonLabel position="stacked">Enter your name</IonLabel>
-              <IonInput ref={input} type="text" placeholder="Your name" />
+              <IonInput
+                label="Enter your name"
+                labelPlacement="stacked"
+                ref={input}
+                type="text"
+                placeholder="Your name"
+              />
             </IonItem>
           </IonContent>
         </IonModal>
diff --git a/static/usage/v7/modal/inline/basic/vue.md b/static/usage/v7/modal/inline/basic/vue.md
index 2c5435b4335..5aac3115a1d 100644
--- a/static/usage/v7/modal/inline/basic/vue.md
+++ b/static/usage/v7/modal/inline/basic/vue.md
@@ -22,8 +22,13 @@
       </ion-header>
       <ion-content class="ion-padding">
         <ion-item>
-          <ion-label position="stacked">Enter your name</ion-label>
-          <ion-input ref="input" type="text" placeholder="Your name"></ion-input>
+          <ion-input
+            label="Enter your name"
+            label-placement="stacked"
+            ref="input"
+            type="text"
+            placeholder="Your name"
+          ></ion-input>
         </ion-item>
       </ion-content>
     </ion-modal>
@@ -41,7 +46,6 @@
     IonTitle,
     IonItem,
     IonInput,
-    IonLabel,
   } from '@ionic/vue';
   import { OverlayEventDetail } from '@ionic/core/components';
   import { ref } from 'vue';