From 198db2a8709aca4a96ec04aaf84a7c399e6bbcce Mon Sep 17 00:00:00 2001
From: Noblet Ouways <91417411+Dsaquel@users.noreply.github.com>
Date: Sat, 13 Dec 2025 21:40:23 +0100
Subject: [PATCH] feat(components): [switch] add active & inactive slots
 (#22429)

* feat(components): [switch] add active & inactive slots

* chore: docs & tests & refact

* style: icon center

* style: items-center

Co-authored-by: Zhong <cszhjh@gmail.com>

* Update docs/en-US/component/switch.md

Co-authored-by: btea <2356281422@qq.com>

* Update docs/en-US/component/switch.md

Co-authored-by: btea <2356281422@qq.com>

---------

Co-authored-by: Zhong <cszhjh@gmail.com>
Co-authored-by: btea <2356281422@qq.com>
---
 docs/en-US/component/switch.md                | 10 ++--
 .../switch/__tests__/switch.test.tsx          | 48 +++++++++++++++
 packages/components/switch/src/switch.vue     | 58 +++++++++++--------
 packages/theme-chalk/src/switch.scss          |  5 +-
 4 files changed, 91 insertions(+), 30 deletions(-)

diff --git a/docs/en-US/component/switch.md b/docs/en-US/component/switch.md
index da4f4654ba..4f0142a7a5 100644
--- a/docs/en-US/component/switch.md
+++ b/docs/en-US/component/switch.md
@@ -134,10 +134,12 @@ switch/custom-action-slot
 
 ### Switch Slots
 
-| Name                     | Description               |
-| ------------------------ | ------------------------- |
-| active-action ^(2.4.4)   | customize active action   |
-| inactive-action ^(2.4.4) | customize inactive action |
+| Name                     | Description                |
+| ------------------------ | -------------------------- |
+| active-action ^(2.4.4)   | customize active action    |
+| inactive-action ^(2.4.4) | customize inactive action  |
+| active ^(2.13.0)         | customize active content   |
+| inactive ^(2.13.0)       | customize inactive content |
 
 ### Exposes
 
diff --git a/packages/components/switch/__tests__/switch.test.tsx b/packages/components/switch/__tests__/switch.test.tsx
index f27cc4a883..f4346125d3 100644
--- a/packages/components/switch/__tests__/switch.test.tsx
+++ b/packages/components/switch/__tests__/switch.test.tsx
@@ -383,6 +383,54 @@ describe('Switch.vue', () => {
       expect(actionWrapper.find('.custom-active-action').exists()).toBeTruthy()
     })
 
+    test('should render correctly custom active & inactive slots', async () => {
+      const value = ref(true)
+      const activeText = 'active'
+      const inactiveText = 'inactive'
+      const wrapper = mount({
+        setup: () => () => (
+          <Switch
+            v-model={value.value}
+            v-slots={{
+              active: () => <span class="custom-active">{activeText}</span>,
+              inactive: () => (
+                <span class="custom-inactive">{inactiveText}</span>
+              ),
+            }}
+          />
+        ),
+      })
+      await nextTick()
+
+      expect(wrapper.find('.custom-active').text()).toBe(activeText)
+      expect(wrapper.find('.custom-inactive').text()).toBe(inactiveText)
+    })
+
+    test('should render correctly custom active & inactive slots when inline-prompt is true', async () => {
+      const value = ref(true)
+      const activeText = 'active'
+      const inactiveText = 'inactive'
+      const wrapper = mount({
+        setup: () => () => (
+          <Switch
+            v-model={value.value}
+            inlinePrompt
+            v-slots={{
+              active: () => <span class="custom-active">{activeText}</span>,
+              inactive: () => (
+                <span class="custom-inactive">{inactiveText}</span>
+              ),
+            }}
+          />
+        ),
+      })
+      await nextTick()
+
+      expect(wrapper.find('.custom-active').text()).toBe(activeText)
+      value.value = false
+      await nextTick()
+      expect(wrapper.find('.custom-inactive').text()).toBe(inactiveText)
+    })
     test('The disabled state of a component has higher priority than that of a form', async () => {
       const wrapper = mount(() => (
         <ElForm disabled>
diff --git a/packages/components/switch/src/switch.vue b/packages/components/switch/src/switch.vue
index f9bf36feb0..df3c00daac 100644
--- a/packages/components/switch/src/switch.vue
+++ b/packages/components/switch/src/switch.vue
@@ -18,28 +18,36 @@
       @keydown.enter="switchValue"
     />
     <span
-      v-if="!inlinePrompt && (inactiveIcon || inactiveText)"
+      v-if="!inlinePrompt && (inactiveIcon || inactiveText || $slots.inactive)"
       :class="labelLeftKls"
     >
-      <el-icon v-if="inactiveIcon">
-        <component :is="inactiveIcon" />
-      </el-icon>
-      <span v-if="!inactiveIcon && inactiveText" :aria-hidden="checked">{{
-        inactiveText
-      }}</span>
+      <slot name="inactive">
+        <el-icon v-if="inactiveIcon">
+          <component :is="inactiveIcon" />
+        </el-icon>
+        <span v-if="!inactiveIcon && inactiveText" :aria-hidden="checked">{{
+          inactiveText
+        }}</span>
+      </slot>
     </span>
     <span :class="ns.e('core')" :style="coreStyle">
       <div v-if="inlinePrompt" :class="ns.e('inner')">
-        <template v-if="activeIcon || inactiveIcon">
-          <el-icon :class="ns.is('icon')">
-            <component :is="checked ? activeIcon : inactiveIcon" />
-          </el-icon>
-        </template>
-        <template v-else-if="activeText || inactiveText">
-          <span :class="ns.is('text')" :aria-hidden="!checked">
-            {{ checked ? activeText : inactiveText }}
-          </span>
-        </template>
+        <div v-if="!checked" :class="ns.e('inner-wrapper')">
+          <slot name="inactive">
+            <el-icon v-if="inactiveIcon">
+              <component :is="inactiveIcon" />
+            </el-icon>
+            <span v-if="!inactiveIcon && inactiveText">{{ inactiveText }}</span>
+          </slot>
+        </div>
+        <div v-else :class="ns.e('inner-wrapper')">
+          <slot name="active">
+            <el-icon v-if="activeIcon">
+              <component :is="activeIcon" />
+            </el-icon>
+            <span v-if="!activeIcon && activeText">{{ activeText }}</span>
+          </slot>
+        </div>
       </div>
       <div :class="ns.e('action')">
         <el-icon v-if="loading" :class="ns.is('loading')">
@@ -58,15 +66,17 @@
       </div>
     </span>
     <span
-      v-if="!inlinePrompt && (activeIcon || activeText)"
+      v-if="!inlinePrompt && (activeIcon || activeText || $slots.active)"
       :class="labelRightKls"
     >
-      <el-icon v-if="activeIcon">
-        <component :is="activeIcon" />
-      </el-icon>
-      <span v-if="!activeIcon && activeText" :aria-hidden="!checked">{{
-        activeText
-      }}</span>
+      <slot name="active">
+        <el-icon v-if="activeIcon">
+          <component :is="activeIcon" />
+        </el-icon>
+        <span v-if="!activeIcon && activeText" :aria-hidden="!checked">{{
+          activeText
+        }}</span>
+      </slot>
     </span>
   </div>
 </template>
diff --git a/packages/theme-chalk/src/switch.scss b/packages/theme-chalk/src/switch.scss
index fc084bb050..647ec79af4 100644
--- a/packages/theme-chalk/src/switch.scss
+++ b/packages/theme-chalk/src/switch.scss
@@ -175,8 +175,9 @@ $switch-content-padding: map.merge(
       padding: 0 #{map.get($switch-content-padding, 'default')} 0
         calc(#{map.get($switch-button-size, 'default')} + 2px);
 
-      .is-icon,
-      .is-text {
+      &-wrapper {
+        display: flex;
+        align-items: center;
         font-size: 12px;
         color: getCssVar('color-white');
         user-select: none;