diff --git a/packages/ui/src/components/form/checkbox/checkbox.vue b/packages/ui/src/components/form/checkbox/checkbox.vue
index 72fcd4171..516a8ec79 100644
--- a/packages/ui/src/components/form/checkbox/checkbox.vue
+++ b/packages/ui/src/components/form/checkbox/checkbox.vue
@@ -19,6 +19,8 @@ const modelValue = defineModel<boolean>({ required: true })
       'is-interacting',
       'border-neutral-300 dark:border-neutral-700 data-[state=checked]:border-primary-200 data-[state=unchecked]:border-neutral-300 focus-within:border-neutral-800',
       'data-[state=checked]:bg-primary-400 data-[state=unchecked]:bg-neutral-300 data-[state=checked]:dark:bg-primary-400/80 dark:data-[state=unchecked]:bg-neutral-800',
+      'data-[state=unchecked]:disabled:bg-neutral-400 data-[state=unchecked]:disabled:dark:bg-neutral-400/80',
+      'data-[state=checked]:disabled:bg-primary-400 data-[state=checked]:disabled:dark:bg-primary-400/80',
       'relative h-7 w-12.5 rounded-full',
       'shadow-sm focus-within:shadow-none',
       props.disabled ? 'cursor-not-allowed opacity-50' : 'cursor-pointer',