diff --git a/packages/form/components/controls/RadioGroup.astro b/packages/form/components/controls/RadioGroup.astro
index 04e1006..ea90f94 100644
--- a/packages/form/components/controls/RadioGroup.astro
+++ b/packages/form/components/controls/RadioGroup.astro
@@ -23,18 +23,18 @@ const options = control.options.map((option: string | ControlOption) => {
 ---
 
 {
-	options.map((option: ControlOption) => (
+	options.map((option: ControlOption, index: number) => (
 		<div class="radio-option">
 			<input
 				type="radio"
-				id={control.id}
+				id={control.id + '-' + index}
 				name={control.name}
 				value={option.value}
 				checked={option.value === control.value}
 				readonly={readOnly || null}
 				disabled={readOnly || null}
-			/>{' '}
-			{option.label}
+			/>
+			<label for={control.id + '-' + index}>{option.label}</label>
 		</div>
 	))
 }
diff --git a/packages/form/test/RadioGroup.astro.test.js b/packages/form/test/RadioGroup.astro.test.js
index 741ad96..2b0e01a 100644
--- a/packages/form/test/RadioGroup.astro.test.js
+++ b/packages/form/test/RadioGroup.astro.test.js
@@ -34,7 +34,8 @@ describe('RadioGroup.astro test', () => {
 	});
 
 	it('Should render a checked radio option from string[] correctly', async () => {
-		const expectedResult = '<inputtype="radio"name="FAKENAME"value="two"checked="true">';
+		const expectedResults = ['type="radio"', 'value="two"', 'checked="true"'];
+
 		const props = {
 			control: {
 				label: 'FAKE LABEL',
@@ -49,13 +50,14 @@ describe('RadioGroup.astro test', () => {
 		// act
 		component = await getComponentOutput('./components/controls/RadioGroup.astro', props);
 		const actualResult = cleanString(component.html);
+		const resultsMap = expectedResults.map((result) => actualResult.includes(result));
 
 		// assert
-		expect(actualResult).to.contain(expectedResult);
+		expect(resultsMap.every((result) => !!result)).to.equal(true);
 	});
 
 	it('Should render a checked radio option from ControlOption[] correctly', async () => {
-		const expectedResult = '<inputtype="radio"name="FAKENAME"value="three"checked="true">';
+		const expectedResults = ['type="radio"', 'value="three"', 'checked="true"'];
 		const props = {
 			control: {
 				label: 'FAKE LABEL',
@@ -83,9 +85,10 @@ describe('RadioGroup.astro test', () => {
 		// act
 		component = await getComponentOutput('./components/controls/RadioGroup.astro', props);
 		const actualResult = cleanString(component.html);
+		const resultsMap = expectedResults.map((result) => actualResult.includes(result));
 
 		// assert
-		expect(actualResult).to.contain(expectedResult);
+		expect(resultsMap.every((result) => !!result)).to.equal(true);
 	});
 
 	it('Should render readonly attribute if the prop readOnly is passed as true', async () => {
diff --git a/packages/form/test/utils/index.js b/packages/form/test/utils/index.js
index fb97686..4eb9457 100644
--- a/packages/form/test/utils/index.js
+++ b/packages/form/test/utils/index.js
@@ -1,3 +1,3 @@
 export function cleanString(str) {
-	return str.replace(/\s/g, '');
+	return typeof str !== 'string' ? '' : str.replace(/\s/g, '');
 }