diff --git a/packages/js/components/changelog/enhancement-35568 b/packages/js/components/changelog/enhancement-35568
new file mode 100644
index 00000000000..5c6dabeaa7e
--- /dev/null
+++ b/packages/js/components/changelog/enhancement-35568
@@ -0,0 +1,4 @@
+Significance: patch
+Type: enhancement
+
+Fade the value selection field in the Attributes modal when no attribute is added
diff --git a/packages/js/components/src/experimental-select-control/combo-box.scss b/packages/js/components/src/experimental-select-control/combo-box.scss
index cf5268ed26c..329d38b7fb6 100644
--- a/packages/js/components/src/experimental-select-control/combo-box.scss
+++ b/packages/js/components/src/experimental-select-control/combo-box.scss
@@ -13,6 +13,10 @@
 	> * {
 		display: inline-flex;
 	}
+
+	&--disabled {
+		opacity: 0.5;
+	}
 }
 
 .woocommerce-experimental-select-control__combox-box {
diff --git a/packages/js/components/src/experimental-select-control/combo-box.tsx b/packages/js/components/src/experimental-select-control/combo-box.tsx
index 6226da4518d..f42f5024d5b 100644
--- a/packages/js/components/src/experimental-select-control/combo-box.tsx
+++ b/packages/js/components/src/experimental-select-control/combo-box.tsx
@@ -3,6 +3,7 @@
  */
 import { createElement, MouseEvent, useRef } from 'react';
 import { Icon, search } from '@wordpress/icons';
+import classNames from 'classnames';
 
 /**
  * Internal dependencies
@@ -40,7 +41,13 @@ export const ComboBox = ( {
 		// Keyboard users are still able to tab to and interact with elements in the combobox.
 		/* eslint-disable jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events */
 		<div
-			className="woocommerce-experimental-select-control__combo-box-wrapper"
+			className={ classNames(
+				'woocommerce-experimental-select-control__combo-box-wrapper',
+				{
+					'woocommerce-experimental-select-control__combo-box-wrapper--disabled':
+						inputProps.disabled,
+				}
+			) }
 			onMouseDown={ maybeFocusInput }
 		>
 			{ children }