From 2a77aed079fd354cd6cb1e6faecedffcb95a3b3e Mon Sep 17 00:00:00 2001
From: soundproofboot <colinedwinbares@gmail.com>
Date: Thu, 31 Jul 2025 16:37:17 -0500
Subject: [PATCH 1/4] docs(radio): add example for wrapping label text

---
 docs/api/radio.md                             |  8 ++++
 .../angular/example_component_css.md          |  9 ++++
 .../angular/example_component_html.md         | 12 ++++++
 .../angular/example_component_ts.md           | 12 ++++++
 static/usage/v8/radio/label-wrap/demo.html    | 41 +++++++++++++++++++
 static/usage/v8/radio/label-wrap/index.md     | 34 +++++++++++++++
 .../usage/v8/radio/label-wrap/javascript.md   | 22 ++++++++++
 .../v8/radio/label-wrap/react/main_css.md     |  9 ++++
 .../v8/radio/label-wrap/react/main_tsx.md     | 24 +++++++++++
 static/usage/v8/radio/label-wrap/vue.md       | 33 +++++++++++++++
 10 files changed, 204 insertions(+)
 create mode 100644 static/usage/v8/radio/label-wrap/angular/example_component_css.md
 create mode 100644 static/usage/v8/radio/label-wrap/angular/example_component_html.md
 create mode 100644 static/usage/v8/radio/label-wrap/angular/example_component_ts.md
 create mode 100644 static/usage/v8/radio/label-wrap/demo.html
 create mode 100644 static/usage/v8/radio/label-wrap/index.md
 create mode 100644 static/usage/v8/radio/label-wrap/javascript.md
 create mode 100644 static/usage/v8/radio/label-wrap/react/main_css.md
 create mode 100644 static/usage/v8/radio/label-wrap/react/main_tsx.md
 create mode 100644 static/usage/v8/radio/label-wrap/vue.md

diff --git a/docs/api/radio.md b/docs/api/radio.md
index 3cd52c13a4b..52194b92ce5 100644
--- a/docs/api/radio.md
+++ b/docs/api/radio.md
@@ -36,6 +36,14 @@ import LabelPlacement from '@site/static/usage/v8/radio/label-placement/index.md
 
 <LabelPlacement />
 
+## Label Wrapping
+
+Regardless of label placement, long text will not wrap by default. If the width of the radio is constrained, overflowing text will be truncated with an ellipsis. The `label` shadow part can be styled with the `::part()` selector.
+
+import LabelWrap from '@site/static/usage/v8/radio/label-wrap/index.md';
+
+<LabelWrap />
+
 ## Object Value References
 
 By default, the radio group uses strict equality (`===`) to determine if an option is selected. This can be overridden by providing a property name or a function to the `compareWith` property.
diff --git a/static/usage/v8/radio/label-wrap/angular/example_component_css.md b/static/usage/v8/radio/label-wrap/angular/example_component_css.md
new file mode 100644
index 00000000000..717b5e49bc0
--- /dev/null
+++ b/static/usage/v8/radio/label-wrap/angular/example_component_css.md
@@ -0,0 +1,9 @@
+```css
+ion-list {
+  width: 250px;
+}
+
+ion-radio.wrapped::part(label) {
+  text-wrap: wrap;
+}
+```
diff --git a/static/usage/v8/radio/label-wrap/angular/example_component_html.md b/static/usage/v8/radio/label-wrap/angular/example_component_html.md
new file mode 100644
index 00000000000..15ae87dc743
--- /dev/null
+++ b/static/usage/v8/radio/label-wrap/angular/example_component_html.md
@@ -0,0 +1,12 @@
+```html
+<ion-list>
+  <ion-radio-group value="truncated">
+    <ion-item>
+      <ion-radio value="truncated">Truncated with ellipsis by default</ion-radio>
+    </ion-item>
+    <ion-item>
+      <ion-radio value="wrapped" class="wrapped">`text-wrap` applied to `label` shadow part</ion-radio>
+    </ion-item>
+  </ion-radio-group>
+</ion-list>
+```
diff --git a/static/usage/v8/radio/label-wrap/angular/example_component_ts.md b/static/usage/v8/radio/label-wrap/angular/example_component_ts.md
new file mode 100644
index 00000000000..151a9f44f80
--- /dev/null
+++ b/static/usage/v8/radio/label-wrap/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonItem, IonList, IonRadio, IonRadioGroup } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonItem, IonList, IonRadio, IonRadioGroup],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/radio/label-wrap/demo.html b/static/usage/v8/radio/label-wrap/demo.html
new file mode 100644
index 00000000000..73c64c7f4a3
--- /dev/null
+++ b/static/usage/v8/radio/label-wrap/demo.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Radio</title>
+    <link rel="stylesheet" href="../../common.css" />
+    <script src="../../common.js"></script>
+    <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@8/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@8/css/ionic.bundle.css" />
+
+    <style>
+      ion-list {
+        width: 250px;
+      }
+
+      ion-radio.wrapped::part(label) {
+        text-wrap: wrap;
+      }
+    </style>
+  </head>
+
+  <body>
+    <ion-app>
+      <ion-content>
+        <div class="container">
+          <ion-list>
+            <ion-radio-group value="truncated">
+              <ion-item>
+                <ion-radio value="truncated">Truncated with ellipsis by default</ion-radio>
+              </ion-item>
+              <ion-item>
+                <ion-radio value="wrapped" class="wrapped">`text-wrap` applied to `label` shadow part</ion-radio>
+              </ion-item>
+            </ion-radio-group>
+          </ion-list>
+        </div>
+      </ion-content>
+    </ion-app>
+  </body>
+</html>
diff --git a/static/usage/v8/radio/label-wrap/index.md b/static/usage/v8/radio/label-wrap/index.md
new file mode 100644
index 00000000000..95f743485e5
--- /dev/null
+++ b/static/usage/v8/radio/label-wrap/index.md
@@ -0,0 +1,34 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+
+import react_main_tsx from './react/main_tsx.md';
+import react_main_css from './react/main_css.md';
+
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_css from './angular/example_component_css.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+<Playground
+  version="8"
+  code={{
+    javascript,
+    react: {
+      files: {
+        'src/main.tsx': react_main_tsx,
+        'src/main.css': react_main_css,
+      },
+    },
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.css': angular_example_component_css,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
+  src="usage/v8/radio/label-wrap/demo.html"
+/>
diff --git a/static/usage/v8/radio/label-wrap/javascript.md b/static/usage/v8/radio/label-wrap/javascript.md
new file mode 100644
index 00000000000..953d7644394
--- /dev/null
+++ b/static/usage/v8/radio/label-wrap/javascript.md
@@ -0,0 +1,22 @@
+```html
+<ion-list>
+  <ion-radio-group value="truncated">
+    <ion-item>
+      <ion-radio value="truncated">Truncated with ellipsis by default</ion-radio>
+    </ion-item>
+    <ion-item>
+      <ion-radio value="wrapped" class="wrapped">`text-wrap` applied to `label` shadow part</ion-radio>
+    </ion-item>
+  </ion-radio-group>
+</ion-list>
+
+<style>
+  ion-list {
+    width: 250px;
+  }
+
+  ion-radio.wrapped::part(label) {
+    text-wrap: wrap;
+  }
+</style>
+```
diff --git a/static/usage/v8/radio/label-wrap/react/main_css.md b/static/usage/v8/radio/label-wrap/react/main_css.md
new file mode 100644
index 00000000000..717b5e49bc0
--- /dev/null
+++ b/static/usage/v8/radio/label-wrap/react/main_css.md
@@ -0,0 +1,9 @@
+```css
+ion-list {
+  width: 250px;
+}
+
+ion-radio.wrapped::part(label) {
+  text-wrap: wrap;
+}
+```
diff --git a/static/usage/v8/radio/label-wrap/react/main_tsx.md b/static/usage/v8/radio/label-wrap/react/main_tsx.md
new file mode 100644
index 00000000000..8dbffdfb4e0
--- /dev/null
+++ b/static/usage/v8/radio/label-wrap/react/main_tsx.md
@@ -0,0 +1,24 @@
+```tsx
+import React from 'react';
+import { IonList, IonItem, IonRadio, IonRadioGroup } from '@ionic/react';
+
+import './main.css';
+
+function Example() {
+  return (
+    <IonList>
+      <IonRadioGroup value="truncated">
+        <IonItem>
+          <IonRadio value="truncated">Truncated with ellipsis by default</IonRadio>
+        </IonItem>
+        <IonItem>
+          <IonRadio value="wrapped" className="wrapped">
+            `text-wrap` applied to `label` shadow part
+          </IonRadio>
+        </IonItem>
+      </IonRadioGroup>
+    </IonList>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v8/radio/label-wrap/vue.md b/static/usage/v8/radio/label-wrap/vue.md
new file mode 100644
index 00000000000..d92af41ae8f
--- /dev/null
+++ b/static/usage/v8/radio/label-wrap/vue.md
@@ -0,0 +1,33 @@
+```html
+<template>
+  <ion-list>
+    <ion-radio-group value="truncated">
+      <ion-item>
+        <ion-radio value="truncated">Truncated with ellipsis by default</ion-radio>
+      </ion-item>
+      <ion-item>
+        <ion-radio value="wrapped" class="wrapped">`text-wrap` applied to `label` shadow part</ion-radio>
+      </ion-item>
+    </ion-radio-group>
+  </ion-list>
+</template>
+
+<script lang="ts">
+  import { IonList, IonItem, IonRadio, IonRadioGroup } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: { IonList, IonItem, IonRadio, IonRadioGroup },
+  });
+</script>
+
+<style scoped>
+  ion-list {
+    width: 250px;
+  }
+
+  ion-radio.wrapped::part(label) {
+    text-wrap: wrap;
+  }
+</style>
+```

From 4e03158a0c0b1c7c71769755c54c7918a01025d6 Mon Sep 17 00:00:00 2001
From: soundproofboot <colinedwinbares@gmail.com>
Date: Wed, 6 Aug 2025 12:12:50 -0500
Subject: [PATCH 2/4] docs(radio): update wrapping example to include
 ion-text-wrap utility class

---
 .../radio/label-wrap/angular/example_component_html.md   | 7 ++++++-
 static/usage/v8/radio/label-wrap/demo.html               | 9 ++++++++-
 static/usage/v8/radio/label-wrap/javascript.md           | 7 ++++++-
 static/usage/v8/radio/label-wrap/react/main_tsx.md       | 9 +++++++--
 static/usage/v8/radio/label-wrap/vue.md                  | 7 ++++++-
 5 files changed, 33 insertions(+), 6 deletions(-)

diff --git a/static/usage/v8/radio/label-wrap/angular/example_component_html.md b/static/usage/v8/radio/label-wrap/angular/example_component_html.md
index 15ae87dc743..0837d088fab 100644
--- a/static/usage/v8/radio/label-wrap/angular/example_component_html.md
+++ b/static/usage/v8/radio/label-wrap/angular/example_component_html.md
@@ -5,7 +5,12 @@
       <ion-radio value="truncated">Truncated with ellipsis by default</ion-radio>
     </ion-item>
     <ion-item>
-      <ion-radio value="wrapped" class="wrapped">`text-wrap` applied to `label` shadow part</ion-radio>
+      <ion-radio value="wrapped-part" class="wrapped">Wrapping with text-wrap applied to label shadow part</ion-radio>
+    </ion-item>
+    <ion-item>
+      <ion-radio value="wrapped-div">
+        <div class="ion-text-wrap">Wrapping with ion-text-wrap class applied wrapper element</div>
+      </ion-radio>
     </ion-item>
   </ion-radio-group>
 </ion-list>
diff --git a/static/usage/v8/radio/label-wrap/demo.html b/static/usage/v8/radio/label-wrap/demo.html
index 73c64c7f4a3..24105fff9db 100644
--- a/static/usage/v8/radio/label-wrap/demo.html
+++ b/static/usage/v8/radio/label-wrap/demo.html
@@ -30,7 +30,14 @@
                 <ion-radio value="truncated">Truncated with ellipsis by default</ion-radio>
               </ion-item>
               <ion-item>
-                <ion-radio value="wrapped" class="wrapped">`text-wrap` applied to `label` shadow part</ion-radio>
+                <ion-radio value="wrapped-part" class="wrapped">
+                  Wrapping with text-wrap applied to label shadow part
+                </ion-radio>
+              </ion-item>
+              <ion-item>
+                <ion-radio value="wrapped-div">
+                  <div class="ion-text-wrap">Wrapping with ion-text-wrap class applied wrapper element</div>
+                </ion-radio>
               </ion-item>
             </ion-radio-group>
           </ion-list>
diff --git a/static/usage/v8/radio/label-wrap/javascript.md b/static/usage/v8/radio/label-wrap/javascript.md
index 953d7644394..3191c3d27b5 100644
--- a/static/usage/v8/radio/label-wrap/javascript.md
+++ b/static/usage/v8/radio/label-wrap/javascript.md
@@ -5,7 +5,12 @@
       <ion-radio value="truncated">Truncated with ellipsis by default</ion-radio>
     </ion-item>
     <ion-item>
-      <ion-radio value="wrapped" class="wrapped">`text-wrap` applied to `label` shadow part</ion-radio>
+      <ion-radio value="wrapped-part" class="wrapped">Wrapping with text-wrap applied to label shadow part</ion-radio>
+    </ion-item>
+    <ion-item>
+      <ion-radio value="wrapped-div">
+        <div class="ion-text-wrap">Wrapping with ion-text-wrap class applied wrapper element</div>
+      </ion-radio>
     </ion-item>
   </ion-radio-group>
 </ion-list>
diff --git a/static/usage/v8/radio/label-wrap/react/main_tsx.md b/static/usage/v8/radio/label-wrap/react/main_tsx.md
index 8dbffdfb4e0..25b4d4618dc 100644
--- a/static/usage/v8/radio/label-wrap/react/main_tsx.md
+++ b/static/usage/v8/radio/label-wrap/react/main_tsx.md
@@ -12,8 +12,13 @@ function Example() {
           <IonRadio value="truncated">Truncated with ellipsis by default</IonRadio>
         </IonItem>
         <IonItem>
-          <IonRadio value="wrapped" className="wrapped">
-            `text-wrap` applied to `label` shadow part
+          <IonRadio value="wrapped-part" className="wrapped">
+            Wrapping with text-wrap applied to label shadow part
+          </IonRadio>
+        </IonItem>
+        <IonItem>
+          <IonRadio value="wrapped-div">
+            <div className="ion-text-wrap">Wrapping with ion-text-wrap class applied wrapper element</div>
           </IonRadio>
         </IonItem>
       </IonRadioGroup>
diff --git a/static/usage/v8/radio/label-wrap/vue.md b/static/usage/v8/radio/label-wrap/vue.md
index d92af41ae8f..b8fe29c8236 100644
--- a/static/usage/v8/radio/label-wrap/vue.md
+++ b/static/usage/v8/radio/label-wrap/vue.md
@@ -6,7 +6,12 @@
         <ion-radio value="truncated">Truncated with ellipsis by default</ion-radio>
       </ion-item>
       <ion-item>
-        <ion-radio value="wrapped" class="wrapped">`text-wrap` applied to `label` shadow part</ion-radio>
+        <ion-radio value="wrapped-part" class="wrapped">Wrapping with text-wrap applied to label shadow part</ion-radio>
+      </ion-item>
+      <ion-item>
+        <ion-radio value="wrapped-div">
+          <div class="ion-text-wrap">Wrapping with ion-text-wrap class applied wrapper element</div>
+        </ion-radio>
       </ion-item>
     </ion-radio-group>
   </ion-list>

From 3a4b4ed5fc90bf48f463b4f215a83faa237587c2 Mon Sep 17 00:00:00 2001
From: Brandy Smith <6577830+brandyscarney@users.noreply.github.com>
Date: Fri, 8 Aug 2025 15:56:40 -0400
Subject: [PATCH 3/4] docs(radio): small updates for wrapping demo

---
 docs/api/radio.md                                               | 2 +-
 .../usage/v8/radio/label-wrap/angular/example_component_css.md  | 2 +-
 static/usage/v8/radio/label-wrap/demo.html                      | 2 +-
 static/usage/v8/radio/label-wrap/javascript.md                  | 2 +-
 static/usage/v8/radio/label-wrap/react/main_css.md              | 2 +-
 static/usage/v8/radio/label-wrap/vue.md                         | 2 +-
 6 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/docs/api/radio.md b/docs/api/radio.md
index 52194b92ce5..62a86923dda 100644
--- a/docs/api/radio.md
+++ b/docs/api/radio.md
@@ -38,7 +38,7 @@ import LabelPlacement from '@site/static/usage/v8/radio/label-placement/index.md
 
 ## Label Wrapping
 
-Regardless of label placement, long text will not wrap by default. If the width of the radio is constrained, overflowing text will be truncated with an ellipsis. The `label` shadow part can be styled with the `::part()` selector.
+Regardless of label placement, long text will not wrap by default. If the width of the radio is constrained, overflowing text will be truncated with an ellipsis. You can enable text wrapping by adding the `ion-text-wrap` class to a wrapper around the radio text or styling the `label` shadow part using the `::part()` selector.
 
 import LabelWrap from '@site/static/usage/v8/radio/label-wrap/index.md';
 
diff --git a/static/usage/v8/radio/label-wrap/angular/example_component_css.md b/static/usage/v8/radio/label-wrap/angular/example_component_css.md
index 717b5e49bc0..ec109440a50 100644
--- a/static/usage/v8/radio/label-wrap/angular/example_component_css.md
+++ b/static/usage/v8/radio/label-wrap/angular/example_component_css.md
@@ -4,6 +4,6 @@ ion-list {
 }
 
 ion-radio.wrapped::part(label) {
-  text-wrap: wrap;
+  white-space: normal;
 }
 ```
diff --git a/static/usage/v8/radio/label-wrap/demo.html b/static/usage/v8/radio/label-wrap/demo.html
index 24105fff9db..6f8f030bcf2 100644
--- a/static/usage/v8/radio/label-wrap/demo.html
+++ b/static/usage/v8/radio/label-wrap/demo.html
@@ -15,7 +15,7 @@
       }
 
       ion-radio.wrapped::part(label) {
-        text-wrap: wrap;
+        white-space: normal;
       }
     </style>
   </head>
diff --git a/static/usage/v8/radio/label-wrap/javascript.md b/static/usage/v8/radio/label-wrap/javascript.md
index 3191c3d27b5..1bce1a8fd7a 100644
--- a/static/usage/v8/radio/label-wrap/javascript.md
+++ b/static/usage/v8/radio/label-wrap/javascript.md
@@ -21,7 +21,7 @@
   }
 
   ion-radio.wrapped::part(label) {
-    text-wrap: wrap;
+    white-space: normal;
   }
 </style>
 ```
diff --git a/static/usage/v8/radio/label-wrap/react/main_css.md b/static/usage/v8/radio/label-wrap/react/main_css.md
index 717b5e49bc0..ec109440a50 100644
--- a/static/usage/v8/radio/label-wrap/react/main_css.md
+++ b/static/usage/v8/radio/label-wrap/react/main_css.md
@@ -4,6 +4,6 @@ ion-list {
 }
 
 ion-radio.wrapped::part(label) {
-  text-wrap: wrap;
+  white-space: normal;
 }
 ```
diff --git a/static/usage/v8/radio/label-wrap/vue.md b/static/usage/v8/radio/label-wrap/vue.md
index b8fe29c8236..ecabbadb8b1 100644
--- a/static/usage/v8/radio/label-wrap/vue.md
+++ b/static/usage/v8/radio/label-wrap/vue.md
@@ -32,7 +32,7 @@
   }
 
   ion-radio.wrapped::part(label) {
-    text-wrap: wrap;
+    white-space: normal;
   }
 </style>
 ```

From 69a4d2cb4020693f59ed4e693c1ffd468641233a Mon Sep 17 00:00:00 2001
From: Brandy Smith <6577830+brandyscarney@users.noreply.github.com>
Date: Fri, 8 Aug 2025 16:01:53 -0400
Subject: [PATCH 4/4] docs(radio): copy example to v7 docs

---
 .../angular/example_component_css.md          |  9 ++++
 .../angular/example_component_html.md         | 17 +++++++
 .../angular/example_component_ts.md           | 12 +++++
 static/usage/v7/radio/label-wrap/demo.html    | 48 +++++++++++++++++++
 static/usage/v7/radio/label-wrap/index.md     | 34 +++++++++++++
 .../usage/v7/radio/label-wrap/javascript.md   | 27 +++++++++++
 .../v7/radio/label-wrap/react/main_css.md     |  9 ++++
 .../v7/radio/label-wrap/react/main_tsx.md     | 29 +++++++++++
 static/usage/v7/radio/label-wrap/vue.md       | 38 +++++++++++++++
 versioned_docs/version-v7/api/radio.md        |  8 ++++
 10 files changed, 231 insertions(+)
 create mode 100644 static/usage/v7/radio/label-wrap/angular/example_component_css.md
 create mode 100644 static/usage/v7/radio/label-wrap/angular/example_component_html.md
 create mode 100644 static/usage/v7/radio/label-wrap/angular/example_component_ts.md
 create mode 100644 static/usage/v7/radio/label-wrap/demo.html
 create mode 100644 static/usage/v7/radio/label-wrap/index.md
 create mode 100644 static/usage/v7/radio/label-wrap/javascript.md
 create mode 100644 static/usage/v7/radio/label-wrap/react/main_css.md
 create mode 100644 static/usage/v7/radio/label-wrap/react/main_tsx.md
 create mode 100644 static/usage/v7/radio/label-wrap/vue.md

diff --git a/static/usage/v7/radio/label-wrap/angular/example_component_css.md b/static/usage/v7/radio/label-wrap/angular/example_component_css.md
new file mode 100644
index 00000000000..ec109440a50
--- /dev/null
+++ b/static/usage/v7/radio/label-wrap/angular/example_component_css.md
@@ -0,0 +1,9 @@
+```css
+ion-list {
+  width: 250px;
+}
+
+ion-radio.wrapped::part(label) {
+  white-space: normal;
+}
+```
diff --git a/static/usage/v7/radio/label-wrap/angular/example_component_html.md b/static/usage/v7/radio/label-wrap/angular/example_component_html.md
new file mode 100644
index 00000000000..0837d088fab
--- /dev/null
+++ b/static/usage/v7/radio/label-wrap/angular/example_component_html.md
@@ -0,0 +1,17 @@
+```html
+<ion-list>
+  <ion-radio-group value="truncated">
+    <ion-item>
+      <ion-radio value="truncated">Truncated with ellipsis by default</ion-radio>
+    </ion-item>
+    <ion-item>
+      <ion-radio value="wrapped-part" class="wrapped">Wrapping with text-wrap applied to label shadow part</ion-radio>
+    </ion-item>
+    <ion-item>
+      <ion-radio value="wrapped-div">
+        <div class="ion-text-wrap">Wrapping with ion-text-wrap class applied wrapper element</div>
+      </ion-radio>
+    </ion-item>
+  </ion-radio-group>
+</ion-list>
+```
diff --git a/static/usage/v7/radio/label-wrap/angular/example_component_ts.md b/static/usage/v7/radio/label-wrap/angular/example_component_ts.md
new file mode 100644
index 00000000000..151a9f44f80
--- /dev/null
+++ b/static/usage/v7/radio/label-wrap/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonItem, IonList, IonRadio, IonRadioGroup } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonItem, IonList, IonRadio, IonRadioGroup],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/radio/label-wrap/demo.html b/static/usage/v7/radio/label-wrap/demo.html
new file mode 100644
index 00000000000..6f8f030bcf2
--- /dev/null
+++ b/static/usage/v7/radio/label-wrap/demo.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Radio</title>
+    <link rel="stylesheet" href="../../common.css" />
+    <script src="../../common.js"></script>
+    <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@8/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@8/css/ionic.bundle.css" />
+
+    <style>
+      ion-list {
+        width: 250px;
+      }
+
+      ion-radio.wrapped::part(label) {
+        white-space: normal;
+      }
+    </style>
+  </head>
+
+  <body>
+    <ion-app>
+      <ion-content>
+        <div class="container">
+          <ion-list>
+            <ion-radio-group value="truncated">
+              <ion-item>
+                <ion-radio value="truncated">Truncated with ellipsis by default</ion-radio>
+              </ion-item>
+              <ion-item>
+                <ion-radio value="wrapped-part" class="wrapped">
+                  Wrapping with text-wrap applied to label shadow part
+                </ion-radio>
+              </ion-item>
+              <ion-item>
+                <ion-radio value="wrapped-div">
+                  <div class="ion-text-wrap">Wrapping with ion-text-wrap class applied wrapper element</div>
+                </ion-radio>
+              </ion-item>
+            </ion-radio-group>
+          </ion-list>
+        </div>
+      </ion-content>
+    </ion-app>
+  </body>
+</html>
diff --git a/static/usage/v7/radio/label-wrap/index.md b/static/usage/v7/radio/label-wrap/index.md
new file mode 100644
index 00000000000..95f743485e5
--- /dev/null
+++ b/static/usage/v7/radio/label-wrap/index.md
@@ -0,0 +1,34 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+
+import react_main_tsx from './react/main_tsx.md';
+import react_main_css from './react/main_css.md';
+
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_css from './angular/example_component_css.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+<Playground
+  version="8"
+  code={{
+    javascript,
+    react: {
+      files: {
+        'src/main.tsx': react_main_tsx,
+        'src/main.css': react_main_css,
+      },
+    },
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.css': angular_example_component_css,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
+  src="usage/v8/radio/label-wrap/demo.html"
+/>
diff --git a/static/usage/v7/radio/label-wrap/javascript.md b/static/usage/v7/radio/label-wrap/javascript.md
new file mode 100644
index 00000000000..1bce1a8fd7a
--- /dev/null
+++ b/static/usage/v7/radio/label-wrap/javascript.md
@@ -0,0 +1,27 @@
+```html
+<ion-list>
+  <ion-radio-group value="truncated">
+    <ion-item>
+      <ion-radio value="truncated">Truncated with ellipsis by default</ion-radio>
+    </ion-item>
+    <ion-item>
+      <ion-radio value="wrapped-part" class="wrapped">Wrapping with text-wrap applied to label shadow part</ion-radio>
+    </ion-item>
+    <ion-item>
+      <ion-radio value="wrapped-div">
+        <div class="ion-text-wrap">Wrapping with ion-text-wrap class applied wrapper element</div>
+      </ion-radio>
+    </ion-item>
+  </ion-radio-group>
+</ion-list>
+
+<style>
+  ion-list {
+    width: 250px;
+  }
+
+  ion-radio.wrapped::part(label) {
+    white-space: normal;
+  }
+</style>
+```
diff --git a/static/usage/v7/radio/label-wrap/react/main_css.md b/static/usage/v7/radio/label-wrap/react/main_css.md
new file mode 100644
index 00000000000..ec109440a50
--- /dev/null
+++ b/static/usage/v7/radio/label-wrap/react/main_css.md
@@ -0,0 +1,9 @@
+```css
+ion-list {
+  width: 250px;
+}
+
+ion-radio.wrapped::part(label) {
+  white-space: normal;
+}
+```
diff --git a/static/usage/v7/radio/label-wrap/react/main_tsx.md b/static/usage/v7/radio/label-wrap/react/main_tsx.md
new file mode 100644
index 00000000000..25b4d4618dc
--- /dev/null
+++ b/static/usage/v7/radio/label-wrap/react/main_tsx.md
@@ -0,0 +1,29 @@
+```tsx
+import React from 'react';
+import { IonList, IonItem, IonRadio, IonRadioGroup } from '@ionic/react';
+
+import './main.css';
+
+function Example() {
+  return (
+    <IonList>
+      <IonRadioGroup value="truncated">
+        <IonItem>
+          <IonRadio value="truncated">Truncated with ellipsis by default</IonRadio>
+        </IonItem>
+        <IonItem>
+          <IonRadio value="wrapped-part" className="wrapped">
+            Wrapping with text-wrap applied to label shadow part
+          </IonRadio>
+        </IonItem>
+        <IonItem>
+          <IonRadio value="wrapped-div">
+            <div className="ion-text-wrap">Wrapping with ion-text-wrap class applied wrapper element</div>
+          </IonRadio>
+        </IonItem>
+      </IonRadioGroup>
+    </IonList>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/radio/label-wrap/vue.md b/static/usage/v7/radio/label-wrap/vue.md
new file mode 100644
index 00000000000..ecabbadb8b1
--- /dev/null
+++ b/static/usage/v7/radio/label-wrap/vue.md
@@ -0,0 +1,38 @@
+```html
+<template>
+  <ion-list>
+    <ion-radio-group value="truncated">
+      <ion-item>
+        <ion-radio value="truncated">Truncated with ellipsis by default</ion-radio>
+      </ion-item>
+      <ion-item>
+        <ion-radio value="wrapped-part" class="wrapped">Wrapping with text-wrap applied to label shadow part</ion-radio>
+      </ion-item>
+      <ion-item>
+        <ion-radio value="wrapped-div">
+          <div class="ion-text-wrap">Wrapping with ion-text-wrap class applied wrapper element</div>
+        </ion-radio>
+      </ion-item>
+    </ion-radio-group>
+  </ion-list>
+</template>
+
+<script lang="ts">
+  import { IonList, IonItem, IonRadio, IonRadioGroup } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: { IonList, IonItem, IonRadio, IonRadioGroup },
+  });
+</script>
+
+<style scoped>
+  ion-list {
+    width: 250px;
+  }
+
+  ion-radio.wrapped::part(label) {
+    white-space: normal;
+  }
+</style>
+```
diff --git a/versioned_docs/version-v7/api/radio.md b/versioned_docs/version-v7/api/radio.md
index c470a326ed6..8cec4707042 100644
--- a/versioned_docs/version-v7/api/radio.md
+++ b/versioned_docs/version-v7/api/radio.md
@@ -39,6 +39,14 @@ import LabelPlacement from '@site/static/usage/v7/radio/label-placement/index.md
 
 <LabelPlacement />
 
+## Label Wrapping
+
+Regardless of label placement, long text will not wrap by default. If the width of the radio is constrained, overflowing text will be truncated with an ellipsis. You can enable text wrapping by adding the `ion-text-wrap` class to a wrapper around the radio text or styling the `label` shadow part using the `::part()` selector.
+
+import LabelWrap from '@site/static/usage/v7/radio/label-wrap/index.md';
+
+<LabelWrap />
+
 ## Object Value References
 
 By default, the radio group uses strict equality (`===`) to determine if an option is selected. This can be overridden by providing a property name or a function to the `compareWith` property.