From d308e4eca980e1c1f3682ffb2592e22692c049e8 Mon Sep 17 00:00:00 2001
From: Seeridia <i@seeridia.top>
Date: Thu, 2 Jul 2026 21:11:22 +0800
Subject: [PATCH] feat(Switch): add shape api for web

---
 .../packages/components/switch/defaultProps.ts           | 8 +++++++-
 .../packages/components/switch/switch.en-US.md           | 1 +
 .../tdesign-react/packages/components/switch/switch.md   | 1 +
 .../tdesign-react/packages/components/switch/type.ts     | 5 +++++
 .../tdesign-vue-next/examples/switch/switch.en-US.md     | 1 +
 .../products/tdesign-vue-next/examples/switch/switch.md  | 1 +
 .../tdesign-vue-next/packages/components/switch/props.ts | 9 +++++++++
 .../packages/components/switch/switch.en-US.md           | 1 +
 .../packages/components/switch/switch.md                 | 1 +
 .../tdesign-vue-next/packages/components/switch/type.ts  | 5 +++++
 packages/products/tdesign-vue/src/switch/props.ts        | 9 +++++++++
 packages/products/tdesign-vue/src/switch/switch.en-US.md | 1 +
 packages/products/tdesign-vue/src/switch/switch.md       | 1 +
 packages/products/tdesign-vue/src/switch/type.ts         | 5 +++++
 14 files changed, 48 insertions(+), 1 deletion(-)

diff --git a/packages/products/tdesign-react/packages/components/switch/defaultProps.ts b/packages/products/tdesign-react/packages/components/switch/defaultProps.ts
index d28cb443f..adae55d1f 100644
--- a/packages/products/tdesign-react/packages/components/switch/defaultProps.ts
+++ b/packages/products/tdesign-react/packages/components/switch/defaultProps.ts
@@ -4,4 +4,10 @@
 
 import { TdSwitchProps } from './type';
 
-export const switchDefaultProps: TdSwitchProps = { disabled: undefined, label: [], loading: false, size: 'medium' };
+export const switchDefaultProps: TdSwitchProps = {
+  disabled: undefined,
+  label: [],
+  loading: false,
+  shape: 'circle',
+  size: 'medium',
+};
diff --git a/packages/products/tdesign-react/packages/components/switch/switch.en-US.md b/packages/products/tdesign-react/packages/components/switch/switch.en-US.md
index f2b5e5ab3..ee8270eb6 100644
--- a/packages/products/tdesign-react/packages/components/switch/switch.en-US.md
+++ b/packages/products/tdesign-react/packages/components/switch/switch.en-US.md
@@ -13,6 +13,7 @@ customValue | Array | - | Typescript：`Array<SwitchValue>` | N
 disabled | Boolean | undefined | \- | N
 label | TNode | [] | Typescript：`Array<string \| TNode> \| TNode<{ value: SwitchValue }>`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N
 loading | Boolean | false | \- | N
+shape | String | circle | Switch shape. `label` is not rendered when shape is `line`. Options: circle/round/line | N
 size | String | medium | options: small/medium/large | N
 value | String / Number / Boolean | - | Typescript：`T` `type SwitchValue = string \| number \| boolean`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/switch/type.ts) | N
 defaultValue | String / Number / Boolean | - | uncontrolled property。Typescript：`T` `type SwitchValue = string \| number \| boolean`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/switch/type.ts) | N
diff --git a/packages/products/tdesign-react/packages/components/switch/switch.md b/packages/products/tdesign-react/packages/components/switch/switch.md
index 5f3eaa862..0e2039ac6 100644
--- a/packages/products/tdesign-react/packages/components/switch/switch.md
+++ b/packages/products/tdesign-react/packages/components/switch/switch.md
@@ -13,6 +13,7 @@ customValue | Array | - | 用于自定义开关的值，[打开时的值，关
 disabled | Boolean | undefined | 是否禁用组件。优先级：Switch.disabled > Form.disabled | N
 label | TNode | [] | 开关内容，[开启时内容，关闭时内容]。示例：['开', '关'] 或 (value) => value ? '开' : '关'。TS 类型：`Array<string \| TNode> \| TNode<{ value: SwitchValue }>`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N
 loading | Boolean | false | 是否处于加载中状态 | N
+shape | String | circle | 开关形状。`line` 形态不展示开关内容 `label`。可选项：circle/round/line | N
 size | String | medium | 开关尺寸。可选项：small/medium/large | N
 value | String / Number / Boolean | - | 开关值。TS 类型：`T` `type SwitchValue = string \| number \| boolean`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/switch/type.ts) | N
 defaultValue | String / Number / Boolean | - | 开关值。非受控属性。TS 类型：`T` `type SwitchValue = string \| number \| boolean`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/switch/type.ts) | N
diff --git a/packages/products/tdesign-react/packages/components/switch/type.ts b/packages/products/tdesign-react/packages/components/switch/type.ts
index abff5997c..ad308e191 100644
--- a/packages/products/tdesign-react/packages/components/switch/type.ts
+++ b/packages/products/tdesign-react/packages/components/switch/type.ts
@@ -30,6 +30,11 @@ export interface TdSwitchProps<T = SwitchValue> {
    * @default false
    */
   loading?: boolean;
+  /**
+   * 开关形状。`line` 形态不展示开关内容 `label`
+   * @default circle
+   */
+  shape?: 'circle' | 'round' | 'line';
   /**
    * 开关尺寸
    * @default medium
diff --git a/packages/products/tdesign-vue-next/examples/switch/switch.en-US.md b/packages/products/tdesign-vue-next/examples/switch/switch.en-US.md
index 38f5a25d6..f4428213b 100644
--- a/packages/products/tdesign-vue-next/examples/switch/switch.en-US.md
+++ b/packages/products/tdesign-vue-next/examples/switch/switch.en-US.md
@@ -10,6 +10,7 @@ customValue | Array | - | Typescript：`Array<SwitchValue>` | N
 disabled | Boolean | - | \- | N
 label | Array / Slot / Function | [] | Typescript：`Array<string | TNode> | TNode<{ value: SwitchValue }>`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N
 loading | Boolean | false | \- | N
+shape | String | circle | Switch shape. `label` is not rendered when shape is `line`. Options: circle/round/line | N
 size | String | medium | options：small/medium/large | N
 value | String / Number / Boolean | - | `v-model` and `v-model:value` is supported。Typescript：`SwitchValue` `type SwitchValue = string | number | boolean`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/switch/type.ts) | N
 defaultValue | String / Number / Boolean | - | uncontrolled property。Typescript：`SwitchValue` `type SwitchValue = string | number | boolean`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/switch/type.ts) | N
diff --git a/packages/products/tdesign-vue-next/examples/switch/switch.md b/packages/products/tdesign-vue-next/examples/switch/switch.md
index 9a9d2ccee..10ccb90c5 100644
--- a/packages/products/tdesign-vue-next/examples/switch/switch.md
+++ b/packages/products/tdesign-vue-next/examples/switch/switch.md
@@ -10,6 +10,7 @@ customValue | Array | - | 用于自定义开关的值，[打开时的值，关
 disabled | Boolean | - | 是否禁用组件 | N
 label | Array / Slot / Function | [] | 开关内容，[开启时内容，关闭时内容]。示例：['开', '关'] 或 (value) => value ? '开' : '关'。TS 类型：`Array<string | TNode> | TNode<{ value: SwitchValue }>`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N
 loading | Boolean | false | 是否处于加载中状态 | N
+shape | String | circle | 开关形状。`line` 形态不展示开关内容 `label`。可选项：circle/round/line | N
 size | String | medium | 开关尺寸。可选项：small/medium/large | N
 value | String / Number / Boolean | - | 开关值。支持语法糖 `v-model` 或 `v-model:value`。TS 类型：`SwitchValue` `type SwitchValue = string | number | boolean`。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/switch/type.ts) | N
 defaultValue | String / Number / Boolean | - | 开关值。非受控属性。TS 类型：`SwitchValue` `type SwitchValue = string | number | boolean`。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/switch/type.ts) | N
diff --git a/packages/products/tdesign-vue-next/packages/components/switch/props.ts b/packages/products/tdesign-vue-next/packages/components/switch/props.ts
index c5759ddf0..2e92d3260 100644
--- a/packages/products/tdesign-vue-next/packages/components/switch/props.ts
+++ b/packages/products/tdesign-vue-next/packages/components/switch/props.ts
@@ -28,6 +28,15 @@ export default {
   },
   /** 是否处于加载中状态 */
   loading: Boolean,
+  /** 开关形状。`line` 形态不展示开关内容 `label` */
+  shape: {
+    type: String as PropType<TdSwitchProps['shape']>,
+    default: 'circle' as TdSwitchProps['shape'],
+    validator(val: TdSwitchProps['shape']): boolean {
+      if (!val) return true;
+      return ['circle', 'round', 'line'].includes(val);
+    },
+  },
   /** 开关尺寸 */
   size: {
     type: String as PropType<TdSwitchProps['size']>,
diff --git a/packages/products/tdesign-vue-next/packages/components/switch/switch.en-US.md b/packages/products/tdesign-vue-next/packages/components/switch/switch.en-US.md
index 281af4ea3..b90f04077 100644
--- a/packages/products/tdesign-vue-next/packages/components/switch/switch.en-US.md
+++ b/packages/products/tdesign-vue-next/packages/components/switch/switch.en-US.md
@@ -11,6 +11,7 @@ customValue | Array | - | Typescript：`Array<SwitchValue>` | N
 disabled | Boolean | undefined | \- | N
 label | Array / Slot / Function | [] | Typescript：`Array<string \| TNode> \| TNode<{ value: SwitchValue }>`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts) | N
 loading | Boolean | false | \- | N
+shape | String | circle | Switch shape. `label` is not rendered when shape is `line`. Options: circle/round/line | N
 size | String | medium | options: small/medium/large | N
 value | String / Number / Boolean | - | `v-model` and `v-model:value` is supported。Typescript：`T` `type SwitchValue = string \| number \| boolean`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/switch/type.ts) | N
 defaultValue | String / Number / Boolean | - | uncontrolled property。Typescript：`T` `type SwitchValue = string \| number \| boolean`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/switch/type.ts) | N
diff --git a/packages/products/tdesign-vue-next/packages/components/switch/switch.md b/packages/products/tdesign-vue-next/packages/components/switch/switch.md
index 358fb3a1e..980e97f02 100644
--- a/packages/products/tdesign-vue-next/packages/components/switch/switch.md
+++ b/packages/products/tdesign-vue-next/packages/components/switch/switch.md
@@ -11,6 +11,7 @@ customValue | Array | - | 用于自定义开关的值，[打开时的值，关
 disabled | Boolean | undefined | 是否禁用组件。优先级：Switch.disabled > Form.disabled | N
 label | Array / Slot / Function | [] | 开关内容，[开启时内容，关闭时内容]。示例：['开', '关'] 或 (value) => value ? '开' : '关'。TS 类型：`Array<string \| TNode> \| TNode<{ value: SwitchValue }>`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts) | N
 loading | Boolean | false | 是否处于加载中状态 | N
+shape | String | circle | 开关形状。`line` 形态不展示开关内容 `label`。可选项：circle/round/line | N
 size | String | medium | 开关尺寸。可选项：small/medium/large | N
 value | String / Number / Boolean | - | 开关值。支持语法糖 `v-model` 或 `v-model:value`。TS 类型：`T` `type SwitchValue = string \| number \| boolean`。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/switch/type.ts) | N
 defaultValue | String / Number / Boolean | - | 开关值。非受控属性。TS 类型：`T` `type SwitchValue = string \| number \| boolean`。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/switch/type.ts) | N
diff --git a/packages/products/tdesign-vue-next/packages/components/switch/type.ts b/packages/products/tdesign-vue-next/packages/components/switch/type.ts
index 6faab3016..17151f698 100644
--- a/packages/products/tdesign-vue-next/packages/components/switch/type.ts
+++ b/packages/products/tdesign-vue-next/packages/components/switch/type.ts
@@ -29,6 +29,11 @@ export interface TdSwitchProps<T = SwitchValue> {
    * @default false
    */
   loading?: boolean;
+  /**
+   * 开关形状。`line` 形态不展示开关内容 `label`
+   * @default circle
+   */
+  shape?: 'circle' | 'round' | 'line';
   /**
    * 开关尺寸
    * @default medium
diff --git a/packages/products/tdesign-vue/src/switch/props.ts b/packages/products/tdesign-vue/src/switch/props.ts
index 871922f5d..4ef91c6a9 100644
--- a/packages/products/tdesign-vue/src/switch/props.ts
+++ b/packages/products/tdesign-vue/src/switch/props.ts
@@ -28,6 +28,15 @@ export default {
   },
   /** 是否处于加载中状态 */
   loading: Boolean,
+  /** 开关形状。`line` 形态不展示开关内容 `label` */
+  shape: {
+    type: String as PropType<TdSwitchProps['shape']>,
+    default: 'circle' as TdSwitchProps['shape'],
+    validator(val: TdSwitchProps['shape']): boolean {
+      if (!val) return true;
+      return ['circle', 'round', 'line'].includes(val);
+    },
+  },
   /** 开关尺寸 */
   size: {
     type: String as PropType<TdSwitchProps['size']>,
diff --git a/packages/products/tdesign-vue/src/switch/switch.en-US.md b/packages/products/tdesign-vue/src/switch/switch.en-US.md
index df176b876..66ec78e03 100644
--- a/packages/products/tdesign-vue/src/switch/switch.en-US.md
+++ b/packages/products/tdesign-vue/src/switch/switch.en-US.md
@@ -11,6 +11,7 @@ customValue | Array | - | Typescript：`Array<SwitchValue>` | N
 disabled | Boolean | undefined | \- | N
 label | Array / Slot / Function | [] | Typescript：`Array<string \| TNode> \| TNode<{ value: SwitchValue }>`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
 loading | Boolean | false | \- | N
+shape | String | circle | Switch shape. `label` is not rendered when shape is `line`. Options: circle/round/line | N
 size | String | medium | options: small/medium/large | N
 value | String / Number / Boolean | - | `v-model` is supported。Typescript：`T` `type SwitchValue = string \| number \| boolean`。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/switch/type.ts) | N
 defaultValue | String / Number / Boolean | - | uncontrolled property。Typescript：`T` `type SwitchValue = string \| number \| boolean`。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/switch/type.ts) | N
diff --git a/packages/products/tdesign-vue/src/switch/switch.md b/packages/products/tdesign-vue/src/switch/switch.md
index e68b3d460..7b7ae0d76 100644
--- a/packages/products/tdesign-vue/src/switch/switch.md
+++ b/packages/products/tdesign-vue/src/switch/switch.md
@@ -11,6 +11,7 @@ customValue | Array | - | 用于自定义开关的值，[打开时的值，关
 disabled | Boolean | undefined | 是否禁用组件。优先级：Switch.disabled > Form.disabled | N
 label | Array / Slot / Function | [] | 开关内容，[开启时内容，关闭时内容]。示例：['开', '关'] 或 (value) => value ? '开' : '关'。TS 类型：`Array<string \| TNode> \| TNode<{ value: SwitchValue }>`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
 loading | Boolean | false | 是否处于加载中状态 | N
+shape | String | circle | 开关形状。`line` 形态不展示开关内容 `label`。可选项：circle/round/line | N
 size | String | medium | 开关尺寸。可选项：small/medium/large | N
 value | String / Number / Boolean | - | 开关值。支持语法糖 `v-model`。TS 类型：`T` `type SwitchValue = string \| number \| boolean`。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/switch/type.ts) | N
 defaultValue | String / Number / Boolean | - | 开关值。非受控属性。TS 类型：`T` `type SwitchValue = string \| number \| boolean`。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/switch/type.ts) | N
diff --git a/packages/products/tdesign-vue/src/switch/type.ts b/packages/products/tdesign-vue/src/switch/type.ts
index 6daabe381..3ee7d4c43 100644
--- a/packages/products/tdesign-vue/src/switch/type.ts
+++ b/packages/products/tdesign-vue/src/switch/type.ts
@@ -29,6 +29,11 @@ export interface TdSwitchProps<T = SwitchValue> {
    * @default false
    */
   loading?: boolean;
+  /**
+   * 开关形状。`line` 形态不展示开关内容 `label`
+   * @default circle
+   */
+  shape?: 'circle' | 'round' | 'line';
   /**
    * 开关尺寸
    * @default medium