diff --git a/packages/components/src/checkbox-control/style.scss b/packages/components/src/checkbox-control/style.scss
index 25394ba645ee8..8cdfceb69b806 100644
--- a/packages/components/src/checkbox-control/style.scss
+++ b/packages/components/src/checkbox-control/style.scss
@@ -32,7 +32,7 @@
 	height: var(--checkbox-input-size);
 
 	appearance: none;
-	transition: 0.1s border-color ease-in-out;
+	transition: 0.1s border-color ease-in-out, 0.1s background ease-in-out;
 	@include reduce-motion("transition");
 
 	&:focus {