diff --git a/packages/components/src/box-control/all-input-control.tsx b/packages/components/src/box-control/all-input-control.tsx
index ab2f2c8d61917..2995553b32dd4 100644
--- a/packages/components/src/box-control/all-input-control.tsx
+++ b/packages/components/src/box-control/all-input-control.tsx
@@ -33,7 +33,9 @@ export default function AllInputControl( {
 	setSelectedUnits,
 	...props
 }: BoxControlInputControlProps ) {
-	const inputId = useInstanceId( AllInputControl, 'box-control-input' );
+	const generatedId = useInstanceId( AllInputControl, 'box-control-input' );
+	const inputId = [ generatedId, LABELS.all ].join( '-' );
+
 	const allValue = getAllValue( values, selectedUnits, sides );
 	const hasValues = isValuesDefined( values );
 	const isMixed = hasValues && isValuesMixed( values, selectedUnits, sides );
@@ -111,8 +113,6 @@ export default function AllInputControl( {
 				__nextHasNoMarginBottom
 				aria-controls={ inputId }
 				aria-labelledby={ inputId }
-				hideLabelFromVision
-				label={ LABELS.all }
 				onChange={ sliderOnChange }
 				min={ 0 }
 				max={ CUSTOM_VALUE_SETTINGS[ parsedUnit ?? 'px' ]?.max ?? 10 }
diff --git a/packages/components/src/box-control/axial-input-controls.tsx b/packages/components/src/box-control/axial-input-controls.tsx
index 34720a7ef6ddb..686eab731332f 100644
--- a/packages/components/src/box-control/axial-input-controls.tsx
+++ b/packages/components/src/box-control/axial-input-controls.tsx
@@ -29,7 +29,11 @@ export default function AxialInputControls( {
 	sides,
 	...props
 }: BoxControlInputControlProps ) {
-	const inputId = useInstanceId( AxialInputControls, 'box-control-input' );
+	const generatedId = useInstanceId(
+		AxialInputControls,
+		`box-control-input`
+	);
+
 	const createHandleOnFocus =
 		( side: GroupedSide ) =>
 		( event: React.FocusEvent< HTMLInputElement > ) => {
@@ -133,6 +137,9 @@ export default function AxialInputControls( {
 					side === 'vertical'
 						? selectedUnits.top
 						: selectedUnits.left;
+
+				const inputId = [ generatedId, side ].join( '-' );
+
 				return (
 					<InputWrapper key={ `box-control-${ side }` }>
 						<FlexedBoxControlIcon side={ side } sides={ sides } />
@@ -160,8 +167,6 @@ export default function AxialInputControls( {
 							__nextHasNoMarginBottom
 							aria-controls={ inputId }
 							aria-labelledby={ inputId }
-							hideLabelFromVision
-							label={ LABELS[ side ] }
 							onChange={ ( newValue ) =>
 								handleOnValueChange(
 									side,
diff --git a/packages/components/src/box-control/input-controls.tsx b/packages/components/src/box-control/input-controls.tsx
index 6c65cd85b46d1..a0f863f1486d2 100644
--- a/packages/components/src/box-control/input-controls.tsx
+++ b/packages/components/src/box-control/input-controls.tsx
@@ -28,7 +28,7 @@ export default function BoxInputControls( {
 	sides,
 	...props
 }: BoxControlInputControlProps ) {
-	const inputId = useInstanceId( BoxInputControls, 'box-control-input' );
+	const generatedId = useInstanceId( BoxInputControls, 'box-control-input' );
 
 	const createHandleOnFocus =
 		( side: keyof BoxControlValue ) =>
@@ -112,6 +112,8 @@ export default function BoxInputControls( {
 					? parsedUnit
 					: selectedUnits[ side ];
 
+				const inputId = [ generatedId, side ].join( '-' );
+
 				return (
 					<InputWrapper key={ `box-control-${ side }` } expanded>
 						<FlexedBoxControlIcon side={ side } sides={ sides } />
@@ -138,7 +140,6 @@ export default function BoxInputControls( {
 							aria-controls={ inputId }
 							aria-labelledby={ inputId }
 							__nextHasNoMarginBottom
-							hideLabelFromVision
 							onChange={ ( newValue ) => {
 								handleOnValueChange(
 									side,