diff --git a/static/usage/v7/item/inputs/angular.md b/static/usage/v7/item/inputs/angular.md
index 013e672ae99..a45e76ebc73 100644
--- a/static/usage/v7/item/inputs/angular.md
+++ b/static/usage/v7/item/inputs/angular.md
@@ -1,37 +1,30 @@
 ```html
 <ion-item>
-  <ion-label>Default Input</ion-label>
-  <ion-input placeholder="Enter text"></ion-input>
+  <ion-input label="Default Input" placeholder="Enter text"></ion-input>
 </ion-item>
 
 <ion-item>
-  <ion-label position="fixed">Fixed Input</ion-label>
-  <ion-input placeholder="Enter text"></ion-input>
+  <ion-input label="Fixed Input" label-placement="fixed" placeholder="Enter text"></ion-input>
 </ion-item>
 
 <ion-item>
-  <ion-label position="stacked">Stacked Input</ion-label>
-  <ion-input placeholder="Enter text"></ion-input>
+  <ion-input label="Stacked Input" label-placement="stacked" placeholder="Enter text"></ion-input>
 </ion-item>
 
 <ion-item>
-  <ion-label position="floating">Floating Input</ion-label>
-  <ion-input placeholder="Enter text"></ion-input>
+  <ion-input label="Floating Input" label-placement="floating" placeholder="Enter text"></ion-input>
 </ion-item>
 
 <ion-item fill="outline">
-  <ion-label position="floating">Floating Input: Outline (MD only)</ion-label>
-  <ion-input placeholder="Enter text"></ion-input>
+  <ion-input label="Floating Input: Outline (MD only)" label-placement="floating" placeholder="Enter text"></ion-input>
 </ion-item>
 
 <ion-item fill="solid">
-  <ion-label position="floating">Floating Input: Solid (MD only)</ion-label>
-  <ion-input placeholder="Enter text"></ion-input>
+  <ion-input label="Floating Input: Solid (MD only)" label-placement="floating" placeholder="Enter text"></ion-input>
 </ion-item>
 
 <ion-item>
-  <ion-label>Select</ion-label>
-  <ion-select placeholder="Make a Selection">
+  <ion-select label="Select" placeholder="Make a Selection">
     <ion-select-option value="">No Game Console</ion-select-option>
     <ion-select-option value="nes">NES</ion-select-option>
     <ion-select-option value="n64">Nintendo64</ion-select-option>
@@ -43,17 +36,16 @@
 </ion-item>
 
 <ion-item>
-  <ion-label>Toggle</ion-label>
-  <ion-toggle slot="end"></ion-toggle>
+  <ion-toggle> Toggle </ion-toggle>
 </ion-item>
 
 <ion-item>
-  <ion-label>Checkbox</ion-label>
-  <ion-checkbox slot="end"></ion-checkbox>
+  <ion-checkbox> Checkbox </ion-checkbox>
 </ion-item>
 
 <ion-item>
-  <ion-label position="stacked">Range</ion-label>
-  <ion-range></ion-range>
+  <ion-range label-placement="start">
+    <div slot="label">Range</div>
+  </ion-range>
 </ion-item>
 ```
diff --git a/static/usage/v7/item/inputs/demo.html b/static/usage/v7/item/inputs/demo.html
index 94c2309b3e9..32951b2e970 100644
--- a/static/usage/v7/item/inputs/demo.html
+++ b/static/usage/v7/item/inputs/demo.html
@@ -22,41 +22,36 @@
     <ion-content>
       <div class="container">
         <ion-item>
-          <ion-label>Default Input</ion-label>
-          <ion-input placeholder="Enter text"></ion-input>
+          <ion-input label="Default Input" placeholder="Enter text"></ion-input>
         </ion-item>
 
         <ion-item>
-          <ion-label position="fixed">Fixed Input</ion-label>
-          <ion-input placeholder="Enter text"></ion-input>
+          <ion-input label="Fixed Input" label-placement="fixed" placeholder="Enter text"></ion-input>
         </ion-item>
 
         <ion-item>
-          <ion-label position="stacked">Stacked Input</ion-label>
-          <ion-input placeholder="Enter text"></ion-input>
+          <ion-input label="Stacked Input" label-placement="stacked" placeholder="Enter text"></ion-input>
         </ion-item>
 
         <ion-item>
-          <ion-label position="floating">Floating Input</ion-label>
-          <ion-input placeholder="Enter text"></ion-input>
+          <ion-input label="Floating Input" label-placement="floating" placeholder="Enter text"></ion-input>
         </ion-item>
 
         <ion-item fill="outline">
-          <ion-label position="floating">Floating Input: Outline (MD only)</ion-label>
-          <ion-input placeholder="Enter text"></ion-input>
+          <ion-input label="Floating Input: Outline (MD only)" label-placement="floating"
+            placeholder="Enter text"></ion-input>
         </ion-item>
 
         <ion-item fill="solid">
-          <ion-label position="floating">Floating Input: Solid (MD only)</ion-label>
-          <ion-input placeholder="Enter text"></ion-input>
+          <ion-input label="Floating Input: Solid (MD only)" label-placement="floating"
+            placeholder="Enter text"></ion-input>
         </ion-item>
 
         <ion-item>
-          <ion-label>Select</ion-label>
-          <ion-select placeholder="Make a Selection">
+          <ion-select label="Select" placeholder="Make a Selection">
             <ion-select-option value="">No Game Console</ion-select-option>
             <ion-select-option value="nes">NES</ion-select-option>
-            <ion-select-option value="n64" selected>Nintendo64</ion-select-option>
+            <ion-select-option value="n64">Nintendo64</ion-select-option>
             <ion-select-option value="ps">PlayStation</ion-select-option>
             <ion-select-option value="genesis">Sega Genesis</ion-select-option>
             <ion-select-option value="saturn">Sega Saturn</ion-select-option>
@@ -65,18 +60,21 @@
         </ion-item>
 
         <ion-item>
-          <ion-label>Toggle</ion-label>
-          <ion-toggle slot="end"></ion-toggle>
+          <ion-toggle>
+            Toggle
+          </ion-toggle>
         </ion-item>
 
         <ion-item>
-          <ion-label>Checkbox</ion-label>
-          <ion-checkbox slot="end"></ion-checkbox>
+          <ion-checkbox>
+            Checkbox
+          </ion-checkbox>
         </ion-item>
 
         <ion-item>
-          <ion-label position="stacked">Range</ion-label>
-          <ion-range></ion-range>
+          <ion-range label-placement="start">
+            <div slot="label">Range</div>
+          </ion-range>
         </ion-item>
       </div>
     </ion-content>
diff --git a/static/usage/v7/item/inputs/javascript.md b/static/usage/v7/item/inputs/javascript.md
index 013e672ae99..74558c5191a 100644
--- a/static/usage/v7/item/inputs/javascript.md
+++ b/static/usage/v7/item/inputs/javascript.md
@@ -1,37 +1,30 @@
 ```html
 <ion-item>
-  <ion-label>Default Input</ion-label>
-  <ion-input placeholder="Enter text"></ion-input>
+  <ion-input label="Default Input" placeholder="Enter text"></ion-input>
 </ion-item>
 
 <ion-item>
-  <ion-label position="fixed">Fixed Input</ion-label>
-  <ion-input placeholder="Enter text"></ion-input>
+  <ion-input label="Fixed Input" label-placement="fixed" placeholder="Enter text"></ion-input>
 </ion-item>
 
 <ion-item>
-  <ion-label position="stacked">Stacked Input</ion-label>
-  <ion-input placeholder="Enter text"></ion-input>
+  <ion-input label="Stacked Input" label-placement="stacked" placeholder="Enter text"></ion-input>
 </ion-item>
 
 <ion-item>
-  <ion-label position="floating">Floating Input</ion-label>
-  <ion-input placeholder="Enter text"></ion-input>
+  <ion-input label="Floating Input" label-placement="floating" placeholder="Enter text"></ion-input>
 </ion-item>
 
 <ion-item fill="outline">
-  <ion-label position="floating">Floating Input: Outline (MD only)</ion-label>
-  <ion-input placeholder="Enter text"></ion-input>
+  <ion-input label="Floating Input: Outline (MD only)" label-placement="floating" placeholder="Enter text"></ion-input>
 </ion-item>
 
 <ion-item fill="solid">
-  <ion-label position="floating">Floating Input: Solid (MD only)</ion-label>
-  <ion-input placeholder="Enter text"></ion-input>
+  <ion-input label="Floating Input: Solid (MD only)" label-placement="floating" placeholder="Enter text"></ion-input>
 </ion-item>
 
 <ion-item>
-  <ion-label>Select</ion-label>
-  <ion-select placeholder="Make a Selection">
+  <ion-select label="Select" placeholder="Make a Selection">
     <ion-select-option value="">No Game Console</ion-select-option>
     <ion-select-option value="nes">NES</ion-select-option>
     <ion-select-option value="n64">Nintendo64</ion-select-option>
@@ -43,17 +36,20 @@
 </ion-item>
 
 <ion-item>
-  <ion-label>Toggle</ion-label>
-  <ion-toggle slot="end"></ion-toggle>
+  <ion-toggle>
+    <div>Toggle</div>
+  </ion-toggle>
 </ion-item>
 
 <ion-item>
-  <ion-label>Checkbox</ion-label>
-  <ion-checkbox slot="end"></ion-checkbox>
+  <ion-checkbox>
+    <div>Checkbox</div>
+  </ion-checkbox>
 </ion-item>
 
 <ion-item>
-  <ion-label position="stacked">Range</ion-label>
-  <ion-range></ion-range>
+  <ion-range label-placement="start">
+    <div slot="label">Range</div>
+  </ion-range>
 </ion-item>
 ```
diff --git a/static/usage/v7/item/inputs/react.md b/static/usage/v7/item/inputs/react.md
index 0cb6523f053..6f3cf757c68 100644
--- a/static/usage/v7/item/inputs/react.md
+++ b/static/usage/v7/item/inputs/react.md
@@ -1,43 +1,44 @@
 ```tsx
 import React from 'react';
-import { IonCheckbox, IonInput, IonItem, IonLabel, IonRange, IonSelect, IonSelectOption, IonToggle } from '@ionic/react';
+import { IonCheckbox, IonInput, IonItem, IonRange, IonSelect, IonSelectOption, IonToggle } from '@ionic/react';
 
 function Example() {
   return (
     <>
       <IonItem>
-        <IonLabel>Default Input</IonLabel>
-        <IonInput placeholder="Enter text"></IonInput>
+        <IonInput label="Default Input" placeholder="Enter text"></IonInput>
       </IonItem>
 
       <IonItem>
-        <IonLabel position="fixed">Fixed Input</IonLabel>
-        <IonInput placeholder="Enter text"></IonInput>
+        <IonInput label="Fixed Input" label-placement="fixed" placeholder="Enter text"></IonInput>
       </IonItem>
 
       <IonItem>
-        <IonLabel position="stacked">Stacked Input</IonLabel>
-        <IonInput placeholder="Enter text"></IonInput>
+        <IonInput label="Stacked Input" label-placement="stacked" placeholder="Enter text"></IonInput>
       </IonItem>
 
       <IonItem>
-        <IonLabel position="floating">Floating Input</IonLabel>
-        <IonInput placeholder="Enter text"></IonInput>
+        <IonInput label="Floating Input" label-placement="floating" placeholder="Enter text"></IonInput>
       </IonItem>
 
       <IonItem fill="outline">
-        <IonLabel position="floating">Floating Input: Outline (MD only)</IonLabel>
-        <IonInput placeholder="Enter text"></IonInput>
+        <IonInput
+          label="Floating Input: Outline (MD only)"
+          label-placement="floating"
+          placeholder="Enter text"
+        ></IonInput>
       </IonItem>
 
       <IonItem fill="solid">
-        <IonLabel position="floating">Floating Input: Solid (MD only)</IonLabel>
-        <IonInput placeholder="Enter text"></IonInput>
+        <IonInput
+          label="Floating Input: Solid (MD only)"
+          label-placement="floating"
+          placeholder="Enter text"
+        ></IonInput>
       </IonItem>
 
       <IonItem>
-        <IonLabel>Select</IonLabel>
-        <IonSelect placeholder="Make a Selection">
+        <IonSelect label="Select" placeholder="Make a Selection">
           <IonSelectOption value="">No Game Console</IonSelectOption>
           <IonSelectOption value="nes">NES</IonSelectOption>
           <IonSelectOption value="n64">Nintendo64</IonSelectOption>
@@ -49,18 +50,17 @@ function Example() {
       </IonItem>
 
       <IonItem>
-        <IonLabel>Toggle</IonLabel>
-        <IonToggle slot="end"></IonToggle>
+        <IonToggle>Toggle</IonToggle>
       </IonItem>
 
       <IonItem>
-        <IonLabel>Checkbox</IonLabel>
-        <IonCheckbox slot="end"></IonCheckbox>
+        <IonCheckbox>Checkbox</IonCheckbox>
       </IonItem>
 
       <IonItem>
-        <IonLabel position="stacked">Range</IonLabel>
-        <IonRange></IonRange>
+        <IonRange label-placement="start">
+          <div slot="label">Range</div>
+        </IonRange>
       </IonItem>
     </>
   );
diff --git a/static/usage/v7/item/inputs/vue.md b/static/usage/v7/item/inputs/vue.md
index 7dc085a7a4d..6ce71990b7e 100644
--- a/static/usage/v7/item/inputs/vue.md
+++ b/static/usage/v7/item/inputs/vue.md
@@ -1,38 +1,35 @@
 ```html
 <template>
   <ion-item>
-    <ion-label>Default Input</ion-label>
-    <ion-input placeholder="Enter text"></ion-input>
+    <ion-input label="Default Input" placeholder="Enter text"></ion-input>
   </ion-item>
 
   <ion-item>
-    <ion-label position="fixed">Fixed Input</ion-label>
-    <ion-input placeholder="Enter text"></ion-input>
+    <ion-input label="Fixed Input" label-placement="fixed" placeholder="Enter text"></ion-input>
   </ion-item>
 
   <ion-item>
-    <ion-label position="stacked">Stacked Input</ion-label>
-    <ion-input placeholder="Enter text"></ion-input>
+    <ion-input label="Stacked Input" label-placement="stacked" placeholder="Enter text"></ion-input>
   </ion-item>
 
   <ion-item>
-    <ion-label position="floating">Floating Input</ion-label>
-    <ion-input placeholder="Enter text"></ion-input>
+    <ion-input label="Floating Input" label-placement="floating" placeholder="Enter text"></ion-input>
   </ion-item>
 
   <ion-item fill="outline">
-    <ion-label position="floating">Floating Input: Outline (MD only)</ion-label>
-    <ion-input placeholder="Enter text"></ion-input>
+    <ion-input
+      label="Floating Input: Outline (MD only)"
+      label-placement="floating"
+      placeholder="Enter text"
+    ></ion-input>
   </ion-item>
 
   <ion-item fill="solid">
-    <ion-label position="floating">Floating Input: Solid (MD only)</ion-label>
-    <ion-input placeholder="Enter text"></ion-input>
+    <ion-input label="Floating Input: Solid (MD only)" label-placement="floating" placeholder="Enter text"></ion-input>
   </ion-item>
 
   <ion-item>
-    <ion-label>Select</ion-label>
-    <ion-select placeholder="Make a Selection">
+    <ion-select label="Select" placeholder="Make a Selection">
       <ion-select-option value="">No Game Console</ion-select-option>
       <ion-select-option value="nes">NES</ion-select-option>
       <ion-select-option value="n64">Nintendo64</ion-select-option>
@@ -44,23 +41,31 @@
   </ion-item>
 
   <ion-item>
-    <ion-label>Toggle</ion-label>
-    <ion-toggle slot="end"></ion-toggle>
+    <ion-toggle> Toggle </ion-toggle>
   </ion-item>
 
   <ion-item>
-    <ion-label>Checkbox</ion-label>
-    <ion-checkbox slot="end"></ion-checkbox>
+    <ion-checkbox> Checkbox </ion-checkbox>
   </ion-item>
 
   <ion-item>
-    <ion-label position="stacked">Range</ion-label>
-    <ion-range></ion-range>
+    <ion-range label-placement="start">
+      <div slot="label">Range</div>
+    </ion-range>
   </ion-item>
 </template>
 
 <script lang="ts">
-  import { IonCheckbox, IonInput, IonItem, IonLabel, IonRange, IonSelect, IonSelectOption, IonToggle } from '@ionic/vue';
+  import {
+    IonCheckbox,
+    IonInput,
+    IonItem,
+    IonLabel,
+    IonRange,
+    IonSelect,
+    IonSelectOption,
+    IonToggle,
+  } from '@ionic/vue';
   import { defineComponent } from 'vue';
 
   export default defineComponent({