diff --git a/src/packages/checkbox/__test__/__snapshots__/checkbox.spec.tsx.snap b/src/packages/checkbox/__test__/__snapshots__/checkbox.spec.tsx.snap
index b6a4fe4c13..a1626f034c 100644
--- a/src/packages/checkbox/__test__/__snapshots__/checkbox.spec.tsx.snap
+++ b/src/packages/checkbox/__test__/__snapshots__/checkbox.spec.tsx.snap
@@ -6,7 +6,7 @@ exports[`should match snapshot 1`] = `
     class="nut-checkbox nut-checkbox-reverse"
   >
     <div
-      class="nut-checkbox-icon-wrap"
+      class="nut-checkbox-icon-wrap-shadow"
     >
       <svg
         aria-labelledby="Checked"
diff --git a/src/packages/checkbox/checkbox.scss b/src/packages/checkbox/checkbox.scss
index ebcb5b6b6d..4d63c4b0e6 100644
--- a/src/packages/checkbox/checkbox.scss
+++ b/src/packages/checkbox/checkbox.scss
@@ -10,12 +10,17 @@
     flex-shrink: 0;
   }
 
-  &-icon-wrap {
+  &-icon-wrap-shadow {
     font-size: 0px;
     line-height: 0px;
     border-radius: 50%;
     box-shadow: 0px 2px 4px 0px rgba(255, 15, 35, 0.2);
   }
+  &-icon-wrap {
+    font-size: 0px;
+    line-height: 0px;
+    border-radius: 50%;
+  }
 
   &-icon-checked {
     color: $color-primary;
diff --git a/src/packages/checkbox/checkbox.taro.tsx b/src/packages/checkbox/checkbox.taro.tsx
index 3bc4464f7f..2216c80b84 100644
--- a/src/packages/checkbox/checkbox.taro.tsx
+++ b/src/packages/checkbox/checkbox.taro.tsx
@@ -1,7 +1,7 @@
 import React, { FC, useContext, useEffect, useState } from 'react'
 import { CheckDisabled, Checked, CheckNormal } from '@nutui/icons-react-taro'
 import classNames from 'classnames'
-import { CheckboxProps as TCheckboxProps, View } from '@tarojs/components'
+import { CheckboxProps as TCheckboxProps, Text, View } from '@tarojs/components'
 import { ComponentDefaults } from '@/utils/typings'
 import Context from '../checkboxgroup/context'
 import { usePropsValue } from '@/hooks/use-props-value'
@@ -79,31 +79,47 @@ export const Checkbox: FC<
   const renderIcon = () => {
     if (innerDisabled) {
       if (innerIndeterminate) {
-        return <CheckDisabled className={color()} />
+        return (
+          <View className={`${classPrefix}-icon-wrap`}>
+            <CheckDisabled className={color()} />
+          </View>
+        )
       }
       if (innerChecked) {
-        return <Checked className={color()} />
+        return (
+          <View className={`${classPrefix}-icon-wrap`}>
+            <Checked className={color()} />
+          </View>
+        )
       }
-      return <CheckDisabled className={color()} />
+      return (
+        <View className={`${classPrefix}-icon-wrap`}>
+          <CheckDisabled className={color()} />
+        </View>
+      )
     }
     if (!innerChecked) {
       return React.isValidElement(icon) ? (
         icon
       ) : (
-        <CheckNormal className={color()} />
+        <View className={`${classPrefix}-icon-wrap`}>
+          <CheckNormal className={color()} />
+        </View>
       )
     }
     if (innerIndeterminate) {
       return React.isValidElement(indeterminateIcon) ? (
         indeterminateIcon
       ) : (
-        <CheckDisabled className={color()} />
+        <View className={`${classPrefix}-icon-wrap`}>
+          <CheckDisabled className={color()} />
+        </View>
       )
     }
     return React.isValidElement(activeIcon) ? (
       activeIcon
     ) : (
-      <View className={`${classPrefix}-icon-wrap`}>
+      <View className={`${classPrefix}-icon-wrap-shadow`}>
         <Checked className={color()} />
       </View>
     )
@@ -129,13 +145,13 @@ export const Checkbox: FC<
   }
   const renderLabel = () => {
     return (
-      <View
+      <Text
         className={classNames(`${classPrefix}-label `, {
           [`${classPrefix}-label-disabled`]: innerDisabled,
         })}
       >
         {children || label}
-      </View>
+      </Text>
     )
   }
 
@@ -178,7 +194,7 @@ export const Checkbox: FC<
 
   const renderCheckboxItem = () => {
     if (ctx?.list) {
-      return <>{renderListItem()}</>
+      return renderListItem()
     }
     if (shape === 'button') {
       return renderButton()
diff --git a/src/packages/checkbox/checkbox.tsx b/src/packages/checkbox/checkbox.tsx
index d80018cbcb..d931828e2c 100644
--- a/src/packages/checkbox/checkbox.tsx
+++ b/src/packages/checkbox/checkbox.tsx
@@ -108,7 +108,7 @@ export const Checkbox: FunctionComponent<
     return React.isValidElement(activeIcon) ? (
       activeIcon
     ) : (
-      <div className={`${classPrefix}-icon-wrap`}>
+      <div className={`${classPrefix}-icon-wrap-shadow`}>
         <Checked className={color()} />
       </div>
     )