From 8c9a292a20ba8859355102656767e040239a492d Mon Sep 17 00:00:00 2001
From: Brandy Smith <6577830+brandyscarney@users.noreply.github.com>
Date: Mon, 13 Oct 2025 13:40:16 -0400
Subject: [PATCH 1/2] docs(tabs): fix basic usage

---
 .../basic/angular/example_component_html.md   |  8 +--
 static/usage/v8/tabs/basic/demo.html          |  8 +--
 .../v8/tabs/basic/javascript/index_html.md    |  8 +--
 static/usage/v8/tabs/basic/react/main_tsx.md  | 27 +++++-----
 static/usage/v8/tabs/basic/vue.md             | 50 ++++++++++---------
 5 files changed, 53 insertions(+), 48 deletions(-)

diff --git a/static/usage/v8/tabs/basic/angular/example_component_html.md b/static/usage/v8/tabs/basic/angular/example_component_html.md
index 9fa546d2bd3..703dde43d65 100644
--- a/static/usage/v8/tabs/basic/angular/example_component_html.md
+++ b/static/usage/v8/tabs/basic/angular/example_component_html.md
@@ -1,7 +1,7 @@
 ```html
 <ion-tabs>
   <ion-tab tab="home">
-    <div id="home-page">
+    <div id="home-page" class="ion-page">
       <ion-header>
         <ion-toolbar>
           <ion-title>Listen now</ion-title>
@@ -13,7 +13,7 @@
     </div>
   </ion-tab>
   <ion-tab tab="radio">
-    <div id="radio-page">
+    <div id="radio-page" class="ion-page">
       <ion-header>
         <ion-toolbar>
           <ion-title>Radio</ion-title>
@@ -25,7 +25,7 @@
     </div>
   </ion-tab>
   <ion-tab tab="library">
-    <div id="library-page">
+    <div id="library-page" class="ion-page">
       <ion-header>
         <ion-toolbar>
           <ion-title>Library</ion-title>
@@ -37,7 +37,7 @@
     </div>
   </ion-tab>
   <ion-tab tab="search">
-    <div id="search-page">
+    <div id="search-page" class="ion-page">
       <ion-header>
         <ion-toolbar>
           <ion-title>Search</ion-title>
diff --git a/static/usage/v8/tabs/basic/demo.html b/static/usage/v8/tabs/basic/demo.html
index 5a303b66cbb..cab067dd7b0 100644
--- a/static/usage/v8/tabs/basic/demo.html
+++ b/static/usage/v8/tabs/basic/demo.html
@@ -22,7 +22,7 @@
     <ion-app>
       <ion-tabs>
         <ion-tab tab="home">
-          <div id="home-page">
+          <div id="home-page" class="ion-page">
             <ion-header>
               <ion-toolbar>
                 <ion-title>Listen now</ion-title>
@@ -34,7 +34,7 @@
           </div>
         </ion-tab>
         <ion-tab tab="radio">
-          <div id="radio-page">
+          <div id="radio-page" class="ion-page">
             <ion-header>
               <ion-toolbar>
                 <ion-title>Radio</ion-title>
@@ -46,7 +46,7 @@
           </div>
         </ion-tab>
         <ion-tab tab="library">
-          <div id="library-page">
+          <div id="library-page" class="ion-page">
             <ion-header>
               <ion-toolbar>
                 <ion-title>Library</ion-title>
@@ -58,7 +58,7 @@
           </div>
         </ion-tab>
         <ion-tab tab="search">
-          <div id="search-page">
+          <div id="search-page" class="ion-page">
             <ion-header>
               <ion-toolbar>
                 <ion-title>Search</ion-title>
diff --git a/static/usage/v8/tabs/basic/javascript/index_html.md b/static/usage/v8/tabs/basic/javascript/index_html.md
index fa93db84956..9e6ef96fe26 100644
--- a/static/usage/v8/tabs/basic/javascript/index_html.md
+++ b/static/usage/v8/tabs/basic/javascript/index_html.md
@@ -1,7 +1,7 @@
 ```html
 <ion-tabs>
   <ion-tab tab="home">
-    <div id="home-page">
+    <div id="home-page" class="ion-page">
       <ion-header>
         <ion-toolbar>
           <ion-title>Listen now</ion-title>
@@ -13,7 +13,7 @@
     </div>
   </ion-tab>
   <ion-tab tab="radio">
-    <div id="radio-page">
+    <div id="radio-page" class="ion-page">
       <ion-header>
         <ion-toolbar>
           <ion-title>Radio</ion-title>
@@ -25,7 +25,7 @@
     </div>
   </ion-tab>
   <ion-tab tab="library">
-    <div id="library-page">
+    <div id="library-page" class="ion-page">
       <ion-header>
         <ion-toolbar>
           <ion-title>Library</ion-title>
@@ -37,7 +37,7 @@
     </div>
   </ion-tab>
   <ion-tab tab="search">
-    <div id="search-page">
+    <div id="search-page" class="ion-page">
       <ion-header>
         <ion-toolbar>
           <ion-title>Search</ion-title>
diff --git a/static/usage/v8/tabs/basic/react/main_tsx.md b/static/usage/v8/tabs/basic/react/main_tsx.md
index 84e01103947..f97e29769bd 100644
--- a/static/usage/v8/tabs/basic/react/main_tsx.md
+++ b/static/usage/v8/tabs/basic/react/main_tsx.md
@@ -1,15 +1,16 @@
 ```tsx
 import React from 'react';
 import {
-  IonTabs,
+  IonContent,
+  IonIcon,
+  IonHeader,
   IonTab,
-  IonToolbar,
+  IonTabs,
   IonTabBar,
   IonTabButton,
-  IonHeader,
   IonTitle,
-  IonContent,
-  IonIcon,
+  IonToolbar,
+  IonPage,
 } from '@ionic/react';
 
 import { playCircle, radio, library, search } from 'ionicons/icons';
@@ -20,7 +21,7 @@ function Example() {
   return (
     <IonTabs>
       <IonTab tab="home">
-        <div id="home-page">
+        <IonPage id="home-page">
           <IonHeader>
             <IonToolbar>
               <IonTitle>Listen now</IonTitle>
@@ -29,10 +30,10 @@ function Example() {
           <IonContent>
             <div className="example-content">Listen now content</div>
           </IonContent>
-        </div>
+        </IonPage>
       </IonTab>
       <IonTab tab="radio">
-        <div id="radio-page">
+        <IonPage id="radio-page">
           <IonHeader>
             <IonToolbar>
               <IonTitle>Radio</IonTitle>
@@ -41,10 +42,10 @@ function Example() {
           <IonContent>
             <div className="example-content">Radio content</div>
           </IonContent>
-        </div>
+        </IonPage>
       </IonTab>
       <IonTab tab="library">
-        <div id="library-page">
+        <IonPage id="library-page">
           <IonHeader>
             <IonToolbar>
               <IonTitle>Library</IonTitle>
@@ -53,10 +54,10 @@ function Example() {
           <IonContent>
             <div className="example-content">Library content</div>
           </IonContent>
-        </div>
+        </IonPage>
       </IonTab>
       <IonTab tab="search">
-        <div id="search-page">
+        <IonPage id="search-page">
           <IonHeader>
             <IonToolbar>
               <IonTitle>Search</IonTitle>
@@ -65,7 +66,7 @@ function Example() {
           <IonContent>
             <div className="example-content">Search content</div>
           </IonContent>
-        </div>
+        </IonPage>
       </IonTab>
 
       <IonTabBar slot="bottom">
diff --git a/static/usage/v8/tabs/basic/vue.md b/static/usage/v8/tabs/basic/vue.md
index 582d594dde9..95ab749c31a 100644
--- a/static/usage/v8/tabs/basic/vue.md
+++ b/static/usage/v8/tabs/basic/vue.md
@@ -1,18 +1,8 @@
 ```html
-<style scoped>
-  /* This style is for demonstration purposes only. */
-  /* It's not required for the tabs to function. */
-  .example-content {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    height: 100%;
-  }
-</style>
 <template>
   <ion-tabs>
     <ion-tab tab="home">
-      <div id="home-page">
+      <ion-page id="home-page">
         <ion-header>
           <ion-toolbar>
             <ion-title>Listen now</ion-title>
@@ -21,10 +11,10 @@
         <ion-content>
           <div class="example-content">Listen now content</div>
         </ion-content>
-      </div>
+      </ion-page>
     </ion-tab>
     <ion-tab tab="radio">
-      <div id="radio-page">
+      <ion-page id="radio-page">
         <ion-header>
           <ion-toolbar>
             <ion-title>Radio</ion-title>
@@ -33,10 +23,11 @@
         <ion-content>
           <div class="example-content">Radio content</div>
         </ion-content>
-      </div>
+      </ion-page>
     </ion-tab>
     <ion-tab tab="library">
-      <div id="library-page">
+      <ion-page id="library-page"
+        >>
         <ion-header>
           <ion-toolbar>
             <ion-title>Library</ion-title>
@@ -45,10 +36,11 @@
         <ion-content>
           <div class="example-content">Library content</div>
         </ion-content>
-      </div>
+      </ion-page>
     </ion-tab>
     <ion-tab tab="search">
-      <div id="search-page">
+      <ion-page id="search-page"
+        >>
         <ion-header>
           <ion-toolbar>
             <ion-title>Search</ion-title>
@@ -57,7 +49,7 @@
         <ion-content>
           <div class="example-content">Search content</div>
         </ion-content>
-      </div>
+      </ion-page>
     </ion-tab>
 
     <ion-tab-bar slot="bottom">
@@ -83,16 +75,28 @@
 
 <script setup lang="ts">
   import {
-    IonTabs,
+    IonContent,
+    IonHeader,
+    IonIcon,
+    IonPage,
     IonTab,
-    IonToolbar,
+    IonTabs,
     IonTabBar,
     IonTabButton,
-    IonContent,
-    IonHeader,
     IonTitle,
-    IonIcon,
+    IonToolbar,
   } from '@ionic/vue';
   import { playCircle, radio, library, search } from 'ionicons/icons';
 </script>
+
+<style scoped>
+  /* This style is for demonstration purposes only. */
+  /* It's not required for the tabs to function. */
+  .example-content {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+  }
+</style>
 ```

From 17bba9edd79b32975f48d46cf0ab33e30084df96 Mon Sep 17 00:00:00 2001
From: Brandy Smith <6577830+brandyscarney@users.noreply.github.com>
Date: Mon, 13 Oct 2025 13:41:37 -0400
Subject: [PATCH 2/2] docs(tabs): add playground for programmatically selecting
 tabs

---
 docs/api/tabs.md                              |   7 ++
 .../angular/example_component_css.md          |  12 ++
 .../angular/example_component_html.md         |  74 ++++++++++++
 .../angular/example_component_ts.md           |  41 +++++++
 static/usage/v8/tabs/select-method/demo.html  | 106 ++++++++++++++++
 static/usage/v8/tabs/select-method/index.md   |  42 +++++++
 .../select-method/javascript/index_html.md    |  94 +++++++++++++++
 .../tabs/select-method/javascript/index_ts.md |  46 +++++++
 .../v8/tabs/select-method/react/main_css.md   |  12 ++
 .../v8/tabs/select-method/react/main_tsx.md   | 103 ++++++++++++++++
 static/usage/v8/tabs/select-method/vue.md     | 113 ++++++++++++++++++
 11 files changed, 650 insertions(+)
 create mode 100644 static/usage/v8/tabs/select-method/angular/example_component_css.md
 create mode 100644 static/usage/v8/tabs/select-method/angular/example_component_html.md
 create mode 100644 static/usage/v8/tabs/select-method/angular/example_component_ts.md
 create mode 100644 static/usage/v8/tabs/select-method/demo.html
 create mode 100644 static/usage/v8/tabs/select-method/index.md
 create mode 100644 static/usage/v8/tabs/select-method/javascript/index_html.md
 create mode 100644 static/usage/v8/tabs/select-method/javascript/index_ts.md
 create mode 100644 static/usage/v8/tabs/select-method/react/main_css.md
 create mode 100644 static/usage/v8/tabs/select-method/react/main_tsx.md
 create mode 100644 static/usage/v8/tabs/select-method/vue.md

diff --git a/docs/api/tabs.md b/docs/api/tabs.md
index da6a3fb7e99..e743a541b80 100644
--- a/docs/api/tabs.md
+++ b/docs/api/tabs.md
@@ -48,6 +48,13 @@ Ionic has guides on best practices for routing patterns with tabs. Check out the
 
 :::
 
+## Programmatically Selecting Tabs
+
+Tabs can be selected programmatically using the `select` method. This is useful when tab changes need to be triggered from application logic, such as in response to a button click or after completing a form. The following example demonstrates using a button to call the `select` method to navigate to a different tab.
+
+import SelectMethod from '@site/static/usage/v8/tabs/select-method/index.md';
+
+<SelectMethod />
 
 ## Interfaces
 
diff --git a/static/usage/v8/tabs/select-method/angular/example_component_css.md b/static/usage/v8/tabs/select-method/angular/example_component_css.md
new file mode 100644
index 00000000000..ba3bdfca17c
--- /dev/null
+++ b/static/usage/v8/tabs/select-method/angular/example_component_css.md
@@ -0,0 +1,12 @@
+```css
+/* This style is for demonstration purposes only. */
+/* It's not required for the tabs to function. */
+.example-content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  gap: 10px;
+}
+```
diff --git a/static/usage/v8/tabs/select-method/angular/example_component_html.md b/static/usage/v8/tabs/select-method/angular/example_component_html.md
new file mode 100644
index 00000000000..2edb44c9dcd
--- /dev/null
+++ b/static/usage/v8/tabs/select-method/angular/example_component_html.md
@@ -0,0 +1,74 @@
+```html
+<ion-tabs #tabs>
+  <ion-tab tab="home">
+    <div id="home-page" class="ion-page">
+      <ion-header>
+        <ion-toolbar>
+          <ion-title>Listen now</ion-title>
+        </ion-toolbar>
+      </ion-header>
+      <ion-content>
+        <div class="example-content">
+          Listen now content
+          <ion-button (click)="selectRadio()">Go to Radio</ion-button>
+        </div>
+      </ion-content>
+    </div>
+  </ion-tab>
+  <ion-tab tab="radio">
+    <div id="radio-page" class="ion-page">
+      <ion-header>
+        <ion-toolbar>
+          <ion-title>Radio</ion-title>
+        </ion-toolbar>
+      </ion-header>
+      <ion-content>
+        <div class="example-content">Radio content</div>
+      </ion-content>
+    </div>
+  </ion-tab>
+  <ion-tab tab="library">
+    <div id="library-page" class="ion-page">
+      <ion-header>
+        <ion-toolbar>
+          <ion-title>Library</ion-title>
+        </ion-toolbar>
+      </ion-header>
+      <ion-content>
+        <div class="example-content">Library content</div>
+      </ion-content>
+    </div>
+  </ion-tab>
+  <ion-tab tab="search">
+    <div id="search-page" class="ion-page">
+      <ion-header>
+        <ion-toolbar>
+          <ion-title>Search</ion-title>
+        </ion-toolbar>
+      </ion-header>
+      <ion-content>
+        <div class="example-content">Search content</div>
+      </ion-content>
+    </div>
+  </ion-tab>
+
+  <ion-tab-bar slot="bottom">
+    <ion-tab-button tab="home">
+      <ion-icon name="play-circle"></ion-icon>
+      Listen Now
+    </ion-tab-button>
+    <ion-tab-button tab="radio">
+      <ion-icon name="radio"></ion-icon>
+      Radio
+    </ion-tab-button>
+    <ion-tab-button tab="library">
+      <ion-icon name="library"></ion-icon>
+      Library
+    </ion-tab-button>
+    <ion-tab-button tab="search">
+      <ion-icon name="search"></ion-icon>
+      Search
+    </ion-tab-button>
+  </ion-tab-bar>
+</ion-tabs>
+```
diff --git a/static/usage/v8/tabs/select-method/angular/example_component_ts.md b/static/usage/v8/tabs/select-method/angular/example_component_ts.md
new file mode 100644
index 00000000000..460e5a4edcc
--- /dev/null
+++ b/static/usage/v8/tabs/select-method/angular/example_component_ts.md
@@ -0,0 +1,41 @@
+```ts
+import { Component, ViewChild } from '@angular/core';
+import {
+  IonButton,
+  IonContent,
+  IonHeader,
+  IonIcon,
+  IonTab,
+  IonTabBar,
+  IonTabButton,
+  IonTabs,
+  IonTitle,
+  IonToolbar,
+} from '@ionic/angular/standalone';
+
+import { addIcons } from 'ionicons';
+import { library, playCircle, radio, search } from 'ionicons/icons';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonButton, IonContent, IonHeader, IonIcon, IonTab, IonTabBar, IonTabButton, IonTabs, IonTitle, IonToolbar],
+})
+export class ExampleComponent {
+  @ViewChild('tabs') tabs!: IonTabs;
+
+  constructor() {
+    /**
+     * Any icons you want to use in your application
+     * can be registered in app.component.ts and then
+     * referenced by name anywhere in your application.
+     */
+    addIcons({ library, playCircle, radio, search });
+  }
+
+  selectRadio() {
+    this.tabs.select('radio');
+  }
+}
+```
diff --git a/static/usage/v8/tabs/select-method/demo.html b/static/usage/v8/tabs/select-method/demo.html
new file mode 100644
index 00000000000..84d7c253db4
--- /dev/null
+++ b/static/usage/v8/tabs/select-method/demo.html
@@ -0,0 +1,106 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Tabs</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>
+      .example-content {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        height: 100%;
+        gap: 10px;
+      }
+    </style>
+  </head>
+
+  <body>
+    <ion-app>
+      <ion-tabs>
+        <ion-tab tab="home">
+          <div id="home-page" class="ion-page">
+            <ion-header>
+              <ion-toolbar>
+                <ion-title>Listen now</ion-title>
+              </ion-toolbar>
+            </ion-header>
+            <ion-content class="ion-padding">
+              <div class="example-content">
+                Listen now content
+                <ion-button onClick="selectRadio()">Go to Radio</ion-button>
+              </div>
+            </ion-content>
+          </div>
+        </ion-tab>
+        <ion-tab tab="radio">
+          <div id="radio-page" class="ion-page">
+            <ion-header>
+              <ion-toolbar>
+                <ion-title>Radio</ion-title>
+              </ion-toolbar>
+            </ion-header>
+            <ion-content>
+              <div class="example-content">Radio content</div>
+            </ion-content>
+          </div>
+        </ion-tab>
+        <ion-tab tab="library">
+          <div id="library-page" class="ion-page">
+            <ion-header>
+              <ion-toolbar>
+                <ion-title>Library</ion-title>
+              </ion-toolbar>
+            </ion-header>
+            <ion-content>
+              <div class="example-content">Library content</div>
+            </ion-content>
+          </div>
+        </ion-tab>
+        <ion-tab tab="search">
+          <div id="search-page" class="ion-page">
+            <ion-header>
+              <ion-toolbar>
+                <ion-title>Search</ion-title>
+              </ion-toolbar>
+            </ion-header>
+            <ion-content>
+              <div class="example-content">Search content</div>
+            </ion-content>
+          </div>
+        </ion-tab>
+
+        <ion-tab-bar slot="bottom">
+          <ion-tab-button tab="home">
+            <ion-icon name="play-circle"></ion-icon>
+            Listen Now
+          </ion-tab-button>
+          <ion-tab-button tab="radio">
+            <ion-icon name="radio"></ion-icon>
+            Radio
+          </ion-tab-button>
+          <ion-tab-button tab="library">
+            <ion-icon name="library"></ion-icon>
+            Library
+          </ion-tab-button>
+          <ion-tab-button tab="search">
+            <ion-icon name="search"></ion-icon>
+            Search
+          </ion-tab-button>
+        </ion-tab-bar>
+      </ion-tabs>
+    </ion-app>
+
+    <script>
+      function selectRadio() {
+        const tabs = document.querySelector('ion-tabs');
+        tabs.select('radio');
+      }
+    </script>
+  </body>
+</html>
diff --git a/static/usage/v8/tabs/select-method/index.md b/static/usage/v8/tabs/select-method/index.md
new file mode 100644
index 00000000000..a05baf6eb93
--- /dev/null
+++ b/static/usage/v8/tabs/select-method/index.md
@@ -0,0 +1,42 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript_index_html from './javascript/index_html.md';
+import javascript_index_ts from './javascript/index_ts.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_ts from './angular/example_component_ts.md';
+import angular_example_component_css from './angular/example_component_css.md';
+
+<Playground
+  version="8"
+  code={{
+    javascript: {
+      files: {
+        'index.html': javascript_index_html,
+        'index.ts': javascript_index_ts,
+      },
+    },
+    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.ts': angular_example_component_ts,
+        'src/app/example.component.css': angular_example_component_css,
+      },
+    },
+  }}
+  src="usage/v8/tabs/select-method/demo.html"
+  devicePreview
+  includeIonContent={false}
+/>
diff --git a/static/usage/v8/tabs/select-method/javascript/index_html.md b/static/usage/v8/tabs/select-method/javascript/index_html.md
new file mode 100644
index 00000000000..584f39c7536
--- /dev/null
+++ b/static/usage/v8/tabs/select-method/javascript/index_html.md
@@ -0,0 +1,94 @@
+```html
+<ion-tabs>
+  <ion-tab tab="home">
+    <div id="home-page" class="ion-page">
+      <ion-header>
+        <ion-toolbar>
+          <ion-title>Listen now</ion-title>
+        </ion-toolbar>
+      </ion-header>
+      <ion-content class="ion-padding">
+        <div class="example-content">
+          Listen now content
+          <ion-button onClick="selectRadio()">Go to Radio</ion-button>
+        </div>
+      </ion-content>
+    </div>
+  </ion-tab>
+  <ion-tab tab="radio">
+    <div id="radio-page" class="ion-page">
+      <ion-header>
+        <ion-toolbar>
+          <ion-title>Radio</ion-title>
+        </ion-toolbar>
+      </ion-header>
+      <ion-content>
+        <div class="example-content">Radio content</div>
+      </ion-content>
+    </div>
+  </ion-tab>
+  <ion-tab tab="library">
+    <div id="library-page" class="ion-page">
+      <ion-header>
+        <ion-toolbar>
+          <ion-title>Library</ion-title>
+        </ion-toolbar>
+      </ion-header>
+      <ion-content>
+        <div class="example-content">Library content</div>
+      </ion-content>
+    </div>
+  </ion-tab>
+  <ion-tab tab="search">
+    <div id="search-page" class="ion-page">
+      <ion-header>
+        <ion-toolbar>
+          <ion-title>Search</ion-title>
+        </ion-toolbar>
+      </ion-header>
+      <ion-content>
+        <div class="example-content">Search content</div>
+      </ion-content>
+    </div>
+  </ion-tab>
+
+  <ion-tab-bar slot="bottom">
+    <ion-tab-button tab="home">
+      <ion-icon name="play-circle"></ion-icon>
+      Listen Now
+    </ion-tab-button>
+    <ion-tab-button tab="radio">
+      <ion-icon name="radio"></ion-icon>
+      Radio
+    </ion-tab-button>
+    <ion-tab-button tab="library">
+      <ion-icon name="library"></ion-icon>
+      Library
+    </ion-tab-button>
+    <ion-tab-button tab="search">
+      <ion-icon name="search"></ion-icon>
+      Search
+    </ion-tab-button>
+  </ion-tab-bar>
+</ion-tabs>
+
+<script>
+  function selectRadio() {
+    const tabs = document.querySelector('ion-tabs');
+    tabs.select('radio');
+  }
+</script>
+
+<style>
+  /* This style is for demonstration purposes only. */
+  /* It's not required for the tabs to function. */
+  .example-content {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    gap: 10px;
+  }
+</style>
+```
diff --git a/static/usage/v8/tabs/select-method/javascript/index_ts.md b/static/usage/v8/tabs/select-method/javascript/index_ts.md
new file mode 100644
index 00000000000..2952676d830
--- /dev/null
+++ b/static/usage/v8/tabs/select-method/javascript/index_ts.md
@@ -0,0 +1,46 @@
+```ts
+import { defineCustomElements } from '@ionic/core/loader';
+
+import { addIcons } from 'ionicons';
+import { library, playCircle, radio, search } from 'ionicons/icons';
+
+/* Core CSS required for Ionic components to work properly */
+import '@ionic/core/css/core.css';
+
+/* Basic CSS for apps built with Ionic */
+import '@ionic/core/css/normalize.css';
+import '@ionic/core/css/structure.css';
+import '@ionic/core/css/typography.css';
+
+/* Optional CSS utils that can be commented out */
+import '@ionic/core/css/padding.css';
+import '@ionic/core/css/float-elements.css';
+import '@ionic/core/css/text-alignment.css';
+import '@ionic/core/css/text-transformation.css';
+import '@ionic/core/css/flex-utils.css';
+import '@ionic/core/css/display.css';
+
+/**
+ * Ionic Dark Palette
+ * -----------------------------------------------------
+ * For more information, please see:
+ * https://ionicframework.com/docs/theming/dark-mode
+ */
+
+// import '@ionic/core/css/palettes/dark.always.css';
+// import '@ionic/core/css/palettes/dark.class.css';
+import '@ionic/core/css/palettes/dark.system.css';
+
+/* Theme variables */
+import './theme/variables.css';
+
+/**
+ * On Ionicons 7.2+ these icons
+ * get mapped to a kebab-case key.
+ * Alternatively, developers can do:
+ * addIcons({ 'library': library, 'play-circle': playCircle, 'radio': radio, 'search': search });
+ */
+addIcons({ library, playCircle, radio, search });
+
+defineCustomElements();
+```
diff --git a/static/usage/v8/tabs/select-method/react/main_css.md b/static/usage/v8/tabs/select-method/react/main_css.md
new file mode 100644
index 00000000000..ba3bdfca17c
--- /dev/null
+++ b/static/usage/v8/tabs/select-method/react/main_css.md
@@ -0,0 +1,12 @@
+```css
+/* This style is for demonstration purposes only. */
+/* It's not required for the tabs to function. */
+.example-content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  gap: 10px;
+}
+```
diff --git a/static/usage/v8/tabs/select-method/react/main_tsx.md b/static/usage/v8/tabs/select-method/react/main_tsx.md
new file mode 100644
index 00000000000..02b6b7d41a3
--- /dev/null
+++ b/static/usage/v8/tabs/select-method/react/main_tsx.md
@@ -0,0 +1,103 @@
+```tsx
+import React, { useRef } from 'react';
+import {
+  IonButton,
+  IonContent,
+  IonIcon,
+  IonHeader,
+  IonTab,
+  IonTabs,
+  IonTabBar,
+  IonTabButton,
+  IonTitle,
+  IonToolbar,
+  IonPage,
+} from '@ionic/react';
+
+import { playCircle, radio, library, search } from 'ionicons/icons';
+
+import './main.css';
+
+function Example() {
+  const selectRadio = () => {
+    const tabs = document.querySelector('ion-tabs');
+    tabs?.select('radio');
+  };
+
+  return (
+    <IonTabs>
+      <IonTab tab="home">
+        <IonPage id="home-page">
+          <IonHeader>
+            <IonToolbar>
+              <IonTitle>Listen now</IonTitle>
+            </IonToolbar>
+          </IonHeader>
+          <IonContent>
+            <div className="example-content">
+              Listen now content
+              <IonButton onClick={selectRadio}>Go to Radio</IonButton>
+            </div>
+          </IonContent>
+        </IonPage>
+      </IonTab>
+      <IonTab tab="radio">
+        <IonPage id="radio-page">
+          <IonHeader>
+            <IonToolbar>
+              <IonTitle>Radio</IonTitle>
+            </IonToolbar>
+          </IonHeader>
+          <IonContent>
+            <div className="example-content">Radio content</div>
+          </IonContent>
+        </IonPage>
+      </IonTab>
+      <IonTab tab="library">
+        <IonPage id="library-page">
+          <IonHeader>
+            <IonToolbar>
+              <IonTitle>Library</IonTitle>
+            </IonToolbar>
+          </IonHeader>
+          <IonContent>
+            <div className="example-content">Library content</div>
+          </IonContent>
+        </IonPage>
+      </IonTab>
+      <IonTab tab="search">
+        <IonPage id="search-page">
+          <IonHeader>
+            <IonToolbar>
+              <IonTitle>Search</IonTitle>
+            </IonToolbar>
+          </IonHeader>
+          <IonContent>
+            <div className="example-content">Search content</div>
+          </IonContent>
+        </IonPage>
+      </IonTab>
+
+      <IonTabBar slot="bottom">
+        <IonTabButton tab="home">
+          <IonIcon icon={playCircle} />
+          Listen Now
+        </IonTabButton>
+        <IonTabButton tab="radio">
+          <IonIcon icon={radio} />
+          Radio
+        </IonTabButton>
+        <IonTabButton tab="library">
+          <IonIcon icon={library} />
+          Library
+        </IonTabButton>
+        <IonTabButton tab="search">
+          <IonIcon icon={search} />
+          Search
+        </IonTabButton>
+      </IonTabBar>
+    </IonTabs>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v8/tabs/select-method/vue.md b/static/usage/v8/tabs/select-method/vue.md
new file mode 100644
index 00000000000..5db2a6eb2da
--- /dev/null
+++ b/static/usage/v8/tabs/select-method/vue.md
@@ -0,0 +1,113 @@
+```html
+<template>
+  <ion-tabs ref="tabs">
+    <ion-tab tab="home">
+      <ion-page id="home-page">
+        <ion-header>
+          <ion-toolbar>
+            <ion-title>Listen now</ion-title>
+          </ion-toolbar>
+        </ion-header>
+        <ion-content>
+          <div class="example-content">
+            Listen now content
+            <ion-button @click="selectRadio()">Go to Radio</ion-button>
+          </div>
+        </ion-content>
+      </ion-page>
+    </ion-tab>
+    <ion-tab tab="radio">
+      <ion-page id="radio-page">
+        <ion-header>
+          <ion-toolbar>
+            <ion-title>Radio</ion-title>
+          </ion-toolbar>
+        </ion-header>
+        <ion-content>
+          <div class="example-content">Radio content</div>
+        </ion-content>
+      </ion-page>
+    </ion-tab>
+    <ion-tab tab="library">
+      <ion-page id="library-page">
+        <ion-header>
+          <ion-toolbar>
+            <ion-title>Library</ion-title>
+          </ion-toolbar>
+        </ion-header>
+        <ion-content>
+          <div class="example-content">Library content</div>
+        </ion-content>
+      </ion-page>
+    </ion-tab>
+    <ion-tab tab="search">
+      <ion-page id="search-page">
+        <ion-header>
+          <ion-toolbar>
+            <ion-title>Search</ion-title>
+          </ion-toolbar>
+        </ion-header>
+        <ion-content>
+          <div class="example-content">Search content</div>
+        </ion-content>
+      </ion-page>
+    </ion-tab>
+
+    <ion-tab-bar slot="bottom">
+      <ion-tab-button tab="home">
+        <ion-icon :icon="playCircle" />
+        Listen Now
+      </ion-tab-button>
+      <ion-tab-button tab="radio">
+        <ion-icon :icon="radio" />
+        Radio
+      </ion-tab-button>
+      <ion-tab-button tab="library">
+        <ion-icon :icon="library" />
+        Library
+      </ion-tab-button>
+      <ion-tab-button tab="search">
+        <ion-icon :icon="search" />
+        Search
+      </ion-tab-button>
+    </ion-tab-bar>
+  </ion-tabs>
+</template>
+
+<script setup lang="ts">
+  import { ref } from 'vue';
+  import {
+    IonButton,
+    IonContent,
+    IonHeader,
+    IonIcon,
+    IonPage,
+    IonTab,
+    IonTabs,
+    IonTabBar,
+    IonTabButton,
+    IonTitle,
+    IonToolbar,
+  } from '@ionic/vue';
+  import { playCircle, radio, library, search } from 'ionicons/icons';
+
+  const tabs = ref();
+
+  const selectRadio = () => {
+    tabs.value.$el.select('radio');
+  };
+</script>
+
+<style scoped>
+  /* This style is for demonstration purposes only. */
+  /* It's not required for the tabs to function. */
+  .example-content {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    gap: 10px;
+  }
+</style>
+```