+
+
+
+
+
+
+
+```
+
+
+
+```tsx
+{/* Label and Label Position */}
+
+{/* Before */}
+
+ Email:
+
+
+
+{/* After */}
+
+
+
+
+
+{/* Fill */}
+
+{/* Before */}
+
+ Email:
+
+
+
+{/* After */}
+
+{/* Inputs using `fill` should not be placed in IonItem */}
+
+
+{/* Input-specific features on IonItem */}
+
+{/* Before */}
+
+ Email:
+
+
Enter an email
+
Please enter a valid email
+
+
+{/* 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.
+*/}
+
+
+```
+
+
+
+```html
+
+
+
+
+ Email:
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Email:
+
+
+
+
+
+
+
+
+
+
+
+
+ Email:
+
+
Enter an email
+
Please enter a valid email
+
+
+
+
+
+
+
+```
+
+
+````
diff --git a/static/usage/v8/radio/migration/index.md b/static/usage/v8/radio/migration/index.md
new file mode 100644
index 00000000000..4c0477f1e4a
--- /dev/null
+++ b/static/usage/v8/radio/migration/index.md
@@ -0,0 +1,188 @@
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+
+````mdx-code-block
+
+
+
+```html
+
+
+
+
+ Radio Label
+
+
+
+
+
+ Radio Label
+
+
+
+
+
+
+ Radio Label
+
+
+
+
+
+ Radio Label
+
+
+
+
+
+
+ Radio Label
+
+
+
+
+
+ Radio Label
+
+```
+
+
+
+```html
+
+
+
+
+ Radio Label
+
+
+
+
+
+ Radio Label
+
+
+
+
+
+
+ Radio Label
+
+
+
+
+
+ Radio Label
+
+
+
+
+
+
+ Radio Label
+
+
+
+
+
+ Radio Label
+
+```
+
+
+
+```tsx
+{/* Basic */}
+
+{/* Before */}
+
+ Radio Label
+
+
+
+{/* After */}
+
+ Radio Label
+
+
+{/* Fixed Labels */}
+
+{/* Before */}
+
+ Radio Label
+
+
+
+{/* After */}
+
+ Radio Label
+
+
+{/* Radio at the start of line, Label at the end of line */}
+
+{/* Before */}
+
+ Radio Label
+
+
+
+{/* After */}
+
+ Radio Label
+
+```
+
+
+
+```html
+
+
+
+
+ Radio Label
+
+
+
+
+
+ Radio Label
+
+
+
+
+
+
+ Radio Label
+
+
+
+
+
+ Radio Label
+
+
+
+
+
+
+ Radio Label
+
+
+
+
+
+ Radio Label
+
+```
+
+
+````
diff --git a/static/usage/v8/range/migration/index.md b/static/usage/v8/range/migration/index.md
new file mode 100644
index 00000000000..4025f91bc31
--- /dev/null
+++ b/static/usage/v8/range/migration/index.md
@@ -0,0 +1,256 @@
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+
+````mdx-code-block
+
+
+
+```html
+
+
+
+
+ Notifications
+
+
+
+
+
+
+
+
+
+
+
+
+ Notifications
+
+
+
+
+
+
+
+
+
+
+
+
+ Notifications
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+
+
+```tsx
+{/* Label and Label Position */}
+
+{/* Before */}
+
+ Label:
+
+
+
+{/* After */}
+
+
+
+
+
+{/* Fill */}
+
+{/* Before */}
+
+ Label:
+
+
+
+{/* After */}
+
+{/* Textareas using `fill` should not be placed in IonItem */}
+
+
+{/* Textarea-specific features on IonItem */}
+
+{/* Before */}
+
+ Label:
+
+
Enter text
+
Please enter text
+
+
+{/* 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.
+*/}
+
+
+```
+
+
+
+```html
+
+
+
+
+ Label:
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Label:
+
+
+
+
+
+
+
+
+
+
+
+
+ Label:
+
+