diff --git a/packages/radio/src/radio-button.vue b/packages/radio/src/radio-button.vue
index 156264076d..37de62b0f5 100644
--- a/packages/radio/src/radio-button.vue
+++ b/packages/radio/src/radio-button.vue
@@ -35,7 +35,8 @@
   </label>
 </template>
 <script lang="ts">
-import { computed, inject, ref } from 'vue'
+import { computed } from 'vue'
+import useRadio from './useRadio'
 
 export default {
   name: 'ElRadioButton',
@@ -46,16 +47,8 @@ export default {
     name: String,
   },
   setup(props, ctx) {
-    //todo: ELEMENT
-    const ELEMENT = {}
-    const elForm = inject('elForm', {})
-    const elFormItem = inject('elFormItem', {})
-    const _radioGroup: any = inject('RadioGroup', {})
-    const focus = ref(false)
-    const isGroup = computed(() => _radioGroup && _radioGroup.name === 'ElRadioGroup')
-    const _elFormItemSize = computed(() => {
-      return (elFormItem || {} as any).elFormItemSize
-    })
+    const { isGroup, _radioGroup, elForm,
+      ELEMENT, focus, _elFormItemSize } = useRadio()
     const size = computed(() => {
       return _radioGroup.radioGroupSize || _elFormItemSize || (ELEMENT || {} as any).size
     })
diff --git a/packages/radio/src/radio-group.vue b/packages/radio/src/radio-group.vue
index c16205cca7..54a25d3148 100644
--- a/packages/radio/src/radio-group.vue
+++ b/packages/radio/src/radio-group.vue
@@ -42,8 +42,8 @@ export default {
   setup(props, ctx) {
     const instance = getCurrentInstance()
     //todo: ELEMENT
-    const elFormItem = inject('elFormItem')
     const ELEMENT = {}
+    const elFormItem = inject('elFormItem', {})
     const _elFormItemSize = computed(() => {
       return (elFormItem || {} as any).elFormItemSize
     })
@@ -86,7 +86,7 @@ export default {
       const length = radios.length
       const index = [].indexOf.call(radios, target)
       const roleRadios = instance.vnode.el.querySelectorAll('[role=radio]')
-      let nextIndex
+      let nextIndex = null
       switch (e.keyCode) {
         case keyCode.LEFT:
         case keyCode.UP:
@@ -103,6 +103,7 @@ export default {
         default:
           break
       }
+      if (nextIndex === null) return
       roleRadios[nextIndex].click()
       roleRadios[nextIndex].focus()
     }
diff --git a/packages/radio/src/radio.vue b/packages/radio/src/radio.vue
index 5d507366a6..8fefed9871 100644
--- a/packages/radio/src/radio.vue
+++ b/packages/radio/src/radio.vue
@@ -45,7 +45,8 @@
 </template>
 
 <script lang='ts'>
-import { ref, defineComponent, computed, getCurrentInstance, nextTick, inject } from 'vue'
+import { defineComponent, computed, getCurrentInstance, nextTick } from 'vue'
+import useRadio from './useRadio'
 
 export default defineComponent({
   name: 'ElRadio',
@@ -63,32 +64,9 @@ export default defineComponent({
   emits: ['update:modelValue', 'change'],
 
   setup(props, ctx) {
+    const { isGroup, _radioGroup,
+      _elFormItemSize, ELEMENT, focus, elForm } = useRadio()
     const instance = getCurrentInstance()
-    //todo: ELEMENT
-    const ELEMENT = null
-    const elForm = inject('elForm', {})
-    const elFormItem = inject('elFormItem', {})
-    const _radioGroup = inject('RadioGroup', {}) as any
-    const focus = ref(false)
-    const isGroup = computed(() => _radioGroup && _radioGroup.name === 'ElRadioGroup')
-    const _elFormItemSize = computed(() => {
-      return (elFormItem || {} as any).elFormItemSize
-    })
-    const radioSize = computed(() => {
-      const temRadioSize = props.size || _elFormItemSize || (ELEMENT || {}).size
-      return isGroup.value
-        ? _radioGroup.radioGroupSize || temRadioSize
-        : temRadioSize
-    })
-    const isDisabled = computed(() => {
-      return isGroup.value
-        ? _radioGroup.disabled || props.disabled || (elForm || {}).disabled
-        : props.disabled || (elForm || {}).disabled
-    })
-    const tabIndex = computed(() => {
-      return (isDisabled.value || (isGroup.value && model.value !== props.label)) ? -1 : 0
-    })
-
     const model = computed({
       get() {
         return isGroup.value ? _radioGroup.modelValue.value : props.modelValue
@@ -103,6 +81,23 @@ export default defineComponent({
       },
     })
 
+    const tabIndex = computed(() => {
+      return (isDisabled.value || (isGroup.value && model.value !== props.label)) ? -1 : 0
+    })
+
+    const isDisabled = computed(() => {
+      return isGroup.value
+        ? _radioGroup.disabled || props.disabled || (elForm || {}).disabled
+        : props.disabled || (elForm || {}).disabled
+    })
+
+    const radioSize = computed(() => {
+      const temRadioSize = props.size || _elFormItemSize || (ELEMENT || {}).size
+      return isGroup.value
+        ? _radioGroup.radioGroupSize || temRadioSize
+        : temRadioSize
+    })
+
     function handleChange() {
       nextTick(() => {
         ctx.emit('change', model.value)
diff --git a/packages/radio/src/useRadio.ts b/packages/radio/src/useRadio.ts
new file mode 100644
index 0000000000..6f7bd46f5a
--- /dev/null
+++ b/packages/radio/src/useRadio.ts
@@ -0,0 +1,22 @@
+import { ref, computed, inject } from 'vue'
+
+export default () => {
+  //todo: ELEMENT
+  const ELEMENT = null
+  const elForm = inject('elForm', {})
+  const elFormItem = inject('elFormItem', {})
+  const _radioGroup = inject('RadioGroup', {}) as any
+  const focus = ref(false)
+  const isGroup = computed(() => _radioGroup && _radioGroup.name === 'ElRadioGroup')
+  const _elFormItemSize = computed(() => {
+    return (elFormItem || {} as any).elFormItemSize
+  })
+  return {
+    isGroup,
+    focus,
+    _radioGroup,
+    elForm,
+    ELEMENT,
+    _elFormItemSize,
+  }
+}