From 57a3c101eb809afec46188ef71d7fc6d754ba2b6 Mon Sep 17 00:00:00 2001
From: Brandy Smith <6577830+brandyscarney@users.noreply.github.com>
Date: Thu, 5 Feb 2026 15:38:29 -0500
Subject: [PATCH 1/5] feat(segment-view): add swipeGesture property to disable
 swiping

---
 core/api.txt                                          |  1 +
 core/src/components.d.ts                              | 10 ++++++++++
 core/src/components/segment-view/segment-view.scss    |  3 ++-
 core/src/components/segment-view/segment-view.tsx     |  8 +++++++-
 packages/angular/src/directives/proxies.ts            |  4 ++--
 packages/angular/standalone/src/directives/proxies.ts |  4 ++--
 packages/vue/src/proxies.ts                           |  1 +
 7 files changed, 25 insertions(+), 6 deletions(-)

diff --git a/core/api.txt b/core/api.txt
index b4036e6b8e8..43e95807d4c 100644
--- a/core/api.txt
+++ b/core/api.txt
@@ -1693,6 +1693,7 @@ ion-segment-content,shadow
 
 ion-segment-view,shadow
 ion-segment-view,prop,disabled,boolean,false,false,false
+ion-segment-view,prop,swipeGesture,boolean,true,false,false
 ion-segment-view,event,ionSegmentViewScroll,SegmentViewScrollEvent,true
 
 ion-select,shadow
diff --git a/core/src/components.d.ts b/core/src/components.d.ts
index ae6d9f4c2fb..d690184aff6 100644
--- a/core/src/components.d.ts
+++ b/core/src/components.d.ts
@@ -3113,6 +3113,11 @@ export namespace Components {
           * @param smoothScroll : Whether to animate the scroll transition.
          */
         "setContent": (id: string, smoothScroll?: boolean) => Promise<void>;
+        /**
+          * If `true`, users will be able to swipe the segment view to navigate between segment contents.
+          * @default true
+         */
+        "swipeGesture": boolean;
     }
     interface IonSelect {
         /**
@@ -8424,6 +8429,11 @@ declare namespace LocalJSX {
           * Emitted when the segment view is scrolled.
          */
         "onIonSegmentViewScroll"?: (event: IonSegmentViewCustomEvent<SegmentViewScrollEvent>) => void;
+        /**
+          * If `true`, users will be able to swipe the segment view to navigate between segment contents.
+          * @default true
+         */
+        "swipeGesture"?: boolean;
     }
     interface IonSelect {
         /**
diff --git a/core/src/components/segment-view/segment-view.scss b/core/src/components/segment-view/segment-view.scss
index a41030992f6..52210425a63 100644
--- a/core/src/components/segment-view/segment-view.scss
+++ b/core/src/components/segment-view/segment-view.scss
@@ -21,7 +21,8 @@
   display: none;
 }
 
-:host(.segment-view-disabled) {
+:host(.segment-view-disabled),
+:host(.segment-view-swipe-disabled) {
   touch-action: none;
   overflow-x: hidden;
 }
diff --git a/core/src/components/segment-view/segment-view.tsx b/core/src/components/segment-view/segment-view.tsx
index 21de96590a3..a503b5e2637 100644
--- a/core/src/components/segment-view/segment-view.tsx
+++ b/core/src/components/segment-view/segment-view.tsx
@@ -23,6 +23,11 @@ export class SegmentView implements ComponentInterface {
    */
   @Prop() disabled = false;
 
+  /**
+   * If `true`, users will be able to swipe the segment view to navigate between segment contents.
+   */
+  @Prop() swipeGesture = true;
+
   /**
    * @internal
    *
@@ -141,13 +146,14 @@ export class SegmentView implements ComponentInterface {
   }
 
   render() {
-    const { disabled, isManualScroll } = this;
+    const { disabled, isManualScroll, swipeGesture } = this;
 
     return (
       <Host
         class={{
           'segment-view-disabled': disabled,
           'segment-view-scroll-disabled': isManualScroll === false,
+          'segment-view-swipe-disabled': swipeGesture === false,
         }}
       >
         <slot></slot>
diff --git a/packages/angular/src/directives/proxies.ts b/packages/angular/src/directives/proxies.ts
index beaf411cec5..d5b1a91baca 100644
--- a/packages/angular/src/directives/proxies.ts
+++ b/packages/angular/src/directives/proxies.ts
@@ -2113,14 +2113,14 @@ export declare interface IonSegmentContent extends Components.IonSegmentContent
 
 
 @ProxyCmp({
-  inputs: ['disabled']
+  inputs: ['disabled', 'swipeGesture']
 })
 @Component({
   selector: 'ion-segment-view',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
   // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-  inputs: ['disabled'],
+  inputs: ['disabled', 'swipeGesture'],
 })
 export class IonSegmentView {
   protected el: HTMLIonSegmentViewElement;
diff --git a/packages/angular/standalone/src/directives/proxies.ts b/packages/angular/standalone/src/directives/proxies.ts
index 2fa0482d3d6..3d2693c0b83 100644
--- a/packages/angular/standalone/src/directives/proxies.ts
+++ b/packages/angular/standalone/src/directives/proxies.ts
@@ -1889,14 +1889,14 @@ export declare interface IonSegmentContent extends Components.IonSegmentContent
 
 @ProxyCmp({
   defineCustomElementFn: defineIonSegmentView,
-  inputs: ['disabled']
+  inputs: ['disabled', 'swipeGesture']
 })
 @Component({
   selector: 'ion-segment-view',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
   // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-  inputs: ['disabled'],
+  inputs: ['disabled', 'swipeGesture'],
   standalone: true
 })
 export class IonSegmentView {
diff --git a/packages/vue/src/proxies.ts b/packages/vue/src/proxies.ts
index 72e22d2c7b4..31d13970a4c 100644
--- a/packages/vue/src/proxies.ts
+++ b/packages/vue/src/proxies.ts
@@ -899,6 +899,7 @@ export const IonSegmentContent: StencilVueComponent<JSX.IonSegmentContent> = /*@
 
 export const IonSegmentView: StencilVueComponent<JSX.IonSegmentView> = /*@__PURE__*/ defineContainer<JSX.IonSegmentView>('ion-segment-view', defineIonSegmentView, [
   'disabled',
+  'swipeGesture',
   'ionSegmentViewScroll'
 ], [
   'ionSegmentViewScroll'

From 0cd9c1f8e92a449242002eaa06b29ff2b8f97c3a Mon Sep 17 00:00:00 2001
From: Brandy Smith <6577830+brandyscarney@users.noreply.github.com>
Date: Fri, 6 Feb 2026 14:41:01 -0500
Subject: [PATCH 2/5] test(segment-view): add screen for testing swipeGesture
 behavior

---
 .../test/swipe-gesture/index.html             | 135 ++++++++++++++++++
 1 file changed, 135 insertions(+)
 create mode 100644 core/src/components/segment-view/test/swipe-gesture/index.html

diff --git a/core/src/components/segment-view/test/swipe-gesture/index.html b/core/src/components/segment-view/test/swipe-gesture/index.html
new file mode 100644
index 00000000000..5d48a972d32
--- /dev/null
+++ b/core/src/components/segment-view/test/swipe-gesture/index.html
@@ -0,0 +1,135 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Segment View - Swipe Gesture</title>
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
+    />
+    <link href="../../../../../css/ionic.bundle.css" rel="stylesheet" />
+    <link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
+    <script src="../../../../../scripts/testing/scripts.js"></script>
+    <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
+    <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
+
+    <style>
+      h2 {
+        font-size: 12px;
+        font-weight: normal;
+
+        color: #6f7378;
+
+        margin: 24px 16px 8px;
+      }
+
+      ion-segment-view {
+        height: 100px;
+
+        margin-bottom: 20px;
+      }
+
+      ion-segment-content {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+      }
+
+      ion-segment-content:nth-of-type(3n + 1) {
+        background: lightpink;
+      }
+
+      ion-segment-content:nth-of-type(3n + 2) {
+        background: lightblue;
+      }
+
+      ion-segment-content:nth-of-type(3n + 3) {
+        background: lightgreen;
+      }
+    </style>
+  </head>
+
+  <body>
+    <ion-app>
+      <ion-header>
+        <ion-toolbar>
+          <ion-title>Segment View - Swipe Gesture</ion-title>
+        </ion-toolbar>
+      </ion-header>
+
+      <ion-content>
+        <h2>Swipe Gesture: Segment <ion-text color="success">Enabled</ion-text>; Segment View <ion-text color="success">Enabled</ion-text></h2>
+        <ion-segment value="free">
+          <ion-segment-button content-id="paid" value="paid">
+            <ion-label>Paid</ion-label>
+          </ion-segment-button>
+          <ion-segment-button content-id="free" value="free">
+            <ion-label>Free</ion-label>
+          </ion-segment-button>
+          <ion-segment-button content-id="top" value="top">
+            <ion-label>Top</ion-label>
+          </ion-segment-button>
+        </ion-segment>
+        <ion-segment-view>
+          <ion-segment-content id="paid">Paid</ion-segment-content>
+          <ion-segment-content id="free">Free</ion-segment-content>
+          <ion-segment-content id="top">Top</ion-segment-content>
+        </ion-segment-view>
+
+        <h2>Swipe Gesture: Segment <ion-text color="danger">Disabled</ion-text>; Segment View <ion-text color="success">Enabled</ion-text></h2>
+        <ion-segment swipe-gesture="false" value="free2">
+          <ion-segment-button content-id="paid2" value="paid2">
+            <ion-label>Paid</ion-label>
+          </ion-segment-button>
+          <ion-segment-button content-id="free2" value="free2">
+            <ion-label>Free</ion-label>
+          </ion-segment-button>
+          <ion-segment-button content-id="top2" value="top2">
+            <ion-label>Top</ion-label>
+          </ion-segment-button>
+        </ion-segment>
+        <ion-segment-view>
+          <ion-segment-content id="paid2">Paid</ion-segment-content>
+          <ion-segment-content id="free2">Free</ion-segment-content>
+          <ion-segment-content id="top2">Top</ion-segment-content>
+        </ion-segment-view>
+
+        <h2>Swipe Gesture: Segment <ion-text color="success">Enabled</ion-text>; Segment View <ion-text color="danger">Disabled</ion-text></h2>
+        <ion-segment value="free3">
+          <ion-segment-button content-id="paid3" value="paid3">
+            <ion-label>Paid</ion-label>
+          </ion-segment-button>
+          <ion-segment-button content-id="free3" value="free3">
+            <ion-label>Free</ion-label>
+          </ion-segment-button>
+          <ion-segment-button content-id="top3" value="top3">
+            <ion-label>Top</ion-label>
+          </ion-segment-button>
+        </ion-segment>
+        <ion-segment-view swipe-gesture="false">
+          <ion-segment-content id="paid3">Paid</ion-segment-content>
+          <ion-segment-content id="free3">Free</ion-segment-content>
+          <ion-segment-content id="top3">Top</ion-segment-content>
+        </ion-segment-view>
+
+        <h2>Swipe Gesture: Segment <ion-text color="danger">Disabled</ion-text>; Segment View <ion-text color="danger">Disabled</ion-text></h2>
+        <ion-segment swipe-gesture="false" value="free4">
+          <ion-segment-button content-id="paid4" value="paid4">
+            <ion-label>Paid</ion-label>
+          </ion-segment-button>
+          <ion-segment-button content-id="free4" value="free4">
+            <ion-label>Free</ion-label>
+          </ion-segment-button>
+          <ion-segment-button content-id="top4" value="top4">
+            <ion-label>Top</ion-label>
+          </ion-segment-button>
+        </ion-segment>
+        <ion-segment-view swipe-gesture="false">
+          <ion-segment-content id="paid4">Paid</ion-segment-content>
+          <ion-segment-content id="free4">Free</ion-segment-content>
+          <ion-segment-content id="top4">Top</ion-segment-content>
+        </ion-segment-view>
+      </ion-content>
+    </ion-app>
+  </body>
+</html>

From 18d10706fb2d3e80dc73684a980f6f0c9f827bf5 Mon Sep 17 00:00:00 2001
From: Brandy Smith <6577830+brandyscarney@users.noreply.github.com>
Date: Fri, 6 Feb 2026 14:47:29 -0500
Subject: [PATCH 3/5] style: lint

---
 .../test/swipe-gesture/index.html             | 20 +++++++++++++++----
 1 file changed, 16 insertions(+), 4 deletions(-)

diff --git a/core/src/components/segment-view/test/swipe-gesture/index.html b/core/src/components/segment-view/test/swipe-gesture/index.html
index 5d48a972d32..8a5c39b6cc2 100644
--- a/core/src/components/segment-view/test/swipe-gesture/index.html
+++ b/core/src/components/segment-view/test/swipe-gesture/index.html
@@ -58,7 +58,10 @@
       </ion-header>
 
       <ion-content>
-        <h2>Swipe Gesture: Segment <ion-text color="success">Enabled</ion-text>; Segment View <ion-text color="success">Enabled</ion-text></h2>
+        <h2>
+          Swipe Gesture: Segment <ion-text color="success">Enabled</ion-text>; Segment View
+          <ion-text color="success">Enabled</ion-text>
+        </h2>
         <ion-segment value="free">
           <ion-segment-button content-id="paid" value="paid">
             <ion-label>Paid</ion-label>
@@ -76,7 +79,10 @@ <h2>Swipe Gesture: Segment <ion-text color="success">Enabled</ion-text>; Segment
           <ion-segment-content id="top">Top</ion-segment-content>
         </ion-segment-view>
 
-        <h2>Swipe Gesture: Segment <ion-text color="danger">Disabled</ion-text>; Segment View <ion-text color="success">Enabled</ion-text></h2>
+        <h2>
+          Swipe Gesture: Segment <ion-text color="danger">Disabled</ion-text>; Segment View
+          <ion-text color="success">Enabled</ion-text>
+        </h2>
         <ion-segment swipe-gesture="false" value="free2">
           <ion-segment-button content-id="paid2" value="paid2">
             <ion-label>Paid</ion-label>
@@ -94,7 +100,10 @@ <h2>Swipe Gesture: Segment <ion-text color="danger">Disabled</ion-text>; Segment
           <ion-segment-content id="top2">Top</ion-segment-content>
         </ion-segment-view>
 
-        <h2>Swipe Gesture: Segment <ion-text color="success">Enabled</ion-text>; Segment View <ion-text color="danger">Disabled</ion-text></h2>
+        <h2>
+          Swipe Gesture: Segment <ion-text color="success">Enabled</ion-text>; Segment View
+          <ion-text color="danger">Disabled</ion-text>
+        </h2>
         <ion-segment value="free3">
           <ion-segment-button content-id="paid3" value="paid3">
             <ion-label>Paid</ion-label>
@@ -112,7 +121,10 @@ <h2>Swipe Gesture: Segment <ion-text color="success">Enabled</ion-text>; Segment
           <ion-segment-content id="top3">Top</ion-segment-content>
         </ion-segment-view>
 
-        <h2>Swipe Gesture: Segment <ion-text color="danger">Disabled</ion-text>; Segment View <ion-text color="danger">Disabled</ion-text></h2>
+        <h2>
+          Swipe Gesture: Segment <ion-text color="danger">Disabled</ion-text>; Segment View
+          <ion-text color="danger">Disabled</ion-text>
+        </h2>
         <ion-segment swipe-gesture="false" value="free4">
           <ion-segment-button content-id="paid4" value="paid4">
             <ion-label>Paid</ion-label>

From 6bad13ffdcc862ef75f9e34ea23a2b740b853c1a Mon Sep 17 00:00:00 2001
From: Brandy Smith <6577830+brandyscarney@users.noreply.github.com>
Date: Fri, 6 Feb 2026 16:33:25 -0500
Subject: [PATCH 4/5] test(segment-view): add e2e test for swipeGesture

---
 .../test/swipe-gesture/segment-view.e2e.ts    | 55 +++++++++++++++++++
 1 file changed, 55 insertions(+)
 create mode 100644 core/src/components/segment-view/test/swipe-gesture/segment-view.e2e.ts

diff --git a/core/src/components/segment-view/test/swipe-gesture/segment-view.e2e.ts b/core/src/components/segment-view/test/swipe-gesture/segment-view.e2e.ts
new file mode 100644
index 00000000000..334436ee4d9
--- /dev/null
+++ b/core/src/components/segment-view/test/swipe-gesture/segment-view.e2e.ts
@@ -0,0 +1,55 @@
+import { expect } from '@playwright/test';
+import { configs, test } from '@utils/test/playwright';
+
+/**
+ * This behavior does not vary across modes/directions
+ */
+configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
+  test.describe(title('segment-view: swipe gesture'), () => {
+    test('should allow swiping the segment view by default', async ({ page }) => {
+      await page.setContent(
+        `
+        <ion-segment-view>
+          <ion-segment-content id="paid">Paid</ion-segment-content>
+          <ion-segment-content id="free">Free</ion-segment-content>
+          <ion-segment-content id="top">Top</ion-segment-content>
+        </ion-segment-view>
+      `,
+        config
+      );
+
+      await page.waitForChanges();
+
+      const segmentView = page.locator('ion-segment-view');
+
+      const allowsSwipe = await segmentView.evaluate((el: HTMLElement) => {
+        const style = getComputedStyle(el);
+        return style.overflowX !== 'hidden' && style.touchAction !== 'none';
+      });
+      expect(allowsSwipe).toBe(true);
+    });
+
+    test('should not allow swiping the segment view when swipeGesture is false', async ({ page }) => {
+      await page.setContent(
+        `
+        <ion-segment-view swipe-gesture="false">
+          <ion-segment-content id="paid">Paid</ion-segment-content>
+          <ion-segment-content id="free">Free</ion-segment-content>
+          <ion-segment-content id="top">Top</ion-segment-content>
+        </ion-segment-view>
+      `,
+        config
+      );
+
+      await page.waitForChanges();
+
+      const segmentView = page.locator('ion-segment-view');
+
+      const allowsSwipe = await segmentView.evaluate((el: HTMLElement) => {
+        const style = getComputedStyle(el);
+        return style.overflowX !== 'hidden' && style.touchAction !== 'none';
+      });
+      expect(allowsSwipe).toBe(false);
+    });
+  });
+});

From 9f3e6ed95563a3fb1770ca1288bd930778d6120d Mon Sep 17 00:00:00 2001
From: Brandy Smith <6577830+brandyscarney@users.noreply.github.com>
Date: Fri, 6 Feb 2026 16:35:52 -0500
Subject: [PATCH 5/5] test: remove waitForChanges after load

---
 .../segment-view/test/swipe-gesture/segment-view.e2e.ts       | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/core/src/components/segment-view/test/swipe-gesture/segment-view.e2e.ts b/core/src/components/segment-view/test/swipe-gesture/segment-view.e2e.ts
index 334436ee4d9..f250cb142db 100644
--- a/core/src/components/segment-view/test/swipe-gesture/segment-view.e2e.ts
+++ b/core/src/components/segment-view/test/swipe-gesture/segment-view.e2e.ts
@@ -18,8 +18,6 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
         config
       );
 
-      await page.waitForChanges();
-
       const segmentView = page.locator('ion-segment-view');
 
       const allowsSwipe = await segmentView.evaluate((el: HTMLElement) => {
@@ -41,8 +39,6 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
         config
       );
 
-      await page.waitForChanges();
-
       const segmentView = page.locator('ion-segment-view');
 
       const allowsSwipe = await segmentView.evaluate((el: HTMLElement) => {