diff --git a/packages/docs/checkbox.md b/packages/docs/checkbox.md
index 9368770e663a2881cabd15b5f4592b36bd2eb439..e8e726e25f14acd856d48698ced7135064be66cc 100644
--- a/packages/docs/checkbox.md
+++ b/packages/docs/checkbox.md
@@ -2,12 +2,13 @@
 
 ## props
 
-| name                 | type                      | 默认值 | 说明                 |
-| :------------------- | :------------------------ | :----- | -------------------- |
-| value                | string \| number          | -      | 必选，多选框 vale    |
-| model-value(v-model) | Array<string \| number \> | [ ]    | 可选，双向绑定值     |
-| disabled             | boolean                   | false  | 可选，是否禁用       |
-| indeterminate        | boolean                   | false  | 可选，是否为半选状态 |
+| name                | type                      | 默认值 | 说明                             |
+| :------------------ | :------------------------ | :----- | -------------------------------- |
+| value               | string \| number          | -      | 必选，多选框 value               |
+| modelValue(v-model) | Array<string \| number \> | -      | 可选，多选框双向绑定值           |
+| defaultChecked      | boolean                   | false  | 可选，非受控状态时，默认是否选中 |
+| disabled            | boolean                   | false  | 可选，是否禁用                   |
+| indeterminate       | boolean                   | false  | 可选，是否为半选状态             |
 
 ## event
 
@@ -31,13 +32,14 @@
 
 ## props
 
-| name                 | type                       | 默认值       | 说明                                   |
-| :------------------- | :------------------------- | :----------- | -------------------------------------- |
-| model-value(v-model) | Array<string \| number \>  | [ ]          | 可选，双向绑定值                       |
-| disabled             | boolean                    | false        | 可选，是否禁用                         |
-| direction            | 'horizontal' \| 'vertical' | 'horizontal' | 可选，排列方向                         |
-| min                  | number                     | -            | 可选，多选框组支持选中的最小多选框数量 |
-| max                  | number                     | -            | 可选，多选框组支持选中的最大多选框数量 |
+| name                | type                       | 默认值       | 说明                                   |
+| :------------------ | :------------------------- | :----------- | -------------------------------------- |
+| modelValue(v-model) | Array<string \| number \>  | -            | 可选，多选框组双向绑定值               |
+| defaultValue        | Array<string \| number \>  | []           | 可选，非受控状态时，多选框组默认值     |
+| disabled            | boolean                    | false        | 可选，是否禁用                         |
+| direction           | 'horizontal' \| 'vertical' | 'horizontal' | 可选，排列方向                         |
+| min                 | number                     | -            | 可选，多选框组支持选中的最小多选框数量 |
+| max                 | number                     | -            | 可选，多选框组支持选中的最大多选框数量 |
 
 ## event
 
diff --git a/packages/docs/radio.md b/packages/docs/radio.md
index e66641cbb17fe41168004d3d7d675c201e6656c2..bb6d4e34d96a9b430e270783f2f99476fdef0cfa 100644
--- a/packages/docs/radio.md
+++ b/packages/docs/radio.md
@@ -2,11 +2,12 @@
 
 ## props
 
-| name                 | type                        | 默认值 | 说明               |
-| :------------------- | :-------------------------- | :----- | ------------------ |
-| value                | string \| number \| boolean | -      | 必选，单选框 value |
-| model-value(v-model) | string \| number \| boolean | -      | 可选，双向绑定值   |
-| disabled             | boolean                     | false  | 可选，是否禁用     |
+| name                | type                        | 默认值 | 说明                             |
+| :------------------ | :-------------------------- | :----- | -------------------------------- |
+| value               | string \| number \| boolean | -      | 必选，单选框 value               |
+| modelValue(v-model) | string \| number \| boolean | -      | 可选，单选框双向绑定值           |
+| defaultChecked      | boolean                     | false  | 可选，非受控状态时，默认是否选中 |
+| disabled            | boolean                     | false  | 可选，是否禁用                   |
 
 ## event
 
@@ -30,11 +31,12 @@
 
 ## props
 
-| name                 | type                        | 默认值       | 说明             |
-| :------------------- | :-------------------------- | :----------- | ---------------- |
-| model-value(v-model) | string \| number \| boolean | -            | 可选，双向绑定值 |
-| disabled             | boolean                     | false        | 可选，是否禁用   |
-| direction            | 'horizontal' \| 'vertical'  | 'horizontal' | 可选，排列方向   |
+| name                | type                        | 默认值       | 说明                               |
+| :------------------ | :-------------------------- | :----------- | ---------------------------------- |
+| modelValue(v-model) | string \| number \| boolean | -            | 可选，单选框组双向绑定值           |
+| defaultValue        | string \| number \| boolean | ''           | 可选，非受控状态时，单选框组默认值 |
+| disabled            | boolean                     | false        | 可选，是否禁用                     |
+| direction           | 'horizontal' \| 'vertical'  | 'horizontal' | 可选，排列方向                     |
 
 ## event
 
diff --git a/packages/docs/switch.md b/packages/docs/switch.md
index f50cd4d5a857b2f6d5809bec9220923bdb30861d..eb0a7e4a56f61e881f98ab32dcc82ec2de2e0dba 100644
--- a/packages/docs/switch.md
+++ b/packages/docs/switch.md
@@ -2,14 +2,17 @@
 
 ## props
 
-| name                 | type                                          | 默认值   | 说明                                                                                                                                               |
-| :------------------- | :-------------------------------------------- | :------- | -------------------------------------------------------------------------------------------------------------------------------------------------- |
-| model-value(v-model) | boolean                                       | false    | 可选，双向绑定值                                                                                                                                   |
-| size                 | 'large' \| 'normal' \| 'small'                | 'normal' | 可选，开关尺寸                                                                                                                                     |
-| shape                | 'normal' \| 'round'                           | 'normal' | 可选，开关形状                                                                                                                                     |
-| disabled             | boolean                                       | false    | 可选，是否禁用                                                                                                                                     |
-| loading              | boolean                                       | false    | 可选，是否加载中                                                                                                                                   |
-| beforeChange         | (val: boolean): Promise\<boolean\> \| boolean | -        | 状态改变前的钩子函数，返回 true 或者返回 promise 且 resolve(true)则继续切换，返回 false 或者返回 promise 且被 reject 或 resolve(false)则阻止切换， |
+| name                | type                                          | 默认值   | 说明                                                                                                                                               |
+| :------------------ | :-------------------------------------------- | :------- | -------------------------------------------------------------------------------------------------------------------------------------------------- |
+| modelValue(v-model) | string \| number \| boolean                   | -        | 可选，双向绑定值                                                                                                                                   |
+| checkedValue        | string \| number \| boolean                   | true     | 可选，选中状态对应值                                                                                                                               |
+| uncheckedValue      | string \| number \| boolean                   | false    | 可选，未选中状态对应值                                                                                                                             |
+| defaultChecked      | boolean                                       | false    | 非受控状态时，默认是否选中                                                                                                                         |
+| size                | 'large' \| 'normal' \| 'small'                | 'normal' | 可选，开关尺寸                                                                                                                                     |
+| shape               | 'normal' \| 'round'                           | 'normal' | 可选，开关形状                                                                                                                                     |
+| disabled            | boolean                                       | false    | 可选，是否禁用                                                                                                                                     |
+| loading             | boolean                                       | false    | 可选，是否加载中                                                                                                                                   |
+| beforeChange        | (val: boolean): Promise\<boolean\> \| boolean | -        | 状态改变前的钩子函数，返回 true 或者返回 promise 且 resolve(true)则继续切换，返回 false 或者返回 promise 且被 reject 或 resolve(false)则阻止切换， |
 
 ## event
 
diff --git a/packages/opendesign/src/components/checkbox-group/OCheckboxGroup.vue b/packages/opendesign/src/components/checkbox-group/OCheckboxGroup.vue
index f56bfe3c4a35b703e234e1fbe3e73af508adda9f..38bda83d39c37397ffddbcfc68ffbb47cb9d50c6 100644
--- a/packages/opendesign/src/components/checkbox-group/OCheckboxGroup.vue
+++ b/packages/opendesign/src/components/checkbox-group/OCheckboxGroup.vue
@@ -1,13 +1,18 @@
 <script lang="ts" setup>
-import { computed, provide, toRefs } from 'vue';
+import { computed, provide, ref, toRefs, watch } from 'vue';
 import { checkboxGroupInjectKey } from './provide';
 import type { DirectionT } from '../_shared/global';
+import { isArray, isUndefined } from '../_shared/is';
 
 interface CheckboxGroupPropT {
   /**
    * 多选框组双向绑定值
    */
   modelValue?: Array<string | number>;
+  /**
+   * 非受控状态时，多选框组默认值
+   */
+  defaultValue?: Array<string | number>;
   /**
    * 多选框组是否禁用
    */
@@ -28,7 +33,8 @@ interface CheckboxGroupPropT {
 }
 
 const props = withDefaults(defineProps<CheckboxGroupPropT>(), {
-  modelValue: () => [],
+  modelValue: undefined,
+  defaultValue: () => [],
   disabled: false,
   direction: 'horizontal',
   min: undefined,
@@ -42,8 +48,14 @@ const emits = defineEmits<{
 
 const { modelValue, disabled, min, max } = toRefs(props);
 
-const isMinimum = computed(() => (min.value === undefined ? false : modelValue.value.length <= min.value));
-const isMaximum = computed(() => (max.value === undefined ? false : modelValue.value.length >= max.value));
+const realValue = ref(modelValue.value ?? props.defaultValue);
+
+watch(modelValue, (val) => {
+  realValue.value = val as Array<string | number>;
+});
+
+const isMinimum = computed(() => (isUndefined(min.value) || !isArray(realValue.value) ? false : realValue.value.length <= min.value));
+const isMaximum = computed(() => (isUndefined(max.value) || !isArray(realValue.value) ? false : realValue.value.length >= max.value));
 
 const updateModelValue = (val: Array<string | number>) => {
   emits('update:modelValue', val);
@@ -53,7 +65,7 @@ const onChange = (val: Array<string | number>) => {
   emits('change', val);
 };
 
-provide(checkboxGroupInjectKey, { modelValue, disabled, isMinimum, isMaximum, updateModelValue, onChange });
+provide(checkboxGroupInjectKey, { realValue, disabled, isMinimum, isMaximum, updateModelValue, onChange });
 </script>
 
 <template>
diff --git a/packages/opendesign/src/components/checkbox-group/provide.ts b/packages/opendesign/src/components/checkbox-group/provide.ts
index bea5d47be7999bc69707bd10aafe18755aeb2dab..c761b6681194132187c591b417a73285dabc2972 100644
--- a/packages/opendesign/src/components/checkbox-group/provide.ts
+++ b/packages/opendesign/src/components/checkbox-group/provide.ts
@@ -1,7 +1,7 @@
 import { InjectionKey, Ref } from 'vue';
 
 export const checkboxGroupInjectKey: InjectionKey<{
-  modelValue: Ref<Array<string | number>>;
+  realValue: Ref<Array<string | number>>;
   disabled: Ref<boolean>;
   isMinimum: Ref<boolean>;
   isMaximum: Ref<boolean>;
diff --git a/packages/opendesign/src/components/checkbox/OCheckbox.vue b/packages/opendesign/src/components/checkbox/OCheckbox.vue
index d0c61bbdbf9a239ceed9c3fdace07356245a832f..ab1113f568afd4b6c27ba66732fd11b5ca9899f1 100644
--- a/packages/opendesign/src/components/checkbox/OCheckbox.vue
+++ b/packages/opendesign/src/components/checkbox/OCheckbox.vue
@@ -1,7 +1,8 @@
 <script lang="ts" setup>
-import { computed, inject, nextTick } from 'vue';
+import { computed, inject, nextTick, ref, watch } from 'vue';
 import { checkboxGroupInjectKey } from '../checkbox-group/provide';
 import { IconDone, IconMinus } from '../_shared/icons';
+import { isArray } from '../_shared/is';
 
 interface CheckboxPropT {
   /**
@@ -12,6 +13,10 @@ interface CheckboxPropT {
    * 多选框双向绑定值
    */
   modelValue?: Array<string | number>;
+  /**
+   * 非受控状态时，默认是否选中
+   */
+  defaultChecked?: boolean;
   /**
    * 是否禁用
    */
@@ -22,7 +27,8 @@ interface CheckboxPropT {
   indeterminate?: boolean;
 }
 const props = withDefaults(defineProps<CheckboxPropT>(), {
-  modelValue: () => [],
+  modelValue: undefined,
+  defaultChecked: false,
   disabled: false,
 });
 
@@ -32,10 +38,37 @@ const emits = defineEmits<{
 }>();
 
 const checkboxGroupInjection = inject(checkboxGroupInjectKey, null);
+// 监听modelValue改变
+const isModelValueChanged = ref(false);
+
+watch(
+  () => props.modelValue,
+  () => {
+    isModelValueChanged.value = true;
+  },
+  { deep: true }
+);
 
 // 是否选中
-const isChecked = computed(() =>
-  checkboxGroupInjection ? checkboxGroupInjection.modelValue.value.includes(props.value) : props.modelValue?.includes(props.value)
+const _checked = ref(props.defaultChecked);
+const isChecked = computed(() => {
+  if (checkboxGroupInjection) {
+    return isArray(checkboxGroupInjection.realValue.value) ? checkboxGroupInjection.realValue.value.includes(props.value) : false;
+  }
+
+  if (isArray(props.modelValue) || isModelValueChanged.value) {
+    return isArray(props.modelValue) ? props.modelValue.includes(props.value) : false;
+  }
+
+  return _checked.value;
+});
+
+watch(
+  isChecked,
+  (val) => {
+    _checked.value = val;
+  },
+  { immediate: true }
 );
 
 // 是否禁用
@@ -54,13 +87,18 @@ const onClick = (ev: Event) => {
 const onChange = (ev: Event) => {
   const { checked } = ev.target as HTMLInputElement;
 
-  const set = checkboxGroupInjection ? new Set([...checkboxGroupInjection.modelValue.value]) : new Set([...props.modelValue]);
+  const set = checkboxGroupInjection
+    ? new Set([...checkboxGroupInjection.realValue.value])
+    : isArray(props.modelValue)
+    ? new Set([...props.modelValue])
+    : new Set([]);
   if (checked) {
     set.add(props.value);
   } else {
     set.delete(props.value);
   }
 
+  _checked.value = checked;
   const val = Array.from(set);
   emits('update:modelValue', val);
   checkboxGroupInjection?.updateModelValue(val);
@@ -78,7 +116,7 @@ defineExpose({
 <template>
   <label class="o-checkbox" :class="{ 'is-checked': isChecked, 'is-disabled': isDisabled, 'is-indeterminate': indeterminate }">
     <div class="o-checkbox-wrapper">
-      <input type="checkbox" :disabled="isDisabled" :checked="isChecked" @click="onClick" @change="onChange" />
+      <input type="checkbox" :value="value" :disabled="isDisabled" :checked="isChecked" @click="onClick" @change="onChange" />
       <slot v-if="$slots.checkbox" name="checkbox" :checked="isChecked" :disabled="isDisabled"></slot>
       <template v-else>
         <span class="o-checkbox-icon">
diff --git a/packages/opendesign/src/components/checkbox/__demo__/CheckboxIndeterminate.vue b/packages/opendesign/src/components/checkbox/__demo__/CheckboxIndeterminate.vue
index 361e7f18391070f7e48009da918595d235b1c1a9..2b192333a53b3bdaa42781eec1919cc8c18a8d29 100644
--- a/packages/opendesign/src/components/checkbox/__demo__/CheckboxIndeterminate.vue
+++ b/packages/opendesign/src/components/checkbox/__demo__/CheckboxIndeterminate.vue
@@ -21,7 +21,7 @@ const handleChange = (val: Array<string | number>) => {
     checkboxVal1.value = ['a'];
     indeterminate.value = false;
   } else if (val.length === 0) {
-    checkboxVal1.value = ['a'];
+    checkboxVal1.value = [];
     indeterminate.value = false;
   } else {
     checkboxVal1.value = [];
diff --git a/packages/opendesign/src/components/radio-group/ORadioGroup.vue b/packages/opendesign/src/components/radio-group/ORadioGroup.vue
index 6896742619e30b9f8bddec209db7b4b34c2a4c88..1d7c4161441bab721e9e111d8e60851b0b82b561 100644
--- a/packages/opendesign/src/components/radio-group/ORadioGroup.vue
+++ b/packages/opendesign/src/components/radio-group/ORadioGroup.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { provide, toRefs } from 'vue';
+import { provide, ref, toRefs, watch } from 'vue';
 import { radioGroupInjectKey } from './provide';
 import type { DirectionT } from '../_shared/global';
 
@@ -7,7 +7,11 @@ interface RadioGroupPropT {
   /**
    * 单选框组双向绑定值
    */
-  modelValue?: string | boolean | number;
+  modelValue?: string | number | boolean;
+  /**
+   * 非受控状态时，单选框组默认值
+   */
+  defaultValue?: string | number | boolean;
   /**
    * 单选框组是否禁用
    */
@@ -21,6 +25,7 @@ interface RadioGroupPropT {
 
 const props = withDefaults(defineProps<RadioGroupPropT>(), {
   modelValue: undefined,
+  defaultValue: '',
   disabled: false,
   direction: 'horizontal',
 });
@@ -32,6 +37,12 @@ const emits = defineEmits<{
 
 const { modelValue, disabled } = toRefs(props);
 
+const realValue = ref(modelValue.value ?? props.defaultValue);
+
+watch(modelValue, (val) => {
+  realValue.value = val as string | number | boolean;
+});
+
 const updateModelValue = (val: string | number | boolean) => {
   emits('update:modelValue', val);
 };
@@ -40,7 +51,7 @@ const onChange = (val: string | number | boolean) => {
   emits('change', val);
 };
 
-provide(radioGroupInjectKey, { modelValue, disabled, updateModelValue, onChange });
+provide(radioGroupInjectKey, { realValue, disabled, updateModelValue, onChange });
 </script>
 
 <template>
diff --git a/packages/opendesign/src/components/radio-group/provide.ts b/packages/opendesign/src/components/radio-group/provide.ts
index 8ba4f72d2c92aa0b867af55f207964d6ee1bf87d..2e32cd96d1c772e9cfb796363cb55a73d92e19a2 100644
--- a/packages/opendesign/src/components/radio-group/provide.ts
+++ b/packages/opendesign/src/components/radio-group/provide.ts
@@ -1,7 +1,7 @@
 import { InjectionKey, Ref } from 'vue';
 
 export const radioGroupInjectKey: InjectionKey<{
-  modelValue: Ref<string | number | boolean>;
+  realValue: Ref<string | number | boolean>;
   disabled: Ref<boolean>;
   updateModelValue: (val: string | number | boolean) => void;
   onChange: (val: string | number | boolean) => void;
diff --git a/packages/opendesign/src/components/radio/ORadio.vue b/packages/opendesign/src/components/radio/ORadio.vue
index a40f965b07f8c123a97ffe5ed58e773e6e56d867..333a337b0f73d0ace5460591bf7729a1a187e25b 100644
--- a/packages/opendesign/src/components/radio/ORadio.vue
+++ b/packages/opendesign/src/components/radio/ORadio.vue
@@ -1,16 +1,21 @@
 <script lang="ts" setup>
-import { computed, inject, nextTick } from 'vue';
+import { computed, inject, nextTick, ref, watch } from 'vue';
 import { radioGroupInjectKey } from '../radio-group/provide';
+import { isUndefined } from '../_shared/is';
 
 interface RadioPropT {
   /**
    * 单选框value
    */
-  value: string | boolean | number;
+  value: string | number | boolean;
   /**
    * 单选框双向绑定值
    */
-  modelValue?: string | boolean | number;
+  modelValue?: string | number | boolean;
+  /**
+   * 非受控状态时，默认是否选中
+   */
+  defaultChecked?: boolean;
   /**
    * 是否禁用
    */
@@ -18,6 +23,7 @@ interface RadioPropT {
 }
 const props = withDefaults(defineProps<RadioPropT>(), {
   modelValue: undefined,
+  defaultChecked: false,
   disabled: false,
 });
 
@@ -28,8 +34,41 @@ const emits = defineEmits<{
 
 const radioGroupInjection = inject(radioGroupInjectKey, null);
 
+// 监听modelValue改变
+const isModelValueChanged = ref(false);
+
+watch(
+  () => props.modelValue,
+  () => {
+    isModelValueChanged.value = true;
+  }
+);
+
 // 是否选中
-const isChecked = computed(() => props.value === (radioGroupInjection ? radioGroupInjection.modelValue.value : props.modelValue));
+const _checked = ref(props.defaultChecked);
+const isChecked = computed(() => {
+  if (radioGroupInjection) {
+    return props.value === radioGroupInjection.realValue.value;
+  }
+
+  if (!isUndefined(props.modelValue) || isModelValueChanged.value) {
+    return props.value === props.modelValue;
+  }
+
+  return _checked.value;
+});
+
+watch(
+  isChecked,
+  (val) => {
+    _checked.value = val;
+  },
+  { immediate: true }
+);
+
+defineExpose({
+  checked: isChecked,
+});
 
 // 是否disabled
 const isDisabled = computed(() => radioGroupInjection?.disabled.value || props.disabled);
@@ -43,6 +82,8 @@ const onChange = () => {
     return;
   }
 
+  _checked.value = true;
+
   const val = props.value;
   emits('update:modelValue', val);
   radioGroupInjection?.updateModelValue(val);
@@ -51,16 +92,12 @@ const onChange = () => {
     radioGroupInjection?.onChange(val);
   });
 };
-
-defineExpose({
-  checked: isChecked,
-});
 </script>
 
 <template>
   <label class="o-radio" :class="{ 'is-checked': isChecked, 'is-disabled': isDisabled }">
     <div class="o-radio-wrapper">
-      <input type="radio" :disabled="isDisabled" :checked="isChecked" @click="onClick" @change="onChange" />
+      <input type="radio" :value="value" :disabled="isDisabled" :checked="isChecked" @click="onClick" @change="onChange" />
       <slot v-if="$slots.radio" name="radio" :checked="isChecked" :disabled="isDisabled"></slot>
       <template v-else>
         <span class="o-radio-icon"></span>
diff --git a/packages/opendesign/src/components/switch/OSwitch.vue b/packages/opendesign/src/components/switch/OSwitch.vue
index 9eb18f9ffd636a5adc48eb61fd083d4911ea7de9..7cfa52ababb685111c361450d6c783a82facc30b 100644
--- a/packages/opendesign/src/components/switch/OSwitch.vue
+++ b/packages/opendesign/src/components/switch/OSwitch.vue
@@ -1,21 +1,35 @@
 <script setup lang="ts">
-import { isPromise, isBoolean } from '../_shared/is';
-
+import { computed, ref, watch } from 'vue';
 import { defaultSize, defaultShape } from '../_shared/global';
 import type { SizeT, ShapeT } from '../_shared/global';
 import { IconLoading } from '../_shared/icons';
+import { isPromise, isBoolean, isUndefined } from '../_shared/is';
 
 interface SwitchPropT {
   /**
    * 双向绑定值
    */
-  modelValue?: boolean;
+  modelValue?: string | number | boolean;
+  /**
+   * 选中状态对应值
+   */
+  checkedValue?: string | number | boolean;
+  /**
+   * 未选中状态对应值
+   */
+  uncheckedValue?: string | number | boolean;
+  /**
+   * 非受控状态时，默认是否选中
+   */
+  defaultChecked?: boolean;
   /**
-   * 开关尺寸："large" | "normal" | "small"
+   * 开关尺寸
+   * 'large' | 'normal' | 'small'
    */
   size?: SizeT;
   /**
-   * 开关形状："normal" | "round"
+   * 开关形状
+   * 'normal' | 'round'
    */
   shape?: ShapeT;
   /**
@@ -34,7 +48,10 @@ interface SwitchPropT {
 }
 
 const props = withDefaults(defineProps<SwitchPropT>(), {
-  modelValue: false,
+  modelValue: undefined,
+  checkedValue: true,
+  uncheckedValue: false,
+  defaultChecked: false,
   size: undefined,
   shape: undefined,
   disabled: false,
@@ -43,10 +60,38 @@ const props = withDefaults(defineProps<SwitchPropT>(), {
 });
 
 const emits = defineEmits<{
-  (e: 'update:modelValue', val: boolean): void;
-  (e: 'change', val: boolean): void;
+  (e: 'update:modelValue', val: string | number | boolean): void;
+  (e: 'change', val: string | number | boolean): void;
 }>();
 
+// 监听modelValue改变
+const isModelValueChanged = ref(false);
+
+watch(
+  () => props.modelValue,
+  () => {
+    isModelValueChanged.value = true;
+  }
+);
+
+// 是否选中
+const _checked = ref(props.defaultChecked);
+const isChecked = computed(() => {
+  if (!isUndefined(props.modelValue) || isModelValueChanged.value) {
+    return props.checkedValue === props.modelValue;
+  }
+
+  return _checked.value;
+});
+
+watch(
+  isChecked,
+  (val) => {
+    _checked.value = val;
+  },
+  { immediate: true }
+);
+
 const isChangeable = (): Promise<boolean> => {
   if (props.loading || props.disabled) {
     return Promise.resolve(false);
@@ -56,7 +101,7 @@ const isChangeable = (): Promise<boolean> => {
     return Promise.resolve(true);
   }
 
-  const res = props.beforeChange(!props.modelValue);
+  const res = props.beforeChange(!isChecked.value);
   if (!(isPromise(res) || isBoolean(res))) {
     return Promise.reject('beforeChange should return  type `Promise<boolean>` or `boolean`');
   }
@@ -68,7 +113,9 @@ const onClick = () => {
   isChangeable()
     .then((flag) => {
       if (flag) {
-        const val = !props.modelValue;
+        const checked = !isChecked.value;
+        _checked.value = checked;
+        const val = checked ? props.checkedValue : props.uncheckedValue;
         emits('update:modelValue', val);
         emits('change', val);
       }
@@ -85,7 +132,7 @@ const onClick = () => {
     :class="[
       `o-switch-size-${props.size || defaultSize}`,
       `o-switch-shape-${props.shape || defaultShape}`,
-      { 'is-checked': props.modelValue },
+      { 'is-checked': isChecked },
       { 'is-disabled': props.disabled },
       { 'is-loading': props.loading },
     ]"
@@ -98,7 +145,7 @@ const onClick = () => {
         </span>
       </div>
       <div v-if="$slots.on || $slots.off" class="o-switch-content">
-        <slot v-if="props.modelValue" name="on"></slot>
+        <slot v-if="isChecked" name="on"></slot>
         <slot v-else name="off"></slot>
       </div>
     </div>