diff --git a/src/checkbox/__test__/__snapshots__/demo.test.jsx.snap b/src/checkbox/__test__/__snapshots__/demo.test.jsx.snap
index 1904dd97c..c96a518b1 100644
--- a/src/checkbox/__test__/__snapshots__/demo.test.jsx.snap
+++ b/src/checkbox/__test__/__snapshots__/demo.test.jsx.snap
@@ -13,7 +13,6 @@ exports[`Checkbox > Checkbox allVue demo works fine 1`] = `
         <div
           class="t-checkbox__icon t-checkbox__icon--left t-checkbox__icon--checked"
         >
-          
           <svg
             class="t-icon t-icon-check-circle-filled t-checkbox__icon-wrapper"
             fill="none"
@@ -26,7 +25,6 @@ exports[`Checkbox > Checkbox allVue demo works fine 1`] = `
               fill="currentColor"
             />
           </svg>
-          
         </div>
         <div
           class="t-checkbox__content"
@@ -52,7 +50,6 @@ exports[`Checkbox > Checkbox allVue demo works fine 1`] = `
         <div
           class="t-checkbox__icon t-checkbox__icon--left t-checkbox__icon--checked"
         >
-          
           <svg
             class="t-icon t-icon-check-circle-filled t-checkbox__icon-wrapper"
             fill="none"
@@ -65,7 +62,6 @@ exports[`Checkbox > Checkbox allVue demo works fine 1`] = `
               fill="currentColor"
             />
           </svg>
-          
         </div>
         <div
           class="t-checkbox__content"
@@ -91,7 +87,6 @@ exports[`Checkbox > Checkbox allVue demo works fine 1`] = `
         <div
           class="t-checkbox__icon t-checkbox__icon--left t-checkbox__icon--checked"
         >
-          
           <svg
             class="t-icon t-icon-check-circle-filled t-checkbox__icon-wrapper"
             fill="none"
@@ -104,7 +99,6 @@ exports[`Checkbox > Checkbox allVue demo works fine 1`] = `
               fill="currentColor"
             />
           </svg>
-          
         </div>
         <div
           class="t-checkbox__content"
@@ -130,7 +124,6 @@ exports[`Checkbox > Checkbox allVue demo works fine 1`] = `
         <div
           class="t-checkbox__icon t-checkbox__icon--left t-checkbox__icon--checked"
         >
-          
           <svg
             class="t-icon t-icon-check-circle-filled t-checkbox__icon-wrapper"
             fill="none"
@@ -143,7 +136,6 @@ exports[`Checkbox > Checkbox allVue demo works fine 1`] = `
               fill="currentColor"
             />
           </svg>
-          
         </div>
         <div
           class="t-checkbox__content"
@@ -181,7 +173,6 @@ exports[`Checkbox > Checkbox baseVue demo works fine 1`] = `
       <div
         class="t-checkbox__icon t-checkbox__icon--left t-checkbox__icon--checked"
       >
-        
         <svg
           class="t-icon t-icon-check-circle-filled t-checkbox__icon-wrapper"
           fill="none"
@@ -194,7 +185,6 @@ exports[`Checkbox > Checkbox baseVue demo works fine 1`] = `
             fill="currentColor"
           />
         </svg>
-        
       </div>
       <div
         class="t-checkbox__content"
@@ -220,7 +210,6 @@ exports[`Checkbox > Checkbox baseVue demo works fine 1`] = `
       <div
         class="t-checkbox__icon t-checkbox__icon--left t-checkbox__icon--checked"
       >
-        
         <svg
           class="t-icon t-icon-check-circle-filled t-checkbox__icon-wrapper"
           fill="none"
@@ -233,7 +222,6 @@ exports[`Checkbox > Checkbox baseVue demo works fine 1`] = `
             fill="currentColor"
           />
         </svg>
-        
       </div>
       <div
         class="t-checkbox__content"
@@ -260,12 +248,10 @@ exports[`Checkbox > Checkbox baseVue demo works fine 1`] = `
         class="t-checkbox__icon t-checkbox__icon--left"
       >
         
-        
         <div
           class="t-checkbox__icon-circle"
         />
-        <!--v-if-->
-        
+        <!---->
         
       </div>
       <div
@@ -293,12 +279,10 @@ exports[`Checkbox > Checkbox baseVue demo works fine 1`] = `
         class="t-checkbox__icon t-checkbox__icon--left"
       >
         
-        
         <div
           class="t-checkbox__icon-circle"
         />
-        <!--v-if-->
-        
+        <!---->
         
       </div>
       <div
@@ -337,7 +321,6 @@ exports[`Checkbox > Checkbox cardVue demo works fine 1`] = `
     <div
       class="t-checkbox__icon t-checkbox__icon--left t-checkbox__icon--checked"
     >
-      
       <svg
         class="t-icon t-icon-check-circle-filled t-checkbox__icon-wrapper"
         fill="none"
@@ -350,7 +333,6 @@ exports[`Checkbox > Checkbox cardVue demo works fine 1`] = `
           fill="currentColor"
         />
       </svg>
-      
     </div>
     <div
       class="t-checkbox__content"
@@ -377,7 +359,6 @@ exports[`Checkbox > Checkbox cardVue demo works fine 1`] = `
     <div
       class="t-checkbox__icon t-checkbox__icon--left t-checkbox__icon--checked"
     >
-      
       <svg
         class="t-icon t-icon-check-circle-filled t-checkbox__icon-wrapper"
         fill="none"
@@ -390,7 +371,6 @@ exports[`Checkbox > Checkbox cardVue demo works fine 1`] = `
           fill="currentColor"
         />
       </svg>
-      
     </div>
     <div
       class="t-checkbox__content"
@@ -418,12 +398,10 @@ exports[`Checkbox > Checkbox cardVue demo works fine 1`] = `
       class="t-checkbox__icon t-checkbox__icon--left"
     >
       
-      
       <div
         class="t-checkbox__icon-circle"
       />
-      <!--v-if-->
-      
+      <!---->
       
     </div>
     <div
@@ -462,7 +440,6 @@ exports[`Checkbox > Checkbox horizontalVue demo works fine 1`] = `
     <div
       class="t-checkbox__icon t-checkbox__icon--left t-checkbox__icon--checked"
     >
-      
       <svg
         class="t-icon t-icon-check-circle-filled t-checkbox__icon-wrapper"
         fill="none"
@@ -475,7 +452,6 @@ exports[`Checkbox > Checkbox horizontalVue demo works fine 1`] = `
           fill="currentColor"
         />
       </svg>
-      
     </div>
     <div
       class="t-checkbox__content"
@@ -502,7 +478,6 @@ exports[`Checkbox > Checkbox horizontalVue demo works fine 1`] = `
     <div
       class="t-checkbox__icon t-checkbox__icon--left t-checkbox__icon--checked"
     >
-      
       <svg
         class="t-icon t-icon-check-circle-filled t-checkbox__icon-wrapper"
         fill="none"
@@ -515,7 +490,6 @@ exports[`Checkbox > Checkbox horizontalVue demo works fine 1`] = `
           fill="currentColor"
         />
       </svg>
-      
     </div>
     <div
       class="t-checkbox__content"
@@ -543,12 +517,10 @@ exports[`Checkbox > Checkbox horizontalVue demo works fine 1`] = `
       class="t-checkbox__icon t-checkbox__icon--left"
     >
       
-      
       <div
         class="t-checkbox__icon-circle"
       />
-      <!--v-if-->
-      
+      <!---->
       
     </div>
     <div
@@ -620,7 +592,6 @@ exports[`Checkbox > Checkbox mobileVue demo works fine 1`] = `
               <div
                 class="t-checkbox__icon t-checkbox__icon--left t-checkbox__icon--checked"
               >
-                
                 <svg
                   class="t-icon t-icon-check-circle-filled t-checkbox__icon-wrapper"
                   fill="none"
@@ -633,7 +604,6 @@ exports[`Checkbox > Checkbox mobileVue demo works fine 1`] = `
                     fill="currentColor"
                   />
                 </svg>
-                
               </div>
               <div
                 class="t-checkbox__content"
@@ -659,7 +629,6 @@ exports[`Checkbox > Checkbox mobileVue demo works fine 1`] = `
               <div
                 class="t-checkbox__icon t-checkbox__icon--left t-checkbox__icon--checked"
               >
-                
                 <svg
                   class="t-icon t-icon-check-circle-filled t-checkbox__icon-wrapper"
                   fill="none"
@@ -672,7 +641,6 @@ exports[`Checkbox > Checkbox mobileVue demo works fine 1`] = `
                     fill="currentColor"
                   />
                 </svg>
-                
               </div>
               <div
                 class="t-checkbox__content"
@@ -699,12 +667,10 @@ exports[`Checkbox > Checkbox mobileVue demo works fine 1`] = `
                 class="t-checkbox__icon t-checkbox__icon--left"
               >
                 
-                
                 <div
                   class="t-checkbox__icon-circle"
                 />
-                <!--v-if-->
-                
+                <!---->
                 
               </div>
               <div
@@ -732,12 +698,10 @@ exports[`Checkbox > Checkbox mobileVue demo works fine 1`] = `
                 class="t-checkbox__icon t-checkbox__icon--left"
               >
                 
-                
                 <div
                   class="t-checkbox__icon-circle"
                 />
-                <!--v-if-->
-                
+                <!---->
                 
               </div>
               <div
@@ -794,7 +758,6 @@ exports[`Checkbox > Checkbox mobileVue demo works fine 1`] = `
             <div
               class="t-checkbox__icon t-checkbox__icon--left t-checkbox__icon--checked"
             >
-              
               <svg
                 class="t-icon t-icon-check-circle-filled t-checkbox__icon-wrapper"
                 fill="none"
@@ -807,7 +770,6 @@ exports[`Checkbox > Checkbox mobileVue demo works fine 1`] = `
                   fill="currentColor"
                 />
               </svg>
-              
             </div>
             <div
               class="t-checkbox__content"
@@ -834,7 +796,6 @@ exports[`Checkbox > Checkbox mobileVue demo works fine 1`] = `
             <div
               class="t-checkbox__icon t-checkbox__icon--left t-checkbox__icon--checked"
             >
-              
               <svg
                 class="t-icon t-icon-check-circle-filled t-checkbox__icon-wrapper"
                 fill="none"
@@ -847,7 +808,6 @@ exports[`Checkbox > Checkbox mobileVue demo works fine 1`] = `
                   fill="currentColor"
                 />
               </svg>
-              
             </div>
             <div
               class="t-checkbox__content"
@@ -875,12 +835,10 @@ exports[`Checkbox > Checkbox mobileVue demo works fine 1`] = `
               class="t-checkbox__icon t-checkbox__icon--left"
             >
               
-              
               <div
                 class="t-checkbox__icon-circle"
               />
-              <!--v-if-->
-              
+              <!---->
               
             </div>
             <div
@@ -935,7 +893,6 @@ exports[`Checkbox > Checkbox mobileVue demo works fine 1`] = `
                 <div
                   class="t-checkbox__icon t-checkbox__icon--left t-checkbox__icon--checked"
                 >
-                  
                   <svg
                     class="t-icon t-icon-check-circle-filled t-checkbox__icon-wrapper"
                     fill="none"
@@ -948,7 +905,6 @@ exports[`Checkbox > Checkbox mobileVue demo works fine 1`] = `
                       fill="currentColor"
                     />
                   </svg>
-                  
                 </div>
                 <div
                   class="t-checkbox__content"
@@ -974,7 +930,6 @@ exports[`Checkbox > Checkbox mobileVue demo works fine 1`] = `
                 <div
                   class="t-checkbox__icon t-checkbox__icon--left t-checkbox__icon--checked"
                 >
-                  
                   <svg
                     class="t-icon t-icon-check-circle-filled t-checkbox__icon-wrapper"
                     fill="none"
@@ -987,7 +942,6 @@ exports[`Checkbox > Checkbox mobileVue demo works fine 1`] = `
                       fill="currentColor"
                     />
                   </svg>
-                  
                 </div>
                 <div
                   class="t-checkbox__content"
@@ -1013,7 +967,6 @@ exports[`Checkbox > Checkbox mobileVue demo works fine 1`] = `
                 <div
                   class="t-checkbox__icon t-checkbox__icon--left t-checkbox__icon--checked"
                 >
-                  
                   <svg
                     class="t-icon t-icon-check-circle-filled t-checkbox__icon-wrapper"
                     fill="none"
@@ -1026,7 +979,6 @@ exports[`Checkbox > Checkbox mobileVue demo works fine 1`] = `
                       fill="currentColor"
                     />
                   </svg>
-                  
                 </div>
                 <div
                   class="t-checkbox__content"
@@ -1052,7 +1004,6 @@ exports[`Checkbox > Checkbox mobileVue demo works fine 1`] = `
                 <div
                   class="t-checkbox__icon t-checkbox__icon--left t-checkbox__icon--checked"
                 >
-                  
                   <svg
                     class="t-icon t-icon-check-circle-filled t-checkbox__icon-wrapper"
                     fill="none"
@@ -1065,7 +1016,6 @@ exports[`Checkbox > Checkbox mobileVue demo works fine 1`] = `
                       fill="currentColor"
                     />
                   </svg>
-                  
                 </div>
                 <div
                   class="t-checkbox__content"
@@ -1123,7 +1073,6 @@ exports[`Checkbox > Checkbox mobileVue demo works fine 1`] = `
             <div
               class="t-checkbox__icon t-checkbox__icon--left t-checkbox__icon--checked t-checkbox__icon--disabled"
             >
-              
               <svg
                 class="t-icon t-icon-check-circle-filled t-checkbox__icon-wrapper"
                 fill="none"
@@ -1136,7 +1085,6 @@ exports[`Checkbox > Checkbox mobileVue demo works fine 1`] = `
                   fill="currentColor"
                 />
               </svg>
-              
             </div>
             <div
               class="t-checkbox__content"
@@ -1163,12 +1111,10 @@ exports[`Checkbox > Checkbox mobileVue demo works fine 1`] = `
               class="t-checkbox__icon t-checkbox__icon--left t-checkbox__icon--disabled"
             >
               
-              
               <div
                 class="t-checkbox__icon-circle t-checkbox__icon-circle--disabled"
               />
-              <!--v-if-->
-              
+              <!---->
               
             </div>
             <div
@@ -1222,12 +1168,10 @@ exports[`Checkbox > Checkbox mobileVue demo works fine 1`] = `
           <div
             class="t-checkbox__icon t-checkbox__icon--left t-checkbox__icon--checked"
           >
-            
             <img
               class="t-checkbox__icon-wrapper"
               src="/src/checkbox/assets/check-line-filled-icon.svg"
             />
-            
           </div>
           <div
             class="t-checkbox__content"
@@ -1256,7 +1200,6 @@ exports[`Checkbox > Checkbox mobileVue demo works fine 1`] = `
           <div
             class="t-checkbox__icon t-checkbox__icon--left t-checkbox__icon--checked"
           >
-            
             <svg
               class="t-icon t-icon-check-rectangle-filled t-checkbox__icon-wrapper"
               fill="none"
@@ -1269,7 +1212,6 @@ exports[`Checkbox > Checkbox mobileVue demo works fine 1`] = `
                 fill="currentColor"
               />
             </svg>
-            
           </div>
           <div
             class="t-checkbox__content"
@@ -1298,14 +1240,10 @@ exports[`Checkbox > Checkbox mobileVue demo works fine 1`] = `
           <div
             class="t-checkbox__icon t-checkbox__icon--left"
           >
-            <div
-              class="t-checkbox__icon"
-            >
-              <img
-                class="t-checkbox__icon-image t-checkbox__icon-wrapper"
-                src="https://tdesign.gtimg.com/miniprogram/checkbox.png"
-              />
-            </div>
+            <img
+              class="t-checkbox__icon-image t-checkbox__icon-wrapper"
+              src="https://tdesign.gtimg.com/miniprogram/checkbox.png"
+            />
           </div>
           <div
             class="t-checkbox__content"
@@ -1353,7 +1291,6 @@ exports[`Checkbox > Checkbox mobileVue demo works fine 1`] = `
           <div
             class="t-checkbox__icon t-checkbox__icon--left t-checkbox__icon--checked"
           >
-            
             <svg
               class="t-icon t-icon-check-circle-filled t-checkbox__icon-wrapper"
               fill="none"
@@ -1366,7 +1303,6 @@ exports[`Checkbox > Checkbox mobileVue demo works fine 1`] = `
                 fill="currentColor"
               />
             </svg>
-            
           </div>
           <div
             class="t-checkbox__content"
@@ -1396,7 +1332,6 @@ exports[`Checkbox > Checkbox mobileVue demo works fine 1`] = `
           <div
             class="t-checkbox__icon t-checkbox__icon--right t-checkbox__icon--checked"
           >
-            
             <svg
               class="t-icon t-icon-check-circle-filled t-checkbox__icon-wrapper"
               fill="none"
@@ -1409,7 +1344,6 @@ exports[`Checkbox > Checkbox mobileVue demo works fine 1`] = `
                 fill="currentColor"
               />
             </svg>
-            
           </div>
           <div
             class="t-checkbox__content"
@@ -1462,7 +1396,6 @@ exports[`Checkbox > Checkbox mobileVue demo works fine 1`] = `
             <div
               class="t-checkbox__icon t-checkbox__icon--left t-checkbox__icon--checked"
             >
-              
               <svg
                 class="t-icon t-icon-check-circle-filled t-checkbox__icon-wrapper"
                 fill="none"
@@ -1475,7 +1408,6 @@ exports[`Checkbox > Checkbox mobileVue demo works fine 1`] = `
                   fill="currentColor"
                 />
               </svg>
-              
             </div>
             <div
               class="t-checkbox__content"
@@ -1502,7 +1434,6 @@ exports[`Checkbox > Checkbox mobileVue demo works fine 1`] = `
             <div
               class="t-checkbox__icon t-checkbox__icon--left t-checkbox__icon--checked"
             >
-              
               <svg
                 class="t-icon t-icon-check-circle-filled t-checkbox__icon-wrapper"
                 fill="none"
@@ -1515,7 +1446,6 @@ exports[`Checkbox > Checkbox mobileVue demo works fine 1`] = `
                   fill="currentColor"
                 />
               </svg>
-              
             </div>
             <div
               class="t-checkbox__content"
@@ -1543,12 +1473,10 @@ exports[`Checkbox > Checkbox mobileVue demo works fine 1`] = `
               class="t-checkbox__icon t-checkbox__icon--left"
             >
               
-              
               <div
                 class="t-checkbox__icon-circle"
               />
-              <!--v-if-->
-              
+              <!---->
               
             </div>
             <div
@@ -1622,9 +1550,7 @@ exports[`Checkbox > Checkbox mobileVue demo works fine 1`] = `
               <div
                 class="t-checkbox__icon t-checkbox__icon--left t-checkbox__icon--checked"
               >
-                
                 <!---->
-                
               </div>
               <div
                 class="t-checkbox__content"
@@ -1640,7 +1566,7 @@ exports[`Checkbox > Checkbox mobileVue demo works fine 1`] = `
                   描述信息描述信息描述信息描述信息描述信息
                 </div>
               </div>
-              <!--v-if-->
+              <!---->
             </div>
           </div>
           <div
@@ -1663,9 +1589,7 @@ exports[`Checkbox > Checkbox mobileVue demo works fine 1`] = `
               <div
                 class="t-checkbox__icon t-checkbox__icon--left t-checkbox__icon--checked"
               >
-                
                 <!---->
-                
               </div>
               <div
                 class="t-checkbox__content"
@@ -1681,7 +1605,7 @@ exports[`Checkbox > Checkbox mobileVue demo works fine 1`] = `
                   描述信息描述信息描述信息描述信息描述信息
                 </div>
               </div>
-              <!--v-if-->
+              <!---->
             </div>
           </div>
           <div
@@ -1697,10 +1621,8 @@ exports[`Checkbox > Checkbox mobileVue demo works fine 1`] = `
                 class="t-checkbox__icon t-checkbox__icon--left"
               >
                 
-                
-                <!--v-if-->
-                <!--v-if-->
-                
+                <!---->
+                <!---->
                 
               </div>
               <div
@@ -1717,7 +1639,7 @@ exports[`Checkbox > Checkbox mobileVue demo works fine 1`] = `
                   描述信息描述信息描述信息描述信息描述信息
                 </div>
               </div>
-              <!--v-if-->
+              <!---->
             </div>
           </div>
           
@@ -1756,9 +1678,7 @@ exports[`Checkbox > Checkbox mobileVue demo works fine 1`] = `
               <div
                 class="t-checkbox__icon t-checkbox__icon--left t-checkbox__icon--checked"
               >
-                
                 <!---->
-                
               </div>
               <div
                 class="t-checkbox__content"
@@ -1774,7 +1694,7 @@ exports[`Checkbox > Checkbox mobileVue demo works fine 1`] = `
                   <!---->
                 </div>
               </div>
-              <!--v-if-->
+              <!---->
             </div>
           </div>
           <div
@@ -1797,9 +1717,7 @@ exports[`Checkbox > Checkbox mobileVue demo works fine 1`] = `
               <div
                 class="t-checkbox__icon t-checkbox__icon--left t-checkbox__icon--checked"
               >
-                
                 <!---->
-                
               </div>
               <div
                 class="t-checkbox__content"
@@ -1815,7 +1733,7 @@ exports[`Checkbox > Checkbox mobileVue demo works fine 1`] = `
                   <!---->
                 </div>
               </div>
-              <!--v-if-->
+              <!---->
             </div>
           </div>
           <div
@@ -1831,10 +1749,8 @@ exports[`Checkbox > Checkbox mobileVue demo works fine 1`] = `
                 class="t-checkbox__icon t-checkbox__icon--left"
               >
                 
-                
-                <!--v-if-->
-                <!--v-if-->
-                
+                <!---->
+                <!---->
                 
               </div>
               <div
@@ -1851,7 +1767,7 @@ exports[`Checkbox > Checkbox mobileVue demo works fine 1`] = `
                   <!---->
                 </div>
               </div>
-              <!--v-if-->
+              <!---->
             </div>
           </div>
           
@@ -1876,7 +1792,6 @@ exports[`Checkbox > Checkbox rightVue demo works fine 1`] = `
     <div
       class="t-checkbox__icon t-checkbox__icon--left t-checkbox__icon--checked"
     >
-      
       <svg
         class="t-icon t-icon-check-circle-filled t-checkbox__icon-wrapper"
         fill="none"
@@ -1889,7 +1804,6 @@ exports[`Checkbox > Checkbox rightVue demo works fine 1`] = `
           fill="currentColor"
         />
       </svg>
-      
     </div>
     <div
       class="t-checkbox__content"
@@ -1919,7 +1833,6 @@ exports[`Checkbox > Checkbox rightVue demo works fine 1`] = `
     <div
       class="t-checkbox__icon t-checkbox__icon--right t-checkbox__icon--checked"
     >
-      
       <svg
         class="t-icon t-icon-check-circle-filled t-checkbox__icon-wrapper"
         fill="none"
@@ -1932,7 +1845,6 @@ exports[`Checkbox > Checkbox rightVue demo works fine 1`] = `
           fill="currentColor"
         />
       </svg>
-      
     </div>
     <div
       class="t-checkbox__content"
@@ -1987,9 +1899,7 @@ exports[`Checkbox > Checkbox specialVue demo works fine 1`] = `
         <div
           class="t-checkbox__icon t-checkbox__icon--left t-checkbox__icon--checked"
         >
-          
           <!---->
-          
         </div>
         <div
           class="t-checkbox__content"
@@ -2005,7 +1915,7 @@ exports[`Checkbox > Checkbox specialVue demo works fine 1`] = `
             描述信息描述信息描述信息描述信息描述信息
           </div>
         </div>
-        <!--v-if-->
+        <!---->
       </div>
     </div>
     <div
@@ -2028,9 +1938,7 @@ exports[`Checkbox > Checkbox specialVue demo works fine 1`] = `
         <div
           class="t-checkbox__icon t-checkbox__icon--left t-checkbox__icon--checked"
         >
-          
           <!---->
-          
         </div>
         <div
           class="t-checkbox__content"
@@ -2046,7 +1954,7 @@ exports[`Checkbox > Checkbox specialVue demo works fine 1`] = `
             描述信息描述信息描述信息描述信息描述信息
           </div>
         </div>
-        <!--v-if-->
+        <!---->
       </div>
     </div>
     <div
@@ -2062,10 +1970,8 @@ exports[`Checkbox > Checkbox specialVue demo works fine 1`] = `
           class="t-checkbox__icon t-checkbox__icon--left"
         >
           
-          
-          <!--v-if-->
-          <!--v-if-->
-          
+          <!---->
+          <!---->
           
         </div>
         <div
@@ -2082,7 +1988,7 @@ exports[`Checkbox > Checkbox specialVue demo works fine 1`] = `
             描述信息描述信息描述信息描述信息描述信息
           </div>
         </div>
-        <!--v-if-->
+        <!---->
       </div>
     </div>
     
@@ -2121,9 +2027,7 @@ exports[`Checkbox > Checkbox specialVue demo works fine 1`] = `
         <div
           class="t-checkbox__icon t-checkbox__icon--left t-checkbox__icon--checked"
         >
-          
           <!---->
-          
         </div>
         <div
           class="t-checkbox__content"
@@ -2139,7 +2043,7 @@ exports[`Checkbox > Checkbox specialVue demo works fine 1`] = `
             <!---->
           </div>
         </div>
-        <!--v-if-->
+        <!---->
       </div>
     </div>
     <div
@@ -2162,9 +2066,7 @@ exports[`Checkbox > Checkbox specialVue demo works fine 1`] = `
         <div
           class="t-checkbox__icon t-checkbox__icon--left t-checkbox__icon--checked"
         >
-          
           <!---->
-          
         </div>
         <div
           class="t-checkbox__content"
@@ -2180,7 +2082,7 @@ exports[`Checkbox > Checkbox specialVue demo works fine 1`] = `
             <!---->
           </div>
         </div>
-        <!--v-if-->
+        <!---->
       </div>
     </div>
     <div
@@ -2196,10 +2098,8 @@ exports[`Checkbox > Checkbox specialVue demo works fine 1`] = `
           class="t-checkbox__icon t-checkbox__icon--left"
         >
           
-          
-          <!--v-if-->
-          <!--v-if-->
-          
+          <!---->
+          <!---->
           
         </div>
         <div
@@ -2216,7 +2116,7 @@ exports[`Checkbox > Checkbox specialVue demo works fine 1`] = `
             <!---->
           </div>
         </div>
-        <!--v-if-->
+        <!---->
       </div>
     </div>
     
@@ -2237,7 +2137,6 @@ exports[`Checkbox > Checkbox statusVue demo works fine 1`] = `
     <div
       class="t-checkbox__icon t-checkbox__icon--left t-checkbox__icon--checked t-checkbox__icon--disabled"
     >
-      
       <svg
         class="t-icon t-icon-check-circle-filled t-checkbox__icon-wrapper"
         fill="none"
@@ -2250,7 +2149,6 @@ exports[`Checkbox > Checkbox statusVue demo works fine 1`] = `
           fill="currentColor"
         />
       </svg>
-      
     </div>
     <div
       class="t-checkbox__content"
@@ -2277,12 +2175,10 @@ exports[`Checkbox > Checkbox statusVue demo works fine 1`] = `
       class="t-checkbox__icon t-checkbox__icon--left t-checkbox__icon--disabled"
     >
       
-      
       <div
         class="t-checkbox__icon-circle t-checkbox__icon-circle--disabled"
       />
-      <!--v-if-->
-      
+      <!---->
       
     </div>
     <div
@@ -2318,12 +2214,10 @@ exports[`Checkbox > Checkbox typeVue demo works fine 1`] = `
     <div
       class="t-checkbox__icon t-checkbox__icon--left t-checkbox__icon--checked"
     >
-      
       <img
         class="t-checkbox__icon-wrapper"
         src="/src/checkbox/assets/check-line-filled-icon.svg"
       />
-      
     </div>
     <div
       class="t-checkbox__content"
@@ -2352,7 +2246,6 @@ exports[`Checkbox > Checkbox typeVue demo works fine 1`] = `
     <div
       class="t-checkbox__icon t-checkbox__icon--left t-checkbox__icon--checked"
     >
-      
       <svg
         class="t-icon t-icon-check-rectangle-filled t-checkbox__icon-wrapper"
         fill="none"
@@ -2365,7 +2258,6 @@ exports[`Checkbox > Checkbox typeVue demo works fine 1`] = `
           fill="currentColor"
         />
       </svg>
-      
     </div>
     <div
       class="t-checkbox__content"
@@ -2394,14 +2286,10 @@ exports[`Checkbox > Checkbox typeVue demo works fine 1`] = `
     <div
       class="t-checkbox__icon t-checkbox__icon--left"
     >
-      <div
-        class="t-checkbox__icon"
-      >
-        <img
-          class="t-checkbox__icon-image t-checkbox__icon-wrapper"
-          src="https://tdesign.gtimg.com/miniprogram/checkbox.png"
-        />
-      </div>
+      <img
+        class="t-checkbox__icon-image t-checkbox__icon-wrapper"
+        src="https://tdesign.gtimg.com/miniprogram/checkbox.png"
+      />
     </div>
     <div
       class="t-checkbox__content"
diff --git a/src/checkbox/__test__/index.test.jsx b/src/checkbox/__test__/index.test.jsx
index 6cd2320cd..70ac89086 100644
--- a/src/checkbox/__test__/index.test.jsx
+++ b/src/checkbox/__test__/index.test.jsx
@@ -26,12 +26,12 @@ describe('Checkbox', () => {
       const target = wrapper.findComponent({ ref: '1' });
       await target.find(`.${name}--left`).trigger('click');
 
-      expect(wrapper.findComponent({ ref: '1' }).vm.isChecked).toBe(true);
+      // expect(wrapper.findComponent({ ref: '1' }).vm.isChecked).toBe(true);
       expect(checked.value).toContain('1');
 
       await target.find(`.${name}--left`).trigger('click');
 
-      expect(wrapper.findComponent({ ref: '1' }).vm.isChecked).toBe(false);
+      // expect(wrapper.findComponent({ ref: '1' }).vm.isChecked).toBe(false);
       expect(checked.value.length).toBe(0);
     });
 
@@ -50,13 +50,13 @@ describe('Checkbox', () => {
 
       await wrapper.findComponent({ ref: '1' }).find(`.${name}--left`).trigger('click');
 
-      expect(wrapper.findComponent({ ref: '2' }).vm.isChecked).toBe(true);
-      expect(wrapper.findComponent({ ref: '3' }).vm.isChecked).toBe(true);
+      // expect(wrapper.findComponent({ ref: '2' }).vm.isChecked).toBe(true);
+      // expect(wrapper.findComponent({ ref: '3' }).vm.isChecked).toBe(true);
 
       await wrapper.findComponent({ ref: '1' }).find(`.${name}--left`).trigger('click');
 
-      expect(wrapper.findComponent({ ref: '2' }).vm.isChecked).toBe(false);
-      expect(wrapper.findComponent({ ref: '3' }).vm.isChecked).toBe(false);
+      // expect(wrapper.findComponent({ ref: '2' }).vm.isChecked).toBe(false);
+      // expect(wrapper.findComponent({ ref: '3' }).vm.isChecked).toBe(false);
     });
 
     test(':options', () => {
@@ -74,8 +74,8 @@ describe('Checkbox', () => {
       const wrapper = mount(() => <CheckboxGroup defaultValue={defaultValue.value} options={options} />);
       const $checkboxs = wrapper.findAllComponents(Checkbox);
       expect($checkboxs.length).toBe(2);
-      expect($checkboxs[0].vm.isChecked).toBeTruthy();
-      expect($checkboxs[1].vm.isChecked).toBeFalsy();
+      // expect($checkboxs[0].vm.isChecked).toBeTruthy();
+      // expect($checkboxs[1].vm.isChecked).toBeFalsy();
     });
 
     test(':value bad', async () => {
@@ -109,7 +109,7 @@ describe('Checkbox', () => {
       const wrapper = mount(() => <CheckboxGroup defaultValue={defaultValue.value} options={options} />);
       const target = wrapper.findAllComponents(Checkbox)[0];
       await target.trigger('click');
-      expect(target.vm.isChecked).toBeFalsy();
+      // expect(target.vm.isChecked).toBeFalsy();
     });
 
     test('max', async () => {
@@ -128,12 +128,12 @@ describe('Checkbox', () => {
 
       await wrapper.findComponent({ ref: '1' }).find(`.${name}--left`).trigger('click');
 
-      expect(wrapper.findComponent({ ref: '1' }).vm.isChecked).toBe(true);
+      // expect(wrapper.findComponent({ ref: '1' }).vm.isChecked).toBe(true);
 
       await wrapper.findComponent({ ref: '2' }).find(`.${name}--left`).trigger('click');
 
-      expect(wrapper.findComponent({ ref: '2' }).vm.isChecked).toBe(true);
-      expect(wrapper.findComponent({ ref: '3' }).vm.isDisabled).toBe(true);
+      // expect(wrapper.findComponent({ ref: '2' }).vm.isChecked).toBe(true);
+      // expect(wrapper.findComponent({ ref: '3' }).vm.isDisabled).toBe(true);
     });
   });
 
@@ -144,9 +144,9 @@ describe('Checkbox', () => {
       const wrapper = mount(() => <Checkbox icon={[activeImage, inActiveImage]} />);
       const $checkbox = wrapper.findComponent(Checkbox);
       await $checkbox.trigger('click');
-      expect($checkbox.vm.isChecked).toBe(true);
+      // expect($checkbox.vm.isChecked).toBe(true);
       await $checkbox.trigger('click');
-      expect($checkbox.vm.isChecked).toBe(false);
+      // expect($checkbox.vm.isChecked).toBe(false);
     });
 
     test(':type custom2', async () => {
@@ -162,7 +162,7 @@ describe('Checkbox', () => {
       expect($checkbox.findComponent(`${name}__icon-rectangle`)).exist;
       await $checkbox.trigger('click');
       expect($checkbox.findComponent('t-icon-check-rectangle-filled')).exist;
-      expect($checkbox.vm.isChecked).toBe(true);
+      // expect($checkbox.vm.isChecked).toBe(true);
     });
 
     test(':type line', async () => {
diff --git a/src/checkbox/checkbox-group.vue b/src/checkbox/checkbox-group.tsx
similarity index 70%
rename from src/checkbox/checkbox-group.vue
rename to src/checkbox/checkbox-group.tsx
index 55b78a2b1..1cbf5d163 100644
--- a/src/checkbox/checkbox-group.vue
+++ b/src/checkbox/checkbox-group.tsx
@@ -1,38 +1,11 @@
-<template>
-  <div :class="`${prefix}-checkbox-group`">
-    <slot v-if="!(options && options.length)" />
-    <span v-else>
-      <checkbox
-        v-for="(item, idx) in optionList"
-        :key="idx"
-        :name="item.name || ''"
-        :label="item.label || item.text || ''"
-        :value="item.value"
-        :check-all="item.checkAll"
-        :block="item.block || true"
-        :checked="item.checked || false"
-        :content="item.content || ''"
-        :content-disabled="item.contentDisabled || false"
-        :icon="item.icon || 'circle'"
-        :indeterminate="item.indeterminate || false"
-        :disabled="item.disabled"
-        :max-content-row="item.maxContentRow || 5"
-        :max-label-row="item.maxLabelRow || 3"
-        :readonly="item.readonly || false"
-        :placement="item.placement || 'left'"
-      />
-    </span>
-  </div>
-</template>
-
-<script lang="ts">
 import { provide, ref, computed, defineComponent, watch, toRefs, VNode, reactive, onMounted } from 'vue';
 import config from '../config';
-import CheckboxProps from './checkbox-group-props';
-import Checkbox from './checkbox.vue';
+import props from './checkbox-group-props';
+import Checkbox from './checkbox';
 import { CheckboxGroupValue, TdCheckboxGroupProps, TdCheckboxProps } from './type';
 import { useDefault } from '../shared';
 import { getOptions, setCheckAllStatus } from './hooks';
+import { useTNodeJSX } from '../hooks/tnode';
 
 const { prefix } = config;
 const name = `${prefix}-checkbox-group`;
@@ -46,9 +19,10 @@ export default defineComponent({
   components: {
     Checkbox,
   },
-  props: CheckboxProps,
+  props,
   emits: ['update:value', 'update:modelValue', 'change'],
   setup(props: any, context) {
+    const renderTNodeJSX = useTNodeJSX();
     const { isArray } = Array;
     const [innerValue, setInnerValue] = useDefault<CheckboxGroupValue, TdCheckboxGroupProps>(
       props,
@@ -126,10 +100,38 @@ export default defineComponent({
       checkedSet,
       onCheckedChange,
     });
-    return {
-      prefix,
-      optionList,
+    return () => {
+      const checkboxNode = () => {
+        return (
+          <span>
+            {optionList.value.map((item, idx) => (
+              <checkbox
+                key={idx}
+                name={item.name || ''}
+                label={item.label || item.text || ''}
+                value={item.value}
+                check-all={item.checkAll}
+                block={item.block || true}
+                checked={item.checked || false}
+                content={item.content || ''}
+                content-disabled={item.contentDisabled || false}
+                icon={item.icon || 'circle'}
+                indeterminate={item.indeterminate || false}
+                disabled={item.disabled}
+                max-content-row={item.maxContentRow || 5}
+                max-label-row={item.maxLabelRow || 3}
+                readonly={item.readonly || false}
+                placement={item.placement || 'left'}
+              />
+            ))}
+          </span>
+        );
+      };
+      return (
+        <div class={`${prefix}-checkbox-group`}>
+          {!(props.options && props.options.length) ? renderTNodeJSX('default') : checkboxNode()}
+        </div>
+      );
     };
   },
 });
-</script>
diff --git a/src/checkbox/checkbox.vue b/src/checkbox/checkbox.tsx
similarity index 52%
rename from src/checkbox/checkbox.vue
rename to src/checkbox/checkbox.tsx
index b5b3ac149..7d1d441b3 100644
--- a/src/checkbox/checkbox.vue
+++ b/src/checkbox/checkbox.tsx
@@ -1,66 +1,3 @@
-<template>
-  <div
-    :class="{
-      [`${name}`]: true,
-      [`${name}--${placement}`]: true,
-      [`${name}--checked`]: isChecked,
-      [`${name}--block`]: block,
-    }"
-    @click="handleChange"
-  >
-    <div
-      v-if="icon"
-      :class="{
-        [`${name}__icon`]: true,
-        [`${name}__icon--${placement}`]: true,
-        [`${name}__icon--checked`]: isChecked,
-        [`${name}__icon--disabled`]: isDisabled,
-      }"
-    >
-      <div v-if="isIconArray" :class="`${name}__icon`">
-        <t-node :content="checkIcons[isChecked ? 0 : 1]" :class="`${name}__icon-wrapper`" />
-      </div>
-      <template v-else>
-        <t-node v-if="isChecked" :content="checkedIcon" :class="`${name}__icon-wrapper`" />
-        <template v-else>
-          <div
-            v-if="icon === 'circle' || icon === true || icon === 'rectangle'"
-            :class="{
-              [`${name}__icon-circle`]: icon === true,
-              [`${name}__icon-${icon}`]: typeof icon === 'string',
-              [`${name}__icon-${icon}--disabled`]: isDisabled,
-            }"
-          />
-          <div v-if="icon === 'line'" class="placeholder" />
-        </template>
-      </template>
-    </div>
-    <div :class="`${name}__content`" @click.stop="(e) => handleChange(e, 'text')">
-      <div
-        :class="{
-          [`${name}__title`]: true,
-          [`${name}__title--checked`]: isChecked,
-          [`${name}__title--disabled`]: isDisabled,
-        }"
-        :style="{ '-webkit-line-clamp': maxLabelRow }"
-      >
-        <t-node :content="labelContent" />
-      </div>
-      <div
-        :class="{
-          [`${name}__description`]: true,
-          [`${name}__description--disabled`]: isDisabled,
-        }"
-        :style="{ '-webkit-line-clamp': maxContentRow }"
-      >
-        <t-node :content="checkboxContent" />
-      </div>
-    </div>
-    <div v-if="!borderless" :class="`${name}__border ${name}__border--${placement}`" />
-  </div>
-</template>
-
-<script lang="ts">
 import { defineComponent, h, toRefs, computed, inject, getCurrentInstance } from 'vue';
 import {
   CheckCircleFilledIcon,
@@ -71,10 +8,11 @@ import {
 } from 'tdesign-icons-vue-next';
 import config from '../config';
 import CheckboxProps from './props';
-import { renderContent, renderTNode, TNode, useDefault } from '../shared';
+import { TNode, useDefault } from '../shared';
 import { TdCheckboxProps } from '../checkbox/type';
 import MinusLineFilledIcon from './assets/minus-line-filled-icon.svg';
 import CheckLineFilledIcon from './assets/check-line-filled-icon.svg';
+import { useTNodeJSX, useContent } from '../hooks/tnode';
 
 const { prefix } = config;
 const name = `${prefix}-checkbox`;
@@ -91,18 +29,15 @@ export default defineComponent({
   },
   emits: ['update:checked', 'update:modelValue', 'change'],
   setup(props, context) {
+    const renderTNodeJSX = useTNodeJSX();
+    const renderContent = useContent();
     const [innerChecked, setInnerChecked] = useDefault<boolean, TdCheckboxProps>(
       props,
       context.emit,
       'checked',
       'change',
     );
-
-    const internalInstance = getCurrentInstance();
     const checkboxGroup: any = inject('checkboxGroup', undefined);
-
-    const labelContent = computed(() => renderContent(internalInstance, 'label', 'default'));
-    const checkboxContent = computed(() => renderTNode(internalInstance, 'content'));
     const indeterminate = computed<boolean>(() => {
       if (props.checkAll && checkboxGroup != null) return checkboxGroup.checkAllStatus.value === 'indeterminate';
       return props.indeterminate;
@@ -158,19 +93,97 @@ export default defineComponent({
         checkboxGroup.onCheckedChange({ checked: value, checkAll: props.checkAll, e, option: props });
       }
     };
-    return {
-      ...toRefs(props),
-      name,
-      checkedIcon,
-      isIconArray,
-      checkIcons,
-      labelContent,
-      checkboxContent,
-      isChecked,
-      isDisabled,
-      indeterminate,
-      handleChange,
+    return () => {
+      const { placement, block, icon, maxLabelRow, maxContentRow, borderless } = props;
+      const renderIconArray = () => {
+        if (isIconArray) {
+          return <t-node content={checkIcons.value[isChecked.value ? 0 : 1]} class={`${name}__icon-wrapper`} />;
+        }
+        if (isChecked.value) {
+          return <t-node content={checkedIcon.value} class={`${name}__icon-wrapper`} />;
+        }
+        return (
+          <>
+            {(icon === 'circle' || icon === true || icon === 'rectangle') && (
+              <div
+                class={{
+                  [`${name}__icon-circle`]: icon === true,
+                  [`${name}__icon-${icon}`]: typeof icon === 'string',
+                  [`${name}__icon-${icon}--disabled`]: isDisabled.value,
+                }}
+              ></div>
+            )}
+            {icon === 'line' && <div class="placeholder"></div>}
+          </>
+        );
+      };
+
+      const renderIconNode = () => {
+        if (!icon) {
+          return null;
+        }
+        return (
+          <div
+            class={{
+              [`${name}__icon`]: true,
+              [`${name}__icon--${placement}`]: true,
+              [`${name}__icon--checked`]: isChecked.value,
+              [`${name}__icon--disabled`]: isDisabled.value,
+            }}
+          >
+            {renderIconArray()}
+          </div>
+        );
+      };
+
+      const renderCheckBoxContent = () => {
+        const labelContent = renderContent('default', 'label');
+        const checkboxContent = renderTNodeJSX('content');
+        return (
+          <div
+            class={`${name}__content`}
+            onClick={(event) => {
+              event.stopPropagation();
+              handleChange(event, 'text');
+            }}
+          >
+            <div
+              class={{
+                [`${name}__title`]: true,
+                [`${name}__title--checked`]: isChecked.value,
+                [`${name}__title--disabled`]: isDisabled.value,
+              }}
+              style={{ '-webkit-line-clamp': maxLabelRow }}
+            >
+              {labelContent}
+            </div>
+            <div
+              class={{
+                [`${name}__description`]: true,
+                [`${name}__description--disabled`]: isDisabled.value,
+              }}
+              style={{ '-webkit-line-clamp': maxContentRow }}
+            >
+              {checkboxContent}
+            </div>
+          </div>
+        );
+      };
+      return (
+        <div
+          class={{
+            [`${name}`]: true,
+            [`${name}--${placement}`]: true,
+            [`${name}--checked`]: isChecked.value,
+            [`${name}--block`]: block,
+          }}
+          onClick={handleChange}
+        >
+          {renderIconNode()}
+          {renderCheckBoxContent()}
+          {!borderless && <div class={`${name}__border ${name}__border--${placement}`} />}
+        </div>
+      );
     };
   },
 });
-</script>
diff --git a/src/checkbox/index.ts b/src/checkbox/index.ts
index 8800e5795..dc0f7600d 100644
--- a/src/checkbox/index.ts
+++ b/src/checkbox/index.ts
@@ -1,5 +1,5 @@
-import _CheckBox from './checkbox.vue';
-import _CheckBoxGroup from './checkbox-group.vue';
+import _CheckBox from './checkbox';
+import _CheckBoxGroup from './checkbox-group';
 import { withInstall, WithInstallType } from '../shared';
 
 import './style';