diff --git a/src/App/ComponentsDocumentation/components/RadioButton/radiobutton.e2e.spec.js b/src/App/ComponentsDocumentation/components/RadioButton/radiobutton.e2e.spec.js
new file mode 100644
index 0000000000..5941f0e832
--- /dev/null
+++ b/src/App/ComponentsDocumentation/components/RadioButton/radiobutton.e2e.spec.js
@@ -0,0 +1,141 @@
+// @ts-check
+const { test, expect } = require("@playwright/test");
+
+/**
+ *
+ * @param {import("@playwright/test").Page} page
+ * @returns boolean
+ */
+const checkIfOptionsDisplayed = async (page) =>
+	await (
+		await page.locator(".showcase-panel-advanced").getAttribute("class")
+	).includes("options-active");
+
+const openOptions = async (page) => {
+	const areOptionsDisplayed = await checkIfOptionsDisplayed(page);
+
+	if (!areOptionsDisplayed) {
+		await page.getByRole("button", { name: "Open options menu" }).click();
+	}
+};
+
+const closeOptions = async (page) => {
+	const areOptionsDisplayed = await checkIfOptionsDisplayed(page);
+
+	if (areOptionsDisplayed) {
+		await page.getByRole("button", { name: "Close options menu" }).click();
+	}
+};
+
+test("Radio buttons page exist", async ({ page }) => {
+	await page.goto("http://localhost:3000/");
+	await page
+		.getByRole("link", {
+			name: "Components Find all currently available components here",
+		})
+		.click();
+	await expect(page.getByRole("link", { name: "Radio button" })).toHaveCount(
+		page.viewportSize().width < 991 ? 1 : 2,
+	);
+	await page
+		.getByLabel("components overview")
+		.getByRole("link", { name: "Radio button" })
+		.click();
+	await expect(page).toHaveTitle(/Radio button/);
+	await expect(
+		page.getByRole("heading", { name: "Radio button", exact: true, level: 1 }),
+	).toBeVisible();
+});
+test.describe(`radio button visual regressions`, () => {
+	/**
+	 * @type string
+	 */
+	let brand;
+	/**
+	 * @type {import("@playwright/test").Locator}
+	 */
+	let previewContainer;
+
+	test.beforeEach(async ({ page }) => {
+		await page.goto("http://localhost:3000/components/radio-button");
+
+		brand = (await page.title()).includes("Swedbank") ? "SwedbankPay" : "PayEx";
+		previewContainer = await page.locator(".component-preview-content > form");
+	});
+
+	// radio input default
+	test(`visual regresion radio input default`, async ({ page }) => {
+		await expect(previewContainer).toHaveScreenshot(
+			`${brand}-radio-input-default.png`,
+		);
+		await previewContainer.getByText("Longer label", { exact: true }).hover();
+		await expect(previewContainer).toHaveScreenshot(
+			`${brand}-radio-input-default-hovered.png`,
+		);
+		await previewContainer.getByText("Longer label", { exact: true }).click();
+		await expect(previewContainer).toHaveScreenshot(
+			`${brand}-radio-input-default-checked-changed.png`,
+		);
+	});
+	// radio input - checkmark - small
+	test(`visual regresion radio input checkmark small`, async ({ page }) => {
+		page.getByRole("link", { name: "Checkmark" }).click();
+		await expect(previewContainer).toHaveScreenshot(
+			`${brand}-radio-input-checkmark-small.png`,
+		);
+		await previewContainer.getByText("Longer label", { exact: true }).hover();
+		await expect(previewContainer).toHaveScreenshot(
+			`${brand}-radio-input-checkmark-small-hovered.png`,
+		);
+		await previewContainer.getByText("Longer label", { exact: true }).click();
+		await expect(previewContainer).toHaveScreenshot(
+			`${brand}-radio-input-checkmark-small-checked-changed.png`,
+		);
+	});
+	// radio input - checkmark - large
+	test(`visual regresion radio input checkmark large`, async ({ page }) => {
+		page.getByRole("link", { name: "Checkmark" }).click();
+
+		await openOptions(page);
+		await page.getByLabel("Large").click({ force: true });
+		await closeOptions(page);
+
+		await expect(previewContainer).toHaveScreenshot(
+			`${brand}-radio-input-checkmark-large.png`,
+		);
+		await previewContainer.getByText("Longer label", { exact: true }).hover();
+		await expect(previewContainer).toHaveScreenshot(
+			`${brand}-radio-input-checkmark-large-hovered.png`,
+		);
+		await previewContainer.getByText("Longer label", { exact: true }).click();
+		await expect(previewContainer).toHaveScreenshot(
+			`${brand}-radio-input-checkmark-large-checked-changed.png`,
+		);
+	});
+	// radio input - checkmark - subtext
+	test(`visual regresion radio input checkmark with subtext`, async ({
+		page,
+	}) => {
+		page.getByRole("link", { name: "Checkmark" }).click();
+
+		await openOptions(page);
+		await page.getByLabel("Label subtext").click({ force: true });
+		await closeOptions(page);
+
+		await expect(previewContainer).toHaveScreenshot(
+			`${brand}-radio-input-checkmark-subtext.png`,
+		);
+		await previewContainer.getByText("Longer label", { exact: true }).hover();
+		await expect(previewContainer).toHaveScreenshot(
+			`${brand}-radio-input-checkmark-subtext-hovered.png`,
+		);
+		await previewContainer.getByText("Longer label", { exact: true }).click();
+		await expect(previewContainer).toHaveScreenshot(
+			`${brand}-radio-input-checkmark-subtext-checked-changed.png`,
+		);
+	});
+});
+
+test.describe(`radio input options behave correctly`, () => {
+	// TODO:
+});
diff --git a/src/App/ComponentsDocumentation/components/RadioButton/radiobutton.e2e.spec.js-snapshots/SwedbankPay-radio-input-checkmark-large-checked-changed-chromium-darwin.png b/src/App/ComponentsDocumentation/components/RadioButton/radiobutton.e2e.spec.js-snapshots/SwedbankPay-radio-input-checkmark-large-checked-changed-chromium-darwin.png
new file mode 100644
index 0000000000..a250047331
Binary files /dev/null and b/src/App/ComponentsDocumentation/components/RadioButton/radiobutton.e2e.spec.js-snapshots/SwedbankPay-radio-input-checkmark-large-checked-changed-chromium-darwin.png differ
diff --git a/src/App/ComponentsDocumentation/components/RadioButton/radiobutton.e2e.spec.js-snapshots/SwedbankPay-radio-input-checkmark-large-chromium-darwin.png b/src/App/ComponentsDocumentation/components/RadioButton/radiobutton.e2e.spec.js-snapshots/SwedbankPay-radio-input-checkmark-large-chromium-darwin.png
new file mode 100644
index 0000000000..a9f0296de2
Binary files /dev/null and b/src/App/ComponentsDocumentation/components/RadioButton/radiobutton.e2e.spec.js-snapshots/SwedbankPay-radio-input-checkmark-large-chromium-darwin.png differ
diff --git a/src/App/ComponentsDocumentation/components/RadioButton/radiobutton.e2e.spec.js-snapshots/SwedbankPay-radio-input-checkmark-large-hovered-chromium-darwin.png b/src/App/ComponentsDocumentation/components/RadioButton/radiobutton.e2e.spec.js-snapshots/SwedbankPay-radio-input-checkmark-large-hovered-chromium-darwin.png
new file mode 100644
index 0000000000..e6cde83114
Binary files /dev/null and b/src/App/ComponentsDocumentation/components/RadioButton/radiobutton.e2e.spec.js-snapshots/SwedbankPay-radio-input-checkmark-large-hovered-chromium-darwin.png differ
diff --git a/src/App/ComponentsDocumentation/components/RadioButton/radiobutton.e2e.spec.js-snapshots/SwedbankPay-radio-input-checkmark-small-checked-changed-chromium-darwin.png b/src/App/ComponentsDocumentation/components/RadioButton/radiobutton.e2e.spec.js-snapshots/SwedbankPay-radio-input-checkmark-small-checked-changed-chromium-darwin.png
new file mode 100644
index 0000000000..3047a94dff
Binary files /dev/null and b/src/App/ComponentsDocumentation/components/RadioButton/radiobutton.e2e.spec.js-snapshots/SwedbankPay-radio-input-checkmark-small-checked-changed-chromium-darwin.png differ
diff --git a/src/App/ComponentsDocumentation/components/RadioButton/radiobutton.e2e.spec.js-snapshots/SwedbankPay-radio-input-checkmark-small-chromium-darwin.png b/src/App/ComponentsDocumentation/components/RadioButton/radiobutton.e2e.spec.js-snapshots/SwedbankPay-radio-input-checkmark-small-chromium-darwin.png
new file mode 100644
index 0000000000..c04f82dad9
Binary files /dev/null and b/src/App/ComponentsDocumentation/components/RadioButton/radiobutton.e2e.spec.js-snapshots/SwedbankPay-radio-input-checkmark-small-chromium-darwin.png differ
diff --git a/src/App/ComponentsDocumentation/components/RadioButton/radiobutton.e2e.spec.js-snapshots/SwedbankPay-radio-input-checkmark-small-hovered-chromium-darwin.png b/src/App/ComponentsDocumentation/components/RadioButton/radiobutton.e2e.spec.js-snapshots/SwedbankPay-radio-input-checkmark-small-hovered-chromium-darwin.png
new file mode 100644
index 0000000000..24ec6f5676
Binary files /dev/null and b/src/App/ComponentsDocumentation/components/RadioButton/radiobutton.e2e.spec.js-snapshots/SwedbankPay-radio-input-checkmark-small-hovered-chromium-darwin.png differ
diff --git a/src/App/ComponentsDocumentation/components/RadioButton/radiobutton.e2e.spec.js-snapshots/SwedbankPay-radio-input-checkmark-subtext-checked-changed-chromium-darwin.png b/src/App/ComponentsDocumentation/components/RadioButton/radiobutton.e2e.spec.js-snapshots/SwedbankPay-radio-input-checkmark-subtext-checked-changed-chromium-darwin.png
new file mode 100644
index 0000000000..abf6d42745
Binary files /dev/null and b/src/App/ComponentsDocumentation/components/RadioButton/radiobutton.e2e.spec.js-snapshots/SwedbankPay-radio-input-checkmark-subtext-checked-changed-chromium-darwin.png differ
diff --git a/src/App/ComponentsDocumentation/components/RadioButton/radiobutton.e2e.spec.js-snapshots/SwedbankPay-radio-input-checkmark-subtext-chromium-darwin.png b/src/App/ComponentsDocumentation/components/RadioButton/radiobutton.e2e.spec.js-snapshots/SwedbankPay-radio-input-checkmark-subtext-chromium-darwin.png
new file mode 100644
index 0000000000..44bf25d053
Binary files /dev/null and b/src/App/ComponentsDocumentation/components/RadioButton/radiobutton.e2e.spec.js-snapshots/SwedbankPay-radio-input-checkmark-subtext-chromium-darwin.png differ
diff --git a/src/App/ComponentsDocumentation/components/RadioButton/radiobutton.e2e.spec.js-snapshots/SwedbankPay-radio-input-checkmark-subtext-hovered-chromium-darwin.png b/src/App/ComponentsDocumentation/components/RadioButton/radiobutton.e2e.spec.js-snapshots/SwedbankPay-radio-input-checkmark-subtext-hovered-chromium-darwin.png
new file mode 100644
index 0000000000..0a0bf7daeb
Binary files /dev/null and b/src/App/ComponentsDocumentation/components/RadioButton/radiobutton.e2e.spec.js-snapshots/SwedbankPay-radio-input-checkmark-subtext-hovered-chromium-darwin.png differ
diff --git a/src/App/ComponentsDocumentation/components/RadioButton/radiobutton.e2e.spec.js-snapshots/SwedbankPay-radio-input-default-checked-changed-chromium-darwin.png b/src/App/ComponentsDocumentation/components/RadioButton/radiobutton.e2e.spec.js-snapshots/SwedbankPay-radio-input-default-checked-changed-chromium-darwin.png
new file mode 100644
index 0000000000..c765b31fc9
Binary files /dev/null and b/src/App/ComponentsDocumentation/components/RadioButton/radiobutton.e2e.spec.js-snapshots/SwedbankPay-radio-input-default-checked-changed-chromium-darwin.png differ
diff --git a/src/App/ComponentsDocumentation/components/RadioButton/radiobutton.e2e.spec.js-snapshots/SwedbankPay-radio-input-default-chromium-darwin.png b/src/App/ComponentsDocumentation/components/RadioButton/radiobutton.e2e.spec.js-snapshots/SwedbankPay-radio-input-default-chromium-darwin.png
new file mode 100644
index 0000000000..d9cd8ca952
Binary files /dev/null and b/src/App/ComponentsDocumentation/components/RadioButton/radiobutton.e2e.spec.js-snapshots/SwedbankPay-radio-input-default-chromium-darwin.png differ
diff --git a/src/App/ComponentsDocumentation/components/RadioButton/radiobutton.e2e.spec.js-snapshots/SwedbankPay-radio-input-default-hovered-chromium-darwin.png b/src/App/ComponentsDocumentation/components/RadioButton/radiobutton.e2e.spec.js-snapshots/SwedbankPay-radio-input-default-hovered-chromium-darwin.png
new file mode 100644
index 0000000000..edbc76f768
Binary files /dev/null and b/src/App/ComponentsDocumentation/components/RadioButton/radiobutton.e2e.spec.js-snapshots/SwedbankPay-radio-input-default-hovered-chromium-darwin.png differ