From 942cb6ecb5cb8347a961272f64a2589ac35aec2d Mon Sep 17 00:00:00 2001
From: amandaesmith3 <amanda.s@ionic.io>
Date: Thu, 21 Sep 2023 13:08:44 -0500
Subject: [PATCH 01/13] item/inputs

---
 static/usage/v7/item/inputs/angular.md    |  8 --------
 static/usage/v7/item/inputs/demo.html     | 16 ----------------
 static/usage/v7/item/inputs/index.md      |  2 +-
 static/usage/v7/item/inputs/javascript.md |  8 --------
 static/usage/v7/item/inputs/react.md      | 16 ----------------
 static/usage/v7/item/inputs/vue.md        | 12 ------------
 6 files changed, 1 insertion(+), 61 deletions(-)

diff --git a/static/usage/v7/item/inputs/angular.md b/static/usage/v7/item/inputs/angular.md
index a45e76ebc73..548e6239f98 100644
--- a/static/usage/v7/item/inputs/angular.md
+++ b/static/usage/v7/item/inputs/angular.md
@@ -15,14 +15,6 @@
   <ion-input label="Floating Input" label-placement="floating" placeholder="Enter text"></ion-input>
 </ion-item>
 
-<ion-item fill="outline">
-  <ion-input label="Floating Input: Outline (MD only)" label-placement="floating" placeholder="Enter text"></ion-input>
-</ion-item>
-
-<ion-item fill="solid">
-  <ion-input label="Floating Input: Solid (MD only)" label-placement="floating" placeholder="Enter text"></ion-input>
-</ion-item>
-
 <ion-item>
   <ion-select label="Select" placeholder="Make a Selection">
     <ion-select-option value="">No Game Console</ion-select-option>
diff --git a/static/usage/v7/item/inputs/demo.html b/static/usage/v7/item/inputs/demo.html
index b4021dbc714..4a277efb875 100644
--- a/static/usage/v7/item/inputs/demo.html
+++ b/static/usage/v7/item/inputs/demo.html
@@ -36,22 +36,6 @@
             <ion-input label="Floating Input" label-placement="floating" placeholder="Enter text"></ion-input>
           </ion-item>
 
-          <ion-item fill="outline">
-            <ion-input
-              label="Floating Input: Outline (MD only)"
-              label-placement="floating"
-              placeholder="Enter text"
-            ></ion-input>
-          </ion-item>
-
-          <ion-item fill="solid">
-            <ion-input
-              label="Floating Input: Solid (MD only)"
-              label-placement="floating"
-              placeholder="Enter text"
-            ></ion-input>
-          </ion-item>
-
           <ion-item>
             <ion-select label="Select" placeholder="Make a Selection">
               <ion-select-option value="">No Game Console</ion-select-option>
diff --git a/static/usage/v7/item/inputs/index.md b/static/usage/v7/item/inputs/index.md
index 1925824c43f..1a0a9076b65 100644
--- a/static/usage/v7/item/inputs/index.md
+++ b/static/usage/v7/item/inputs/index.md
@@ -5,4 +5,4 @@ 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/item/inputs/demo.html" size="large" />
+<Playground version="7" code={{ javascript, react, vue, angular }} src="usage/v7/item/inputs/demo.html" size="470px" />
diff --git a/static/usage/v7/item/inputs/javascript.md b/static/usage/v7/item/inputs/javascript.md
index 74558c5191a..53c2e4cb6e8 100644
--- a/static/usage/v7/item/inputs/javascript.md
+++ b/static/usage/v7/item/inputs/javascript.md
@@ -15,14 +15,6 @@
   <ion-input label="Floating Input" label-placement="floating" placeholder="Enter text"></ion-input>
 </ion-item>
 
-<ion-item fill="outline">
-  <ion-input label="Floating Input: Outline (MD only)" label-placement="floating" placeholder="Enter text"></ion-input>
-</ion-item>
-
-<ion-item fill="solid">
-  <ion-input label="Floating Input: Solid (MD only)" label-placement="floating" placeholder="Enter text"></ion-input>
-</ion-item>
-
 <ion-item>
   <ion-select label="Select" placeholder="Make a Selection">
     <ion-select-option value="">No Game Console</ion-select-option>
diff --git a/static/usage/v7/item/inputs/react.md b/static/usage/v7/item/inputs/react.md
index 6f3cf757c68..b7f41601048 100644
--- a/static/usage/v7/item/inputs/react.md
+++ b/static/usage/v7/item/inputs/react.md
@@ -21,22 +21,6 @@ function Example() {
         <IonInput label="Floating Input" label-placement="floating" placeholder="Enter text"></IonInput>
       </IonItem>
 
-      <IonItem fill="outline">
-        <IonInput
-          label="Floating Input: Outline (MD only)"
-          label-placement="floating"
-          placeholder="Enter text"
-        ></IonInput>
-      </IonItem>
-
-      <IonItem fill="solid">
-        <IonInput
-          label="Floating Input: Solid (MD only)"
-          label-placement="floating"
-          placeholder="Enter text"
-        ></IonInput>
-      </IonItem>
-
       <IonItem>
         <IonSelect label="Select" placeholder="Make a Selection">
           <IonSelectOption value="">No Game Console</IonSelectOption>
diff --git a/static/usage/v7/item/inputs/vue.md b/static/usage/v7/item/inputs/vue.md
index 6ce71990b7e..62ce6f5efc1 100644
--- a/static/usage/v7/item/inputs/vue.md
+++ b/static/usage/v7/item/inputs/vue.md
@@ -16,18 +16,6 @@
     <ion-input label="Floating Input" label-placement="floating" placeholder="Enter text"></ion-input>
   </ion-item>
 
-  <ion-item fill="outline">
-    <ion-input
-      label="Floating Input: Outline (MD only)"
-      label-placement="floating"
-      placeholder="Enter text"
-    ></ion-input>
-  </ion-item>
-
-  <ion-item fill="solid">
-    <ion-input label="Floating Input: Solid (MD only)" label-placement="floating" placeholder="Enter text"></ion-input>
-  </ion-item>
-
   <ion-item>
     <ion-select label="Select" placeholder="Make a Selection">
       <ion-select-option value="">No Game Console</ion-select-option>

From 98157b85d3259f33c88d8594512e4e8f2bfa95d3 Mon Sep 17 00:00:00 2001
From: amandaesmith3 <amanda.s@ionic.io>
Date: Thu, 21 Sep 2023 13:19:21 -0500
Subject: [PATCH 02/13] item/theming/input-highlight (removed)

---
 docs/api/item.md                              | 12 -----
 .../angular/example_component_css.md          |  8 ----
 .../angular/example_component_html.md         | 16 -------
 .../v7/item/theming/input-highlight/demo.html | 48 -------------------
 .../v7/item/theming/input-highlight/index.md  | 33 -------------
 .../theming/input-highlight/javascript.md     | 25 ----------
 .../theming/input-highlight/react/main_css.md |  8 ----
 .../theming/input-highlight/react/main_tsx.md | 28 -----------
 .../v7/item/theming/input-highlight/vue.md    | 36 --------------
 9 files changed, 214 deletions(-)
 delete mode 100644 static/usage/v7/item/theming/input-highlight/angular/example_component_css.md
 delete mode 100644 static/usage/v7/item/theming/input-highlight/angular/example_component_html.md
 delete mode 100644 static/usage/v7/item/theming/input-highlight/demo.html
 delete mode 100644 static/usage/v7/item/theming/input-highlight/index.md
 delete mode 100644 static/usage/v7/item/theming/input-highlight/javascript.md
 delete mode 100644 static/usage/v7/item/theming/input-highlight/react/main_css.md
 delete mode 100644 static/usage/v7/item/theming/input-highlight/react/main_tsx.md
 delete mode 100644 static/usage/v7/item/theming/input-highlight/vue.md

diff --git a/docs/api/item.md b/docs/api/item.md
index 6aaf0dd0609..5801abbcc90 100644
--- a/docs/api/item.md
+++ b/docs/api/item.md
@@ -121,18 +121,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 />
-
-
 ## Properties
 <Props />
 
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>
-```

From b0e5123185df853e81ba8aeb9e371902855c10bd Mon Sep 17 00:00:00 2001
From: amandaesmith3 <amanda.s@ionic.io>
Date: Thu, 21 Sep 2023 13:31:47 -0500
Subject: [PATCH 03/13] label/input

---
 docs/api/label.md                         |  6 ---
 static/usage/v7/label/input/angular.md    | 31 -------------
 static/usage/v7/label/input/demo.html     | 56 -----------------------
 static/usage/v7/label/input/index.md      |  8 ----
 static/usage/v7/label/input/javascript.md | 31 -------------
 static/usage/v7/label/input/react.md      | 41 -----------------
 static/usage/v7/label/input/vue.md        | 42 -----------------
 7 files changed, 215 deletions(-)
 delete mode 100644 static/usage/v7/label/input/angular.md
 delete mode 100644 static/usage/v7/label/input/demo.html
 delete mode 100644 static/usage/v7/label/input/index.md
 delete mode 100644 static/usage/v7/label/input/javascript.md
 delete mode 100644 static/usage/v7/label/input/react.md
 delete mode 100644 static/usage/v7/label/input/vue.md

diff --git a/docs/api/label.md b/docs/api/label.md
index 4d5aab0a928..6b3d1107592 100644
--- a/docs/api/label.md
+++ b/docs/api/label.md
@@ -32,12 +32,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/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>
-```

From 4230b399eba8369f1faba8332731414fa8ffc5e2 Mon Sep 17 00:00:00 2001
From: amandaesmith3 <amanda.s@ionic.io>
Date: Thu, 21 Sep 2023 13:34:10 -0500
Subject: [PATCH 04/13] update label description

---
 docs/api/label.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/api/label.md b/docs/api/label.md
index 6b3d1107592..9defc1d7f97 100644
--- a/docs/api/label.md
+++ b/docs/api/label.md
@@ -17,7 +17,7 @@ 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 a textual element used primarily to give added context to [Item](./item.md) components. The position of the label inside of an item can be inline, fixed, stacked, or floating.
 
 
 ## Basic Usage

From 8490ab99dcf611acc6c93816a013293e5677e643 Mon Sep 17 00:00:00 2001
From: amandaesmith3 <amanda.s@ionic.io>
Date: Thu, 21 Sep 2023 13:42:06 -0500
Subject: [PATCH 05/13] menu/type

---
 .../menu/type/angular/example_component_html.md | 15 ++++++---------
 static/usage/v7/menu/type/demo.html             | 15 ++++++---------
 static/usage/v7/menu/type/javascript.md         | 15 ++++++---------
 static/usage/v7/menu/type/react.md              | 16 ++++++----------
 static/usage/v7/menu/type/vue.md                | 17 ++++++-----------
 5 files changed, 30 insertions(+), 48 deletions(-)

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,

From 40e5e4b1e5930d0fa86dd3aefc71bc8e1dafb0e1 Mon Sep 17 00:00:00 2001
From: amandaesmith3 <amanda.s@ionic.io>
Date: Thu, 21 Sep 2023 13:51:49 -0500
Subject: [PATCH 06/13] modal/inline/basic

---
 .../v7/modal/inline/basic/angular/example_component_html.md   | 3 +--
 static/usage/v7/modal/inline/basic/demo.html                  | 3 +--
 static/usage/v7/modal/inline/basic/javascript.md              | 3 +--
 static/usage/v7/modal/inline/basic/react.md                   | 4 +---
 static/usage/v7/modal/inline/basic/vue.md                     | 4 +---
 5 files changed, 5 insertions(+), 12 deletions(-)

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..9b47a3bf906 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,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" [(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..9aaa6a4c935 100644
--- a/static/usage/v7/modal/inline/basic/demo.html
+++ b/static/usage/v7/modal/inline/basic/demo.html
@@ -34,8 +34,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/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..d208d06347d 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,7 @@ 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..883b34a812e 100644
--- a/static/usage/v7/modal/inline/basic/vue.md
+++ b/static/usage/v7/modal/inline/basic/vue.md
@@ -22,8 +22,7 @@
       </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 +40,6 @@
     IonTitle,
     IonItem,
     IonInput,
-    IonLabel,
   } from '@ionic/vue';
   import { OverlayEventDetail } from '@ionic/core/components';
   import { ref } from 'vue';

From 62973596873525339f7a4effee489ac960b6a500 Mon Sep 17 00:00:00 2001
From: amandaesmith3 <amanda.s@ionic.io>
Date: Thu, 21 Sep 2023 14:02:06 -0500
Subject: [PATCH 07/13] modal/can-dismiss/boolean

---
 .../boolean/angular/example_component_html.md            | 5 +++--
 static/usage/v7/modal/can-dismiss/boolean/demo.html      | 5 +++--
 static/usage/v7/modal/can-dismiss/boolean/javascript.md  | 5 +++--
 static/usage/v7/modal/can-dismiss/boolean/react.md       | 9 +++++----
 static/usage/v7/modal/can-dismiss/boolean/vue.md         | 5 +++--
 5 files changed, 17 insertions(+), 12 deletions(-)

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..67d8bd4f9ec 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">
+              <ion-label class="ion-text-wrap" for="terms">Do you accept the terms and conditions?</ion-label>
+            </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..4a4af4a3cfb 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">
+                  <ion-label class="ion-text-wrap" for="terms">Do you accept the terms and conditions?</ion-label>
+                </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..86389f91f78 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">
+            <ion-label class="ion-text-wrap" for="terms">Do you accept the terms and conditions?</ion-label>
+          </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..e485b7a2320 100644
--- a/static/usage/v7/modal/can-dismiss/boolean/react.md
+++ b/static/usage/v7/modal/can-dismiss/boolean/react.md
@@ -52,16 +52,17 @@ 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>
+              >
+                <IonLabel className="ion-text-wrap" {...{ for: 'terms' }}>
+                  Do you accept the terms and conditions?
+                </IonLabel>
+              </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..1ac7f58b0cd 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">
+              <ion-label class="ion-text-wrap" for="terms">Do you accept the terms and conditions?</ion-label>
+            </ion-checkbox>
           </ion-item>
         </ion-content>
       </ion-modal>

From 4ceb53eae5ea9f5ae34b95eba1134f938117120a Mon Sep 17 00:00:00 2001
From: amandaesmith3 <amanda.s@ionic.io>
Date: Thu, 21 Sep 2023 14:11:04 -0500
Subject: [PATCH 08/13] backdrop/basic

---
 static/usage/v7/backdrop/basic/angular.md    | 3 +--
 static/usage/v7/backdrop/basic/demo.html     | 3 +--
 static/usage/v7/backdrop/basic/javascript.md | 3 +--
 static/usage/v7/backdrop/basic/react.md      | 4 +---
 static/usage/v7/backdrop/basic/vue.md        | 6 ++----
 5 files changed, 6 insertions(+), 13 deletions(-)

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>
 ```

From b320ad627f9b39abbe78cbffcb795a1674f38fc7 Mon Sep 17 00:00:00 2001
From: amandaesmith3 <amanda.s@ionic.io>
Date: Thu, 21 Sep 2023 14:26:54 -0500
Subject: [PATCH 09/13] lint

---
 .../modal/inline/basic/angular/example_component_html.md  | 8 +++++++-
 static/usage/v7/modal/inline/basic/demo.html              | 7 ++++++-
 static/usage/v7/modal/inline/basic/react.md               | 8 +++++++-
 static/usage/v7/modal/inline/basic/vue.md                 | 8 +++++++-
 4 files changed, 27 insertions(+), 4 deletions(-)

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 9b47a3bf906..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,7 +22,13 @@
       </ion-header>
       <ion-content class="ion-padding">
         <ion-item>
-          <ion-input label="Enter your name" labelPlacement="stacked" 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 9aaa6a4c935..1c8145597f0 100644
--- a/static/usage/v7/modal/inline/basic/demo.html
+++ b/static/usage/v7/modal/inline/basic/demo.html
@@ -34,7 +34,12 @@
           </ion-header>
           <ion-content class="ion-padding">
             <ion-item>
-              <ion-input label="Enter your name" label-placement="stacked" 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 d208d06347d..1ca9670066a 100644
--- a/static/usage/v7/modal/inline/basic/react.md
+++ b/static/usage/v7/modal/inline/basic/react.md
@@ -60,7 +60,13 @@ function Example() {
           </IonHeader>
           <IonContent className="ion-padding">
             <IonItem>
-              <IonInput label="Enter your name" labelPlacement="stacked" 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 883b34a812e..5aac3115a1d 100644
--- a/static/usage/v7/modal/inline/basic/vue.md
+++ b/static/usage/v7/modal/inline/basic/vue.md
@@ -22,7 +22,13 @@
       </ion-header>
       <ion-content class="ion-padding">
         <ion-item>
-          <ion-input label="Enter your name" label-placement="stacked" 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>

From fd3f9ef42cdfa2eeb9503f9fd1af5928afabd749 Mon Sep 17 00:00:00 2001
From: amandaesmith3 <amanda.s@ionic.io>
Date: Wed, 11 Oct 2023 09:41:22 -0500
Subject: [PATCH 10/13] item/inputs: revert playground size change

---
 static/usage/v7/item/inputs/index.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/static/usage/v7/item/inputs/index.md b/static/usage/v7/item/inputs/index.md
index 1a0a9076b65..1925824c43f 100644
--- a/static/usage/v7/item/inputs/index.md
+++ b/static/usage/v7/item/inputs/index.md
@@ -5,4 +5,4 @@ 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/item/inputs/demo.html" size="470px" />
+<Playground version="7" code={{ javascript, react, vue, angular }} src="usage/v7/item/inputs/demo.html" size="large" />

From 820d0b9ab452d497a555fd02ca2fdb54c7cb17dc Mon Sep 17 00:00:00 2001
From: amandaesmith3 <amanda.s@ionic.io>
Date: Wed, 11 Oct 2023 13:04:13 -0500
Subject: [PATCH 11/13] tweak label copy

---
 docs/api/label.md | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/docs/api/label.md b/docs/api/label.md
index 9defc1d7f97..dacced73aaa 100644
--- a/docs/api/label.md
+++ b/docs/api/label.md
@@ -17,7 +17,9 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
 <EncapsulationPill type="scoped" />
 
-Label is a textual element used primarily to give added context to [Item](./item.md) components. The position of the label inside of an item can be inline, fixed, stacked, or floating.
+Label is an element used primarily to give added context to [Item](./item.md) components. The position of the label inside of an item can be inline, fixed, stacked, or floating.
+
+Note that form control components such as [Input](./input.md) or [Radio](./radio.md) have their own labels, so they typically should not be used with `ion-label`. 
 
 
 ## Basic Usage

From acb11efec3a16f91111d6998668a2042f01c4a89 Mon Sep 17 00:00:00 2001
From: amandaesmith3 <amanda.s@ionic.io>
Date: Wed, 11 Oct 2023 13:49:09 -0500
Subject: [PATCH 12/13] modal/can-dismiss/boolean: convert labels to plain divs

---
 .../can-dismiss/boolean/angular/example_component_html.md    | 2 +-
 static/usage/v7/modal/can-dismiss/boolean/demo.html          | 2 +-
 static/usage/v7/modal/can-dismiss/boolean/javascript.md      | 2 +-
 static/usage/v7/modal/can-dismiss/boolean/react.md           | 5 +----
 static/usage/v7/modal/can-dismiss/boolean/vue.md             | 4 +---
 5 files changed, 5 insertions(+), 10 deletions(-)

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 67d8bd4f9ec..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
@@ -21,7 +21,7 @@
           <p class="ion-padding-horizontal">You must accept the terms and conditions to close this modal.</p>
           <ion-item>
             <ion-checkbox id="terms" (ionChange)="onTermsChanged($event)" [checked]="canDismiss">
-              <ion-label class="ion-text-wrap" for="terms">Do you accept the terms and conditions?</ion-label>
+              <div class="ion-text-wrap">Do you accept the terms and conditions?</div>
             </ion-checkbox>
           </ion-item>
         </ion-content>
diff --git a/static/usage/v7/modal/can-dismiss/boolean/demo.html b/static/usage/v7/modal/can-dismiss/boolean/demo.html
index 4a4af4a3cfb..2c820ac0b47 100644
--- a/static/usage/v7/modal/can-dismiss/boolean/demo.html
+++ b/static/usage/v7/modal/can-dismiss/boolean/demo.html
@@ -34,7 +34,7 @@
               <p class="ion-padding-horizontal">You must accept the terms and conditions to close this modal.</p>
               <ion-item>
                 <ion-checkbox id="terms">
-                  <ion-label class="ion-text-wrap" for="terms">Do you accept the terms and conditions?</ion-label>
+                  <div class="ion-text-wrap">Do you accept the terms and conditions?</div>
                 </ion-checkbox>
               </ion-item>
             </ion-content>
diff --git a/static/usage/v7/modal/can-dismiss/boolean/javascript.md b/static/usage/v7/modal/can-dismiss/boolean/javascript.md
index 86389f91f78..af2ab152fc9 100644
--- a/static/usage/v7/modal/can-dismiss/boolean/javascript.md
+++ b/static/usage/v7/modal/can-dismiss/boolean/javascript.md
@@ -21,7 +21,7 @@
         <p class="ion-padding-horizontal">You must accept the terms and conditions to close this modal.</p>
         <ion-item>
           <ion-checkbox id="terms">
-            <ion-label class="ion-text-wrap" for="terms">Do you accept the terms and conditions?</ion-label>
+            <div class="ion-text-wrap">Do you accept the terms and conditions?</div>
           </ion-checkbox>
         </ion-item>
       </ion-content>
diff --git a/static/usage/v7/modal/can-dismiss/boolean/react.md b/static/usage/v7/modal/can-dismiss/boolean/react.md
index e485b7a2320..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';
 
@@ -59,9 +58,7 @@ function Example() {
                   setCanDismiss(ev.detail.checked);
                 }}
               >
-                <IonLabel className="ion-text-wrap" {...{ for: 'terms' }}>
-                  Do you accept the terms and conditions?
-                </IonLabel>
+                <div className="ion-text-wrap">Do you accept the terms and conditions?</div>
               </IonCheckbox>
             </IonItem>
           </IonContent>
diff --git a/static/usage/v7/modal/can-dismiss/boolean/vue.md b/static/usage/v7/modal/can-dismiss/boolean/vue.md
index 1ac7f58b0cd..3504c7230cd 100644
--- a/static/usage/v7/modal/can-dismiss/boolean/vue.md
+++ b/static/usage/v7/modal/can-dismiss/boolean/vue.md
@@ -22,7 +22,7 @@
           <p class="ion-padding-horizontal">You must accept the terms and conditions to close this modal.</p>
           <ion-item>
             <ion-checkbox id="terms" @ionChange="onTermsChanged" :checked="canDismiss">
-              <ion-label class="ion-text-wrap" for="terms">Do you accept the terms and conditions?</ion-label>
+              <div class="ion-text-wrap">Do you accept the terms and conditions?</div>
             </ion-checkbox>
           </ion-item>
         </ion-content>
@@ -43,7 +43,6 @@
     IonTitle,
     IonItem,
     IonCheckbox,
-    IonLabel,
     IonPage,
   } from '@ionic/vue';
   import { defineComponent } from 'vue';
@@ -59,7 +58,6 @@
       IonTitle,
       IonItem,
       IonCheckbox,
-      IonLabel,
       IonPage,
     },
     data() {

From 09cf89ae6cc08be957e39e09434be7b6b8a81c39 Mon Sep 17 00:00:00 2001
From: amandaesmith3 <amanda.s@ionic.io>
Date: Wed, 11 Oct 2023 13:54:50 -0500
Subject: [PATCH 13/13] further tweak label copy for better accuracy and flow

---
 docs/api/label.md | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/docs/api/label.md b/docs/api/label.md
index dacced73aaa..c3761074f8d 100644
--- a/docs/api/label.md
+++ b/docs/api/label.md
@@ -17,10 +17,9 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
 <EncapsulationPill type="scoped" />
 
-Label is an element used primarily to give added context to [Item](./item.md) components. The position of the label inside of an item can be inline, fixed, stacked, or floating.
-
-Note that form control components such as [Input](./input.md) or [Radio](./radio.md) have their own labels, so they typically should not be used with `ion-label`. 
+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