diff --git a/static/usage/v8/checkbox/migration/index.md b/static/usage/v8/checkbox/migration/index.md
deleted file mode 100644
index acf77957566..00000000000
--- a/static/usage/v8/checkbox/migration/index.md
+++ /dev/null
@@ -1,188 +0,0 @@
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
-
-````mdx-code-block
-<Tabs
-  groupId="framework"
-  defaultValue="javascript"
-  values={[
-    { value: 'javascript', label: 'JavaScript' },
-    { value: 'angular', label: 'Angular' },
-    { value: 'react', label: 'React' },
-    { value: 'vue', label: 'Vue' },
-  ]
-}>
-<TabItem value="javascript">
-
-```html
-<!-- Basic -->
-
-<!-- Before -->
-<ion-item>
-  <ion-label>Checkbox Label</ion-label>
-  <ion-checkbox></ion-checkbox>
-</ion-item>
-
-<!-- After -->
-<ion-item>
-  <ion-checkbox>Checkbox Label</ion-checkbox>
-</ion-item>
-
-<!-- Fixed Labels -->
-
-<!-- Before -->
-<ion-item>
-  <ion-label position="fixed">Checkbox Label</ion-label>
-  <ion-checkbox></ion-checkbox>
-</ion-item>
-
-<!-- After -->
-<ion-item>
-  <ion-checkbox label-placement="fixed">Checkbox Label</ion-checkbox>
-</ion-item>
-
-<!-- Checkbox at the start of line, Label at the end of line -->
-
-<!-- Before -->
-<ion-item>
-  <ion-label slot="end">Checkbox Label</ion-label>
-  <ion-checkbox></ion-checkbox>
-</ion-item>
-
-<!-- After -->
-<ion-item>
-  <ion-checkbox label-placement="end">Checkbox Label</ion-checkbox>
-</ion-item>
-```
-</TabItem>
-<TabItem value="angular">
-
-```html
-<!-- Basic -->
-
-<!-- Before -->
-<ion-item>
-  <ion-label>Checkbox Label</ion-label>
-  <ion-checkbox></ion-checkbox>
-</ion-item>
-
-<!-- After -->
-<ion-item>
-  <ion-checkbox>Checkbox Label</ion-checkbox>
-</ion-item>
-
-<!-- Fixed Labels -->
-
-<!-- Before -->
-<ion-item>
-  <ion-label position="fixed">Checkbox Label</ion-label>
-  <ion-checkbox></ion-checkbox>
-</ion-item>
-
-<!-- After -->
-<ion-item>
-  <ion-checkbox labelPlacement="fixed">Checkbox Label</ion-checkbox>
-</ion-item>
-
-<!-- Checkbox at the start of line, Label at the end of line -->
-
-<!-- Before -->
-<ion-item>
-  <ion-label slot="end">Checkbox Label</ion-label>
-  <ion-checkbox></ion-checkbox>
-</ion-item>
-
-<!-- After -->
-<ion-item>
-  <ion-checkbox labelPlacement="end">Checkbox Label</ion-checkbox>
-</ion-item>
-```
-</TabItem>
-<TabItem value="react">
-
-```tsx
-{/* Basic */}
-
-{/* Before */}
-<IonItem>
-  <IonLabel>Checkbox Label</IonLabel>
-  <IonCheckbox></IonCheckbox>
-</IonItem>
-
-{/* After */}
-<IonItem>
-  <IonCheckbox>Checkbox Label</IonCheckbox>
-</IonItem>
-
-{/* Fixed Labels */}
-
-{/* Before */}
-<IonItem>
-  <IonLabel position="fixed">Checkbox Label</IonLabel>
-  <IonCheckbox></IonCheckbox>
-</IonItem>
-
-{/* After */}
-<IonItem>
-  <IonCheckbox labelPlacement="fixed">Checkbox Label</IonCheckbox>
-</IonItem>
-
-{/* Checkbox at the start of line, Label at the end of line */}
-
-{/* Before */}
-<IonItem>
-  <IonLabel slot="end">Checkbox Label</IonLabel>
-  <IonCheckbox></IonCheckbox>
-</IonItem>
-
-{/* After */}
-<IonItem>
-  <IonCheckbox labelPlacement="end">Checkbox Label</IonCheckbox>
-</IonItem>
-```
-</TabItem>
-<TabItem value="vue">
-
-```html
-<!-- Basic -->
-
-<!-- Before -->
-<ion-item>
-  <ion-label>Checkbox Label</ion-label>
-  <ion-checkbox></ion-checkbox>
-</ion-item>
-
-<!-- After -->
-<ion-item>
-  <ion-checkbox>Checkbox Label</ion-checkbox>
-</ion-item>
-
-<!-- Fixed Labels -->
-
-<!-- Before -->
-<ion-item>
-  <ion-label position="fixed">Checkbox Label</ion-label>
-  <ion-checkbox></ion-checkbox>
-</ion-item>
-
-<!-- After -->
-<ion-item>
-  <ion-checkbox label-placement="fixed">Checkbox Label</ion-checkbox>
-</ion-item>
-
-<!-- Checkbox at the start of line, Label at the end of line -->
-
-<!-- Before -->
-<ion-item>
-  <ion-label slot="end">Checkbox Label</ion-label>
-  <ion-checkbox></ion-checkbox>
-</ion-item>
-
-<!-- After -->
-<ion-item>
-  <ion-checkbox label-placement="end">Checkbox Label</ion-checkbox>
-</ion-item>
-```
-</TabItem>
-</Tabs>
-````
diff --git a/static/usage/v8/input/migration/index.md b/static/usage/v8/input/migration/index.md
deleted file mode 100644
index 34e3ccaece5..00000000000
--- a/static/usage/v8/input/migration/index.md
+++ /dev/null
@@ -1,248 +0,0 @@
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
-
-````mdx-code-block
-<Tabs
-  groupId="framework"
-  defaultValue="javascript"
-  values={[
-    { value: 'javascript', label: 'JavaScript' },
-    { value: 'angular', label: 'Angular' },
-    { value: 'react', label: 'React' },
-    { value: 'vue', label: 'Vue' },
-  ]
-}>
-<TabItem value="javascript">
-
-```html
-<!-- Label and Label Position -->
-
-<!-- Before -->
-<ion-item>
-  <ion-label position="floating">Email:</ion-label>
-  <ion-input></ion-input>
-</ion-item>
-
-<!-- After -->
-<ion-item>
-  <ion-input label="Email:" label-placement="floating"></ion-input>
-</ion-item>
-
-
-<!-- Fill -->
-
-<!-- Before -->
-<ion-item fill="outline" shape="round">
-  <ion-label position="floating">Email:</ion-label>
-  <ion-input></ion-input>
-</ion-item>
-
-<!-- After -->
-
-<!-- Inputs using `fill` should not be placed in ion-item -->
-<ion-input fill="outline" shape="round" label="Email:" label-placement="floating"></ion-input>
-
-<!-- Input-specific features on ion-item -->
-
-<!-- Before -->
-<ion-item counter="true">
-  <ion-label position="floating">Email:</ion-label>
-  <ion-input maxlength="100"></ion-input>
-  <div slot="helper">Enter an email</div>
-  <div slot="error">Please enter a valid email</div>
-</ion-item>
-
-<!-- After -->
-
-<!--
-  Metadata such as counters and helper text should not
-  be used when an input is in an item/list. If you need to
-  provide more context on a input, consider using an ion-note
-  underneath the ion-list.
--->
-
-<ion-input
-  label="Email:"
-  counter="true"
-  maxlength="100"
-  helper-text="Enter an email"
-  error-text="Please enter a valid email"
-></ion-input>
-```
-</TabItem>
-<TabItem value="angular">
-
-```html
-<!-- Label and Label Position -->
-
-<!-- Before -->
-<ion-item>
-  <ion-label position="floating">Email:</ion-label>
-  <ion-input></ion-input>
-</ion-item>
-
-<!-- After -->
-<ion-item>
-  <ion-input label="Email:" labelPlacement="floating"></ion-input>
-</ion-item>
-
-
-<!-- Fill -->
-
-<!-- Before -->
-<ion-item fill="outline" shape="round">
-  <ion-label position="floating">Email:</ion-label>
-  <ion-input></ion-input>
-</ion-item>
-
-<!-- After -->
-
-<!-- Inputs using `fill` should not be placed in ion-item -->
-<ion-input fill="outline" shape="round" label="Email:" labelPlacement="floating"></ion-input>
-
-<!-- Input-specific features on ion-item -->
-
-<!-- Before -->
-<ion-item [counter]="true">
-  <ion-label position="floating">Email:</ion-label>
-  <ion-input maxlength="100"></ion-input>
-  <div slot="helper">Enter an email</div>
-  <div slot="error">Please enter a valid email</div>
-</ion-item>
-
-<!-- After -->
-
-<!--
-  Metadata such as counters and helper text should not
-  be used when an input is in an item/list. If you need to
-  provide more context on a input, consider using an ion-note
-  underneath the ion-list.
--->
-
-<ion-input
-  label="Email:"
-  [counter]="true"
-  maxlength="100"
-  helperText="Enter an email"
-  errorText="Please enter a valid email"
-></ion-input>
-```
-</TabItem>
-<TabItem value="react">
-
-```tsx
-{/* Label and Label Position */}
-
-{/* Before */}
-<IonItem>
-  <IonLabel position="floating">Email:</IonLabel>
-  <IonInput></IonInput>
-</IonItem>
-
-{/* After */}
-<IonItem>
-  <IonInput label="Email:" labelPlacement="floating"></IonInput>
-</IonItem>
-
-
-{/* Fill */}
-
-{/* Before */}
-<IonItem fill="outline" shape="round">
-  <IonLabel position="floating">Email:</IonLabel>
-  <IonInput></IonInput>
-</IonItem>
-
-{/* After */}
-
-{/* Inputs using `fill` should not be placed in IonItem */}
-<IonInput fill="outline" shape="round" label="Email:" labelPlacement="floating"></IonInput>
-
-{/* Input-specific features on IonItem */}
-
-{/* Before */}
-<IonItem counter={true}>
-  <IonLabel position="floating">Email:</IonLabel>
-  <IonInput maxlength="100"></IonInput>
-  <div slot="helper">Enter an email</div>
-  <div slot="error">Please enter a valid email</div>
-</IonItem>
-
-{/* After */}
-
-{/*
-  Metadata such as counters and helper text should not
-  be used when an input is in an item/list. If you need to
-  provide more context on a input, consider using an IonNote
-  underneath the IonList.
-*/}
-
-<IonInput
-  label="Email:"
-  counter={true}
-  maxlength="100"
-  helperText="Enter an email"
-  errorText="Please enter a valid email"
-></IonInput>
-```
-</TabItem>
-<TabItem value="vue">
-
-```html
-<!-- Label and Label Position -->
-
-<!-- Before -->
-<ion-item>
-  <ion-label position="floating">Email:</ion-label>
-  <ion-input></ion-input>
-</ion-item>
-
-<!-- After -->
-<ion-item>
-  <ion-input label="Email:" label-placement="floating"></ion-input>
-</ion-item>
-
-
-<!-- Fill -->
-
-<!-- Before -->
-<ion-item fill="outline" shape="round">
-  <ion-label position="floating">Email:</ion-label>
-  <ion-input></ion-input>
-</ion-item>
-
-<!-- After -->
-
-<!-- Inputs using `fill` should not be placed in ion-item -->
-<ion-input fill="outline" shape="round" label="Email:" label-placement="floating"></ion-input>
-
-<!-- Input-specific features on ion-item -->
-
-<!-- Before -->
-<ion-item :counter="true">
-  <ion-label position="floating">Email:</ion-label>
-  <ion-input maxlength="100"></ion-input>
-  <div slot="helper">Enter an email</div>
-  <div slot="error">Please enter a valid email</div>
-</ion-item>
-
-<!-- After -->
-
-<!--
-  Metadata such as counters and helper text should not
-  be used when an input is in an item/list. If you need to
-  provide more context on a input, consider using an ion-note
-  underneath the ion-list.
--->
-
-<ion-input
-  label="Email:"
-  :counter="true"
-  maxlength="100"
-  helper-text="Enter an email"
-  error-text="Please enter a valid email"
-></ion-input>
-```
-</TabItem>
-</Tabs>
-````
diff --git a/static/usage/v8/radio/migration/index.md b/static/usage/v8/radio/migration/index.md
deleted file mode 100644
index 4c0477f1e4a..00000000000
--- a/static/usage/v8/radio/migration/index.md
+++ /dev/null
@@ -1,188 +0,0 @@
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
-
-````mdx-code-block
-<Tabs
-  groupId="framework"
-  defaultValue="javascript"
-  values={[
-    { value: 'javascript', label: 'JavaScript' },
-    { value: 'angular', label: 'Angular' },
-    { value: 'react', label: 'React' },
-    { value: 'vue', label: 'Vue' },
-  ]
-}>
-<TabItem value="javascript">
-
-```html
-<!-- Basic -->
-
-<!-- Before -->
-<ion-item>
-  <ion-label>Radio Label</ion-label>
-  <ion-radio></ion-radio>
-</ion-item>
-
-<!-- After -->
-<ion-item>
-  <ion-radio>Radio Label</ion-radio>
-</ion-item>
-
-<!-- Fixed Labels -->
-
-<!-- Before -->
-<ion-item>
-  <ion-label position="fixed">Radio Label</ion-label>
-  <ion-radio></ion-radio>
-</ion-item>
-
-<!-- After -->
-<ion-item>
-  <ion-radio label-placement="fixed">Radio Label</ion-radio>
-</ion-item>
-
-<!-- Radio at the start of line, Label at the end of line -->
-
-<!-- Before -->
-<ion-item>
-  <ion-label slot="end">Radio Label</ion-label>
-  <ion-radio></ion-radio>
-</ion-item>
-
-<!-- After -->
-<ion-item>
-  <ion-radio label-placement="end">Radio Label</ion-radio>
-</ion-item>
-```
-</TabItem>
-<TabItem value="angular">
-
-```html
-<!-- Basic -->
-
-<!-- Before -->
-<ion-item>
-  <ion-label>Radio Label</ion-label>
-  <ion-radio></ion-radio>
-</ion-item>
-
-<!-- After -->
-<ion-item>
-  <ion-radio>Radio Label</ion-radio>
-</ion-item>
-
-<!-- Fixed Labels -->
-
-<!-- Before -->
-<ion-item>
-  <ion-label position="fixed">Radio Label</ion-label>
-  <ion-radio></ion-radio>
-</ion-item>
-
-<!-- After -->
-<ion-item>
-  <ion-radio labelPlacement="fixed">Radio Label</ion-radio>
-</ion-item>
-
-<!-- Radio at the start of line, Label at the end of line -->
-
-<!-- Before -->
-<ion-item>
-  <ion-label slot="end">Radio Label</ion-label>
-  <ion-radio></ion-radio>
-</ion-item>
-
-<!-- After -->
-<ion-item>
-  <ion-radio labelPlacement="end">Radio Label</ion-radio>
-</ion-item>
-```
-</TabItem>
-<TabItem value="react">
-
-```tsx
-{/* Basic */}
-
-{/* Before */}
-<IonItem>
-  <IonLabel>Radio Label</IonLabel>
-  <IonRadio></IonRadio>
-</IonItem>
-
-{/* After */}
-<IonItem>
-  <IonRadio>Radio Label</IonRadio>
-</IonItem>
-
-{/* Fixed Labels */}
-
-{/* Before */}
-<IonItem>
-  <IonLabel position="fixed">Radio Label</IonLabel>
-  <IonRadio></IonRadio>
-</IonItem>
-
-{/* After */}
-<IonItem>
-  <IonRadio labelPlacement="fixed">Radio Label</IonRadio>
-</IonItem>
-
-{/* Radio at the start of line, Label at the end of line */}
-
-{/* Before */}
-<IonItem>
-  <IonLabel slot="end">Radio Label</IonLabel>
-  <IonRadio></IonRadio>
-</IonItem>
-
-{/* After */}
-<IonItem>
-  <IonRadio labelPlacement="end">Radio Label</IonRadio>
-</IonItem>
-```
-</TabItem>
-<TabItem value="vue">
-
-```html
-<!-- Basic -->
-
-<!-- Before -->
-<ion-item>
-  <ion-label>Radio Label</ion-label>
-  <ion-radio></ion-radio>
-</ion-item>
-
-<!-- After -->
-<ion-item>
-  <ion-radio>Radio Label</ion-radio>
-</ion-item>
-
-<!-- Fixed Labels -->
-
-<!-- Before -->
-<ion-item>
-  <ion-label position="fixed">Radio Label</ion-label>
-  <ion-radio></ion-radio>
-</ion-item>
-
-<!-- After -->
-<ion-item>
-  <ion-radio label-placement="fixed">Radio Label</ion-radio>
-</ion-item>
-
-<!-- Radio at the start of line, Label at the end of line -->
-
-<!-- Before -->
-<ion-item>
-  <ion-label slot="end">Radio Label</ion-label>
-  <ion-radio></ion-radio>
-</ion-item>
-
-<!-- After -->
-<ion-item>
-  <ion-radio label-placement="end">Radio Label</ion-radio>
-</ion-item>
-```
-</TabItem>
-</Tabs>
-````
diff --git a/static/usage/v8/range/migration/index.md b/static/usage/v8/range/migration/index.md
deleted file mode 100644
index 4025f91bc31..00000000000
--- a/static/usage/v8/range/migration/index.md
+++ /dev/null
@@ -1,256 +0,0 @@
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
-
-````mdx-code-block
-<Tabs
-  groupId="framework"
-  defaultValue="javascript"
-  values={[
-    { value: 'javascript', label: 'JavaScript' },
-    { value: 'angular', label: 'Angular' },
-    { value: 'react', label: 'React' },
-    { value: 'vue', label: 'Vue' },
-  ]
-}>
-<TabItem value="javascript">
-
-```html
-<!-- Basic -->
-
-<!-- Before -->
-<ion-item>
-  <ion-label>Notifications</ion-label>
-  <ion-range></ion-range>
-</ion-item>
-
-<!-- After -->
-<ion-item>
-  <ion-range label="Notifications"></ion-range>
-</ion-item>
-
-<!-- Fixed Labels -->
-
-<!-- Before -->
-<ion-item>
-  <ion-label position="fixed">Notifications</ion-label>
-  <ion-range></ion-range>
-</ion-item>
-
-<!-- After -->
-<ion-item>
-  <ion-range label-placement="fixed" label="Notifications"></ion-range>
-</ion-item>
-
-<!-- Range at the start of line, Label at the end of line -->
-
-<!-- Before -->
-<ion-item>
-  <ion-label slot="end">Notifications</ion-label>
-  <ion-range></ion-range>
-</ion-item>
-
-<!-- After -->
-<ion-item>
-  <ion-range label-placement="end" label="Notifications"></ion-range>
-</ion-item>
-
-<!-- Custom HTML label -->
-
-<!-- Before -->
-<ion-item>
-  <ion-label>
-    <div class="custom-label">Notifications</div>
-  </ion-label>
-  <ion-range></ion-range>
-</ion-item>
-
-<!-- After -->
-<ion-item>
-  <ion-range>
-    <div slot="label" class="custom-label">Notifications</div>
-  </ion-range>
-</ion-item>
-```
-</TabItem>
-<TabItem value="angular">
-
-```html
-<!-- Basic -->
-
-<!-- Before -->
-<ion-item>
-  <ion-label>Notifications</ion-label>
-  <ion-range></ion-range>
-</ion-item>
-
-<!-- After -->
-<ion-item>
-  <ion-range label="Notifications"></ion-range>
-</ion-item>
-
-<!-- Fixed Labels -->
-
-<!-- Before -->
-<ion-item>
-  <ion-label position="fixed">Notifications</ion-label>
-  <ion-range></ion-range>
-</ion-item>
-
-<!-- After -->
-<ion-item>
-  <ion-range labelPlacement="fixed" label="Notifications"></ion-range>
-</ion-item>
-
-<!-- Range at the start of line, Label at the end of line -->
-
-<!-- Before -->
-<ion-item>
-  <ion-label slot="end">Notifications</ion-label>
-  <ion-range></ion-range>
-</ion-item>
-
-<!-- After -->
-<ion-item>
-  <ion-range labelPlacement="end" label="Notifications"></ion-range>
-</ion-item>
-
-<!-- Custom HTML label -->
-
-<!-- Before -->
-<ion-item>
-  <ion-label>
-    <div class="custom-label">Notifications</div>
-  </ion-label>
-  <ion-range></ion-range>
-</ion-item>
-
-<!-- After -->
-<ion-item>
-  <ion-range>
-    <div slot="label" class="custom-label">Notifications</div>
-  </ion-range>
-</ion-item>
-```
-</TabItem>
-<TabItem value="react">
-
-```tsx
-{/* Basic */}
-
-{/* Before */}
-<IonItem>
-  <IonLabel>Notifications</IonLabel>
-  <IonRange></IonRange>
-</IonItem>
-
-{/* After */}
-<IonItem>
-  <IonRange label="Notifications"></IonRange>
-</IonItem>
-
-{/* Fixed Labels */}
-
-{/* Before */}
-<IonItem>
-  <IonLabel position="fixed">Notifications</IonLabel>
-  <IonRange></IonRange>
-</IonItem>
-
-{/* After */}
-<IonItem>
-  <IonRange labelPlacement="fixed" label="Notifications"></IonRange>
-</IonItem>
-
-{/* Range at the start of line, Label at the end of line */}
-
-{/* Before */}
-<IonItem>
-  <IonLabel slot="end">Notifications</IonLabel>
-  <IonRange></IonRange>
-</IonItem>
-
-{/* After */}
-<IonItem>
-  <IonRange labelPlacement="end" label="Notifications"></IonRange>
-</IonItem>
-
-{/* Custom HTML label */}
-
-{/* Before */}
-<IonItem>
-  <IonLabel>
-    <div className="custom-label">Notifications</div>
-  </IonLabel>
-  <IonRange></IonRange>
-</IonItem>
-
-<!-- After -->
-<IonItem>
-  <IonRange>
-    <div slot="label" className="custom-label">Notifications</div>
-  </IonRange>
-</IonItem>
-```
-</TabItem>
-<TabItem value="vue">
-
-```html
-<!-- Basic -->
-
-<!-- Before -->
-<ion-item>
-  <ion-label>Notifications</ion-label>
-  <ion-range></ion-range>
-</ion-item>
-
-<!-- After -->
-<ion-item>
-  <ion-range label="Notifications"></ion-range>
-</ion-item>
-
-<!-- Fixed Labels -->
-
-<!-- Before -->
-<ion-item>
-  <ion-label position="fixed">Notifications</ion-label>
-  <ion-range></ion-range>
-</ion-item>
-
-<!-- After -->
-<ion-item>
-  <ion-range label-placement="fixed" label="Notifications"></ion-range>
-</ion-item>
-
-<!-- Range at the start of line, Label at the end of line -->
-
-<!-- Before -->
-<ion-item>
-  <ion-label slot="end">Notifications</ion-label>
-  <ion-range></ion-range>
-</ion-item>
-
-<!-- After -->
-<ion-item>
-  <ion-range label-placement="end" label="Notifications"></ion-range>
-</ion-item>
-
-<!-- Custom HTML label -->
-
-<!-- Before -->
-<ion-item>
-  <ion-label>
-    <div class="custom-label">Notifications</div>
-  </ion-label>
-  <ion-range></ion-range>
-</ion-item>
-
-<!-- After -->
-<ion-item>
-  <ion-range>
-    <div slot="label" class="custom-label">Notifications</div>
-  </ion-range>
-</ion-item>
-```
-</TabItem>
-</Tabs>
-````
diff --git a/static/usage/v8/select/migration/index.md b/static/usage/v8/select/migration/index.md
deleted file mode 100644
index daf1a3a2612..00000000000
--- a/static/usage/v8/select/migration/index.md
+++ /dev/null
@@ -1,140 +0,0 @@
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
-
-````mdx-code-block
-<Tabs
-  groupId="framework"
-  defaultValue="javascript"
-  values={[
-    { value: 'javascript', label: 'JavaScript' },
-    { value: 'angular', label: 'Angular' },
-    { value: 'react', label: 'React' },
-    { value: 'vue', label: 'Vue' },
-  ]
-}>
-<TabItem value="javascript">
-
-```html
-<!-- Label and Label Position -->
-
-<!-- Before -->
-<ion-item>
-  <ion-label position="floating">Favorite Fruit:</ion-label>
-  <ion-select>...</ion-select>
-</ion-item>
-
-<!-- After -->
-<ion-item>
-  <ion-select label="Favorite Fruit:" label-placement="floating">...</ion-select>
-</ion-item>
-
-
-<!-- Fill -->
-
-<!-- Before -->
-<ion-item fill="outline" shape="round">
-  <ion-label position="floating">Favorite Fruit:</ion-label>
-  <ion-select>...</ion-select>
-</ion-item>
-
-<!-- After -->
-
-<!-- Inputs using `fill` should not be placed in ion-item -->
-<ion-select fill="outline" shape="round" label="Favorite Fruit:" label-placement="floating">...</ion-select>
-```
-</TabItem>
-<TabItem value="angular">
-
-```html
-<!-- Label and Label Position -->
-
-<!-- Before -->
-<ion-item>
-  <ion-label position="floating">Favorite Fruit:</ion-label>
-  <ion-select>...</ion-select>
-</ion-item>
-
-<!-- After -->
-<ion-item>
-  <ion-select label="Favorite Fruit:" labelPlacement="floating">...</ion-select>
-</ion-item>
-
-
-<!-- Fill -->
-
-<!-- Before -->
-<ion-item fill="outline" shape="round">
-  <ion-label position="floating">Favorite Fruit:</ion-label>
-  <ion-select>...</ion-select>
-</ion-item>
-
-<!-- After -->
-
-<!-- Inputs using `fill` should not be placed in ion-item -->
-<ion-select fill="outline" shape="round" label="Favorite Fruit:" labelPlacement="floating">...</ion-select>
-```
-</TabItem>
-<TabItem value="react">
-
-```tsx
-{/* Label and Label Position */}
-
-{/* Before */}
-<IonItem>
-  <IonLabel position="floating">Favorite Fruit:</IonLabel>
-  <IonSelect>...</IonSelect>
-</IonItem>
-
-{/* After */}
-<IonItem>
-  <IonSelect label="Favorite Fruit:" labelPlacement="floating">...</IonSelect>
-</IonItem>
-
-
-{/* Fill */}
-
-{/* Before */}
-<IonItem fill="outline" shape="round">
-  <IonLabel position="floating">Favorite Fruit:</IonLabel>
-  <IonSelect>...</IonSelect>
-</IonItem>
-
-{/* After */}
-
-{/* Inputs using `fill` should not be placed in IonItem */}
-<IonSelect fill="outline" shape="round" label="Favorite Fruit:" labelPlacement="floating">...</IonSelect>
-```
-</TabItem>
-<TabItem value="vue">
-
-```html
-<!-- Label and Label Position -->
-
-<!-- Before -->
-<ion-item>
-  <ion-label position="floating">Favorite Fruit:</ion-label>
-  <ion-select>...</ion-select>
-</ion-item>
-
-<!-- After -->
-<ion-item>
-  <ion-select label="Favorite Fruit:" label-placement="floating">...</ion-select>
-</ion-item>
-
-
-<!-- Fill -->
-
-<!-- Before -->
-<ion-item fill="outline" shape="round">
-  <ion-label position="floating">Favorite Fruit:</ion-label>
-  <ion-select>...</ion-select>
-</ion-item>
-
-<!-- After -->
-
-<!-- Inputs using `fill` should not be placed in ion-item -->
-<ion-select fill="outline" shape="round" label="Favorite Fruit:" label-placement="floating">...</ion-select>
-```
-</TabItem>
-</Tabs>
-````
diff --git a/static/usage/v8/textarea/migration/index.md b/static/usage/v8/textarea/migration/index.md
deleted file mode 100644
index aa820c53b48..00000000000
--- a/static/usage/v8/textarea/migration/index.md
+++ /dev/null
@@ -1,248 +0,0 @@
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
-
-````mdx-code-block
-<Tabs
-  groupId="framework"
-  defaultValue="javascript"
-  values={[
-    { value: 'javascript', label: 'JavaScript' },
-    { value: 'angular', label: 'Angular' },
-    { value: 'react', label: 'React' },
-    { value: 'vue', label: 'Vue' },
-  ]
-}>
-<TabItem value="javascript">
-
-```html
-<!-- Label and Label Position -->
-
-<!-- Before -->
-<ion-item>
-  <ion-label position="floating">Label:</ion-label>
-  <ion-textarea></ion-textarea>
-</ion-item>
-
-<!-- After -->
-<ion-item>
-  <ion-textarea label="Label:" label-placement="floating"></ion-textarea>
-</ion-item>
-
-
-<!-- Fill -->
-
-<!-- Before -->
-<ion-item fill="outline" shape="round">
-  <ion-label position="floating">Label:</ion-label>
-  <ion-textarea></ion-textarea>
-</ion-item>
-
-<!-- After -->
-
-<!-- Textareas using `fill` should not be placed in ion-item -->
-<ion-textarea fill="outline" shape="round" label="Label:" label-placement="floating"></ion-textarea>
-
-<!-- Textarea-specific features on ion-item -->
-
-<!-- Before -->
-<ion-item counter="true">
-  <ion-label position="floating">Label:</ion-label>
-  <ion-textarea maxlength="100"></ion-textarea>
-  <div slot="helper">Enter text</div>
-  <div slot="error">Please enter text</div>
-</ion-item>
-
-<!-- After -->
-
-<!--
-  Metadata such as counters and helper text should not
-  be used when a textarea is in an item/list. If you need to
-  provide more context on a textarea, consider using an ion-note
-  underneath the ion-list.
--->
-
-<ion-textarea
-  label="Label:"
-  counter="true"
-  maxlength="100"
-  helper-text="Enter text"
-  error-text="Please enter text"
-></ion-textarea>
-```
-</TabItem>
-<TabItem value="angular">
-
-```html
-<!-- Label and Label Position -->
-
-<!-- Before -->
-<ion-item>
-  <ion-label position="floating">Label:</ion-label>
-  <ion-textarea></ion-textarea>
-</ion-item>
-
-<!-- After -->
-<ion-item>
-  <ion-textarea label="Label:" labelPlacement="floating"></ion-textarea>
-</ion-item>
-
-
-<!-- Fill -->
-
-<!-- Before -->
-<ion-item fill="outline" shape="round">
-  <ion-label position="floating">Label:</ion-label>
-  <ion-textarea></ion-textarea>
-</ion-item>
-
-<!-- After -->
-
-<!-- Textareas using `fill` should not be placed in ion-item -->
-<ion-textarea fill="outline" shape="round" label="Label:" labelPlacement="floating"></ion-textarea>
-
-<!-- Textarea-specific features on ion-item -->
-
-<!-- Before -->
-<ion-item [counter]="true">
-  <ion-label position="floating">Label:</ion-label>
-  <ion-textarea maxlength="100"></ion-textarea>
-  <div slot="helper">Enter text</div>
-  <div slot="error">Please enter text</div>
-</ion-item>
-
-<!-- After -->
-
-<!--
-  Metadata such as counters and helper text should not
-  be used when a textarea is in an item/list. If you need to
-  provide more context on a textarea, consider using an ion-note
-  underneath the ion-list.
--->
-
-<ion-textarea
-  label="Label:"
-  [counter]="true"
-  maxlength="100"
-  helperText="Enter text"
-  errorText="Please enter text"
-></ion-textarea>
-```
-</TabItem>
-<TabItem value="react">
-
-```tsx
-{/* Label and Label Position */}
-
-{/* Before */}
-<IonItem>
-  <IonLabel position="floating">Label:</IonLabel>
-  <IonTextarea></IonTextarea>
-</IonItem>
-
-{/* After */}
-<IonItem>
-  <IonTextarea label="Label:" labelPlacement="floating"></IonTextarea>
-</IonItem>
-
-
-{/* Fill */}
-
-{/* Before */}
-<IonItem fill="outline" shape="round">
-  <IonLabel position="floating">Label:</IonLabel>
-  <IonTextarea></IonTextarea>
-</IonItem>
-
-{/* After */}
-
-{/* Textareas using `fill` should not be placed in IonItem */}
-<IonTextarea fill="outline" shape="round" label="Label:" labelPlacement="floating"></IonTextarea>
-
-{/* Textarea-specific features on IonItem */}
-
-{/* Before */}
-<IonItem counter={true}>
-  <IonLabel position="floating">Label:</IonLabel>
-  <IonTextarea maxlength="100"></IonTextarea>
-  <div slot="helper">Enter text</div>
-  <div slot="error">Please enter text</div>
-</IonItem>
-
-{/* After */}
-
-{/*
-  Metadata such as counters and helper text should not
-  be used when a textarea is in an item/list. If you need to
-  provide more context on a textarea, consider using an IonNote
-  underneath the IonList.
-*/}
-
-<IonTextarea
-  label="Label:"
-  counter={true}
-  maxlength="100"
-  helperText="Enter text"
-  errorText="Please enter text"
-></IonTextarea>
-```
-</TabItem>
-<TabItem value="vue">
-
-```html
-<!-- Label and Label Position -->
-
-<!-- Before -->
-<ion-item>
-  <ion-label position="floating">Label:</ion-label>
-  <ion-textarea></ion-textarea>
-</ion-item>
-
-<!-- After -->
-<ion-item>
-  <ion-textarea label="Label:" label-placement="floating"></ion-textarea>
-</ion-item>
-
-
-<!-- Fill -->
-
-<!-- Before -->
-<ion-item fill="outline" shape="round">
-  <ion-label position="floating">Label:</ion-label>
-  <ion-textarea></ion-textarea>
-</ion-item>
-
-<!-- After -->
-
-<!-- Textareas using `fill` should not be placed in ion-item -->
-<ion-textarea fill="outline" shape="round" label="Label:" label-placement="floating"></ion-textarea>
-
-<!-- Textarea-specific features on ion-item -->
-
-<!-- Before -->
-<ion-item :counter="true">
-  <ion-label position="floating">Label:</ion-label>
-  <ion-textarea maxlength="100"></ion-textarea>
-  <div slot="helper">Enter text</div>
-  <div slot="error">Please enter text</div>
-</ion-item>
-
-<!-- After -->
-
-<!--
-  Metadata such as counters and helper text should not
-  be used when a textarea is in an item/list. If you need to
-  provide more context on a textarea, consider using an ion-note
-  underneath the ion-list.
--->
-
-<ion-textarea
-  label="Label:"
-  :counter="true"
-  maxlength="100"
-  helper-text="Enter text"
-  error-text="Please enter text"
-></ion-textarea>
-```
-</TabItem>
-</Tabs>
-````
diff --git a/static/usage/v8/toggle/migration/index.md b/static/usage/v8/toggle/migration/index.md
deleted file mode 100644
index a1f855766b8..00000000000
--- a/static/usage/v8/toggle/migration/index.md
+++ /dev/null
@@ -1,188 +0,0 @@
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
-
-````mdx-code-block
-<Tabs
-  groupId="framework"
-  defaultValue="javascript"
-  values={[
-    { value: 'javascript', label: 'JavaScript' },
-    { value: 'angular', label: 'Angular' },
-    { value: 'react', label: 'React' },
-    { value: 'vue', label: 'Vue' },
-  ]
-}>
-<TabItem value="javascript">
-
-```html
-<!-- Basic -->
-
-<!-- Before -->
-<ion-item>
-  <ion-label>Notifications</ion-label>
-  <ion-toggle></ion-toggle>
-</ion-item>
-
-<!-- After -->
-<ion-item>
-  <ion-toggle>Notifications</ion-toggle>
-</ion-item>
-
-<!-- Fixed Labels -->
-
-<!-- Before -->
-<ion-item>
-  <ion-label position="fixed">Notifications</ion-label>
-  <ion-toggle></ion-toggle>
-</ion-item>
-
-<!-- After -->
-<ion-item>
-  <ion-toggle label-placement="fixed">Notifications</ion-toggle>
-</ion-item>
-
-<!-- Toggle at the start of line, Label at the end of line -->
-
-<!-- Before -->
-<ion-item>
-  <ion-label slot="end">Notifications</ion-label>
-  <ion-toggle></ion-toggle>
-</ion-item>
-
-<!-- After -->
-<ion-item>
-  <ion-toggle label-placement="end">Notifications</ion-toggle>
-</ion-item>
-```
-</TabItem>
-<TabItem value="angular">
-
-```html
-<!-- Basic -->
-
-<!-- Before -->
-<ion-item>
-  <ion-label>Notifications</ion-label>
-  <ion-toggle></ion-toggle>
-</ion-item>
-
-<!-- After -->
-<ion-item>
-  <ion-toggle>Notifications</ion-toggle>
-</ion-item>
-
-<!-- Fixed Labels -->
-
-<!-- Before -->
-<ion-item>
-  <ion-label position="fixed">Notifications</ion-label>
-  <ion-toggle></ion-toggle>
-</ion-item>
-
-<!-- After -->
-<ion-item>
-  <ion-toggle label-placement="fixed">Notifications</ion-toggle>
-</ion-item>
-
-<!-- Toggle at the start of line, Label at the end of line -->
-
-<!-- Before -->
-<ion-item>
-  <ion-label slot="end">Notifications</ion-label>
-  <ion-toggle></ion-toggle>
-</ion-item>
-
-<!-- After -->
-<ion-item>
-  <ion-toggle label-placement="end">Notifications</ion-toggle>
-</ion-item>
-```
-</TabItem>
-<TabItem value="react">
-
-```tsx
-{/* Basic */}
-
-{/* Before */}
-<IonItem>
-  <IonLabel>Notifications</IonLabel>
-  <IonToggle></IonToggle>
-</IonItem>
-
-{/* After */}
-<IonItem>
-  <IonToggle>Notifications</IonToggle>
-</IonItem>
-
-{/* Fixed Labels */}
-
-{/* Before */}
-<IonItem>
-  <IonLabel position="fixed">Notifications</IonLabel>
-  <IonToggle></IonToggle>
-</IonItem>
-
-{/* After */}
-<IonItem>
-  <IonToggle labelPlacement="fixed">Notifications</IonToggle>
-</IonItem>
-
-{/* Toggle at the start of line, Label at the end of line */}
-
-{/* Before */}
-<IonItem>
-  <IonLabel slot="end">Notifications</IonLabel>
-  <IonToggle></IonToggle>
-</IonItem>
-
-{/* After */}
-<IonItem>
-  <IonToggle labelPlacement="end">Notifications</IonToggle>
-</IonItem>
-```
-</TabItem>
-<TabItem value="vue">
-
-```html
-<!-- Basic -->
-
-<!-- Before -->
-<ion-item>
-  <ion-label>Notifications</ion-label>
-  <ion-toggle></ion-toggle>
-</ion-item>
-
-<!-- After -->
-<ion-item>
-  <ion-toggle>Notifications</ion-toggle>
-</ion-item>
-
-<!-- Fixed Labels -->
-
-<!-- Before -->
-<ion-item>
-  <ion-label position="fixed">Notifications</ion-label>
-  <ion-toggle></ion-toggle>
-</ion-item>
-
-<!-- After -->
-<ion-item>
-  <ion-toggle label-placement="fixed">Notifications</ion-toggle>
-</ion-item>
-
-<!-- Toggle at the start of line, Label at the end of line -->
-
-<!-- Before -->
-<ion-item>
-  <ion-label slot="end">Notifications</ion-label>
-  <ion-toggle></ion-toggle>
-</ion-item>
-
-<!-- After -->
-<ion-item>
-  <ion-toggle label-placement="end">Notifications</ion-toggle>
-</ion-item>
-```
-</TabItem>
-</Tabs>
-````