ionic-team · brandyscarney · Aug 8, 2025 · Jul 31, 2025 · Aug 6, 2025 · Aug 8, 2025
@@ -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.

@@ -0,0 +1,9 @@
+```css
+ion-list {
+  width: 250px;
+}
+
+ion-radio.wrapped::part(label) {
+  text-wrap: wrap;
+}
+```
@@ -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>
+```
@@ -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 {}
+```
@@ -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>
@@ -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"
+/>
@@ -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>
+```
@@ -0,0 +1,9 @@
+```css
+ion-list {
+  width: 250px;
+}
+
+ion-radio.wrapped::part(label) {
+  text-wrap: wrap;
+}
+```
@@ -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;
+```
@@ -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>
+```