diff --git a/packages/ui/src/components/Form/Radio/Radio.vue b/packages/ui/src/components/Form/Radio/Radio.vue
index aae5a83a5..4ea515ab7 100644
--- a/packages/ui/src/components/Form/Radio/Radio.vue
+++ b/packages/ui/src/components/Form/Radio/Radio.vue
@@ -15,10 +15,10 @@ const modelValue = defineModel<string>({ required: true })
 <template>
   <label
     :key="id"
-    class="form_radio relative flex cursor-pointer items-start rounded-xl p-3 pr-[20px]"
-    transition="all duration-200 ease-in-out"
-    border="2 solid"
     :class="[
+      'form_radio relative flex cursor-pointer items-start rounded-xl p-3 pr-[20px]',
+      'transition-all duration-200 ease-in-out',
+      'border-2 border-solid',
       modelValue === value
         ? 'bg-primary-50 dark:bg-primary-900/20 border-primary-100 dark:border-primary-900 hover:border-primary-500/30 dark:hover:border-primary-400/30'
         : 'bg-white dark:bg-neutral-900/20 border-neutral-100 dark:border-neutral-900 hover:border-primary-500/30 dark:hover:border-primary-400/30',
@@ -34,20 +34,20 @@ const modelValue = defineModel<string>({ required: true })
       type="radio"
       :name="name"
       :value="value"
-      class="absolute opacity-0"
+      :class="['absolute opacity-0']"
     >
-    <div class="relative mr-3 mt-0.5 flex-shrink-0">
+    <div :class="['relative mr-3 mt-0.5 flex-shrink-0']">
       <div
-        class="size-5 border-2 rounded-full transition-colors duration-200"
         :class="[
+          'size-5 border-2 rounded-full transition-colors duration-200',
           modelValue === value
             ? 'border-primary-500 dark:border-primary-400'
             : 'border-neutral-300 dark:border-neutral-600',
         ]"
       >
         <div
-          class="absolute left-1/2 top-1/2 size-3 rounded-full transition-opacity duration-200 -translate-x-1/2 -translate-y-1/2"
           :class="[
+            'absolute left-1/2 top-1/2 size-3 rounded-full transition-opacity duration-200 -translate-x-1/2 -translate-y-1/2',
             modelValue === value
               ? 'opacity-100 bg-primary-500 dark:bg-primary-400'
               : 'opacity-0',
@@ -55,11 +55,11 @@ const modelValue = defineModel<string>({ required: true })
         />
       </div>
     </div>
-    <div class="w-full flex flex-col gap-2">
-      <div class="flex items-center">
+    <div :class="['w-full flex flex-col gap-2']">
+      <div :class="['flex items-center']">
         <span
-          class="line-clamp-1 font-medium"
           :class="[
+            'line-clamp-1 font-medium',
             modelValue === value
               ? 'text-neutral-700 dark:text-neutral-300'
               : 'text-neutral-700 dark:text-neutral-400',