diff --git a/packages/components/switch/__tests__/switch.test.ts b/packages/components/switch/__tests__/switch.test.tsx
similarity index 92%
rename from packages/components/switch/__tests__/switch.test.ts
rename to packages/components/switch/__tests__/switch.test.tsx
index 3583dabf1a5cb..8eaadc9ebe647 100644
--- a/packages/components/switch/__tests__/switch.test.ts
+++ b/packages/components/switch/__tests__/switch.test.tsx
@@ -5,6 +5,8 @@ import { debugWarn } from '@element-plus/utils'
 import { Checked, CircleClose } from '@element-plus/icons-vue'
 import { ElFormItem } from '@element-plus/components/form'
 import Switch from '../src/switch.vue'
+import type { VueWrapper } from '@vue/test-utils'
+import type { SwitchInstance } from '../src/switch'
 
 vi.mock('@element-plus/utils/error', () => ({
   debugWarn: vi.fn(),
@@ -142,7 +144,7 @@ describe('Switch.vue', () => {
         </div>
       `,
       methods: {
-        handleChange(val) {
+        handleChange(val: boolean) {
           this.target = val
         },
       },
@@ -214,6 +216,33 @@ describe('Switch.vue', () => {
     expect(vm.value).toEqual('100')
   })
 
+  test('default switch active-value is false', async () => {
+    const wrapper = mount({
+      components: {
+        'el-switch': Switch,
+      },
+      template: `
+        <div>
+          <el-switch v-model="value" :active-value="onValue" :inactive-value="offValue"></el-switch>
+        </div>
+      `,
+      data() {
+        return {
+          value: false,
+          onValue: false,
+          offValue: true,
+        }
+      },
+    })
+    const vm = wrapper.vm
+
+    const coreWrapper = wrapper.find('.el-switch__core')
+    await coreWrapper.trigger('click')
+    expect(vm.value).toEqual(true)
+    await coreWrapper.trigger('click')
+    expect(vm.value).toEqual(false)
+  })
+
   test('value is the single source of truth', async () => {
     const wrapper = mount({
       components: {
@@ -227,7 +256,8 @@ describe('Switch.vue', () => {
     })
     const vm = wrapper.vm
     const coreWrapper = wrapper.find('.el-switch__core')
-    const switchWrapper = wrapper.findComponent(Switch)
+    const switchWrapper: VueWrapper<SwitchInstance> =
+      wrapper.findComponent(Switch)
     const switchVm = switchWrapper.vm
     const inputEl = vm.$el.querySelector('input')
 
@@ -253,7 +283,8 @@ describe('Switch.vue', () => {
     })
     const vm = wrapper.vm
     const coreWrapper = wrapper.find('.el-switch__core')
-    const switchWrapper = wrapper.findComponent(Switch)
+    const switchWrapper: VueWrapper<SwitchInstance> =
+      wrapper.findComponent(Switch)
     const switchVm = switchWrapper.vm
     const inputEl = vm.$el.querySelector('input')
 
diff --git a/packages/components/switch/src/switch.vue b/packages/components/switch/src/switch.vue
index 98e6940621db0..1de336f93fe1e 100644
--- a/packages/components/switch/src/switch.vue
+++ b/packages/components/switch/src/switch.vue
@@ -82,10 +82,9 @@
   </div>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
 import {
   computed,
-  defineComponent,
   getCurrentInstance,
   nextTick,
   onMounted,
@@ -110,167 +109,155 @@ import {
   useSize,
 } from '@element-plus/hooks'
 import { switchEmits, switchProps } from './switch'
-
 import type { CSSProperties } from 'vue'
 
 const COMPONENT_NAME = 'ElSwitch'
 
-export default defineComponent({
-  name: COMPONENT_NAME,
-  components: { ElIcon, Loading },
+defineOptions({
+  name: 'ElSwitch',
+})
 
-  props: switchProps,
-  emits: switchEmits,
+const props = defineProps(switchProps)
+const emit = defineEmits(switchEmits)
 
-  setup(props, { emit }) {
-    const vm = getCurrentInstance()!
-    const { formItem } = useFormItem()
-    const switchSize = useSize()
-    const switchDisabled = useDisabled(computed(() => props.loading))
-    const ns = useNamespace('switch')
+const vm = getCurrentInstance()!
+const { formItem } = useFormItem()
+const switchSize = useSize()
+const ns = useNamespace('switch')
 
-    useDeprecated(
-      {
-        from: '"value"',
-        replacement: '"model-value" or "v-model"',
-        scope: COMPONENT_NAME,
-        version: '2.3.0',
-        ref: 'https://element-plus.org/en-US/component/switch.html#attributes',
-        type: 'Attribute',
-      },
-      computed(() => !!vm.vnode.props?.value)
-    )
-
-    const { inputId } = useFormItemInputId(props, {
-      formItemContext: formItem,
-    })
+useDeprecated(
+  {
+    from: '"value"',
+    replacement: '"model-value" or "v-model"',
+    scope: COMPONENT_NAME,
+    version: '2.3.0',
+    ref: 'https://element-plus.org/en-US/component/switch.html#attributes',
+    type: 'Attribute',
+  },
+  computed(() => !!vm.vnode.props?.value)
+)
 
-    const isModelValue = ref(props.modelValue !== false)
-    const input = ref<HTMLInputElement>()
-    const core = ref<HTMLSpanElement>()
+const { inputId } = useFormItemInputId(props, {
+  formItemContext: formItem,
+})
 
-    const switchKls = computed(() => [
-      ns.b(),
-      ns.m(switchSize.value),
-      ns.is('disabled', switchDisabled.value),
-      ns.is('checked', checked.value),
-    ])
+const switchDisabled = useDisabled(computed(() => props.loading))
+const isControlled = ref(props.modelValue !== false)
+const input = ref<HTMLInputElement>()
+const core = ref<HTMLSpanElement>()
 
-    const coreStyle = computed<CSSProperties>(() => ({
-      width: addUnit(props.width),
-    }))
+const switchKls = computed(() => [
+  ns.b(),
+  ns.m(switchSize.value),
+  ns.is('disabled', switchDisabled.value),
+  ns.is('checked', checked.value),
+])
 
-    watch(
-      () => props.modelValue,
-      () => {
-        isModelValue.value = true
-      }
-    )
+const coreStyle = computed<CSSProperties>(() => ({
+  width: addUnit(props.width),
+}))
 
-    watch(
-      () => props.value,
-      () => {
-        isModelValue.value = false
-      }
-    )
+watch(
+  () => props.modelValue,
+  () => {
+    isControlled.value = true
+  }
+)
 
-    const actualValue = computed(() => {
-      return isModelValue.value ? props.modelValue : props.value
-    })
+watch(
+  () => props.value,
+  () => {
+    isControlled.value = false
+  }
+)
 
-    const checked = computed(() => actualValue.value === props.activeValue)
+const actualValue = computed(() => {
+  return isControlled.value ? props.modelValue : props.value
+})
 
-    if (![props.activeValue, props.inactiveValue].includes(actualValue.value)) {
-      emit(UPDATE_MODEL_EVENT, props.inactiveValue)
-      emit(CHANGE_EVENT, props.inactiveValue)
-      emit(INPUT_EVENT, props.inactiveValue)
-    }
+const checked = computed(() => actualValue.value === props.activeValue)
 
-    watch(checked, () => {
-      input.value!.checked = checked.value
+if (![props.activeValue, props.inactiveValue].includes(actualValue.value)) {
+  emit(UPDATE_MODEL_EVENT, props.inactiveValue)
+  emit(CHANGE_EVENT, props.inactiveValue)
+  emit(INPUT_EVENT, props.inactiveValue)
+}
 
-      if (props.validateEvent) {
-        formItem?.validate?.('change').catch((err) => debugWarn(err))
-      }
-    })
+watch(checked, (val) => {
+  input.value!.checked = val
 
-    const handleChange = (): void => {
-      const val = checked.value ? props.inactiveValue : props.activeValue
-      emit(UPDATE_MODEL_EVENT, val)
-      emit(CHANGE_EVENT, val)
-      emit(INPUT_EVENT, val)
-      nextTick(() => {
-        input.value!.checked = checked.value
-      })
-    }
+  if (props.validateEvent) {
+    formItem?.validate?.('change').catch((err) => debugWarn(err))
+  }
+})
 
-    const switchValue = (): void => {
-      if (switchDisabled.value) return
+const handleChange = () => {
+  const val = checked.value ? props.inactiveValue : props.activeValue
+  emit(UPDATE_MODEL_EVENT, val)
+  emit(CHANGE_EVENT, val)
+  emit(INPUT_EVENT, val)
+  nextTick(() => {
+    input.value!.checked = checked.value
+  })
+}
 
-      const { beforeChange } = props
-      if (!beforeChange) {
-        handleChange()
-        return
-      }
+const switchValue = () => {
+  if (switchDisabled.value) return
 
-      const shouldChange = beforeChange()
+  const { beforeChange } = props
+  if (!beforeChange) {
+    handleChange()
+    return
+  }
 
-      const isExpectType = [
-        isPromise(shouldChange),
-        isBoolean(shouldChange),
-      ].some((i) => i)
-      if (!isExpectType) {
-        throwError(
-          COMPONENT_NAME,
-          'beforeChange must return type `Promise<boolean>` or `boolean`'
-        )
-      }
+  const shouldChange = beforeChange()
 
-      if (isPromise(shouldChange)) {
-        shouldChange
-          .then((result) => {
-            if (result) {
-              handleChange()
-            }
-          })
-          .catch((e) => {
-            debugWarn(COMPONENT_NAME, `some error occurred: ${e}`)
-          })
-      } else if (shouldChange) {
-        handleChange()
-      }
-    }
+  const isPromiseOrBool = [
+    isPromise(shouldChange),
+    isBoolean(shouldChange),
+  ].includes(true)
+  if (!isPromiseOrBool) {
+    throwError(
+      COMPONENT_NAME,
+      'beforeChange must return type `Promise<boolean>` or `boolean`'
+    )
+  }
 
-    const styles = computed(() => {
-      return ns.cssVarBlock({
-        ...(props.activeColor ? { 'on-color': props.activeColor } : null),
-        ...(props.inactiveColor ? { 'off-color': props.inactiveColor } : null),
-        ...(props.borderColor ? { 'border-color': props.borderColor } : null),
+  if (isPromise(shouldChange)) {
+    shouldChange
+      .then((result) => {
+        if (result) {
+          handleChange()
+        }
+      })
+      .catch((e) => {
+        debugWarn(COMPONENT_NAME, `some error occurred: ${e}`)
       })
-    })
+  } else if (shouldChange) {
+    handleChange()
+  }
+}
 
-    const focus = (): void => {
-      input.value?.focus?.()
-    }
+const styles = computed(() => {
+  return ns.cssVarBlock({
+    ...(props.activeColor ? { 'on-color': props.activeColor } : null),
+    ...(props.inactiveColor ? { 'off-color': props.inactiveColor } : null),
+    ...(props.borderColor ? { 'border-color': props.borderColor } : null),
+  })
+})
 
-    onMounted(() => {
-      input.value!.checked = checked.value
-    })
+const focus = (): void => {
+  input.value?.focus?.()
+}
 
-    return {
-      ns,
-      input,
-      inputId,
-      core,
-      switchDisabled,
-      checked,
-      switchKls,
-      coreStyle,
-      handleChange,
-      switchValue,
-      focus,
-      styles,
-    }
-  },
+onMounted(() => {
+  input.value!.checked = checked.value
+})
+
+defineExpose({
+  /**
+   *  @description manual focus to the switch component
+   **/
+  focus,
 })
 </script>