diff --git a/docs/api/radio.md b/docs/api/radio.md
index 3cd52c13a4b..62a86923dda 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
+## 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/v8/radio/label-wrap/index.md';
+
+
+
## 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/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
+
+
+
+ Truncated with ellipsis by default
+
+
+ Wrapping with text-wrap applied to label shadow part
+
+
+
+
Wrapping with ion-text-wrap class applied wrapper element
+
+
+
+ Truncated with ellipsis by default
+
+
+
+ Wrapping with text-wrap applied to label shadow part
+
+
+
+
+
Wrapping with ion-text-wrap class applied wrapper element
+
+
+
+
+
+
+
+
+
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';
+
+
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..1bce1a8fd7a
--- /dev/null
+++ b/static/usage/v8/radio/label-wrap/javascript.md
@@ -0,0 +1,27 @@
+```html
+
+
+
+ Truncated with ellipsis by default
+
+
+ Wrapping with text-wrap applied to label shadow part
+
+
+
+
Wrapping with ion-text-wrap class applied wrapper element
+
+
+
+
+
+
+```
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..ec109440a50
--- /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) {
+ white-space: normal;
+}
+```
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..25b4d4618dc
--- /dev/null
+++ b/static/usage/v8/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 (
+
+
+
+ Truncated with ellipsis by default
+
+
+
+ Wrapping with text-wrap applied to label shadow part
+
+
+
+
+
Wrapping with ion-text-wrap class applied wrapper element
+
+
+
+
+ );
+}
+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..ecabbadb8b1
--- /dev/null
+++ b/static/usage/v8/radio/label-wrap/vue.md
@@ -0,0 +1,38 @@
+```html
+
+
+
+
+ Truncated with ellipsis by default
+
+
+ Wrapping with text-wrap applied to label shadow part
+
+
+
+
Wrapping with ion-text-wrap class applied wrapper element
+
+
+
+
+
+
+
+
+
+```
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
+## 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';
+
+
+
## 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.