diff --git a/src/components/Alert/__tests__/Alert.spec.tsx b/src/components/Alert/__tests__/Alert.spec.tsx
index da87f8f3f..db4f0ec1f 100644
--- a/src/components/Alert/__tests__/Alert.spec.tsx
+++ b/src/components/Alert/__tests__/Alert.spec.tsx
@@ -9,6 +9,7 @@ import { AlertForTest } from './Alert.story';
 test.describe('Alert', () => {
   test.describe('visual', () => {
     [
+      ...propTests.defaultComponentPropTest,
       ...propTests.feedbackColorPropTest,
       ...propTests.neutralColorPropTest,
       ...propTests.iconPropTest,
@@ -19,6 +20,7 @@ test.describe('Alert', () => {
     ].forEach(({
       name,
       onBeforeTest,
+      onBeforeSnapshot,
       props,
     }) => {
       test(name, async ({
@@ -35,6 +37,10 @@ test.describe('Alert', () => {
           />,
         );
 
+        if (onBeforeSnapshot) {
+          await onBeforeSnapshot(page, component);
+        }
+
         const screenshot = await component.screenshot();
         expect(screenshot).toMatchSnapshot();
       });
diff --git a/src/components/Alert/__tests__/Alert.spec.tsx-snapshots/Alert-visual-color-string-danger-1-chromium-linux.png b/src/components/Alert/__tests__/Alert.spec.tsx-snapshots/Alert-visual-color-string-danger-1-chromium-linux.png
new file mode 100644
index 000000000..d0bc9ae90
Binary files /dev/null and b/src/components/Alert/__tests__/Alert.spec.tsx-snapshots/Alert-visual-color-string-danger-1-chromium-linux.png differ
diff --git a/src/components/Alert/__tests__/Alert.spec.tsx-snapshots/Alert-visual-color-light-1-chromium-linux.png b/src/components/Alert/__tests__/Alert.spec.tsx-snapshots/Alert-visual-color-string-dark-1-chromium-linux.png
similarity index 100%
rename from src/components/Alert/__tests__/Alert.spec.tsx-snapshots/Alert-visual-color-light-1-chromium-linux.png
rename to src/components/Alert/__tests__/Alert.spec.tsx-snapshots/Alert-visual-color-string-dark-1-chromium-linux.png
diff --git a/src/components/Alert/__tests__/Alert.spec.tsx-snapshots/Alert-visual-color-string-help-1-chromium-linux.png b/src/components/Alert/__tests__/Alert.spec.tsx-snapshots/Alert-visual-color-string-help-1-chromium-linux.png
new file mode 100644
index 000000000..2acabfee6
Binary files /dev/null and b/src/components/Alert/__tests__/Alert.spec.tsx-snapshots/Alert-visual-color-string-help-1-chromium-linux.png differ
diff --git a/src/components/Alert/__tests__/Alert.spec.tsx-snapshots/Alert-visual-color-string-info-1-chromium-linux.png b/src/components/Alert/__tests__/Alert.spec.tsx-snapshots/Alert-visual-color-string-info-1-chromium-linux.png
new file mode 100644
index 000000000..97961ee1e
Binary files /dev/null and b/src/components/Alert/__tests__/Alert.spec.tsx-snapshots/Alert-visual-color-string-info-1-chromium-linux.png differ
diff --git a/src/components/Alert/__tests__/Alert.spec.tsx-snapshots/Alert-visual-color-string-light-1-chromium-linux.png b/src/components/Alert/__tests__/Alert.spec.tsx-snapshots/Alert-visual-color-string-light-1-chromium-linux.png
new file mode 100644
index 000000000..3b3585137
Binary files /dev/null and b/src/components/Alert/__tests__/Alert.spec.tsx-snapshots/Alert-visual-color-string-light-1-chromium-linux.png differ
diff --git a/src/components/Alert/__tests__/Alert.spec.tsx-snapshots/Alert-visual-color-string-note-1-chromium-linux.png b/src/components/Alert/__tests__/Alert.spec.tsx-snapshots/Alert-visual-color-string-note-1-chromium-linux.png
new file mode 100644
index 000000000..ea15638ab
Binary files /dev/null and b/src/components/Alert/__tests__/Alert.spec.tsx-snapshots/Alert-visual-color-string-note-1-chromium-linux.png differ
diff --git a/src/components/Alert/__tests__/Alert.spec.tsx-snapshots/Alert-visual-color-success-1-chromium-linux.png b/src/components/Alert/__tests__/Alert.spec.tsx-snapshots/Alert-visual-color-string-success-1-chromium-linux.png
similarity index 100%
rename from src/components/Alert/__tests__/Alert.spec.tsx-snapshots/Alert-visual-color-success-1-chromium-linux.png
rename to src/components/Alert/__tests__/Alert.spec.tsx-snapshots/Alert-visual-color-string-success-1-chromium-linux.png
diff --git a/src/components/Alert/__tests__/Alert.spec.tsx-snapshots/Alert-visual-color-string-warning-1-chromium-linux.png b/src/components/Alert/__tests__/Alert.spec.tsx-snapshots/Alert-visual-color-string-warning-1-chromium-linux.png
new file mode 100644
index 000000000..0275de279
Binary files /dev/null and b/src/components/Alert/__tests__/Alert.spec.tsx-snapshots/Alert-visual-color-string-warning-1-chromium-linux.png differ
diff --git a/src/components/Alert/__tests__/Alert.spec.tsx-snapshots/Alert-visual-defaultComponentProps-object-1-chromium-linux.png b/src/components/Alert/__tests__/Alert.spec.tsx-snapshots/Alert-visual-defaultComponentProps-object-1-chromium-linux.png
new file mode 100644
index 000000000..ea15638ab
Binary files /dev/null and b/src/components/Alert/__tests__/Alert.spec.tsx-snapshots/Alert-visual-defaultComponentProps-object-1-chromium-linux.png differ
diff --git a/src/components/Alert/__tests__/Alert.spec.tsx-snapshots/Alert-visual-icon-node-1-chromium-linux.png b/src/components/Alert/__tests__/Alert.spec.tsx-snapshots/Alert-visual-icon-node-1-chromium-linux.png
new file mode 100644
index 000000000..1253d56f3
Binary files /dev/null and b/src/components/Alert/__tests__/Alert.spec.tsx-snapshots/Alert-visual-icon-node-1-chromium-linux.png differ
diff --git a/src/components/Button/__tests__/Button.spec.tsx b/src/components/Button/__tests__/Button.spec.tsx
index 5c182eff0..747ec0ffe 100644
--- a/src/components/Button/__tests__/Button.spec.tsx
+++ b/src/components/Button/__tests__/Button.spec.tsx
@@ -15,9 +15,16 @@ import {
 test.describe('Button', () => {
   test.describe('visual', () => {
     [
+      ...propTests.defaultComponentPropTest,
       ...propTests.afterLabelPropTest,
       ...propTests.beforeLabelPropTest,
       ...propTests.blockPropTest,
+      ...propTests.endCornerPropTest,
+      ...propTests.feedbackIconPropTest,
+      ...propTests.labelPropTest,
+      ...propTests.labelVisibilityPropTest,
+      ...propTests.sizePropTest,
+      ...propTests.startCornerPropTest,
       ...mixPropTests([
         [
           ...propTests.actionColorPropTest,
@@ -27,15 +34,10 @@ test.describe('Button', () => {
         propTests.disabledPropTest,
         propTests.priorityPropTest,
       ]),
-      ...propTests.endCornerPropTest,
-      ...propTests.feedbackIconPropTest,
-      ...propTests.labelPropTest,
-      ...propTests.labelVisibilityPropTest,
-      ...propTests.sizePropTest,
-      ...propTests.startCornerPropTest,
     ].forEach(({
       name,
       onBeforeTest,
+      onBeforeSnapshot,
       props,
     }) => {
       test(name, async ({
@@ -52,6 +54,10 @@ test.describe('Button', () => {
           />,
         );
 
+        if (onBeforeSnapshot) {
+          await onBeforeSnapshot(page, component);
+        }
+
         const screenshot = await component.screenshot();
         expect(screenshot).toMatchSnapshot();
       });
@@ -60,13 +66,18 @@ test.describe('Button', () => {
 
   test.describe('non-visual', () => {
     test('id', async ({ mount }) => {
+      const testId = 'testId';
+      const testLabel = 'testLabel';
+
       const component = await mount(
         <ButtonForTest
-          id="test-id"
+          id={testId}
+          label={testLabel}
         />,
       );
 
-      await expect(component).toHaveAttribute('id', 'test-id');
+      await expect(component).toHaveAttribute('id', testId);
+      await expect(component.getByText(testLabel)).toHaveAttribute('id', `${testId}__labelText`);
     });
 
     test('ref', async ({ mount }) => {
diff --git a/src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-afterLabel-1-chromium-linux.png b/src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-afterLabel-node-1-chromium-linux.png
similarity index 100%
rename from src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-afterLabel-1-chromium-linux.png
rename to src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-afterLabel-node-1-chromium-linux.png
diff --git a/src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-beforeLabel-1-chromium-linux.png b/src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-beforeLabel-node-1-chromium-linux.png
similarity index 100%
rename from src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-beforeLabel-1-chromium-linux.png
rename to src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-beforeLabel-node-1-chromium-linux.png
diff --git a/src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-block-false-1-chromium-linux.png b/src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-block-boolean-false-1-chromium-linux.png
similarity index 100%
rename from src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-block-false-1-chromium-linux.png
rename to src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-block-boolean-false-1-chromium-linux.png
diff --git a/src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-block-true-1-chromium-linux.png b/src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-block-boolean-true-1-chromium-linux.png
similarity index 100%
rename from src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-block-true-1-chromium-linux.png
rename to src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-block-boolean-true-1-chromium-linux.png
diff --git a/src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-color-danger-disabled-false-priority-filled-1-chromium-linux.png b/src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-color-string-danger-disabled-boolean-false-priority-string-filled-1-chromium-linux.png
similarity index 100%
rename from src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-color-danger-disabled-false-priority-filled-1-chromium-linux.png
rename to src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-color-string-danger-disabled-boolean-false-priority-string-filled-1-chromium-linux.png
diff --git a/src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-color-danger-disabled-false-priority-flat-1-chromium-linux.png b/src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-color-string-danger-disabled-boolean-false-priority-string-flat-1-chromium-linux.png
similarity index 100%
rename from src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-color-danger-disabled-false-priority-flat-1-chromium-linux.png
rename to src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-color-string-danger-disabled-boolean-false-priority-string-flat-1-chromium-linux.png
diff --git a/src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-color-danger-disabled-false-priority-outline-1-chromium-linux.png b/src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-color-string-danger-disabled-boolean-false-priority-string-outline-1-chromium-linux.png
similarity index 100%
rename from src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-color-danger-disabled-false-priority-outline-1-chromium-linux.png
rename to src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-color-string-danger-disabled-boolean-false-priority-string-outline-1-chromium-linux.png
diff --git a/src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-color-danger-disabled-true-priority-filled-1-chromium-linux.png b/src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-color-string-danger-disabled-boolean-true-priority-string-filled-1-chromium-linux.png
similarity index 100%
rename from src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-color-danger-disabled-true-priority-filled-1-chromium-linux.png
rename to src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-color-string-danger-disabled-boolean-true-priority-string-filled-1-chromium-linux.png
diff --git a/src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-color-danger-disabled-true-priority-flat-1-chromium-linux.png b/src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-color-string-danger-disabled-boolean-true-priority-string-flat-1-chromium-linux.png
similarity index 100%
rename from src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-color-danger-disabled-true-priority-flat-1-chromium-linux.png
rename to src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-color-string-danger-disabled-boolean-true-priority-string-flat-1-chromium-linux.png
diff --git a/src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-color-danger-disabled-true-priority-outline-1-chromium-linux.png b/src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-color-string-danger-disabled-boolean-true-priority-string-outline-1-chromium-linux.png
similarity index 100%
rename from src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-color-danger-disabled-true-priority-outline-1-chromium-linux.png
rename to src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-color-string-danger-disabled-boolean-true-priority-string-outline-1-chromium-linux.png
diff --git a/src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-color-dark-disabled-false-priority-filled-1-chromium-linux.png b/src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-color-string-dark-disabled-boolean-false-priority-string-filled-1-chromium-linux.png
similarity index 100%
rename from src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-color-dark-disabled-false-priority-filled-1-chromium-linux.png
rename to src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-color-string-dark-disabled-boolean-false-priority-string-filled-1-chromium-linux.png
diff --git a/src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-color-dark-disabled-false-priority-flat-1-chromium-linux.png b/src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-color-string-dark-disabled-boolean-false-priority-string-flat-1-chromium-linux.png
similarity index 100%
rename from src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-color-dark-disabled-false-priority-flat-1-chromium-linux.png
rename to src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-color-string-dark-disabled-boolean-false-priority-string-flat-1-chromium-linux.png
diff --git a/src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-color-dark-disabled-false-priority-outline-1-chromium-linux.png b/src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-color-string-dark-disabled-boolean-false-priority-string-outline-1-chromium-linux.png
similarity index 100%
rename from src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-color-dark-disabled-false-priority-outline-1-chromium-linux.png
rename to src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-color-string-dark-disabled-boolean-false-priority-string-outline-1-chromium-linux.png
diff --git a/src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-color-dark-disabled-true-priority-filled-1-chromium-linux.png b/src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-color-string-dark-disabled-boolean-true-priority-string-filled-1-chromium-linux.png
similarity index 100%
rename from src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-color-dark-disabled-true-priority-filled-1-chromium-linux.png
rename to src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-color-string-dark-disabled-boolean-true-priority-string-filled-1-chromium-linux.png
diff --git a/src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-color-dark-disabled-true-priority-flat-1-chromium-linux.png b/src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-color-string-dark-disabled-boolean-true-priority-string-flat-1-chromium-linux.png
similarity index 100%
rename from src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-color-dark-disabled-true-priority-flat-1-chromium-linux.png
rename to src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-color-string-dark-disabled-boolean-true-priority-string-flat-1-chromium-linux.png
diff --git a/src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-color-dark-disabled-true-priority-outline-1-chromium-linux.png b/src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-color-string-dark-disabled-boolean-true-priority-string-outline-1-chromium-linux.png
similarity index 100%
rename from src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-color-dark-disabled-true-priority-outline-1-chromium-linux.png
rename to src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-color-string-dark-disabled-boolean-true-priority-string-outline-1-chromium-linux.png
diff --git a/src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-color-help-disabled-false-priority-filled-1-chromium-linux.png b/src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-color-string-help-disabled-boolean-false-priority-string-filled-1-chromium-linux.png
similarity index 100%
rename from src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-color-help-disabled-false-priority-filled-1-chromium-linux.png
rename to src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-color-string-help-disabled-boolean-false-priority-string-filled-1-chromium-linux.png
diff --git a/src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-color-help-disabled-false-priority-flat-1-chromium-linux.png b/src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-color-string-help-disabled-boolean-false-priority-string-flat-1-chromium-linux.png
similarity index 100%
rename from src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-color-help-disabled-false-priority-flat-1-chromium-linux.png
rename to src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-color-string-help-disabled-boolean-false-priority-string-flat-1-chromium-linux.png
diff --git a/src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-color-help-disabled-false-priority-outline-1-chromium-linux.png b/src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-color-string-help-disabled-boolean-false-priority-string-outline-1-chromium-linux.png
similarity index 100%
rename from src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-color-help-disabled-false-priority-outline-1-chromium-linux.png
rename to src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-color-string-help-disabled-boolean-false-priority-string-outline-1-chromium-linux.png
diff --git a/src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-color-help-disabled-true-priority-filled-1-chromium-linux.png b/src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-color-string-help-disabled-boolean-true-priority-string-filled-1-chromium-linux.png
similarity index 100%
rename from src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-color-help-disabled-true-priority-filled-1-chromium-linux.png
rename to src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-color-string-help-disabled-boolean-true-priority-string-filled-1-chromium-linux.png
diff --git a/src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-color-help-disabled-true-priority-flat-1-chromium-linux.png b/src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-color-string-help-disabled-boolean-true-priority-string-flat-1-chromium-linux.png
similarity index 100%
rename from src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-color-help-disabled-true-priority-flat-1-chromium-linux.png
rename to src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-color-string-help-disabled-boolean-true-priority-string-flat-1-chromium-linux.png
diff --git a/src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-color-help-disabled-true-priority-outline-1-chromium-linux.png b/src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-color-string-help-disabled-boolean-true-priority-string-outline-1-chromium-linux.png
similarity index 100%
rename from src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-color-help-disabled-true-priority-outline-1-chromium-linux.png
rename to src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-color-string-help-disabled-boolean-true-priority-string-outline-1-chromium-linux.png
diff --git a/src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-color-info-disabled-false-priority-filled-1-chromium-linux.png b/src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-color-string-info-disabled-boolean-false-priority-string-filled-1-chromium-linux.png
similarity index 100%
rename from src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-color-info-disabled-false-priority-filled-1-chromium-linux.png
rename to src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-color-string-info-disabled-boolean-false-priority-string-filled-1-chromium-linux.png
diff --git a/src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-color-info-disabled-false-priority-flat-1-chromium-linux.png b/src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-color-string-info-disabled-boolean-false-priority-string-flat-1-chromium-linux.png
similarity index 100%
rename from src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-color-info-disabled-false-priority-flat-1-chromium-linux.png
rename to src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-color-string-info-disabled-boolean-false-priority-string-flat-1-chromium-linux.png
diff --git a/src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-color-info-disabled-false-priority-outline-1-chromium-linux.png b/src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-color-string-info-disabled-boolean-false-priority-string-outline-1-chromium-linux.png
similarity index 100%
rename from src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-color-info-disabled-false-priority-outline-1-chromium-linux.png
rename to src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-color-string-info-disabled-boolean-false-priority-string-outline-1-chromium-linux.png
diff --git a/src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-color-info-disabled-true-priority-filled-1-chromium-linux.png b/src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-color-string-info-disabled-boolean-true-priority-string-filled-1-chromium-linux.png
similarity index 100%
rename from src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-color-info-disabled-true-priority-filled-1-chromium-linux.png
rename to src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-color-string-info-disabled-boolean-true-priority-string-filled-1-chromium-linux.png
diff --git a/src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-color-info-disabled-true-priority-flat-1-chromium-linux.png b/src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-color-string-info-disabled-boolean-true-priority-string-flat-1-chromium-linux.png
similarity index 100%
rename from src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-color-info-disabled-true-priority-flat-1-chromium-linux.png
rename to src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-color-string-info-disabled-boolean-true-priority-string-flat-1-chromium-linux.png
diff --git a/src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-color-info-disabled-true-priority-outline-1-chromium-linux.png b/src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-color-string-info-disabled-boolean-true-priority-string-outline-1-chromium-linux.png
similarity index 100%
rename from src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-color-info-disabled-true-priority-outline-1-chromium-linux.png
rename to src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-color-string-info-disabled-boolean-true-priority-string-outline-1-chromium-linux.png
diff --git a/src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-color-light-disabled-false-priority-filled-1-chromium-linux.png b/src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-color-string-light-disabled-boolean-false-priority-string-filled-1-chromium-linux.png
similarity index 100%
rename from src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-color-light-disabled-false-priority-filled-1-chromium-linux.png
rename to src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-color-string-light-disabled-boolean-false-priority-string-filled-1-chromium-linux.png
diff --git a/src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-color-light-disabled-false-priority-flat-1-chromium-linux.png b/src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-color-string-light-disabled-boolean-false-priority-string-flat-1-chromium-linux.png
similarity index 100%
rename from src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-color-light-disabled-false-priority-flat-1-chromium-linux.png
rename to src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-color-string-light-disabled-boolean-false-priority-string-flat-1-chromium-linux.png
diff --git a/src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-color-light-disabled-false-priority-outline-1-chromium-linux.png b/src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-color-string-light-disabled-boolean-false-priority-string-outline-1-chromium-linux.png
similarity index 100%
rename from src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-color-light-disabled-false-priority-outline-1-chromium-linux.png
rename to src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-color-string-light-disabled-boolean-false-priority-string-outline-1-chromium-linux.png
diff --git a/src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-color-light-disabled-true-priority-filled-1-chromium-linux.png b/src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-color-string-light-disabled-boolean-true-priority-string-filled-1-chromium-linux.png
similarity index 100%
rename from src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-color-light-disabled-true-priority-filled-1-chromium-linux.png
rename to src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-color-string-light-disabled-boolean-true-priority-string-filled-1-chromium-linux.png
diff --git a/src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-color-light-disabled-true-priority-flat-1-chromium-linux.png b/src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-color-string-light-disabled-boolean-true-priority-string-flat-1-chromium-linux.png
similarity index 100%
rename from src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-color-light-disabled-true-priority-flat-1-chromium-linux.png
rename to src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-color-string-light-disabled-boolean-true-priority-string-flat-1-chromium-linux.png
diff --git a/src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-color-light-disabled-true-priority-outline-1-chromium-linux.png b/src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-color-string-light-disabled-boolean-true-priority-string-outline-1-chromium-linux.png
similarity index 100%
rename from src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-color-light-disabled-true-priority-outline-1-chromium-linux.png
rename to src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-color-string-light-disabled-boolean-true-priority-string-outline-1-chromium-linux.png
diff --git a/src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-color-note-disabled-false-priority-filled-1-chromium-linux.png b/src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-color-string-note-disabled-boolean-false-priority-string-filled-1-chromium-linux.png
similarity index 100%
rename from src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-color-note-disabled-false-priority-filled-1-chromium-linux.png
rename to src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-color-string-note-disabled-boolean-false-priority-string-filled-1-chromium-linux.png
diff --git a/src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-color-note-disabled-false-priority-flat-1-chromium-linux.png b/src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-color-string-note-disabled-boolean-false-priority-string-flat-1-chromium-linux.png
similarity index 100%
rename from src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-color-note-disabled-false-priority-flat-1-chromium-linux.png
rename to src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-color-string-note-disabled-boolean-false-priority-string-flat-1-chromium-linux.png
diff --git a/src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-color-note-disabled-false-priority-outline-1-chromium-linux.png b/src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-color-string-note-disabled-boolean-false-priority-string-outline-1-chromium-linux.png
similarity index 100%
rename from src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-color-note-disabled-false-priority-outline-1-chromium-linux.png
rename to src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-color-string-note-disabled-boolean-false-priority-string-outline-1-chromium-linux.png
diff --git a/src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-color-note-disabled-true-priority-filled-1-chromium-linux.png b/src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-color-string-note-disabled-boolean-true-priority-string-filled-1-chromium-linux.png
similarity index 100%
rename from src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-color-note-disabled-true-priority-filled-1-chromium-linux.png
rename to src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-color-string-note-disabled-boolean-true-priority-string-filled-1-chromium-linux.png
diff --git a/src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-color-note-disabled-true-priority-flat-1-chromium-linux.png b/src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-color-string-note-disabled-boolean-true-priority-string-flat-1-chromium-linux.png
similarity index 100%
rename from src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-color-note-disabled-true-priority-flat-1-chromium-linux.png
rename to src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-color-string-note-disabled-boolean-true-priority-string-flat-1-chromium-linux.png
diff --git a/src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-color-note-disabled-true-priority-outline-1-chromium-linux.png b/src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-color-string-note-disabled-boolean-true-priority-string-outline-1-chromium-linux.png
similarity index 100%
rename from src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-color-note-disabled-true-priority-outline-1-chromium-linux.png
rename to src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-color-string-note-disabled-boolean-true-priority-string-outline-1-chromium-linux.png
diff --git a/src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-color-primary-disabled-false-priority-filled-1-chromium-linux.png b/src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-color-string-primary-disabled-boolean-false-priority-string-filled-1-chromium-linux.png
similarity index 100%
rename from src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-color-primary-disabled-false-priority-filled-1-chromium-linux.png
rename to src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-color-string-primary-disabled-boolean-false-priority-string-filled-1-chromium-linux.png
diff --git a/src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-color-primary-disabled-false-priority-flat-1-chromium-linux.png b/src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-color-string-primary-disabled-boolean-false-priority-string-flat-1-chromium-linux.png
similarity index 100%
rename from src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-color-primary-disabled-false-priority-flat-1-chromium-linux.png
rename to src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-color-string-primary-disabled-boolean-false-priority-string-flat-1-chromium-linux.png
diff --git a/src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-color-primary-disabled-false-priority-outline-1-chromium-linux.png b/src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-color-string-primary-disabled-boolean-false-priority-string-outline-1-chromium-linux.png
similarity index 100%
rename from src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-color-primary-disabled-false-priority-outline-1-chromium-linux.png
rename to src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-color-string-primary-disabled-boolean-false-priority-string-outline-1-chromium-linux.png
diff --git a/src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-color-primary-disabled-true-priority-filled-1-chromium-linux.png b/src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-color-string-primary-disabled-boolean-true-priority-string-filled-1-chromium-linux.png
similarity index 100%
rename from src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-color-primary-disabled-true-priority-filled-1-chromium-linux.png
rename to src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-color-string-primary-disabled-boolean-true-priority-string-filled-1-chromium-linux.png
diff --git a/src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-color-primary-disabled-true-priority-flat-1-chromium-linux.png b/src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-color-string-primary-disabled-boolean-true-priority-string-flat-1-chromium-linux.png
similarity index 100%
rename from src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-color-primary-disabled-true-priority-flat-1-chromium-linux.png
rename to src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-color-string-primary-disabled-boolean-true-priority-string-flat-1-chromium-linux.png
diff --git a/src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-color-primary-disabled-true-priority-outline-1-chromium-linux.png b/src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-color-string-primary-disabled-boolean-true-priority-string-outline-1-chromium-linux.png
similarity index 100%
rename from src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-color-primary-disabled-true-priority-outline-1-chromium-linux.png
rename to src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-color-string-primary-disabled-boolean-true-priority-string-outline-1-chromium-linux.png
diff --git a/src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-color-secondary-disabled-false-priority-filled-1-chromium-linux.png b/src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-color-string-secondary-disabled-boolean-false-priority-string-filled-1-chromium-linux.png
similarity index 100%
rename from src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-color-secondary-disabled-false-priority-filled-1-chromium-linux.png
rename to src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-color-string-secondary-disabled-boolean-false-priority-string-filled-1-chromium-linux.png
diff --git a/src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-color-secondary-disabled-false-priority-flat-1-chromium-linux.png b/src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-color-string-secondary-disabled-boolean-false-priority-string-flat-1-chromium-linux.png
similarity index 100%
rename from src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-color-secondary-disabled-false-priority-flat-1-chromium-linux.png
rename to src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-color-string-secondary-disabled-boolean-false-priority-string-flat-1-chromium-linux.png
diff --git a/src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-color-secondary-disabled-false-priority-outline-1-chromium-linux.png b/src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-color-string-secondary-disabled-boolean-false-priority-string-outline-1-chromium-linux.png
similarity index 100%
rename from src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-color-secondary-disabled-false-priority-outline-1-chromium-linux.png
rename to src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-color-string-secondary-disabled-boolean-false-priority-string-outline-1-chromium-linux.png
diff --git a/src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-color-secondary-disabled-true-priority-filled-1-chromium-linux.png b/src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-color-string-secondary-disabled-boolean-true-priority-string-filled-1-chromium-linux.png
similarity index 100%
rename from src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-color-secondary-disabled-true-priority-filled-1-chromium-linux.png
rename to src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-color-string-secondary-disabled-boolean-true-priority-string-filled-1-chromium-linux.png
diff --git a/src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-color-secondary-disabled-true-priority-flat-1-chromium-linux.png b/src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-color-string-secondary-disabled-boolean-true-priority-string-flat-1-chromium-linux.png
similarity index 100%
rename from src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-color-secondary-disabled-true-priority-flat-1-chromium-linux.png
rename to src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-color-string-secondary-disabled-boolean-true-priority-string-flat-1-chromium-linux.png
diff --git a/src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-color-secondary-disabled-true-priority-outline-1-chromium-linux.png b/src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-color-string-secondary-disabled-boolean-true-priority-string-outline-1-chromium-linux.png
similarity index 100%
rename from src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-color-secondary-disabled-true-priority-outline-1-chromium-linux.png
rename to src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-color-string-secondary-disabled-boolean-true-priority-string-outline-1-chromium-linux.png
diff --git a/src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-color-selected-disabled-false-priority-filled-1-chromium-linux.png b/src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-color-string-selected-disabled-boolean-false-priority-string-filled-1-chromium-linux.png
similarity index 100%
rename from src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-color-selected-disabled-false-priority-filled-1-chromium-linux.png
rename to src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-color-string-selected-disabled-boolean-false-priority-string-filled-1-chromium-linux.png
diff --git a/src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-color-selected-disabled-false-priority-flat-1-chromium-linux.png b/src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-color-string-selected-disabled-boolean-false-priority-string-flat-1-chromium-linux.png
similarity index 100%
rename from src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-color-selected-disabled-false-priority-flat-1-chromium-linux.png
rename to src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-color-string-selected-disabled-boolean-false-priority-string-flat-1-chromium-linux.png
diff --git a/src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-color-selected-disabled-false-priority-outline-1-chromium-linux.png b/src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-color-string-selected-disabled-boolean-false-priority-string-outline-1-chromium-linux.png
similarity index 100%
rename from src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-color-selected-disabled-false-priority-outline-1-chromium-linux.png
rename to src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-color-string-selected-disabled-boolean-false-priority-string-outline-1-chromium-linux.png
diff --git a/src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-color-selected-disabled-true-priority-filled-1-chromium-linux.png b/src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-color-string-selected-disabled-boolean-true-priority-string-filled-1-chromium-linux.png
similarity index 100%
rename from src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-color-selected-disabled-true-priority-filled-1-chromium-linux.png
rename to src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-color-string-selected-disabled-boolean-true-priority-string-filled-1-chromium-linux.png
diff --git a/src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-color-selected-disabled-true-priority-flat-1-chromium-linux.png b/src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-color-string-selected-disabled-boolean-true-priority-string-flat-1-chromium-linux.png
similarity index 100%
rename from src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-color-selected-disabled-true-priority-flat-1-chromium-linux.png
rename to src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-color-string-selected-disabled-boolean-true-priority-string-flat-1-chromium-linux.png
diff --git a/src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-color-selected-disabled-true-priority-outline-1-chromium-linux.png b/src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-color-string-selected-disabled-boolean-true-priority-string-outline-1-chromium-linux.png
similarity index 100%
rename from src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-color-selected-disabled-true-priority-outline-1-chromium-linux.png
rename to src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-color-string-selected-disabled-boolean-true-priority-string-outline-1-chromium-linux.png
diff --git a/src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-color-success-disabled-false-priority-filled-1-chromium-linux.png b/src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-color-string-success-disabled-boolean-false-priority-string-filled-1-chromium-linux.png
similarity index 100%
rename from src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-color-success-disabled-false-priority-filled-1-chromium-linux.png
rename to src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-color-string-success-disabled-boolean-false-priority-string-filled-1-chromium-linux.png
diff --git a/src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-color-success-disabled-false-priority-flat-1-chromium-linux.png b/src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-color-string-success-disabled-boolean-false-priority-string-flat-1-chromium-linux.png
similarity index 100%
rename from src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-color-success-disabled-false-priority-flat-1-chromium-linux.png
rename to src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-color-string-success-disabled-boolean-false-priority-string-flat-1-chromium-linux.png
diff --git a/src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-color-success-disabled-false-priority-outline-1-chromium-linux.png b/src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-color-string-success-disabled-boolean-false-priority-string-outline-1-chromium-linux.png
similarity index 100%
rename from src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-color-success-disabled-false-priority-outline-1-chromium-linux.png
rename to src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-color-string-success-disabled-boolean-false-priority-string-outline-1-chromium-linux.png
diff --git a/src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-color-success-disabled-true-priority-filled-1-chromium-linux.png b/src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-color-string-success-disabled-boolean-true-priority-string-filled-1-chromium-linux.png
similarity index 100%
rename from src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-color-success-disabled-true-priority-filled-1-chromium-linux.png
rename to src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-color-string-success-disabled-boolean-true-priority-string-filled-1-chromium-linux.png
diff --git a/src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-color-success-disabled-true-priority-flat-1-chromium-linux.png b/src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-color-string-success-disabled-boolean-true-priority-string-flat-1-chromium-linux.png
similarity index 100%
rename from src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-color-success-disabled-true-priority-flat-1-chromium-linux.png
rename to src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-color-string-success-disabled-boolean-true-priority-string-flat-1-chromium-linux.png
diff --git a/src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-color-success-disabled-true-priority-outline-1-chromium-linux.png b/src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-color-string-success-disabled-boolean-true-priority-string-outline-1-chromium-linux.png
similarity index 100%
rename from src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-color-success-disabled-true-priority-outline-1-chromium-linux.png
rename to src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-color-string-success-disabled-boolean-true-priority-string-outline-1-chromium-linux.png
diff --git a/src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-color-warning-disabled-false-priority-filled-1-chromium-linux.png b/src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-color-string-warning-disabled-boolean-false-priority-string-filled-1-chromium-linux.png
similarity index 100%
rename from src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-color-warning-disabled-false-priority-filled-1-chromium-linux.png
rename to src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-color-string-warning-disabled-boolean-false-priority-string-filled-1-chromium-linux.png
diff --git a/src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-color-warning-disabled-false-priority-flat-1-chromium-linux.png b/src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-color-string-warning-disabled-boolean-false-priority-string-flat-1-chromium-linux.png
similarity index 100%
rename from src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-color-warning-disabled-false-priority-flat-1-chromium-linux.png
rename to src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-color-string-warning-disabled-boolean-false-priority-string-flat-1-chromium-linux.png
diff --git a/src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-color-warning-disabled-false-priority-outline-1-chromium-linux.png b/src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-color-string-warning-disabled-boolean-false-priority-string-outline-1-chromium-linux.png
similarity index 100%
rename from src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-color-warning-disabled-false-priority-outline-1-chromium-linux.png
rename to src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-color-string-warning-disabled-boolean-false-priority-string-outline-1-chromium-linux.png
diff --git a/src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-color-warning-disabled-true-priority-filled-1-chromium-linux.png b/src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-color-string-warning-disabled-boolean-true-priority-string-filled-1-chromium-linux.png
similarity index 100%
rename from src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-color-warning-disabled-true-priority-filled-1-chromium-linux.png
rename to src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-color-string-warning-disabled-boolean-true-priority-string-filled-1-chromium-linux.png
diff --git a/src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-color-warning-disabled-true-priority-flat-1-chromium-linux.png b/src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-color-string-warning-disabled-boolean-true-priority-string-flat-1-chromium-linux.png
similarity index 100%
rename from src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-color-warning-disabled-true-priority-flat-1-chromium-linux.png
rename to src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-color-string-warning-disabled-boolean-true-priority-string-flat-1-chromium-linux.png
diff --git a/src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-color-warning-disabled-true-priority-outline-1-chromium-linux.png b/src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-color-string-warning-disabled-boolean-true-priority-string-outline-1-chromium-linux.png
similarity index 100%
rename from src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-color-warning-disabled-true-priority-outline-1-chromium-linux.png
rename to src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-color-string-warning-disabled-boolean-true-priority-string-outline-1-chromium-linux.png
diff --git a/src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-labelVisibility-lg-visible-1-chromium-linux.png b/src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-defaultComponentProps-object-1-chromium-linux.png
similarity index 100%
rename from src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-labelVisibility-lg-visible-1-chromium-linux.png
rename to src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-defaultComponentProps-object-1-chromium-linux.png
diff --git a/src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-endCorner-1-chromium-linux.png b/src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-endCorner-node-1-chromium-linux.png
similarity index 100%
rename from src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-endCorner-1-chromium-linux.png
rename to src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-endCorner-node-1-chromium-linux.png
diff --git a/src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-feedbackIcon-1-chromium-linux.png b/src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-feedbackIcon-node-1-chromium-linux.png
similarity index 100%
rename from src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-feedbackIcon-1-chromium-linux.png
rename to src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-feedbackIcon-node-1-chromium-linux.png
diff --git a/src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-label-node-normal-1-chromium-linux.png b/src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-label-node-normal-1-chromium-linux.png
new file mode 100644
index 000000000..d9960726e
Binary files /dev/null and b/src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-label-node-normal-1-chromium-linux.png differ
diff --git a/src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-label-1-chromium-linux.png b/src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-label-string-long-1-chromium-linux.png
similarity index 100%
rename from src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-label-1-chromium-linux.png
rename to src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-label-string-long-1-chromium-linux.png
diff --git a/src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-labelVisibility-lg-hidden-1-chromium-linux.png b/src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-labelVisibility-string-hidden-lg-1-chromium-linux.png
similarity index 100%
rename from src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-labelVisibility-lg-hidden-1-chromium-linux.png
rename to src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-labelVisibility-string-hidden-lg-1-chromium-linux.png
diff --git a/src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-labelVisibility-md-hidden-1-chromium-linux.png b/src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-labelVisibility-string-hidden-md-1-chromium-linux.png
similarity index 100%
rename from src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-labelVisibility-md-hidden-1-chromium-linux.png
rename to src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-labelVisibility-string-hidden-md-1-chromium-linux.png
diff --git a/src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-labelVisibility-none-hidden-1-chromium-linux.png b/src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-labelVisibility-string-hidden-none-1-chromium-linux.png
similarity index 100%
rename from src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-labelVisibility-none-hidden-1-chromium-linux.png
rename to src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-labelVisibility-string-hidden-none-1-chromium-linux.png
diff --git a/src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-labelVisibility-sm-hidden-1-chromium-linux.png b/src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-labelVisibility-string-hidden-sm-1-chromium-linux.png
similarity index 100%
rename from src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-labelVisibility-sm-hidden-1-chromium-linux.png
rename to src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-labelVisibility-string-hidden-sm-1-chromium-linux.png
diff --git a/src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-labelVisibility-x2l-hidden-1-chromium-linux.png b/src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-labelVisibility-string-hidden-x2l-1-chromium-linux.png
similarity index 100%
rename from src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-labelVisibility-x2l-hidden-1-chromium-linux.png
rename to src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-labelVisibility-string-hidden-x2l-1-chromium-linux.png
diff --git a/src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-labelVisibility-x3l-hidden-1-chromium-linux.png b/src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-labelVisibility-string-hidden-x3l-1-chromium-linux.png
similarity index 100%
rename from src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-labelVisibility-x3l-hidden-1-chromium-linux.png
rename to src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-labelVisibility-string-hidden-x3l-1-chromium-linux.png
diff --git a/src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-labelVisibility-xl-hidden-1-chromium-linux.png b/src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-labelVisibility-string-hidden-xl-1-chromium-linux.png
similarity index 100%
rename from src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-labelVisibility-xl-hidden-1-chromium-linux.png
rename to src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-labelVisibility-string-hidden-xl-1-chromium-linux.png
diff --git a/src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-labelVisibility-md-visible-1-chromium-linux.png b/src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-labelVisibility-string-visible-lg-1-chromium-linux.png
similarity index 100%
rename from src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-labelVisibility-md-visible-1-chromium-linux.png
rename to src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-labelVisibility-string-visible-lg-1-chromium-linux.png
diff --git a/src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-labelVisibility-sm-visible-1-chromium-linux.png b/src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-labelVisibility-string-visible-md-1-chromium-linux.png
similarity index 100%
rename from src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-labelVisibility-sm-visible-1-chromium-linux.png
rename to src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-labelVisibility-string-visible-md-1-chromium-linux.png
diff --git a/src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-labelVisibility-x2l-visible-1-chromium-linux.png b/src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-labelVisibility-string-visible-sm-1-chromium-linux.png
similarity index 100%
rename from src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-labelVisibility-x2l-visible-1-chromium-linux.png
rename to src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-labelVisibility-string-visible-sm-1-chromium-linux.png
diff --git a/src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-labelVisibility-x3l-visible-1-chromium-linux.png b/src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-labelVisibility-string-visible-x2l-1-chromium-linux.png
similarity index 100%
rename from src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-labelVisibility-x3l-visible-1-chromium-linux.png
rename to src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-labelVisibility-string-visible-x2l-1-chromium-linux.png
diff --git a/src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-labelVisibility-xl-visible-1-chromium-linux.png b/src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-labelVisibility-string-visible-x3l-1-chromium-linux.png
similarity index 100%
rename from src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-labelVisibility-xl-visible-1-chromium-linux.png
rename to src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-labelVisibility-string-visible-x3l-1-chromium-linux.png
diff --git a/src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-labelVisibility-xs-visible-1-chromium-linux.png b/src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-labelVisibility-string-visible-xl-1-chromium-linux.png
similarity index 100%
rename from src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-labelVisibility-xs-visible-1-chromium-linux.png
rename to src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-labelVisibility-string-visible-xl-1-chromium-linux.png
diff --git a/src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-size-medium-1-chromium-linux.png b/src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-labelVisibility-string-visible-xs-1-chromium-linux.png
similarity index 100%
rename from src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-size-medium-1-chromium-linux.png
rename to src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-labelVisibility-string-visible-xs-1-chromium-linux.png
diff --git a/src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-size-large-1-chromium-linux.png b/src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-size-string-large-1-chromium-linux.png
similarity index 100%
rename from src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-size-large-1-chromium-linux.png
rename to src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-size-string-large-1-chromium-linux.png
diff --git a/src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-size-string-medium-1-chromium-linux.png b/src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-size-string-medium-1-chromium-linux.png
new file mode 100644
index 000000000..49cb68e7e
Binary files /dev/null and b/src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-size-string-medium-1-chromium-linux.png differ
diff --git a/src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-size-small-1-chromium-linux.png b/src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-size-string-small-1-chromium-linux.png
similarity index 100%
rename from src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-size-small-1-chromium-linux.png
rename to src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-size-string-small-1-chromium-linux.png
diff --git a/src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-startCorner-1-chromium-linux.png b/src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-startCorner-node-1-chromium-linux.png
similarity index 100%
rename from src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-startCorner-1-chromium-linux.png
rename to src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-startCorner-node-1-chromium-linux.png
diff --git a/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx b/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx
new file mode 100644
index 000000000..2a815aeef
--- /dev/null
+++ b/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx
@@ -0,0 +1,174 @@
+import React from 'react';
+import {
+  expect,
+  test,
+} from '@playwright/experimental-ct-react';
+import {
+  mixPropTests,
+  propTests,
+} from '../../../../tests/playwright';
+import {
+  CheckboxFieldForTest,
+  CheckboxFieldForRefTest,
+  CheckboxForFormLayoutTests,
+} from './CheckboxField.story';
+import type { CheckboxForFormLayoutTestsProps } from './CheckboxField.story';
+
+test.describe('CheckboxField', () => {
+  test.describe('base', () => {
+    test.describe('visual', () => {
+      [
+        ...propTests.defaultComponentPropTest,
+        ...propTests.helpTextAndValidationTextPropType,
+        ...propTests.isLabelVisiblePropTest,
+        ...propTests.labelPositionPropTest,
+        ...propTests.labelPropTest,
+        ...propTests.renderAsRequiredPropTest,
+        ...mixPropTests([
+          propTests.disabledPropTest,
+          propTests.checkedPropTest,
+          propTests.validationStatePropTest,
+        ]),
+        ...mixPropTests([
+          propTests.checkedPropTest,
+          propTests.requiredPropTest,
+          propTests.validationStatePropTest,
+        ]),
+        ...mixPropTests([
+          propTests.checkedPropTest,
+          propTests.renderAsRequiredPropTest,
+          propTests.validationStatePropTest,
+        ]),
+        ...mixPropTests([
+          propTests.checkedPropTest,
+          propTests.requiredPropTest,
+        ]),
+      ].forEach(({
+        name,
+        onBeforeTest,
+        onBeforeSnapshot,
+        props,
+      }) => {
+        test(name, async ({
+          mount,
+          page,
+        }) => {
+          if (onBeforeTest) {
+            await onBeforeTest(page);
+          }
+
+          const component = await mount(
+            <CheckboxFieldForTest
+              {...props}
+            />,
+          );
+
+          if (onBeforeSnapshot) {
+            await onBeforeSnapshot(page, component);
+          }
+
+          const screenshot = await component.screenshot();
+          expect(screenshot).toMatchSnapshot();
+        });
+      });
+    });
+
+    test.describe('non-visual', () => {
+      test('id', async ({ mount }) => {
+        const idValue = 'checkbox-id';
+        const label = 'checkbox-label';
+        const helpText = 'checkbox-helpText';
+        const validationText = 'checkbox-validationText';
+
+        const component = await mount(
+          <CheckboxFieldForTest
+            helpText={helpText}
+            id={idValue}
+            label={label}
+            validationText={validationText}
+          />,
+        );
+
+        await expect(component.getByRole('checkbox')).toHaveAttribute('id', idValue);
+        await expect(component).toHaveAttribute('id', `${idValue}__label`);
+        await expect(component.getByText(label)).toHaveAttribute('id', `${idValue}__labelText`);
+        await expect(component.getByText(helpText)).toHaveAttribute('id', `${idValue}__helpText`);
+        await expect(component.getByText(validationText)).toHaveAttribute('id', `${idValue}__validationText`);
+      });
+
+      test('ref', async ({ mount }) => {
+        const component = await mount(
+          <CheckboxFieldForRefTest
+            testRefAttrName="test-ref"
+            testRefAttrValue="test-ref-value"
+          />,
+        );
+
+        await expect(component.getByRole('checkbox')).toHaveAttribute('test-ref', 'test-ref-value');
+      });
+    });
+
+    test.describe('functionality', () => {
+      test('calls synthetic event onChange()', async ({ mount }) => {
+        let changeCalled = false;
+
+        const component = await mount(
+          <CheckboxFieldForTest
+            onChange={() => {
+              changeCalled = true;
+            }}
+          />,
+        );
+
+        await component.click({ force: true });
+        expect(changeCalled).toBeTruthy();
+      });
+
+      test('check on space press when focused', async ({ mount }) => {
+        const component = await mount(
+          <CheckboxFieldForTest />,
+        );
+
+        const input = component.getByRole('checkbox');
+        await input.focus();
+        await input.press('Space');
+        await expect(input).toBeChecked();
+      });
+    });
+  });
+
+  test.describe('formLayout', () => {
+    test.describe('visual', () => {
+      [
+        ...propTests.layoutPropTest,
+      ].forEach(({
+        name,
+        onBeforeTest,
+        onBeforeSnapshot,
+        props,
+      }) => {
+        test(name, async ({
+          mount,
+          page,
+        }) => {
+          if (onBeforeTest) {
+            await onBeforeTest(page);
+          }
+
+          const component = await mount(
+            <CheckboxForFormLayoutTests
+              {...props as unknown as CheckboxForFormLayoutTestsProps}
+            />,
+          );
+
+          if (onBeforeSnapshot) {
+            await onBeforeSnapshot(page, component);
+          }
+
+          const screenshot = await component.screenshot();
+          expect(screenshot).toMatchSnapshot();
+        });
+      });
+    });
+  });
+});
diff --git a/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-fals-06df7--boolean-false-validationState-string-valid-1-chromium-linux.png b/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-fals-06df7--boolean-false-validationState-string-valid-1-chromium-linux.png
new file mode 100644
index 000000000..c792dc8c0
Binary files /dev/null and b/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-fals-06df7--boolean-false-validationState-string-valid-1-chromium-linux.png differ
diff --git a/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-fals-0e7c4-boolean-true-validationState-string-warning-1-chromium-linux.png b/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-fals-0e7c4-boolean-true-validationState-string-warning-1-chromium-linux.png
new file mode 100644
index 000000000..569797858
Binary files /dev/null and b/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-fals-0e7c4-boolean-true-validationState-string-warning-1-chromium-linux.png differ
diff --git a/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-fals-1921b-red-boolean-false-validationState-undefined-1-chromium-linux.png b/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-fals-1921b-red-boolean-false-validationState-undefined-1-chromium-linux.png
new file mode 100644
index 000000000..3d6b687d9
Binary files /dev/null and b/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-fals-1921b-red-boolean-false-validationState-undefined-1-chromium-linux.png differ
diff --git a/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-fals-28331-boolean-true-validationState-string-invalid-1-chromium-linux.png b/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-fals-28331-boolean-true-validationState-string-invalid-1-chromium-linux.png
new file mode 100644
index 000000000..53efdef87
Binary files /dev/null and b/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-fals-28331-boolean-true-validationState-string-invalid-1-chromium-linux.png differ
diff --git a/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-fals-53679-boolean-true-validationState-string-warning-1-chromium-linux.png b/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-fals-53679-boolean-true-validationState-string-warning-1-chromium-linux.png
new file mode 100644
index 000000000..569797858
Binary files /dev/null and b/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-fals-53679-boolean-true-validationState-string-warning-1-chromium-linux.png differ
diff --git a/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-fals-6f470-oolean-false-validationState-string-invalid-1-chromium-linux.png b/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-fals-6f470-oolean-false-validationState-string-invalid-1-chromium-linux.png
new file mode 100644
index 000000000..82f6f8bbd
Binary files /dev/null and b/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-fals-6f470-oolean-false-validationState-string-invalid-1-chromium-linux.png differ
diff --git a/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-fals-7822c-red-boolean-false-validationState-undefined-1-chromium-linux.png b/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-fals-7822c-red-boolean-false-validationState-undefined-1-chromium-linux.png
new file mode 100644
index 000000000..3d6b687d9
Binary files /dev/null and b/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-fals-7822c-red-boolean-false-validationState-undefined-1-chromium-linux.png differ
diff --git a/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-fals-7abd3-ired-boolean-true-validationState-undefined-1-chromium-linux.png b/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-fals-7abd3-ired-boolean-true-validationState-undefined-1-chromium-linux.png
new file mode 100644
index 000000000..f8eadbad2
Binary files /dev/null and b/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-fals-7abd3-ired-boolean-true-validationState-undefined-1-chromium-linux.png differ
diff --git a/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-fals-7acb3-d-boolean-true-validationState-string-valid-1-chromium-linux.png b/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-fals-7acb3-d-boolean-true-validationState-string-valid-1-chromium-linux.png
new file mode 100644
index 000000000..93159f6a2
Binary files /dev/null and b/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-fals-7acb3-d-boolean-true-validationState-string-valid-1-chromium-linux.png differ
diff --git a/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-fals-7f13d-ired-boolean-true-validationState-undefined-1-chromium-linux.png b/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-fals-7f13d-ired-boolean-true-validationState-undefined-1-chromium-linux.png
new file mode 100644
index 000000000..f8eadbad2
Binary files /dev/null and b/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-fals-7f13d-ired-boolean-true-validationState-undefined-1-chromium-linux.png differ
diff --git a/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-fals-8f15a-oolean-false-validationState-string-invalid-1-chromium-linux.png b/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-fals-8f15a-oolean-false-validationState-string-invalid-1-chromium-linux.png
new file mode 100644
index 000000000..82f6f8bbd
Binary files /dev/null and b/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-fals-8f15a-oolean-false-validationState-string-invalid-1-chromium-linux.png differ
diff --git a/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-fals-967c9--boolean-false-validationState-string-valid-1-chromium-linux.png b/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-fals-967c9--boolean-false-validationState-string-valid-1-chromium-linux.png
new file mode 100644
index 000000000..c792dc8c0
Binary files /dev/null and b/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-fals-967c9--boolean-false-validationState-string-valid-1-chromium-linux.png differ
diff --git a/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-fals-aa513-oolean-false-validationState-string-warning-1-chromium-linux.png b/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-fals-aa513-oolean-false-validationState-string-warning-1-chromium-linux.png
new file mode 100644
index 000000000..516db65ee
Binary files /dev/null and b/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-fals-aa513-oolean-false-validationState-string-warning-1-chromium-linux.png differ
diff --git a/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-fals-aebbc-boolean-true-validationState-string-invalid-1-chromium-linux.png b/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-fals-aebbc-boolean-true-validationState-string-invalid-1-chromium-linux.png
new file mode 100644
index 000000000..53efdef87
Binary files /dev/null and b/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-fals-aebbc-boolean-true-validationState-string-invalid-1-chromium-linux.png differ
diff --git a/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-fals-cafe1-d-boolean-true-validationState-string-valid-1-chromium-linux.png b/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-fals-cafe1-d-boolean-true-validationState-string-valid-1-chromium-linux.png
new file mode 100644
index 000000000..93159f6a2
Binary files /dev/null and b/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-fals-cafe1-d-boolean-true-validationState-string-valid-1-chromium-linux.png differ
diff --git a/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-fals-fdbdd-oolean-false-validationState-string-warning-1-chromium-linux.png b/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-fals-fdbdd-oolean-false-validationState-string-warning-1-chromium-linux.png
new file mode 100644
index 000000000..516db65ee
Binary files /dev/null and b/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-fals-fdbdd-oolean-false-validationState-string-warning-1-chromium-linux.png differ
diff --git a/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-false-required-boolean-false-1-chromium-linux.png b/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-false-required-boolean-false-1-chromium-linux.png
new file mode 100644
index 000000000..3d6b687d9
Binary files /dev/null and b/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-false-required-boolean-false-1-chromium-linux.png differ
diff --git a/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-false-required-boolean-true-1-chromium-linux.png b/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-false-required-boolean-true-1-chromium-linux.png
new file mode 100644
index 000000000..f8eadbad2
Binary files /dev/null and b/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-false-required-boolean-true-1-chromium-linux.png differ
diff --git a/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-true-143b9--boolean-false-validationState-string-valid-1-chromium-linux.png b/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-true-143b9--boolean-false-validationState-string-valid-1-chromium-linux.png
new file mode 100644
index 000000000..29d023054
Binary files /dev/null and b/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-true-143b9--boolean-false-validationState-string-valid-1-chromium-linux.png differ
diff --git a/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-true-3e921-d-boolean-true-validationState-string-valid-1-chromium-linux.png b/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-true-3e921-d-boolean-true-validationState-string-valid-1-chromium-linux.png
new file mode 100644
index 000000000..b0d1d853c
Binary files /dev/null and b/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-true-3e921-d-boolean-true-validationState-string-valid-1-chromium-linux.png differ
diff --git a/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-true-4c12e--boolean-false-validationState-string-valid-1-chromium-linux.png b/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-true-4c12e--boolean-false-validationState-string-valid-1-chromium-linux.png
new file mode 100644
index 000000000..29d023054
Binary files /dev/null and b/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-true-4c12e--boolean-false-validationState-string-valid-1-chromium-linux.png differ
diff --git a/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-true-59db8-oolean-false-validationState-string-warning-1-chromium-linux.png b/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-true-59db8-oolean-false-validationState-string-warning-1-chromium-linux.png
new file mode 100644
index 000000000..902ac845a
Binary files /dev/null and b/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-true-59db8-oolean-false-validationState-string-warning-1-chromium-linux.png differ
diff --git a/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-true-6db80-oolean-false-validationState-string-warning-1-chromium-linux.png b/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-true-6db80-oolean-false-validationState-string-warning-1-chromium-linux.png
new file mode 100644
index 000000000..902ac845a
Binary files /dev/null and b/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-true-6db80-oolean-false-validationState-string-warning-1-chromium-linux.png differ
diff --git a/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-true-7eda3-oolean-false-validationState-string-invalid-1-chromium-linux.png b/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-true-7eda3-oolean-false-validationState-string-invalid-1-chromium-linux.png
new file mode 100644
index 000000000..58b6ec8b8
Binary files /dev/null and b/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-true-7eda3-oolean-false-validationState-string-invalid-1-chromium-linux.png differ
diff --git a/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-true-a32f5-boolean-true-validationState-string-warning-1-chromium-linux.png b/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-true-a32f5-boolean-true-validationState-string-warning-1-chromium-linux.png
new file mode 100644
index 000000000..7249f5613
Binary files /dev/null and b/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-true-a32f5-boolean-true-validationState-string-warning-1-chromium-linux.png differ
diff --git a/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-true-c299b-oolean-false-validationState-string-invalid-1-chromium-linux.png b/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-true-c299b-oolean-false-validationState-string-invalid-1-chromium-linux.png
new file mode 100644
index 000000000..58b6ec8b8
Binary files /dev/null and b/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-true-c299b-oolean-false-validationState-string-invalid-1-chromium-linux.png differ
diff --git a/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-true-c6af0-red-boolean-false-validationState-undefined-1-chromium-linux.png b/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-true-c6af0-red-boolean-false-validationState-undefined-1-chromium-linux.png
new file mode 100644
index 000000000..743487d7d
Binary files /dev/null and b/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-true-c6af0-red-boolean-false-validationState-undefined-1-chromium-linux.png differ
diff --git a/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-true-cfcfe-d-boolean-true-validationState-string-valid-1-chromium-linux.png b/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-true-cfcfe-d-boolean-true-validationState-string-valid-1-chromium-linux.png
new file mode 100644
index 000000000..b0d1d853c
Binary files /dev/null and b/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-true-cfcfe-d-boolean-true-validationState-string-valid-1-chromium-linux.png differ
diff --git a/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-true-d72f4-red-boolean-false-validationState-undefined-1-chromium-linux.png b/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-true-d72f4-red-boolean-false-validationState-undefined-1-chromium-linux.png
new file mode 100644
index 000000000..743487d7d
Binary files /dev/null and b/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-true-d72f4-red-boolean-false-validationState-undefined-1-chromium-linux.png differ
diff --git a/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-true-d8c8f-boolean-true-validationState-string-invalid-1-chromium-linux.png b/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-true-d8c8f-boolean-true-validationState-string-invalid-1-chromium-linux.png
new file mode 100644
index 000000000..f2552a439
Binary files /dev/null and b/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-true-d8c8f-boolean-true-validationState-string-invalid-1-chromium-linux.png differ
diff --git a/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-true-db84c-boolean-true-validationState-string-warning-1-chromium-linux.png b/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-true-db84c-boolean-true-validationState-string-warning-1-chromium-linux.png
new file mode 100644
index 000000000..7249f5613
Binary files /dev/null and b/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-true-db84c-boolean-true-validationState-string-warning-1-chromium-linux.png differ
diff --git a/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-true-e5548-ired-boolean-true-validationState-undefined-1-chromium-linux.png b/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-true-e5548-ired-boolean-true-validationState-undefined-1-chromium-linux.png
new file mode 100644
index 000000000..0aa1054fe
Binary files /dev/null and b/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-true-e5548-ired-boolean-true-validationState-undefined-1-chromium-linux.png differ
diff --git a/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-true-f3c63-boolean-true-validationState-string-invalid-1-chromium-linux.png b/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-true-f3c63-boolean-true-validationState-string-invalid-1-chromium-linux.png
new file mode 100644
index 000000000..f2552a439
Binary files /dev/null and b/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-true-f3c63-boolean-true-validationState-string-invalid-1-chromium-linux.png differ
diff --git a/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-true-required-boolean-false-1-chromium-linux.png b/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-true-required-boolean-false-1-chromium-linux.png
new file mode 100644
index 000000000..743487d7d
Binary files /dev/null and b/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-true-required-boolean-false-1-chromium-linux.png differ
diff --git a/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-true-required-boolean-true-1-chromium-linux.png b/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-true-required-boolean-true-1-chromium-linux.png
new file mode 100644
index 000000000..0aa1054fe
Binary files /dev/null and b/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-true-required-boolean-true-1-chromium-linux.png differ
diff --git a/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-true-required-boolean-true-validationState-undefined-1-chromium-linux.png b/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-true-required-boolean-true-validationState-undefined-1-chromium-linux.png
new file mode 100644
index 000000000..0aa1054fe
Binary files /dev/null and b/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-true-required-boolean-true-validationState-undefined-1-chromium-linux.png differ
diff --git a/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-defaultComponentProps-object-1-chromium-linux.png b/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-defaultComponentProps-object-1-chromium-linux.png
new file mode 100644
index 000000000..3d6b687d9
Binary files /dev/null and b/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-defaultComponentProps-object-1-chromium-linux.png differ
diff --git a/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-disabled-boolean-fal-215d0-ked-boolean-false-validationState-undefined-1-chromium-linux.png b/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-disabled-boolean-fal-215d0-ked-boolean-false-validationState-undefined-1-chromium-linux.png
new file mode 100644
index 000000000..3d6b687d9
Binary files /dev/null and b/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-disabled-boolean-fal-215d0-ked-boolean-false-validationState-undefined-1-chromium-linux.png differ
diff --git a/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-disabled-boolean-fal-3802d-d-boolean-true-validationState-string-valid-1-chromium-linux.png b/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-disabled-boolean-fal-3802d-d-boolean-true-validationState-string-valid-1-chromium-linux.png
new file mode 100644
index 000000000..29d023054
Binary files /dev/null and b/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-disabled-boolean-fal-3802d-d-boolean-true-validationState-string-valid-1-chromium-linux.png differ
diff --git a/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-disabled-boolean-fal-43fbf--boolean-false-validationState-string-valid-1-chromium-linux.png b/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-disabled-boolean-fal-43fbf--boolean-false-validationState-string-valid-1-chromium-linux.png
new file mode 100644
index 000000000..c792dc8c0
Binary files /dev/null and b/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-disabled-boolean-fal-43fbf--boolean-false-validationState-string-valid-1-chromium-linux.png differ
diff --git a/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-disabled-boolean-fal-a7f59-oolean-false-validationState-string-invalid-1-chromium-linux.png b/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-disabled-boolean-fal-a7f59-oolean-false-validationState-string-invalid-1-chromium-linux.png
new file mode 100644
index 000000000..82f6f8bbd
Binary files /dev/null and b/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-disabled-boolean-fal-a7f59-oolean-false-validationState-string-invalid-1-chromium-linux.png differ
diff --git a/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-disabled-boolean-fal-a874a-oolean-false-validationState-string-warning-1-chromium-linux.png b/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-disabled-boolean-fal-a874a-oolean-false-validationState-string-warning-1-chromium-linux.png
new file mode 100644
index 000000000..516db65ee
Binary files /dev/null and b/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-disabled-boolean-fal-a874a-oolean-false-validationState-string-warning-1-chromium-linux.png differ
diff --git a/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-disabled-boolean-fal-b4487-boolean-true-validationState-string-invalid-1-chromium-linux.png b/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-disabled-boolean-fal-b4487-boolean-true-validationState-string-invalid-1-chromium-linux.png
new file mode 100644
index 000000000..58b6ec8b8
Binary files /dev/null and b/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-disabled-boolean-fal-b4487-boolean-true-validationState-string-invalid-1-chromium-linux.png differ
diff --git a/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-disabled-boolean-fal-ed561-cked-boolean-true-validationState-undefined-1-chromium-linux.png b/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-disabled-boolean-fal-ed561-cked-boolean-true-validationState-undefined-1-chromium-linux.png
new file mode 100644
index 000000000..743487d7d
Binary files /dev/null and b/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-disabled-boolean-fal-ed561-cked-boolean-true-validationState-undefined-1-chromium-linux.png differ
diff --git a/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-disabled-boolean-fal-f80fd-boolean-true-validationState-string-warning-1-chromium-linux.png b/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-disabled-boolean-fal-f80fd-boolean-true-validationState-string-warning-1-chromium-linux.png
new file mode 100644
index 000000000..902ac845a
Binary files /dev/null and b/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-disabled-boolean-fal-f80fd-boolean-true-validationState-string-warning-1-chromium-linux.png differ
diff --git a/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-disabled-boolean-tru-29bef-d-boolean-true-validationState-string-valid-1-chromium-linux.png b/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-disabled-boolean-tru-29bef-d-boolean-true-validationState-string-valid-1-chromium-linux.png
new file mode 100644
index 000000000..4484814e0
Binary files /dev/null and b/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-disabled-boolean-tru-29bef-d-boolean-true-validationState-string-valid-1-chromium-linux.png differ
diff --git a/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-disabled-boolean-tru-2f43d-boolean-true-validationState-string-warning-1-chromium-linux.png b/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-disabled-boolean-tru-2f43d-boolean-true-validationState-string-warning-1-chromium-linux.png
new file mode 100644
index 000000000..9c14652d9
Binary files /dev/null and b/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-disabled-boolean-tru-2f43d-boolean-true-validationState-string-warning-1-chromium-linux.png differ
diff --git a/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-disabled-boolean-tru-4123f--boolean-false-validationState-string-valid-1-chromium-linux.png b/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-disabled-boolean-tru-4123f--boolean-false-validationState-string-valid-1-chromium-linux.png
new file mode 100644
index 000000000..139bf4d37
Binary files /dev/null and b/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-disabled-boolean-tru-4123f--boolean-false-validationState-string-valid-1-chromium-linux.png differ
diff --git a/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-disabled-boolean-tru-e78cd-boolean-true-validationState-string-invalid-1-chromium-linux.png b/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-disabled-boolean-tru-e78cd-boolean-true-validationState-string-invalid-1-chromium-linux.png
new file mode 100644
index 000000000..8a24be218
Binary files /dev/null and b/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-disabled-boolean-tru-e78cd-boolean-true-validationState-string-invalid-1-chromium-linux.png differ
diff --git a/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-disabled-boolean-tru-e8026-ked-boolean-false-validationState-undefined-1-chromium-linux.png b/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-disabled-boolean-tru-e8026-ked-boolean-false-validationState-undefined-1-chromium-linux.png
new file mode 100644
index 000000000..adadd14f7
Binary files /dev/null and b/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-disabled-boolean-tru-e8026-ked-boolean-false-validationState-undefined-1-chromium-linux.png differ
diff --git a/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-disabled-boolean-tru-f350b-oolean-false-validationState-string-invalid-1-chromium-linux.png b/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-disabled-boolean-tru-f350b-oolean-false-validationState-string-invalid-1-chromium-linux.png
new file mode 100644
index 000000000..33c1d47f5
Binary files /dev/null and b/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-disabled-boolean-tru-f350b-oolean-false-validationState-string-invalid-1-chromium-linux.png differ
diff --git a/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-disabled-boolean-tru-ff2f5-oolean-false-validationState-string-warning-1-chromium-linux.png b/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-disabled-boolean-tru-ff2f5-oolean-false-validationState-string-warning-1-chromium-linux.png
new file mode 100644
index 000000000..818e35aec
Binary files /dev/null and b/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-disabled-boolean-tru-ff2f5-oolean-false-validationState-string-warning-1-chromium-linux.png differ
diff --git a/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-disabled-boolean-true-checked-boolean-true-validationState-undefined-1-chromium-linux.png b/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-disabled-boolean-true-checked-boolean-true-validationState-undefined-1-chromium-linux.png
new file mode 100644
index 000000000..d0b3bf6bf
Binary files /dev/null and b/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-disabled-boolean-true-checked-boolean-true-validationState-undefined-1-chromium-linux.png differ
diff --git a/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-helpText-string-validationText-string-1-chromium-linux.png b/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-helpText-string-validationText-string-1-chromium-linux.png
new file mode 100644
index 000000000..013609e09
Binary files /dev/null and b/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-helpText-string-validationText-string-1-chromium-linux.png differ
diff --git a/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-helpText-string-validationText-undefined-1-chromium-linux.png b/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-helpText-string-validationText-undefined-1-chromium-linux.png
new file mode 100644
index 000000000..723ef093d
Binary files /dev/null and b/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-helpText-string-validationText-undefined-1-chromium-linux.png differ
diff --git a/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-helpText-undefined-validationText-string-1-chromium-linux.png b/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-helpText-undefined-validationText-string-1-chromium-linux.png
new file mode 100644
index 000000000..c79f87c34
Binary files /dev/null and b/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-helpText-undefined-validationText-string-1-chromium-linux.png differ
diff --git a/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-isLabelVisible-boolean-false-1-chromium-linux.png b/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-isLabelVisible-boolean-false-1-chromium-linux.png
new file mode 100644
index 000000000..59309aafb
Binary files /dev/null and b/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-isLabelVisible-boolean-false-1-chromium-linux.png differ
diff --git a/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-isLabelVisible-boolean-true-1-chromium-linux.png b/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-isLabelVisible-boolean-true-1-chromium-linux.png
new file mode 100644
index 000000000..3d6b687d9
Binary files /dev/null and b/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-isLabelVisible-boolean-true-1-chromium-linux.png differ
diff --git a/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-label-node-normal-1-chromium-linux.png b/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-label-node-normal-1-chromium-linux.png
new file mode 100644
index 000000000..12fdaab73
Binary files /dev/null and b/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-label-node-normal-1-chromium-linux.png differ
diff --git a/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-label-string-long-1-chromium-linux.png b/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-label-string-long-1-chromium-linux.png
new file mode 100644
index 000000000..1992d0261
Binary files /dev/null and b/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-label-string-long-1-chromium-linux.png differ
diff --git a/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-labelPosition-string-after-1-chromium-linux.png b/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-labelPosition-string-after-1-chromium-linux.png
new file mode 100644
index 000000000..3d6b687d9
Binary files /dev/null and b/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-labelPosition-string-after-1-chromium-linux.png differ
diff --git a/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-labelPosition-string-before-1-chromium-linux.png b/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-labelPosition-string-before-1-chromium-linux.png
new file mode 100644
index 000000000..d3c744e13
Binary files /dev/null and b/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-labelPosition-string-before-1-chromium-linux.png differ
diff --git a/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-renderAsRequired-boolean-false-1-chromium-linux.png b/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-renderAsRequired-boolean-false-1-chromium-linux.png
new file mode 100644
index 000000000..3d6b687d9
Binary files /dev/null and b/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-renderAsRequired-boolean-false-1-chromium-linux.png differ
diff --git a/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-renderAsRequired-boolean-true-1-chromium-linux.png b/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-renderAsRequired-boolean-true-1-chromium-linux.png
new file mode 100644
index 000000000..f8eadbad2
Binary files /dev/null and b/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-renderAsRequired-boolean-true-1-chromium-linux.png differ
diff --git a/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-formLayout-visual-layout-string-horizontal-1-chromium-linux.png b/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-formLayout-visual-layout-string-horizontal-1-chromium-linux.png
new file mode 100644
index 000000000..eac7c810b
Binary files /dev/null and b/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-formLayout-visual-layout-string-horizontal-1-chromium-linux.png differ
diff --git a/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-formLayout-visual-layout-string-vertical-1-chromium-linux.png b/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-formLayout-visual-layout-string-vertical-1-chromium-linux.png
new file mode 100644
index 000000000..0c65a4d6a
Binary files /dev/null and b/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-formLayout-visual-layout-string-vertical-1-chromium-linux.png differ
diff --git a/src/components/CheckboxField/__tests__/CheckboxField.story.tsx b/src/components/CheckboxField/__tests__/CheckboxField.story.tsx
new file mode 100644
index 000000000..6b542f175
--- /dev/null
+++ b/src/components/CheckboxField/__tests__/CheckboxField.story.tsx
@@ -0,0 +1,71 @@
+import React, {
+  useEffect,
+  useMemo,
+  useRef,
+} from 'react';
+import type { LabelHTMLAttributes } from 'react';
+import { FormLayoutContext } from '../../FormLayout';
+import { CheckboxField } from '..';
+
+// Types for story component will be improved when we have full TypeScript support
+type CheckboxFieldForTestProps = LabelHTMLAttributes<HTMLLabelElement>;
+type CheckboxFieldForRefTestProps = CheckboxFieldForTestProps & {
+  testRefAttrName: string;
+  testRefAttrValue: string;
+};
+export type CheckboxForFormLayoutTestsProps = CheckboxFieldForTestProps & {
+  layout: 'vertical' | 'horizontal'
+};
+
+const defaultLabel = 'test-label';
+
+export const CheckboxFieldForTest = ({
+  ...props
+} : CheckboxFieldForTestProps) => (
+  <CheckboxField
+    label={defaultLabel}
+    {...props}
+  />
+);
+
+export const CheckboxFieldForRefTest = ({
+  testRefAttrName,
+  testRefAttrValue,
+  ...props
+} : CheckboxFieldForRefTestProps) => {
+  const ref = useRef<HTMLLabelElement>(undefined);
+
+  useEffect(() => {
+    ref.current?.setAttribute(testRefAttrName, testRefAttrValue);
+  }, [testRefAttrName, testRefAttrValue]);
+
+  return (
+    <CheckboxField
+      label={defaultLabel}
+      {...props}
+      ref={ref}
+    />
+  );
+};
+
+export const CheckboxForFormLayoutTests = ({
+  layout,
+  ...props
+} : CheckboxForFormLayoutTestsProps) => {
+  const values = useMemo(() => ({ layout }), [layout]);
+
+  return (
+    <FormLayoutContext.Provider
+      value={values}
+    >
+      <CheckboxField
+        label={defaultLabel}
+        {...props}
+      />
+      <CheckboxField
+        label="another-test-label"
+        {...props}
+      />
+    </FormLayoutContext.Provider>
+  );
+};
diff --git a/src/components/CheckboxField/__tests__/CheckboxField.test.jsx b/src/components/CheckboxField/__tests__/CheckboxField.test.jsx
deleted file mode 100644
index 50f38766d..000000000
--- a/src/components/CheckboxField/__tests__/CheckboxField.test.jsx
+++ /dev/null
@@ -1,77 +0,0 @@
-import React from 'react';
-import {
-  render,
-  screen,
-  within,
-} from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import { disabledPropTest } from '../../../../tests/jest/propTests/disabledPropTest';
-import { refPropTest } from '../../../../tests/jest/propTests/refPropTest';
-import { helpTextPropTest } from '../../../../tests/jest/propTests/helpTextPropTest';
-import { formLayoutProviderTest } from '../../../../tests/jest/providerTests/formLayoutProviderTest';
-import { isLabelVisibleTest } from '../../../../tests/jest/propTests/isLabelVisibleTest';
-import { labelPropTest } from '../../../../tests/jest/propTests/labelPropTest';
-import { renderAsRequiredPropTest } from '../../../../tests/jest/propTests/renderAsRequiredPropTest';
-import { requiredPropTest } from '../../../../tests/jest/propTests/requiredPropTest';
-import { validationStatePropTest } from '../../../../tests/jest/propTests/validationStatePropTest';
-import { validationTextPropTest } from '../../../../tests/jest/propTests/validationTextPropTest';
-import { CheckboxField } from '../CheckboxField';
-
-const mandatoryProps = {
-  label: 'label',
-};
-
-describe('rendering', () => {
-  formLayoutProviderTest(<CheckboxField {...mandatoryProps} />);
-
-  it.each([
-    ...disabledPropTest,
-    ...refPropTest(React.createRef()),
-    ...helpTextPropTest,
-    [
-      {
-        helpText: 'help text',
-        id: 'id',
-        validationText: 'validation text',
-      },
-      (rootElement) => {
-        expect(rootElement).toHaveAttribute('id', 'id__label');
-        expect(within(rootElement).getByTestId('id'));
-        expect(within(rootElement).getByText('label')).toHaveAttribute('id', 'id__labelText');
-        expect(within(rootElement).getByText('help text')).toHaveAttribute('id', 'id__helpText');
-        expect(within(rootElement).getByText('validation text')).toHaveAttribute('id', 'id__validationText');
-      },
-    ],
-    ...isLabelVisibleTest(),
-    ...labelPropTest(),
-    ...renderAsRequiredPropTest,
-    ...requiredPropTest,
-    ...validationStatePropTest,
-    ...validationTextPropTest,
-  ])('renders with props: "%s"', (testedProps, assert) => {
-    const dom = render((
-      <CheckboxField
-        {...mandatoryProps}
-        {...testedProps}
-      />
-    ));
-
-    assert(dom.container.firstChild);
-  });
-});
-
-describe('functionality', () => {
-  it('calls synthetic event onChange()', async () => {
-    const spy = jest.fn();
-    render((
-      <CheckboxField
-        {...mandatoryProps}
-        onChange={spy}
-      />
-    ));
-
-    await userEvent.click(screen.getByLabelText('label'));
-    expect(spy).toHaveBeenCalled();
-  });
-});
-
diff --git a/src/components/Radio/__tests__/Radio.spec.tsx b/src/components/Radio/__tests__/Radio.spec.tsx
new file mode 100644
index 000000000..f8ce464c6
--- /dev/null
+++ b/src/components/Radio/__tests__/Radio.spec.tsx
@@ -0,0 +1,193 @@
+import React from 'react';
+import {
+  expect,
+  test,
+} from '@playwright/experimental-ct-react';
+import {
+  mixPropTests,
+  propTests,
+} from '../../../../tests/playwright';
+import { partialDisabledOptionsPropTest } from './_propTests/partialDisabledOptionsPropTest';
+import {
+  RadioForTest,
+  RadioForFormLayoutTests,
+} from './Radio.story';
+import type { RadioForFormLayoutTestsProps } from './Radio.story';
+
+const options = [
+  {
+    disabled: false,
+    key: 'customKey1',
+    label: 'customLabel1',
+    value: 'customValue1',
+  },
+  {
+    disabled: false,
+    key: 'customKey2',
+    label: 'customLabel2',
+    value: 'customValue2',
+  },
+  {
+    disabled: false,
+    label: 'customLabel3',
+    value: 'customValue3',
+  },
+];
+
+test.describe('Radio', () => {
+  test.describe('base', () => {
+    test.describe('visual', () => {
+      [
+        ...propTests.defaultComponentPropTest,
+        ...propTests.helpTextAndValidationTextPropType,
+        ...propTests.isLabelVisiblePropTest,
+        ...propTests.labelPropTest,
+        ...propTests.layoutPropTest,
+        ...propTests.renderAsRequiredPropTest,
+        ...propTests.requiredPropTest,
+        ...mixPropTests([
+          propTests.disabledPropTest,
+          propTests.validationStatePropTest,
+          propTests.validationTextPropTest,
+        ]),
+        ...mixPropTests([
+          propTests.requiredPropTest,
+          propTests.validationStatePropTest,
+        ]),
+        ...mixPropTests([
+          propTests.renderAsRequiredPropTest,
+          propTests.validationStatePropTest,
+        ]),
+        ...mixPropTests([
+          partialDisabledOptionsPropTest,
+          propTests.validationStatePropTest,
+        ]),
+      ].forEach(({
+        name,
+        onBeforeTest,
+        onBeforeSnapshot,
+        props,
+      }) => {
+        test(name, async ({
+          mount,
+          page,
+        }) => {
+          if (onBeforeTest) {
+            await onBeforeTest(page);
+          }
+
+          const component = await mount(
+            <RadioForTest
+              {...props}
+            />,
+          );
+
+          if (onBeforeSnapshot) {
+            await onBeforeSnapshot(page, component);
+          }
+
+          const screenshot = await component.screenshot();
+          expect(screenshot).toMatchSnapshot();
+        });
+      });
+    });
+
+    test.describe('non-visual', () => {
+      test('id', async ({ mount }) => {
+        const radioId = 'radioId';
+        const label = 'radioLabel';
+
+        const component = await mount(
+          <RadioForTest
+            id={radioId}
+            label={label}
+            options={options}
+          />,
+        );
+
+        await expect(component).toHaveAttribute('id', radioId);
+        await expect(component.getByText(label).first()).toHaveAttribute('id', `${radioId}__label`);
+        await expect(component.getByText(label).last()).toHaveAttribute('id', `${radioId}__displayLabel`);
+        await expect(component.getByText(options[0].label)).toHaveAttribute('id', `${radioId}__item__${options[0].key}__labelText`);
+        await expect(component.getByText(options[1].label)).toHaveAttribute('id', `${radioId}__item__${options[1].key}__labelText`);
+        await expect(component.getByText(options[2].label)).toHaveAttribute('id', `${radioId}__item__${options[2].value}__labelText`);
+        await expect(component.locator(`input[id=${radioId}__item__${options[0].key}]`)).not.toBeEmpty();
+        await expect(component.locator(`input[id=${radioId}__item__${options[1].key}]`)).not.toBeEmpty();
+        await expect(component.locator(`input[id=${radioId}__item__${options[2].value}]`)).not.toBeEmpty();
+        await expect(component.locator(`label[id=${radioId}__item__${options[0].key}__label]`)).not.toBeEmpty();
+        await expect(component.locator(`label[id=${radioId}__item__${options[1].key}__label]`)).not.toBeEmpty();
+        await expect(component.locator(`label[id=${radioId}__item__${options[2].value}__label]`)).not.toBeEmpty();
+      });
+    });
+
+    test.describe('functionality', () => {
+      test('calls synthetic event onChange()', async ({ mount }) => {
+        let changeCalled = false;
+
+        const component = await mount(
+          <RadioForTest
+            onChange={() => {
+              changeCalled = true;
+            }}
+            options={options}
+          />,
+        );
+
+        await component.getByText(options[1].label).click({ force: true });
+        expect(changeCalled).toBeTruthy();
+      });
+      test('check on space press when focused', async ({ mount }) => {
+        let changeCalled = false;
+        const testId = 'testId';
+
+        const component = await mount(
+          <RadioForTest
+            id={testId}
+            onChange={() => { changeCalled = true; }}
+            options={options}
+          />,
+        );
+
+        const input = component.locator(`input[id=${testId}__item__${options[1].key}]`);
+        await input.focus();
+        await input.press('Space');
+        expect(changeCalled).toBeTruthy();
+      });
+    });
+  });
+
+  test.describe('formLayout', () => {
+    test.describe('visual', () => {
+      [
+        ...propTests.layoutPropTest,
+      ].forEach(({
+        name,
+        onBeforeTest,
+        onBeforeSnapshot,
+        props,
+      }) => {
+        test(name, async ({
+          mount,
+          page,
+        }) => {
+          if (onBeforeTest) {
+            await onBeforeTest(page);
+          }
+
+          const component = await mount(
+            <RadioForFormLayoutTests
+              {...props as unknown as RadioForFormLayoutTestsProps}
+            />,
+          );
+
+          if (onBeforeSnapshot) {
+            await onBeforeSnapshot(page, component);
+          }
+
+          const screenshot = await component.screenshot();
+          expect(screenshot).toMatchSnapshot();
+        });
+      });
+    });
+  });
+});
diff --git a/src/components/Radio/__tests__/Radio.spec.tsx-snapshots/Radio-base-visual-defaultComponentProps-object-1-chromium-linux.png b/src/components/Radio/__tests__/Radio.spec.tsx-snapshots/Radio-base-visual-defaultComponentProps-object-1-chromium-linux.png
new file mode 100644
index 000000000..307c3c264
Binary files /dev/null and b/src/components/Radio/__tests__/Radio.spec.tsx-snapshots/Radio-base-visual-defaultComponentProps-object-1-chromium-linux.png differ
diff --git a/src/components/Radio/__tests__/Radio.spec.tsx-snapshots/Radio-base-visual-disabled-boolean-false-val-517de--string-invalid-validationText-string-long-1-chromium-linux.png b/src/components/Radio/__tests__/Radio.spec.tsx-snapshots/Radio-base-visual-disabled-boolean-false-val-517de--string-invalid-validationText-string-long-1-chromium-linux.png
new file mode 100644
index 000000000..a6c1c6aec
Binary files /dev/null and b/src/components/Radio/__tests__/Radio.spec.tsx-snapshots/Radio-base-visual-disabled-boolean-false-val-517de--string-invalid-validationText-string-long-1-chromium-linux.png differ
diff --git a/src/components/Radio/__tests__/Radio.spec.tsx-snapshots/Radio-base-visual-disabled-boolean-false-val-6d01e--string-invalid-validationText-node-normal-1-chromium-linux.png b/src/components/Radio/__tests__/Radio.spec.tsx-snapshots/Radio-base-visual-disabled-boolean-false-val-6d01e--string-invalid-validationText-node-normal-1-chromium-linux.png
new file mode 100644
index 000000000..1cf523646
Binary files /dev/null and b/src/components/Radio/__tests__/Radio.spec.tsx-snapshots/Radio-base-visual-disabled-boolean-false-val-6d01e--string-invalid-validationText-node-normal-1-chromium-linux.png differ
diff --git a/src/components/Radio/__tests__/Radio.spec.tsx-snapshots/Radio-base-visual-disabled-boolean-false-val-72d77--string-warning-validationText-string-long-1-chromium-linux.png b/src/components/Radio/__tests__/Radio.spec.tsx-snapshots/Radio-base-visual-disabled-boolean-false-val-72d77--string-warning-validationText-string-long-1-chromium-linux.png
new file mode 100644
index 000000000..896d2e510
Binary files /dev/null and b/src/components/Radio/__tests__/Radio.spec.tsx-snapshots/Radio-base-visual-disabled-boolean-false-val-72d77--string-warning-validationText-string-long-1-chromium-linux.png differ
diff --git a/src/components/Radio/__tests__/Radio.spec.tsx-snapshots/Radio-base-visual-disabled-boolean-false-val-7ab9b-te-string-valid-validationText-string-long-1-chromium-linux.png b/src/components/Radio/__tests__/Radio.spec.tsx-snapshots/Radio-base-visual-disabled-boolean-false-val-7ab9b-te-string-valid-validationText-string-long-1-chromium-linux.png
new file mode 100644
index 000000000..4ffbdf1db
Binary files /dev/null and b/src/components/Radio/__tests__/Radio.spec.tsx-snapshots/Radio-base-visual-disabled-boolean-false-val-7ab9b-te-string-valid-validationText-string-long-1-chromium-linux.png differ
diff --git a/src/components/Radio/__tests__/Radio.spec.tsx-snapshots/Radio-base-visual-disabled-boolean-false-val-815ed-te-string-valid-validationText-node-normal-1-chromium-linux.png b/src/components/Radio/__tests__/Radio.spec.tsx-snapshots/Radio-base-visual-disabled-boolean-false-val-815ed-te-string-valid-validationText-node-normal-1-chromium-linux.png
new file mode 100644
index 000000000..38c8b4c12
Binary files /dev/null and b/src/components/Radio/__tests__/Radio.spec.tsx-snapshots/Radio-base-visual-disabled-boolean-false-val-815ed-te-string-valid-validationText-node-normal-1-chromium-linux.png differ
diff --git a/src/components/Radio/__tests__/Radio.spec.tsx-snapshots/Radio-base-visual-disabled-boolean-false-val-91e9f--string-valid-validationText-string-normal-1-chromium-linux.png b/src/components/Radio/__tests__/Radio.spec.tsx-snapshots/Radio-base-visual-disabled-boolean-false-val-91e9f--string-valid-validationText-string-normal-1-chromium-linux.png
new file mode 100644
index 000000000..a201d2896
Binary files /dev/null and b/src/components/Radio/__tests__/Radio.spec.tsx-snapshots/Radio-base-visual-disabled-boolean-false-val-91e9f--string-valid-validationText-string-normal-1-chromium-linux.png differ
diff --git a/src/components/Radio/__tests__/Radio.spec.tsx-snapshots/Radio-base-visual-disabled-boolean-false-val-a5ce6-tring-warning-validationText-string-normal-1-chromium-linux.png b/src/components/Radio/__tests__/Radio.spec.tsx-snapshots/Radio-base-visual-disabled-boolean-false-val-a5ce6-tring-warning-validationText-string-normal-1-chromium-linux.png
new file mode 100644
index 000000000..f9746cb59
Binary files /dev/null and b/src/components/Radio/__tests__/Radio.spec.tsx-snapshots/Radio-base-visual-disabled-boolean-false-val-a5ce6-tring-warning-validationText-string-normal-1-chromium-linux.png differ
diff --git a/src/components/Radio/__tests__/Radio.spec.tsx-snapshots/Radio-base-visual-disabled-boolean-false-val-e713e-ate-undefined-validationText-string-normal-1-chromium-linux.png b/src/components/Radio/__tests__/Radio.spec.tsx-snapshots/Radio-base-visual-disabled-boolean-false-val-e713e-ate-undefined-validationText-string-normal-1-chromium-linux.png
new file mode 100644
index 000000000..78844ec81
Binary files /dev/null and b/src/components/Radio/__tests__/Radio.spec.tsx-snapshots/Radio-base-visual-disabled-boolean-false-val-e713e-ate-undefined-validationText-string-normal-1-chromium-linux.png differ
diff --git a/src/components/Radio/__tests__/Radio.spec.tsx-snapshots/Radio-base-visual-disabled-boolean-false-val-eb83b-tring-invalid-validationText-string-normal-1-chromium-linux.png b/src/components/Radio/__tests__/Radio.spec.tsx-snapshots/Radio-base-visual-disabled-boolean-false-val-eb83b-tring-invalid-validationText-string-normal-1-chromium-linux.png
new file mode 100644
index 000000000..9effef54c
Binary files /dev/null and b/src/components/Radio/__tests__/Radio.spec.tsx-snapshots/Radio-base-visual-disabled-boolean-false-val-eb83b-tring-invalid-validationText-string-normal-1-chromium-linux.png differ
diff --git a/src/components/Radio/__tests__/Radio.spec.tsx-snapshots/Radio-base-visual-disabled-boolean-false-val-f2354--string-warning-validationText-node-normal-1-chromium-linux.png b/src/components/Radio/__tests__/Radio.spec.tsx-snapshots/Radio-base-visual-disabled-boolean-false-val-f2354--string-warning-validationText-node-normal-1-chromium-linux.png
new file mode 100644
index 000000000..d6ad8a4a0
Binary files /dev/null and b/src/components/Radio/__tests__/Radio.spec.tsx-snapshots/Radio-base-visual-disabled-boolean-false-val-f2354--string-warning-validationText-node-normal-1-chromium-linux.png differ
diff --git a/src/components/Radio/__tests__/Radio.spec.tsx-snapshots/Radio-base-visual-disabled-boolean-false-validationState-undefined-validationText-node-normal-1-chromium-linux.png b/src/components/Radio/__tests__/Radio.spec.tsx-snapshots/Radio-base-visual-disabled-boolean-false-validationState-undefined-validationText-node-normal-1-chromium-linux.png
new file mode 100644
index 000000000..22823a4d9
Binary files /dev/null and b/src/components/Radio/__tests__/Radio.spec.tsx-snapshots/Radio-base-visual-disabled-boolean-false-validationState-undefined-validationText-node-normal-1-chromium-linux.png differ
diff --git a/src/components/Radio/__tests__/Radio.spec.tsx-snapshots/Radio-base-visual-disabled-boolean-false-validationState-undefined-validationText-string-long-1-chromium-linux.png b/src/components/Radio/__tests__/Radio.spec.tsx-snapshots/Radio-base-visual-disabled-boolean-false-validationState-undefined-validationText-string-long-1-chromium-linux.png
new file mode 100644
index 000000000..94c2efba2
Binary files /dev/null and b/src/components/Radio/__tests__/Radio.spec.tsx-snapshots/Radio-base-visual-disabled-boolean-false-validationState-undefined-validationText-string-long-1-chromium-linux.png differ
diff --git a/src/components/Radio/__tests__/Radio.spec.tsx-snapshots/Radio-base-visual-disabled-boolean-true-vali-27011--string-valid-validationText-string-normal-1-chromium-linux.png b/src/components/Radio/__tests__/Radio.spec.tsx-snapshots/Radio-base-visual-disabled-boolean-true-vali-27011--string-valid-validationText-string-normal-1-chromium-linux.png
new file mode 100644
index 000000000..a2945b941
Binary files /dev/null and b/src/components/Radio/__tests__/Radio.spec.tsx-snapshots/Radio-base-visual-disabled-boolean-true-vali-27011--string-valid-validationText-string-normal-1-chromium-linux.png differ
diff --git a/src/components/Radio/__tests__/Radio.spec.tsx-snapshots/Radio-base-visual-disabled-boolean-true-vali-2ddc7-ate-undefined-validationText-string-normal-1-chromium-linux.png b/src/components/Radio/__tests__/Radio.spec.tsx-snapshots/Radio-base-visual-disabled-boolean-true-vali-2ddc7-ate-undefined-validationText-string-normal-1-chromium-linux.png
new file mode 100644
index 000000000..4e4e6a929
Binary files /dev/null and b/src/components/Radio/__tests__/Radio.spec.tsx-snapshots/Radio-base-visual-disabled-boolean-true-vali-2ddc7-ate-undefined-validationText-string-normal-1-chromium-linux.png differ
diff --git a/src/components/Radio/__tests__/Radio.spec.tsx-snapshots/Radio-base-visual-disabled-boolean-true-vali-4084c-te-string-valid-validationText-string-long-1-chromium-linux.png b/src/components/Radio/__tests__/Radio.spec.tsx-snapshots/Radio-base-visual-disabled-boolean-true-vali-4084c-te-string-valid-validationText-string-long-1-chromium-linux.png
new file mode 100644
index 000000000..dc09c13a3
Binary files /dev/null and b/src/components/Radio/__tests__/Radio.spec.tsx-snapshots/Radio-base-visual-disabled-boolean-true-vali-4084c-te-string-valid-validationText-string-long-1-chromium-linux.png differ
diff --git a/src/components/Radio/__tests__/Radio.spec.tsx-snapshots/Radio-base-visual-disabled-boolean-true-vali-746e7-te-string-valid-validationText-node-normal-1-chromium-linux.png b/src/components/Radio/__tests__/Radio.spec.tsx-snapshots/Radio-base-visual-disabled-boolean-true-vali-746e7-te-string-valid-validationText-node-normal-1-chromium-linux.png
new file mode 100644
index 000000000..36e1e8ffe
Binary files /dev/null and b/src/components/Radio/__tests__/Radio.spec.tsx-snapshots/Radio-base-visual-disabled-boolean-true-vali-746e7-te-string-valid-validationText-node-normal-1-chromium-linux.png differ
diff --git a/src/components/Radio/__tests__/Radio.spec.tsx-snapshots/Radio-base-visual-disabled-boolean-true-vali-b9f02--string-warning-validationText-string-long-1-chromium-linux.png b/src/components/Radio/__tests__/Radio.spec.tsx-snapshots/Radio-base-visual-disabled-boolean-true-vali-b9f02--string-warning-validationText-string-long-1-chromium-linux.png
new file mode 100644
index 000000000..96d290930
Binary files /dev/null and b/src/components/Radio/__tests__/Radio.spec.tsx-snapshots/Radio-base-visual-disabled-boolean-true-vali-b9f02--string-warning-validationText-string-long-1-chromium-linux.png differ
diff --git a/src/components/Radio/__tests__/Radio.spec.tsx-snapshots/Radio-base-visual-disabled-boolean-true-vali-d4152-tring-warning-validationText-string-normal-1-chromium-linux.png b/src/components/Radio/__tests__/Radio.spec.tsx-snapshots/Radio-base-visual-disabled-boolean-true-vali-d4152-tring-warning-validationText-string-normal-1-chromium-linux.png
new file mode 100644
index 000000000..369e9ccb7
Binary files /dev/null and b/src/components/Radio/__tests__/Radio.spec.tsx-snapshots/Radio-base-visual-disabled-boolean-true-vali-d4152-tring-warning-validationText-string-normal-1-chromium-linux.png differ
diff --git a/src/components/Radio/__tests__/Radio.spec.tsx-snapshots/Radio-base-visual-disabled-boolean-true-vali-e42c0--string-invalid-validationText-string-long-1-chromium-linux.png b/src/components/Radio/__tests__/Radio.spec.tsx-snapshots/Radio-base-visual-disabled-boolean-true-vali-e42c0--string-invalid-validationText-string-long-1-chromium-linux.png
new file mode 100644
index 000000000..aa780b678
Binary files /dev/null and b/src/components/Radio/__tests__/Radio.spec.tsx-snapshots/Radio-base-visual-disabled-boolean-true-vali-e42c0--string-invalid-validationText-string-long-1-chromium-linux.png differ
diff --git a/src/components/Radio/__tests__/Radio.spec.tsx-snapshots/Radio-base-visual-disabled-boolean-true-vali-e6669--string-warning-validationText-node-normal-1-chromium-linux.png b/src/components/Radio/__tests__/Radio.spec.tsx-snapshots/Radio-base-visual-disabled-boolean-true-vali-e6669--string-warning-validationText-node-normal-1-chromium-linux.png
new file mode 100644
index 000000000..51dd39d2d
Binary files /dev/null and b/src/components/Radio/__tests__/Radio.spec.tsx-snapshots/Radio-base-visual-disabled-boolean-true-vali-e6669--string-warning-validationText-node-normal-1-chromium-linux.png differ
diff --git a/src/components/Radio/__tests__/Radio.spec.tsx-snapshots/Radio-base-visual-disabled-boolean-true-vali-f7cde-tring-invalid-validationText-string-normal-1-chromium-linux.png b/src/components/Radio/__tests__/Radio.spec.tsx-snapshots/Radio-base-visual-disabled-boolean-true-vali-f7cde-tring-invalid-validationText-string-normal-1-chromium-linux.png
new file mode 100644
index 000000000..f4f9fa14e
Binary files /dev/null and b/src/components/Radio/__tests__/Radio.spec.tsx-snapshots/Radio-base-visual-disabled-boolean-true-vali-f7cde-tring-invalid-validationText-string-normal-1-chromium-linux.png differ
diff --git a/src/components/Radio/__tests__/Radio.spec.tsx-snapshots/Radio-base-visual-disabled-boolean-true-vali-fa0b4--string-invalid-validationText-node-normal-1-chromium-linux.png b/src/components/Radio/__tests__/Radio.spec.tsx-snapshots/Radio-base-visual-disabled-boolean-true-vali-fa0b4--string-invalid-validationText-node-normal-1-chromium-linux.png
new file mode 100644
index 000000000..9e4b96f8b
Binary files /dev/null and b/src/components/Radio/__tests__/Radio.spec.tsx-snapshots/Radio-base-visual-disabled-boolean-true-vali-fa0b4--string-invalid-validationText-node-normal-1-chromium-linux.png differ
diff --git a/src/components/Radio/__tests__/Radio.spec.tsx-snapshots/Radio-base-visual-disabled-boolean-true-validationState-undefined-validationText-node-normal-1-chromium-linux.png b/src/components/Radio/__tests__/Radio.spec.tsx-snapshots/Radio-base-visual-disabled-boolean-true-validationState-undefined-validationText-node-normal-1-chromium-linux.png
new file mode 100644
index 000000000..84c5093ab
Binary files /dev/null and b/src/components/Radio/__tests__/Radio.spec.tsx-snapshots/Radio-base-visual-disabled-boolean-true-validationState-undefined-validationText-node-normal-1-chromium-linux.png differ
diff --git a/src/components/Radio/__tests__/Radio.spec.tsx-snapshots/Radio-base-visual-disabled-boolean-true-validationState-undefined-validationText-string-long-1-chromium-linux.png b/src/components/Radio/__tests__/Radio.spec.tsx-snapshots/Radio-base-visual-disabled-boolean-true-validationState-undefined-validationText-string-long-1-chromium-linux.png
new file mode 100644
index 000000000..ebd6a857e
Binary files /dev/null and b/src/components/Radio/__tests__/Radio.spec.tsx-snapshots/Radio-base-visual-disabled-boolean-true-validationState-undefined-validationText-string-long-1-chromium-linux.png differ
diff --git a/src/components/Radio/__tests__/Radio.spec.tsx-snapshots/Radio-base-visual-helpText-string-validationText-string-1-chromium-linux.png b/src/components/Radio/__tests__/Radio.spec.tsx-snapshots/Radio-base-visual-helpText-string-validationText-string-1-chromium-linux.png
new file mode 100644
index 000000000..b67efa716
Binary files /dev/null and b/src/components/Radio/__tests__/Radio.spec.tsx-snapshots/Radio-base-visual-helpText-string-validationText-string-1-chromium-linux.png differ
diff --git a/src/components/Radio/__tests__/Radio.spec.tsx-snapshots/Radio-base-visual-helpText-string-validationText-undefined-1-chromium-linux.png b/src/components/Radio/__tests__/Radio.spec.tsx-snapshots/Radio-base-visual-helpText-string-validationText-undefined-1-chromium-linux.png
new file mode 100644
index 000000000..5830bae0c
Binary files /dev/null and b/src/components/Radio/__tests__/Radio.spec.tsx-snapshots/Radio-base-visual-helpText-string-validationText-undefined-1-chromium-linux.png differ
diff --git a/src/components/Radio/__tests__/Radio.spec.tsx-snapshots/Radio-base-visual-helpText-undefined-validationText-string-1-chromium-linux.png b/src/components/Radio/__tests__/Radio.spec.tsx-snapshots/Radio-base-visual-helpText-undefined-validationText-string-1-chromium-linux.png
new file mode 100644
index 000000000..78844ec81
Binary files /dev/null and b/src/components/Radio/__tests__/Radio.spec.tsx-snapshots/Radio-base-visual-helpText-undefined-validationText-string-1-chromium-linux.png differ
diff --git a/src/components/Radio/__tests__/Radio.spec.tsx-snapshots/Radio-base-visual-isLabelVisible-boolean-false-1-chromium-linux.png b/src/components/Radio/__tests__/Radio.spec.tsx-snapshots/Radio-base-visual-isLabelVisible-boolean-false-1-chromium-linux.png
new file mode 100644
index 000000000..bcbc1b8e3
Binary files /dev/null and b/src/components/Radio/__tests__/Radio.spec.tsx-snapshots/Radio-base-visual-isLabelVisible-boolean-false-1-chromium-linux.png differ
diff --git a/src/components/Radio/__tests__/Radio.spec.tsx-snapshots/Radio-base-visual-isLabelVisible-boolean-true-1-chromium-linux.png b/src/components/Radio/__tests__/Radio.spec.tsx-snapshots/Radio-base-visual-isLabelVisible-boolean-true-1-chromium-linux.png
new file mode 100644
index 000000000..307c3c264
Binary files /dev/null and b/src/components/Radio/__tests__/Radio.spec.tsx-snapshots/Radio-base-visual-isLabelVisible-boolean-true-1-chromium-linux.png differ
diff --git a/src/components/Radio/__tests__/Radio.spec.tsx-snapshots/Radio-base-visual-label-node-normal-1-chromium-linux.png b/src/components/Radio/__tests__/Radio.spec.tsx-snapshots/Radio-base-visual-label-node-normal-1-chromium-linux.png
new file mode 100644
index 000000000..310f1ec70
Binary files /dev/null and b/src/components/Radio/__tests__/Radio.spec.tsx-snapshots/Radio-base-visual-label-node-normal-1-chromium-linux.png differ
diff --git a/src/components/Radio/__tests__/Radio.spec.tsx-snapshots/Radio-base-visual-label-string-long-1-chromium-linux.png b/src/components/Radio/__tests__/Radio.spec.tsx-snapshots/Radio-base-visual-label-string-long-1-chromium-linux.png
new file mode 100644
index 000000000..22277783a
Binary files /dev/null and b/src/components/Radio/__tests__/Radio.spec.tsx-snapshots/Radio-base-visual-label-string-long-1-chromium-linux.png differ
diff --git a/src/components/Radio/__tests__/Radio.spec.tsx-snapshots/Radio-base-visual-layout-string-horizontal-1-chromium-linux.png b/src/components/Radio/__tests__/Radio.spec.tsx-snapshots/Radio-base-visual-layout-string-horizontal-1-chromium-linux.png
new file mode 100644
index 000000000..76e9230cd
Binary files /dev/null and b/src/components/Radio/__tests__/Radio.spec.tsx-snapshots/Radio-base-visual-layout-string-horizontal-1-chromium-linux.png differ
diff --git a/src/components/Radio/__tests__/Radio.spec.tsx-snapshots/Radio-base-visual-layout-string-vertical-1-chromium-linux.png b/src/components/Radio/__tests__/Radio.spec.tsx-snapshots/Radio-base-visual-layout-string-vertical-1-chromium-linux.png
new file mode 100644
index 000000000..307c3c264
Binary files /dev/null and b/src/components/Radio/__tests__/Radio.spec.tsx-snapshots/Radio-base-visual-layout-string-vertical-1-chromium-linux.png differ
diff --git a/src/components/Radio/__tests__/Radio.spec.tsx-snapshots/Radio-base-visual-options-shape-basePartialDis-5b1e5-DisabledValue-validationState-string-valid-1-chromium-linux.png b/src/components/Radio/__tests__/Radio.spec.tsx-snapshots/Radio-base-visual-options-shape-basePartialDis-5b1e5-DisabledValue-validationState-string-valid-1-chromium-linux.png
new file mode 100644
index 000000000..1b420c6d1
Binary files /dev/null and b/src/components/Radio/__tests__/Radio.spec.tsx-snapshots/Radio-base-visual-options-shape-basePartialDis-5b1e5-DisabledValue-validationState-string-valid-1-chromium-linux.png differ
diff --git a/src/components/Radio/__tests__/Radio.spec.tsx-snapshots/Radio-base-visual-options-shape-basePartialDis-6af22-DisabledValue-validationState-string-valid-1-chromium-linux.png b/src/components/Radio/__tests__/Radio.spec.tsx-snapshots/Radio-base-visual-options-shape-basePartialDis-6af22-DisabledValue-validationState-string-valid-1-chromium-linux.png
new file mode 100644
index 000000000..99ca50a2a
Binary files /dev/null and b/src/components/Radio/__tests__/Radio.spec.tsx-snapshots/Radio-base-visual-options-shape-basePartialDis-6af22-DisabledValue-validationState-string-valid-1-chromium-linux.png differ
diff --git a/src/components/Radio/__tests__/Radio.spec.tsx-snapshots/Radio-base-visual-options-shape-basePartialDis-7515f-sabledValue-validationState-string-warning-1-chromium-linux.png b/src/components/Radio/__tests__/Radio.spec.tsx-snapshots/Radio-base-visual-options-shape-basePartialDis-7515f-sabledValue-validationState-string-warning-1-chromium-linux.png
new file mode 100644
index 000000000..3aea50a14
Binary files /dev/null and b/src/components/Radio/__tests__/Radio.spec.tsx-snapshots/Radio-base-visual-options-shape-basePartialDis-7515f-sabledValue-validationState-string-warning-1-chromium-linux.png differ
diff --git a/src/components/Radio/__tests__/Radio.spec.tsx-snapshots/Radio-base-visual-options-shape-basePartialDis-75b83-sabledValue-validationState-string-invalid-1-chromium-linux.png b/src/components/Radio/__tests__/Radio.spec.tsx-snapshots/Radio-base-visual-options-shape-basePartialDis-75b83-sabledValue-validationState-string-invalid-1-chromium-linux.png
new file mode 100644
index 000000000..1f4292f89
Binary files /dev/null and b/src/components/Radio/__tests__/Radio.spec.tsx-snapshots/Radio-base-visual-options-shape-basePartialDis-75b83-sabledValue-validationState-string-invalid-1-chromium-linux.png differ
diff --git a/src/components/Radio/__tests__/Radio.spec.tsx-snapshots/Radio-base-visual-options-shape-basePartialDis-7e0e5-outDisabledValue-validationState-undefined-1-chromium-linux.png b/src/components/Radio/__tests__/Radio.spec.tsx-snapshots/Radio-base-visual-options-shape-basePartialDis-7e0e5-outDisabledValue-validationState-undefined-1-chromium-linux.png
new file mode 100644
index 000000000..e96327d63
Binary files /dev/null and b/src/components/Radio/__tests__/Radio.spec.tsx-snapshots/Radio-base-visual-options-shape-basePartialDis-7e0e5-outDisabledValue-validationState-undefined-1-chromium-linux.png differ
diff --git a/src/components/Radio/__tests__/Radio.spec.tsx-snapshots/Radio-base-visual-options-shape-basePartialDis-af4d3-sabledValue-validationState-string-warning-1-chromium-linux.png b/src/components/Radio/__tests__/Radio.spec.tsx-snapshots/Radio-base-visual-options-shape-basePartialDis-af4d3-sabledValue-validationState-string-warning-1-chromium-linux.png
new file mode 100644
index 000000000..41996db18
Binary files /dev/null and b/src/components/Radio/__tests__/Radio.spec.tsx-snapshots/Radio-base-visual-options-shape-basePartialDis-af4d3-sabledValue-validationState-string-warning-1-chromium-linux.png differ
diff --git a/src/components/Radio/__tests__/Radio.spec.tsx-snapshots/Radio-base-visual-options-shape-basePartialDis-f8462-sabledValue-validationState-string-invalid-1-chromium-linux.png b/src/components/Radio/__tests__/Radio.spec.tsx-snapshots/Radio-base-visual-options-shape-basePartialDis-f8462-sabledValue-validationState-string-invalid-1-chromium-linux.png
new file mode 100644
index 000000000..66e007942
Binary files /dev/null and b/src/components/Radio/__tests__/Radio.spec.tsx-snapshots/Radio-base-visual-options-shape-basePartialDis-f8462-sabledValue-validationState-string-invalid-1-chromium-linux.png differ
diff --git a/src/components/Radio/__tests__/Radio.spec.tsx-snapshots/Radio-base-visual-options-shape-basePartialDisabledWithDisabledValue-validationState-undefined-1-chromium-linux.png b/src/components/Radio/__tests__/Radio.spec.tsx-snapshots/Radio-base-visual-options-shape-basePartialDisabledWithDisabledValue-validationState-undefined-1-chromium-linux.png
new file mode 100644
index 000000000..584a762b8
Binary files /dev/null and b/src/components/Radio/__tests__/Radio.spec.tsx-snapshots/Radio-base-visual-options-shape-basePartialDisabledWithDisabledValue-validationState-undefined-1-chromium-linux.png differ
diff --git a/src/components/Radio/__tests__/Radio.spec.tsx-snapshots/Radio-base-visual-renderAsRequired-boolean-false-1-chromium-linux.png b/src/components/Radio/__tests__/Radio.spec.tsx-snapshots/Radio-base-visual-renderAsRequired-boolean-false-1-chromium-linux.png
new file mode 100644
index 000000000..307c3c264
Binary files /dev/null and b/src/components/Radio/__tests__/Radio.spec.tsx-snapshots/Radio-base-visual-renderAsRequired-boolean-false-1-chromium-linux.png differ
diff --git a/src/components/Radio/__tests__/Radio.spec.tsx-snapshots/Radio-base-visual-renderAsRequired-boolean-false-validationState-string-invalid-1-chromium-linux.png b/src/components/Radio/__tests__/Radio.spec.tsx-snapshots/Radio-base-visual-renderAsRequired-boolean-false-validationState-string-invalid-1-chromium-linux.png
new file mode 100644
index 000000000..07c5fc572
Binary files /dev/null and b/src/components/Radio/__tests__/Radio.spec.tsx-snapshots/Radio-base-visual-renderAsRequired-boolean-false-validationState-string-invalid-1-chromium-linux.png differ
diff --git a/src/components/Radio/__tests__/Radio.spec.tsx-snapshots/Radio-base-visual-renderAsRequired-boolean-false-validationState-string-valid-1-chromium-linux.png b/src/components/Radio/__tests__/Radio.spec.tsx-snapshots/Radio-base-visual-renderAsRequired-boolean-false-validationState-string-valid-1-chromium-linux.png
new file mode 100644
index 000000000..48183e7ed
Binary files /dev/null and b/src/components/Radio/__tests__/Radio.spec.tsx-snapshots/Radio-base-visual-renderAsRequired-boolean-false-validationState-string-valid-1-chromium-linux.png differ
diff --git a/src/components/Radio/__tests__/Radio.spec.tsx-snapshots/Radio-base-visual-renderAsRequired-boolean-false-validationState-string-warning-1-chromium-linux.png b/src/components/Radio/__tests__/Radio.spec.tsx-snapshots/Radio-base-visual-renderAsRequired-boolean-false-validationState-string-warning-1-chromium-linux.png
new file mode 100644
index 000000000..945dee2fb
Binary files /dev/null and b/src/components/Radio/__tests__/Radio.spec.tsx-snapshots/Radio-base-visual-renderAsRequired-boolean-false-validationState-string-warning-1-chromium-linux.png differ
diff --git a/src/components/Radio/__tests__/Radio.spec.tsx-snapshots/Radio-base-visual-renderAsRequired-boolean-false-validationState-undefined-1-chromium-linux.png b/src/components/Radio/__tests__/Radio.spec.tsx-snapshots/Radio-base-visual-renderAsRequired-boolean-false-validationState-undefined-1-chromium-linux.png
new file mode 100644
index 000000000..307c3c264
Binary files /dev/null and b/src/components/Radio/__tests__/Radio.spec.tsx-snapshots/Radio-base-visual-renderAsRequired-boolean-false-validationState-undefined-1-chromium-linux.png differ
diff --git a/src/components/Radio/__tests__/Radio.spec.tsx-snapshots/Radio-base-visual-renderAsRequired-boolean-true-1-chromium-linux.png b/src/components/Radio/__tests__/Radio.spec.tsx-snapshots/Radio-base-visual-renderAsRequired-boolean-true-1-chromium-linux.png
new file mode 100644
index 000000000..9e5ad5b48
Binary files /dev/null and b/src/components/Radio/__tests__/Radio.spec.tsx-snapshots/Radio-base-visual-renderAsRequired-boolean-true-1-chromium-linux.png differ
diff --git a/src/components/Radio/__tests__/Radio.spec.tsx-snapshots/Radio-base-visual-renderAsRequired-boolean-true-validationState-string-invalid-1-chromium-linux.png b/src/components/Radio/__tests__/Radio.spec.tsx-snapshots/Radio-base-visual-renderAsRequired-boolean-true-validationState-string-invalid-1-chromium-linux.png
new file mode 100644
index 000000000..503e9d728
Binary files /dev/null and b/src/components/Radio/__tests__/Radio.spec.tsx-snapshots/Radio-base-visual-renderAsRequired-boolean-true-validationState-string-invalid-1-chromium-linux.png differ
diff --git a/src/components/Radio/__tests__/Radio.spec.tsx-snapshots/Radio-base-visual-renderAsRequired-boolean-true-validationState-string-valid-1-chromium-linux.png b/src/components/Radio/__tests__/Radio.spec.tsx-snapshots/Radio-base-visual-renderAsRequired-boolean-true-validationState-string-valid-1-chromium-linux.png
new file mode 100644
index 000000000..e0a8174c4
Binary files /dev/null and b/src/components/Radio/__tests__/Radio.spec.tsx-snapshots/Radio-base-visual-renderAsRequired-boolean-true-validationState-string-valid-1-chromium-linux.png differ
diff --git a/src/components/Radio/__tests__/Radio.spec.tsx-snapshots/Radio-base-visual-renderAsRequired-boolean-true-validationState-string-warning-1-chromium-linux.png b/src/components/Radio/__tests__/Radio.spec.tsx-snapshots/Radio-base-visual-renderAsRequired-boolean-true-validationState-string-warning-1-chromium-linux.png
new file mode 100644
index 000000000..fd7b79be6
Binary files /dev/null and b/src/components/Radio/__tests__/Radio.spec.tsx-snapshots/Radio-base-visual-renderAsRequired-boolean-true-validationState-string-warning-1-chromium-linux.png differ
diff --git a/src/components/Radio/__tests__/Radio.spec.tsx-snapshots/Radio-base-visual-renderAsRequired-boolean-true-validationState-undefined-1-chromium-linux.png b/src/components/Radio/__tests__/Radio.spec.tsx-snapshots/Radio-base-visual-renderAsRequired-boolean-true-validationState-undefined-1-chromium-linux.png
new file mode 100644
index 000000000..9e5ad5b48
Binary files /dev/null and b/src/components/Radio/__tests__/Radio.spec.tsx-snapshots/Radio-base-visual-renderAsRequired-boolean-true-validationState-undefined-1-chromium-linux.png differ
diff --git a/src/components/Radio/__tests__/Radio.spec.tsx-snapshots/Radio-base-visual-required-boolean-false-1-chromium-linux.png b/src/components/Radio/__tests__/Radio.spec.tsx-snapshots/Radio-base-visual-required-boolean-false-1-chromium-linux.png
new file mode 100644
index 000000000..307c3c264
Binary files /dev/null and b/src/components/Radio/__tests__/Radio.spec.tsx-snapshots/Radio-base-visual-required-boolean-false-1-chromium-linux.png differ
diff --git a/src/components/Radio/__tests__/Radio.spec.tsx-snapshots/Radio-base-visual-required-boolean-false-validationState-string-invalid-1-chromium-linux.png b/src/components/Radio/__tests__/Radio.spec.tsx-snapshots/Radio-base-visual-required-boolean-false-validationState-string-invalid-1-chromium-linux.png
new file mode 100644
index 000000000..07c5fc572
Binary files /dev/null and b/src/components/Radio/__tests__/Radio.spec.tsx-snapshots/Radio-base-visual-required-boolean-false-validationState-string-invalid-1-chromium-linux.png differ
diff --git a/src/components/Radio/__tests__/Radio.spec.tsx-snapshots/Radio-base-visual-required-boolean-false-validationState-string-valid-1-chromium-linux.png b/src/components/Radio/__tests__/Radio.spec.tsx-snapshots/Radio-base-visual-required-boolean-false-validationState-string-valid-1-chromium-linux.png
new file mode 100644
index 000000000..48183e7ed
Binary files /dev/null and b/src/components/Radio/__tests__/Radio.spec.tsx-snapshots/Radio-base-visual-required-boolean-false-validationState-string-valid-1-chromium-linux.png differ
diff --git a/src/components/Radio/__tests__/Radio.spec.tsx-snapshots/Radio-base-visual-required-boolean-false-validationState-string-warning-1-chromium-linux.png b/src/components/Radio/__tests__/Radio.spec.tsx-snapshots/Radio-base-visual-required-boolean-false-validationState-string-warning-1-chromium-linux.png
new file mode 100644
index 000000000..945dee2fb
Binary files /dev/null and b/src/components/Radio/__tests__/Radio.spec.tsx-snapshots/Radio-base-visual-required-boolean-false-validationState-string-warning-1-chromium-linux.png differ
diff --git a/src/components/Radio/__tests__/Radio.spec.tsx-snapshots/Radio-base-visual-required-boolean-false-validationState-undefined-1-chromium-linux.png b/src/components/Radio/__tests__/Radio.spec.tsx-snapshots/Radio-base-visual-required-boolean-false-validationState-undefined-1-chromium-linux.png
new file mode 100644
index 000000000..307c3c264
Binary files /dev/null and b/src/components/Radio/__tests__/Radio.spec.tsx-snapshots/Radio-base-visual-required-boolean-false-validationState-undefined-1-chromium-linux.png differ
diff --git a/src/components/Radio/__tests__/Radio.spec.tsx-snapshots/Radio-base-visual-required-boolean-true-1-chromium-linux.png b/src/components/Radio/__tests__/Radio.spec.tsx-snapshots/Radio-base-visual-required-boolean-true-1-chromium-linux.png
new file mode 100644
index 000000000..9e5ad5b48
Binary files /dev/null and b/src/components/Radio/__tests__/Radio.spec.tsx-snapshots/Radio-base-visual-required-boolean-true-1-chromium-linux.png differ
diff --git a/src/components/Radio/__tests__/Radio.spec.tsx-snapshots/Radio-base-visual-required-boolean-true-validationState-string-invalid-1-chromium-linux.png b/src/components/Radio/__tests__/Radio.spec.tsx-snapshots/Radio-base-visual-required-boolean-true-validationState-string-invalid-1-chromium-linux.png
new file mode 100644
index 000000000..503e9d728
Binary files /dev/null and b/src/components/Radio/__tests__/Radio.spec.tsx-snapshots/Radio-base-visual-required-boolean-true-validationState-string-invalid-1-chromium-linux.png differ
diff --git a/src/components/Radio/__tests__/Radio.spec.tsx-snapshots/Radio-base-visual-required-boolean-true-validationState-string-valid-1-chromium-linux.png b/src/components/Radio/__tests__/Radio.spec.tsx-snapshots/Radio-base-visual-required-boolean-true-validationState-string-valid-1-chromium-linux.png
new file mode 100644
index 000000000..e0a8174c4
Binary files /dev/null and b/src/components/Radio/__tests__/Radio.spec.tsx-snapshots/Radio-base-visual-required-boolean-true-validationState-string-valid-1-chromium-linux.png differ
diff --git a/src/components/Radio/__tests__/Radio.spec.tsx-snapshots/Radio-base-visual-required-boolean-true-validationState-string-warning-1-chromium-linux.png b/src/components/Radio/__tests__/Radio.spec.tsx-snapshots/Radio-base-visual-required-boolean-true-validationState-string-warning-1-chromium-linux.png
new file mode 100644
index 000000000..fd7b79be6
Binary files /dev/null and b/src/components/Radio/__tests__/Radio.spec.tsx-snapshots/Radio-base-visual-required-boolean-true-validationState-string-warning-1-chromium-linux.png differ
diff --git a/src/components/Radio/__tests__/Radio.spec.tsx-snapshots/Radio-base-visual-required-boolean-true-validationState-undefined-1-chromium-linux.png b/src/components/Radio/__tests__/Radio.spec.tsx-snapshots/Radio-base-visual-required-boolean-true-validationState-undefined-1-chromium-linux.png
new file mode 100644
index 000000000..9e5ad5b48
Binary files /dev/null and b/src/components/Radio/__tests__/Radio.spec.tsx-snapshots/Radio-base-visual-required-boolean-true-validationState-undefined-1-chromium-linux.png differ
diff --git a/src/components/Radio/__tests__/Radio.spec.tsx-snapshots/Radio-formLayout-visual-layout-string-horizontal-1-chromium-linux.png b/src/components/Radio/__tests__/Radio.spec.tsx-snapshots/Radio-formLayout-visual-layout-string-horizontal-1-chromium-linux.png
new file mode 100644
index 000000000..efb3aac78
Binary files /dev/null and b/src/components/Radio/__tests__/Radio.spec.tsx-snapshots/Radio-formLayout-visual-layout-string-horizontal-1-chromium-linux.png differ
diff --git a/src/components/Radio/__tests__/Radio.spec.tsx-snapshots/Radio-formLayout-visual-layout-string-vertical-1-chromium-linux.png b/src/components/Radio/__tests__/Radio.spec.tsx-snapshots/Radio-formLayout-visual-layout-string-vertical-1-chromium-linux.png
new file mode 100644
index 000000000..081d205e8
Binary files /dev/null and b/src/components/Radio/__tests__/Radio.spec.tsx-snapshots/Radio-formLayout-visual-layout-string-vertical-1-chromium-linux.png differ
diff --git a/src/components/Radio/__tests__/Radio.story.tsx b/src/components/Radio/__tests__/Radio.story.tsx
new file mode 100644
index 000000000..a063f856e
--- /dev/null
+++ b/src/components/Radio/__tests__/Radio.story.tsx
@@ -0,0 +1,62 @@
+import React, { useMemo } from 'react';
+import type { InputHTMLAttributes } from 'react';
+import { Radio } from '..';
+import { FormLayoutContext } from '../../FormLayout';
+
+// Types for story component will be improved when we have full TypeScript support
+type RadioForTestProps = InputHTMLAttributes<HTMLInputElement>;
+export type RadioForFormLayoutTestsProps = RadioForTestProps & {
+  layout: 'vertical' | 'horizontal'
+};
+
+const defaultLabel = 'test-group-label';
+const defaultOptions = [
+  {
+    disabled: false,
+    key: 'key1',
+    label: 'label1',
+    value: 'value1',
+  },
+  {
+    disabled: false,
+    key: 'key2',
+    label: 'label2',
+    value: 'value2',
+  },
+];
+
+export const RadioForTest = ({
+  ...props
+}: RadioForTestProps) => (
+  <Radio
+    label={defaultLabel}
+    onChange={() => {}}
+    options={defaultOptions}
+    value={defaultOptions[0].value}
+    {...props}
+  />
+);
+
+export const RadioForFormLayoutTests = ({
+  layout,
+  ...props
+} : RadioForFormLayoutTestsProps) => {
+  const values = useMemo(() => ({ layout }), [layout]);
+
+  return (
+    <FormLayoutContext.Provider
+      value={values}
+    >
+      <Radio
+        label={defaultLabel}
+        options={defaultOptions}
+        {...props}
+      />
+      <Radio
+        label="another-test-label"
+        options={defaultOptions}
+        {...props}
+      />
+    </FormLayoutContext.Provider>
+  );
+};
diff --git a/src/components/Radio/__tests__/Radio.test.jsx b/src/components/Radio/__tests__/Radio.test.jsx
deleted file mode 100644
index e4f81284b..000000000
--- a/src/components/Radio/__tests__/Radio.test.jsx
+++ /dev/null
@@ -1,130 +0,0 @@
-import React from 'react';
-import {
-  render,
-  screen,
-  within,
-} from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import { helpTextPropTest } from '../../../../tests/jest/propTests/helpTextPropTest';
-import { formLayoutProviderTest } from '../../../../tests/jest/providerTests/formLayoutProviderTest';
-import { isLabelVisibleTest } from '../../../../tests/jest/propTests/isLabelVisibleTest';
-import { labelPropTest } from '../../../../tests/jest/propTests/labelPropTest';
-import { layoutPropTest } from '../../../../tests/jest/propTests/layoutPropTest';
-import { renderAsRequiredPropTest } from '../../../../tests/jest/propTests/renderAsRequiredPropTest';
-import { requiredPropTest } from '../../../../tests/jest/propTests/requiredPropTest';
-import { validationStatePropTest } from '../../../../tests/jest/propTests/validationStatePropTest';
-import { validationTextPropTest } from '../../../../tests/jest/propTests/validationTextPropTest';
-import { Radio } from '../Radio';
-
-const mandatoryProps = {
-  label: 'label',
-  options: [
-    {
-      label: 'option 1',
-      value: 1,
-    },
-    {
-      disabled: true,
-      key: 'custom_key',
-      label: 'option 2',
-      value: 'option2',
-    },
-  ],
-};
-
-describe('rendering', () => {
-  formLayoutProviderTest(<Radio {...mandatoryProps} />);
-
-  it.each([
-    [
-      { disabled: true },
-      (rootElement) => {
-        expect(rootElement).toBeDisabled();
-        expect(rootElement).toHaveClass('isRootDisabled');
-        expect(within(rootElement).getByLabelText('option 1')).toBeDisabled();
-      },
-    ],
-    [
-      { disabled: false },
-      (rootElement) => {
-        expect(rootElement).not.toBeDisabled();
-        expect(rootElement).not.toHaveClass('isRootDisabled');
-        expect(within(rootElement).getByLabelText('option 1')).not.toBeDisabled();
-      },
-    ],
-    ...helpTextPropTest,
-    [
-      {
-        helpText: 'help text',
-        id: 'id',
-        validationText: 'validation text',
-      },
-      (rootElement) => {
-        expect(rootElement).toHaveAttribute('id', 'id');
-        expect(within(rootElement).getByTestId('id__label'));
-        expect(within(rootElement).getByTestId('id__displayLabel'));
-        expect(within(rootElement).getByText('help text')).toHaveAttribute('id', 'id__helpText');
-        expect(within(rootElement).getByText('validation text')).toHaveAttribute('id', 'id__validationText');
-        expect(within(rootElement).getByTestId('id__item__1'));
-        expect(within(rootElement).getByTestId('id__item__custom_key'));
-        expect(within(rootElement).getByTestId('id__item__1__label'));
-        expect(within(rootElement).getByTestId('id__item__custom_key__label'));
-        expect(within(rootElement).getByText('option 1')).toHaveAttribute('id', 'id__item__1__labelText');
-        expect(within(rootElement).getByText('option 2')).toHaveAttribute('id', 'id__item__custom_key__labelText');
-      },
-    ],
-    ...isLabelVisibleTest('legend'),
-    ...labelPropTest('legend'),
-    ...layoutPropTest,
-    [
-      { options: mandatoryProps.options },
-      (rootElement) => {
-        expect(within(rootElement).getByLabelText('option 1')).not.toBeChecked();
-        expect(within(rootElement).getByLabelText('option 2')).not.toBeChecked();
-        expect(within(rootElement).getByLabelText('option 2')).toBeDisabled();
-      },
-    ],
-    ...renderAsRequiredPropTest,
-    ...requiredPropTest,
-    ...validationStatePropTest,
-    ...validationTextPropTest,
-    [
-      {
-        onChange: () => {},
-        value: 'option2',
-      },
-      (rootElement) => expect(within(rootElement).getByLabelText('option 2')).toBeChecked(),
-    ],
-    [
-      {
-        onChange: () => {},
-        value: 1,
-      },
-      (rootElement) => expect(within(rootElement).getByLabelText('option 1')).toBeChecked(),
-    ],
-  ])('renders with props: "%s"', (testedProps, assert) => {
-    const dom = render((
-      <Radio
-        {...mandatoryProps}
-        {...testedProps}
-      />
-    ));
-
-    assert(dom.container.firstChild);
-  });
-});
-
-describe('functionality', () => {
-  it('calls synthetic event onChange()', async () => {
-    const spy = jest.fn();
-    render((
-      <Radio
-        {...mandatoryProps}
-        onChange={spy}
-      />
-    ));
-
-    await userEvent.click(screen.getByText('option 1'));
-    expect(spy).toHaveBeenCalled();
-  });
-});
diff --git a/src/components/Radio/__tests__/_propTests/partialDisabledOptionsPropTest.ts b/src/components/Radio/__tests__/_propTests/partialDisabledOptionsPropTest.ts
new file mode 100644
index 000000000..a3125fe0c
--- /dev/null
+++ b/src/components/Radio/__tests__/_propTests/partialDisabledOptionsPropTest.ts
@@ -0,0 +1,33 @@
+import type { PropTests } from '../../../../../tests/playwright/types';
+
+const options = [
+  {
+    disabled: true,
+    key: 'option1',
+    label: 'label1',
+    value: 'value1',
+  },
+  {
+    disabled: false,
+    key: 'option2',
+    label: 'label2',
+    value: 'value2',
+  },
+];
+
+export const partialDisabledOptionsPropTest: PropTests = [
+  {
+    name: 'options:shape[basePartialDisabledWithDisabledValue]',
+    props: {
+      options,
+      value: 'value1',
+    },
+  },
+  {
+    name: 'options:shape[basePartialDisabledWithoutDisabledValue]',
+    props: {
+      options,
+      value: 'value2',
+    },
+  },
+];
diff --git a/src/components/SelectField/__tests__/SelectField.spec.tsx b/src/components/SelectField/__tests__/SelectField.spec.tsx
new file mode 100644
index 000000000..65fb8bc40
--- /dev/null
+++ b/src/components/SelectField/__tests__/SelectField.spec.tsx
@@ -0,0 +1,301 @@
+import React from 'react';
+import {
+  expect,
+  test,
+} from '@playwright/experimental-ct-react';
+import {
+  mixPropTests,
+  propTests,
+} from '../../../../tests/playwright';
+import {
+  SelectFieldForTest,
+  SelectFieldForRefTest,
+  SelectFieldForFormLayoutTests,
+} from './SelectField.story';
+import type { SelectFieldForFormLayoutTestsProps } from './SelectField.story';
+import { openSelectFieldOptionsTest } from './_propTests/openSelectFieldOptionsTest';
+
+const groupedOptions = [
+  {
+    key: 'optgroup_key',
+    label: 'optgroup',
+    options: [
+      {
+        disabled: false,
+        label: 'option1',
+        value: 'value1',
+      },
+      {
+        disabled: true,
+        label: 'option2',
+        value: 'value2',
+      },
+    ],
+  },
+];
+
+const baseOptions = [
+  {
+    disabled: false,
+    key: 'key1',
+    label: 'option1',
+    value: 'value1',
+  },
+  {
+    disabled: false,
+    label: 'option2',
+    value: 'value2',
+  },
+];
+
+test.describe('SelectField', () => {
+  test.describe('base', () => {
+    test.describe('visual', () => {
+      [
+        ...propTests.defaultComponentPropTest,
+        ...propTests.helpTextAndValidationTextPropType,
+        ...propTests.isLabelVisiblePropTest,
+        ...propTests.labelPropTest,
+        ...propTests.renderAsRequiredPropTest,
+        ...propTests.requiredPropTest,
+        ...propTests.sizePropTest,
+        ...mixPropTests([
+          propTests.fullWidthPropTest,
+          propTests.layoutPropTest,
+        ]),
+        ...mixPropTests([
+          propTests.requiredPropTest,
+          propTests.validationStatePropTest,
+        ]),
+        ...mixPropTests([
+          propTests.renderAsRequiredPropTest,
+          propTests.validationStatePropTest,
+        ]),
+        ...mixPropTests([
+          propTests.disabledPropTest,
+          propTests.validationStatePropTest,
+          propTests.variantPropTest,
+        ]),
+      ].forEach(({
+        name,
+        onBeforeTest,
+        onBeforeSnapshot,
+        props,
+      }) => {
+        test(name, async ({
+          mount,
+          page,
+        }) => {
+          if (onBeforeTest) {
+            await onBeforeTest(page);
+          }
+
+          const component = await mount(
+            <SelectFieldForTest
+              {...props}
+            />,
+          );
+
+          if (onBeforeSnapshot) {
+            await onBeforeSnapshot(page, component);
+          }
+
+          const screenshot = await component.screenshot({ animations: 'disabled' });
+          expect(screenshot).toMatchSnapshot();
+        });
+      });
+
+      /**
+       * Full page screenshot is required for option tests
+       * because native select options are rendered outside of the DOM.
+       */
+      test.describe('fullPage', () => {
+        [
+          ...openSelectFieldOptionsTest,
+        ].forEach(({
+          name,
+          onBeforeTest,
+          onBeforeSnapshot,
+          props,
+        }) => {
+          test(name, async ({
+            mount,
+            page,
+          }) => {
+            if (onBeforeTest) {
+              await onBeforeTest(page);
+            }
+
+            const component = await mount(
+              <SelectFieldForTest
+                {...props}
+              />,
+            );
+
+            if (onBeforeSnapshot) {
+              await onBeforeSnapshot(page, component);
+            }
+
+            const screenshot = await page.screenshot({ animations: 'disabled' });
+            expect(screenshot).toMatchSnapshot({ maxDiffPixelRatio: 0.001 });
+          });
+        });
+      });
+    });
+
+    test.describe('non-visual', () => {
+      test('Have partially disabled group options', async ({ mount }) => {
+        const component = await mount(
+          <SelectFieldForTest
+            options={groupedOptions}
+          />,
+        );
+
+        await expect(component.getByRole('combobox').getByText(groupedOptions[0].options[0].label)).not.toHaveAttribute('disabled', '');
+        await expect(component.getByRole('combobox').getByText(groupedOptions[0].options[1].label)).toHaveAttribute('disabled', '');
+      });
+
+      test('Have partially disabled base options', async ({ mount }) => {
+        const partiallyDisabledBaseOptions = [
+          ...baseOptions,
+          {
+            disabled: true,
+            key: 'key3',
+            label: 'option3',
+            value: 'value3',
+          },
+        ];
+        const component = await mount(
+          <SelectFieldForTest
+            options={partiallyDisabledBaseOptions}
+          />,
+        );
+
+        await expect(component.getByRole('combobox').getByText(partiallyDisabledBaseOptions[0].label)).not.toHaveAttribute('disabled', '');
+        await expect(component.getByRole('combobox').getByText(partiallyDisabledBaseOptions[1].label)).not.toHaveAttribute('disabled', '');
+        await expect(component.getByRole('combobox').getByText(partiallyDisabledBaseOptions[2].label)).toHaveAttribute('disabled', '');
+      });
+
+      test('id', async ({ mount }) => {
+        const testId = 'testId';
+        const testLabel = 'testLabel';
+        const testHelpText = 'testHelpText';
+        const testValidationText = 'testValidationText';
+
+        const component = await mount(
+          <SelectFieldForTest
+            helpText={testHelpText}
+            id={testId}
+            label={testLabel}
+            options={baseOptions}
+            validationText={testValidationText}
+          />,
+        );
+
+        await expect(component.getByRole('combobox')).toHaveAttribute('id', testId);
+        await expect(component.getByRole('option').first()).toHaveAttribute('id', `${testId}__item__${baseOptions[0].key}`);
+        await expect(component.getByRole('option').last()).toHaveAttribute('id', `${testId}__item__${baseOptions[1].value}`);
+        await expect(component.getByText(testHelpText)).toHaveAttribute('id', `${testId}__helpText`);
+        await expect(component.getByText(testValidationText)).toHaveAttribute('id', `${testId}__validationText`);
+        await expect(component.getByText(testLabel)).toHaveAttribute('id', `${testId}__labelText`);
+        await expect(component).toHaveAttribute('id', `${testId}__label`);
+      });
+
+      test('ref', async ({ mount }) => {
+        const component = await mount(
+          <SelectFieldForRefTest
+            testRefAttrName="test-ref"
+            testRefAttrValue="test-ref-value"
+          />,
+        );
+
+        await expect(component.getByRole('combobox')).toHaveAttribute('test-ref', 'test-ref-value');
+      });
+    });
+
+    test.describe('functionality', () => {
+      test('calls synthetic event onChange() on changing selected option', async ({ mount }) => {
+        let changeCalled = false;
+
+        const component = await mount(
+          <SelectFieldForTest
+            onChange={() => { changeCalled = true; }}
+            options={baseOptions}
+            value={baseOptions[0].value}
+          />,
+        );
+
+        await component.getByRole('combobox').selectOption(baseOptions[1].value);
+        expect(changeCalled).toBeTruthy();
+      });
+
+      test('change options on down key press', async ({ mount }) => {
+        let changeCalled = false;
+
+        const component = await mount(
+          <SelectFieldForTest
+            onChange={() => { changeCalled = true; }}
+            options={baseOptions}
+            value={baseOptions[0].value}
+          />,
+        );
+
+        const select = component.getByRole('combobox');
+        await select.focus();
+        await select.press('ArrowDown');
+        expect(changeCalled).toBeTruthy();
+      });
+      test('change options on up key press', async ({ mount }) => {
+        let changeCalled = false;
+
+        const component = await mount(
+          <SelectFieldForTest
+            onChange={() => { changeCalled = true; }}
+            options={baseOptions}
+            value={baseOptions[1].value}
+          />,
+        );
+
+        const select = component.getByRole('combobox');
+        await select.focus();
+        await select.press('ArrowUp');
+        expect(changeCalled).toBeTruthy();
+      });
+    });
+  });
+
+  test.describe('formLayout', () => {
+    test.describe('visual', () => {
+      [
+        ...propTests.layoutPropTest,
+      ].forEach(({
+        name,
+        onBeforeTest,
+        onBeforeSnapshot,
+        props,
+      }) => {
+        test(name, async ({
+          mount,
+          page,
+        }) => {
+          if (onBeforeTest) {
+            await onBeforeTest(page);
+          }
+
+          const component = await mount(
+            <SelectFieldForFormLayoutTests
+              {...props as unknown as SelectFieldForFormLayoutTestsProps}
+            />,
+          );
+
+          if (onBeforeSnapshot) {
+            await onBeforeSnapshot(page, component);
+          }
+
+          const screenshot = await component.screenshot({ animations: 'disabled' });
+          expect(screenshot).toMatchSnapshot();
+        });
+      });
+    });
+  });
+});
diff --git a/src/components/SelectField/__tests__/SelectField.spec.tsx-snapshots/SelectField-base-visual-defaultComponentProps-object-1-chromium-linux.png b/src/components/SelectField/__tests__/SelectField.spec.tsx-snapshots/SelectField-base-visual-defaultComponentProps-object-1-chromium-linux.png
new file mode 100644
index 000000000..16f912a5e
Binary files /dev/null and b/src/components/SelectField/__tests__/SelectField.spec.tsx-snapshots/SelectField-base-visual-defaultComponentProps-object-1-chromium-linux.png differ
diff --git a/src/components/SelectField/__tests__/SelectField.spec.tsx-snapshots/SelectField-base-visual-disabled-boolean-false-3bd93-State-string-warning-variant-string-outline-1-chromium-linux.png b/src/components/SelectField/__tests__/SelectField.spec.tsx-snapshots/SelectField-base-visual-disabled-boolean-false-3bd93-State-string-warning-variant-string-outline-1-chromium-linux.png
new file mode 100644
index 000000000..63b9d2e1c
Binary files /dev/null and b/src/components/SelectField/__tests__/SelectField.spec.tsx-snapshots/SelectField-base-visual-disabled-boolean-false-3bd93-State-string-warning-variant-string-outline-1-chromium-linux.png differ
diff --git a/src/components/SelectField/__tests__/SelectField.spec.tsx-snapshots/SelectField-base-visual-disabled-boolean-false-54baf-State-string-invalid-variant-string-outline-1-chromium-linux.png b/src/components/SelectField/__tests__/SelectField.spec.tsx-snapshots/SelectField-base-visual-disabled-boolean-false-54baf-State-string-invalid-variant-string-outline-1-chromium-linux.png
new file mode 100644
index 000000000..4de8ccf2d
Binary files /dev/null and b/src/components/SelectField/__tests__/SelectField.spec.tsx-snapshots/SelectField-base-visual-disabled-boolean-false-54baf-State-string-invalid-variant-string-outline-1-chromium-linux.png differ
diff --git a/src/components/SelectField/__tests__/SelectField.spec.tsx-snapshots/SelectField-base-visual-disabled-boolean-false-71d4b-onState-string-valid-variant-string-outline-1-chromium-linux.png b/src/components/SelectField/__tests__/SelectField.spec.tsx-snapshots/SelectField-base-visual-disabled-boolean-false-71d4b-onState-string-valid-variant-string-outline-1-chromium-linux.png
new file mode 100644
index 000000000..fb65808bf
Binary files /dev/null and b/src/components/SelectField/__tests__/SelectField.spec.tsx-snapshots/SelectField-base-visual-disabled-boolean-false-71d4b-onState-string-valid-variant-string-outline-1-chromium-linux.png differ
diff --git a/src/components/SelectField/__tests__/SelectField.spec.tsx-snapshots/SelectField-base-visual-disabled-boolean-false-86f74-ationState-undefined-variant-string-outline-1-chromium-linux.png b/src/components/SelectField/__tests__/SelectField.spec.tsx-snapshots/SelectField-base-visual-disabled-boolean-false-86f74-ationState-undefined-variant-string-outline-1-chromium-linux.png
new file mode 100644
index 000000000..16f912a5e
Binary files /dev/null and b/src/components/SelectField/__tests__/SelectField.spec.tsx-snapshots/SelectField-base-visual-disabled-boolean-false-86f74-ationState-undefined-variant-string-outline-1-chromium-linux.png differ
diff --git a/src/components/SelectField/__tests__/SelectField.spec.tsx-snapshots/SelectField-base-visual-disabled-boolean-false-a924c-nState-string-warning-variant-string-filled-1-chromium-linux.png b/src/components/SelectField/__tests__/SelectField.spec.tsx-snapshots/SelectField-base-visual-disabled-boolean-false-a924c-nState-string-warning-variant-string-filled-1-chromium-linux.png
new file mode 100644
index 000000000..9ac6b86be
Binary files /dev/null and b/src/components/SelectField/__tests__/SelectField.spec.tsx-snapshots/SelectField-base-visual-disabled-boolean-false-a924c-nState-string-warning-variant-string-filled-1-chromium-linux.png differ
diff --git a/src/components/SelectField/__tests__/SelectField.spec.tsx-snapshots/SelectField-base-visual-disabled-boolean-false-d6799-ionState-string-valid-variant-string-filled-1-chromium-linux.png b/src/components/SelectField/__tests__/SelectField.spec.tsx-snapshots/SelectField-base-visual-disabled-boolean-false-d6799-ionState-string-valid-variant-string-filled-1-chromium-linux.png
new file mode 100644
index 000000000..9e4ace079
Binary files /dev/null and b/src/components/SelectField/__tests__/SelectField.spec.tsx-snapshots/SelectField-base-visual-disabled-boolean-false-d6799-ionState-string-valid-variant-string-filled-1-chromium-linux.png differ
diff --git a/src/components/SelectField/__tests__/SelectField.spec.tsx-snapshots/SelectField-base-visual-disabled-boolean-false-e8da1-nState-string-invalid-variant-string-filled-1-chromium-linux.png b/src/components/SelectField/__tests__/SelectField.spec.tsx-snapshots/SelectField-base-visual-disabled-boolean-false-e8da1-nState-string-invalid-variant-string-filled-1-chromium-linux.png
new file mode 100644
index 000000000..11c5c528c
Binary files /dev/null and b/src/components/SelectField/__tests__/SelectField.spec.tsx-snapshots/SelectField-base-visual-disabled-boolean-false-e8da1-nState-string-invalid-variant-string-filled-1-chromium-linux.png differ
diff --git a/src/components/SelectField/__tests__/SelectField.spec.tsx-snapshots/SelectField-base-visual-disabled-boolean-false-validationState-undefined-variant-string-filled-1-chromium-linux.png b/src/components/SelectField/__tests__/SelectField.spec.tsx-snapshots/SelectField-base-visual-disabled-boolean-false-validationState-undefined-variant-string-filled-1-chromium-linux.png
new file mode 100644
index 000000000..03d5acefc
Binary files /dev/null and b/src/components/SelectField/__tests__/SelectField.spec.tsx-snapshots/SelectField-base-visual-disabled-boolean-false-validationState-undefined-variant-string-filled-1-chromium-linux.png differ
diff --git a/src/components/SelectField/__tests__/SelectField.spec.tsx-snapshots/SelectField-base-visual-disabled-boolean-true--2d55e-nState-string-warning-variant-string-filled-1-chromium-linux.png b/src/components/SelectField/__tests__/SelectField.spec.tsx-snapshots/SelectField-base-visual-disabled-boolean-true--2d55e-nState-string-warning-variant-string-filled-1-chromium-linux.png
new file mode 100644
index 000000000..025584d23
Binary files /dev/null and b/src/components/SelectField/__tests__/SelectField.spec.tsx-snapshots/SelectField-base-visual-disabled-boolean-true--2d55e-nState-string-warning-variant-string-filled-1-chromium-linux.png differ
diff --git a/src/components/SelectField/__tests__/SelectField.spec.tsx-snapshots/SelectField-base-visual-disabled-boolean-true--36992-State-string-warning-variant-string-outline-1-chromium-linux.png b/src/components/SelectField/__tests__/SelectField.spec.tsx-snapshots/SelectField-base-visual-disabled-boolean-true--36992-State-string-warning-variant-string-outline-1-chromium-linux.png
new file mode 100644
index 000000000..31d0e089f
Binary files /dev/null and b/src/components/SelectField/__tests__/SelectField.spec.tsx-snapshots/SelectField-base-visual-disabled-boolean-true--36992-State-string-warning-variant-string-outline-1-chromium-linux.png differ
diff --git a/src/components/SelectField/__tests__/SelectField.spec.tsx-snapshots/SelectField-base-visual-disabled-boolean-true--7f8b2-nState-string-invalid-variant-string-filled-1-chromium-linux.png b/src/components/SelectField/__tests__/SelectField.spec.tsx-snapshots/SelectField-base-visual-disabled-boolean-true--7f8b2-nState-string-invalid-variant-string-filled-1-chromium-linux.png
new file mode 100644
index 000000000..6bd095357
Binary files /dev/null and b/src/components/SelectField/__tests__/SelectField.spec.tsx-snapshots/SelectField-base-visual-disabled-boolean-true--7f8b2-nState-string-invalid-variant-string-filled-1-chromium-linux.png differ
diff --git a/src/components/SelectField/__tests__/SelectField.spec.tsx-snapshots/SelectField-base-visual-disabled-boolean-true--a9d71-ionState-string-valid-variant-string-filled-1-chromium-linux.png b/src/components/SelectField/__tests__/SelectField.spec.tsx-snapshots/SelectField-base-visual-disabled-boolean-true--a9d71-ionState-string-valid-variant-string-filled-1-chromium-linux.png
new file mode 100644
index 000000000..166bd5e17
Binary files /dev/null and b/src/components/SelectField/__tests__/SelectField.spec.tsx-snapshots/SelectField-base-visual-disabled-boolean-true--a9d71-ionState-string-valid-variant-string-filled-1-chromium-linux.png differ
diff --git a/src/components/SelectField/__tests__/SelectField.spec.tsx-snapshots/SelectField-base-visual-disabled-boolean-true--d3eeb-State-string-invalid-variant-string-outline-1-chromium-linux.png b/src/components/SelectField/__tests__/SelectField.spec.tsx-snapshots/SelectField-base-visual-disabled-boolean-true--d3eeb-State-string-invalid-variant-string-outline-1-chromium-linux.png
new file mode 100644
index 000000000..86dc958a3
Binary files /dev/null and b/src/components/SelectField/__tests__/SelectField.spec.tsx-snapshots/SelectField-base-visual-disabled-boolean-true--d3eeb-State-string-invalid-variant-string-outline-1-chromium-linux.png differ
diff --git a/src/components/SelectField/__tests__/SelectField.spec.tsx-snapshots/SelectField-base-visual-disabled-boolean-true--d4789-onState-string-valid-variant-string-outline-1-chromium-linux.png b/src/components/SelectField/__tests__/SelectField.spec.tsx-snapshots/SelectField-base-visual-disabled-boolean-true--d4789-onState-string-valid-variant-string-outline-1-chromium-linux.png
new file mode 100644
index 000000000..8bc2752ed
Binary files /dev/null and b/src/components/SelectField/__tests__/SelectField.spec.tsx-snapshots/SelectField-base-visual-disabled-boolean-true--d4789-onState-string-valid-variant-string-outline-1-chromium-linux.png differ
diff --git a/src/components/SelectField/__tests__/SelectField.spec.tsx-snapshots/SelectField-base-visual-disabled-boolean-true-validationState-undefined-variant-string-filled-1-chromium-linux.png b/src/components/SelectField/__tests__/SelectField.spec.tsx-snapshots/SelectField-base-visual-disabled-boolean-true-validationState-undefined-variant-string-filled-1-chromium-linux.png
new file mode 100644
index 000000000..4bd46a21e
Binary files /dev/null and b/src/components/SelectField/__tests__/SelectField.spec.tsx-snapshots/SelectField-base-visual-disabled-boolean-true-validationState-undefined-variant-string-filled-1-chromium-linux.png differ
diff --git a/src/components/SelectField/__tests__/SelectField.spec.tsx-snapshots/SelectField-base-visual-disabled-boolean-true-validationState-undefined-variant-string-outline-1-chromium-linux.png b/src/components/SelectField/__tests__/SelectField.spec.tsx-snapshots/SelectField-base-visual-disabled-boolean-true-validationState-undefined-variant-string-outline-1-chromium-linux.png
new file mode 100644
index 000000000..b2eb56551
Binary files /dev/null and b/src/components/SelectField/__tests__/SelectField.spec.tsx-snapshots/SelectField-base-visual-disabled-boolean-true-validationState-undefined-variant-string-outline-1-chromium-linux.png differ
diff --git a/src/components/SelectField/__tests__/SelectField.spec.tsx-snapshots/SelectField-base-visual-fullPage-options-shape-defaultOpened-1-chromium-linux.png b/src/components/SelectField/__tests__/SelectField.spec.tsx-snapshots/SelectField-base-visual-fullPage-options-shape-defaultOpened-1-chromium-linux.png
new file mode 100644
index 000000000..b32d01374
Binary files /dev/null and b/src/components/SelectField/__tests__/SelectField.spec.tsx-snapshots/SelectField-base-visual-fullPage-options-shape-defaultOpened-1-chromium-linux.png differ
diff --git a/src/components/SelectField/__tests__/SelectField.spec.tsx-snapshots/SelectField-base-visual-fullPage-options-shape-defaultPartiallyDisabled-1-chromium-linux.png b/src/components/SelectField/__tests__/SelectField.spec.tsx-snapshots/SelectField-base-visual-fullPage-options-shape-defaultPartiallyDisabled-1-chromium-linux.png
new file mode 100644
index 000000000..c943953ce
Binary files /dev/null and b/src/components/SelectField/__tests__/SelectField.spec.tsx-snapshots/SelectField-base-visual-fullPage-options-shape-defaultPartiallyDisabled-1-chromium-linux.png differ
diff --git a/src/components/SelectField/__tests__/SelectField.spec.tsx-snapshots/SelectField-base-visual-fullPage-options-shape-grouped-1-chromium-linux.png b/src/components/SelectField/__tests__/SelectField.spec.tsx-snapshots/SelectField-base-visual-fullPage-options-shape-grouped-1-chromium-linux.png
new file mode 100644
index 000000000..4ef8b051c
Binary files /dev/null and b/src/components/SelectField/__tests__/SelectField.spec.tsx-snapshots/SelectField-base-visual-fullPage-options-shape-grouped-1-chromium-linux.png differ
diff --git a/src/components/SelectField/__tests__/SelectField.spec.tsx-snapshots/SelectField-base-visual-fullPage-options-shape-partiallyDisabledGrouped-1-chromium-linux.png b/src/components/SelectField/__tests__/SelectField.spec.tsx-snapshots/SelectField-base-visual-fullPage-options-shape-partiallyDisabledGrouped-1-chromium-linux.png
new file mode 100644
index 000000000..43609e7e0
Binary files /dev/null and b/src/components/SelectField/__tests__/SelectField.spec.tsx-snapshots/SelectField-base-visual-fullPage-options-shape-partiallyDisabledGrouped-1-chromium-linux.png differ
diff --git a/src/components/SelectField/__tests__/SelectField.spec.tsx-snapshots/SelectField-base-visual-fullWidth-boolean-false-layout-string-horizontal-1-chromium-linux.png b/src/components/SelectField/__tests__/SelectField.spec.tsx-snapshots/SelectField-base-visual-fullWidth-boolean-false-layout-string-horizontal-1-chromium-linux.png
new file mode 100644
index 000000000..7951a6230
Binary files /dev/null and b/src/components/SelectField/__tests__/SelectField.spec.tsx-snapshots/SelectField-base-visual-fullWidth-boolean-false-layout-string-horizontal-1-chromium-linux.png differ
diff --git a/src/components/SelectField/__tests__/SelectField.spec.tsx-snapshots/SelectField-base-visual-fullWidth-boolean-false-layout-string-vertical-1-chromium-linux.png b/src/components/SelectField/__tests__/SelectField.spec.tsx-snapshots/SelectField-base-visual-fullWidth-boolean-false-layout-string-vertical-1-chromium-linux.png
new file mode 100644
index 000000000..16f912a5e
Binary files /dev/null and b/src/components/SelectField/__tests__/SelectField.spec.tsx-snapshots/SelectField-base-visual-fullWidth-boolean-false-layout-string-vertical-1-chromium-linux.png differ
diff --git a/src/components/SelectField/__tests__/SelectField.spec.tsx-snapshots/SelectField-base-visual-fullWidth-boolean-true-layout-string-horizontal-1-chromium-linux.png b/src/components/SelectField/__tests__/SelectField.spec.tsx-snapshots/SelectField-base-visual-fullWidth-boolean-true-layout-string-horizontal-1-chromium-linux.png
new file mode 100644
index 000000000..c40d2ebd3
Binary files /dev/null and b/src/components/SelectField/__tests__/SelectField.spec.tsx-snapshots/SelectField-base-visual-fullWidth-boolean-true-layout-string-horizontal-1-chromium-linux.png differ
diff --git a/src/components/SelectField/__tests__/SelectField.spec.tsx-snapshots/SelectField-base-visual-fullWidth-boolean-true-layout-string-vertical-1-chromium-linux.png b/src/components/SelectField/__tests__/SelectField.spec.tsx-snapshots/SelectField-base-visual-fullWidth-boolean-true-layout-string-vertical-1-chromium-linux.png
new file mode 100644
index 000000000..c72368c8f
Binary files /dev/null and b/src/components/SelectField/__tests__/SelectField.spec.tsx-snapshots/SelectField-base-visual-fullWidth-boolean-true-layout-string-vertical-1-chromium-linux.png differ
diff --git a/src/components/SelectField/__tests__/SelectField.spec.tsx-snapshots/SelectField-base-visual-helpText-string-validationText-string-1-chromium-linux.png b/src/components/SelectField/__tests__/SelectField.spec.tsx-snapshots/SelectField-base-visual-helpText-string-validationText-string-1-chromium-linux.png
new file mode 100644
index 000000000..a8176265f
Binary files /dev/null and b/src/components/SelectField/__tests__/SelectField.spec.tsx-snapshots/SelectField-base-visual-helpText-string-validationText-string-1-chromium-linux.png differ
diff --git a/src/components/SelectField/__tests__/SelectField.spec.tsx-snapshots/SelectField-base-visual-helpText-string-validationText-undefined-1-chromium-linux.png b/src/components/SelectField/__tests__/SelectField.spec.tsx-snapshots/SelectField-base-visual-helpText-string-validationText-undefined-1-chromium-linux.png
new file mode 100644
index 000000000..946dc1912
Binary files /dev/null and b/src/components/SelectField/__tests__/SelectField.spec.tsx-snapshots/SelectField-base-visual-helpText-string-validationText-undefined-1-chromium-linux.png differ
diff --git a/src/components/SelectField/__tests__/SelectField.spec.tsx-snapshots/SelectField-base-visual-helpText-undefined-validationText-string-1-chromium-linux.png b/src/components/SelectField/__tests__/SelectField.spec.tsx-snapshots/SelectField-base-visual-helpText-undefined-validationText-string-1-chromium-linux.png
new file mode 100644
index 000000000..e81f7a7be
Binary files /dev/null and b/src/components/SelectField/__tests__/SelectField.spec.tsx-snapshots/SelectField-base-visual-helpText-undefined-validationText-string-1-chromium-linux.png differ
diff --git a/src/components/SelectField/__tests__/SelectField.spec.tsx-snapshots/SelectField-base-visual-isLabelVisible-boolean-false-1-chromium-linux.png b/src/components/SelectField/__tests__/SelectField.spec.tsx-snapshots/SelectField-base-visual-isLabelVisible-boolean-false-1-chromium-linux.png
new file mode 100644
index 000000000..05c8446fd
Binary files /dev/null and b/src/components/SelectField/__tests__/SelectField.spec.tsx-snapshots/SelectField-base-visual-isLabelVisible-boolean-false-1-chromium-linux.png differ
diff --git a/src/components/SelectField/__tests__/SelectField.spec.tsx-snapshots/SelectField-base-visual-isLabelVisible-boolean-true-1-chromium-linux.png b/src/components/SelectField/__tests__/SelectField.spec.tsx-snapshots/SelectField-base-visual-isLabelVisible-boolean-true-1-chromium-linux.png
new file mode 100644
index 000000000..16f912a5e
Binary files /dev/null and b/src/components/SelectField/__tests__/SelectField.spec.tsx-snapshots/SelectField-base-visual-isLabelVisible-boolean-true-1-chromium-linux.png differ
diff --git a/src/components/SelectField/__tests__/SelectField.spec.tsx-snapshots/SelectField-base-visual-label-node-normal-1-chromium-linux.png b/src/components/SelectField/__tests__/SelectField.spec.tsx-snapshots/SelectField-base-visual-label-node-normal-1-chromium-linux.png
new file mode 100644
index 000000000..9a36caada
Binary files /dev/null and b/src/components/SelectField/__tests__/SelectField.spec.tsx-snapshots/SelectField-base-visual-label-node-normal-1-chromium-linux.png differ
diff --git a/src/components/SelectField/__tests__/SelectField.spec.tsx-snapshots/SelectField-base-visual-label-string-long-1-chromium-linux.png b/src/components/SelectField/__tests__/SelectField.spec.tsx-snapshots/SelectField-base-visual-label-string-long-1-chromium-linux.png
new file mode 100644
index 000000000..a833930bc
Binary files /dev/null and b/src/components/SelectField/__tests__/SelectField.spec.tsx-snapshots/SelectField-base-visual-label-string-long-1-chromium-linux.png differ
diff --git a/src/components/SelectField/__tests__/SelectField.spec.tsx-snapshots/SelectField-base-visual-renderAsRequired-boolean-false-1-chromium-linux.png b/src/components/SelectField/__tests__/SelectField.spec.tsx-snapshots/SelectField-base-visual-renderAsRequired-boolean-false-1-chromium-linux.png
new file mode 100644
index 000000000..16f912a5e
Binary files /dev/null and b/src/components/SelectField/__tests__/SelectField.spec.tsx-snapshots/SelectField-base-visual-renderAsRequired-boolean-false-1-chromium-linux.png differ
diff --git a/src/components/SelectField/__tests__/SelectField.spec.tsx-snapshots/SelectField-base-visual-renderAsRequired-boolean-false-validationState-string-invalid-1-chromium-linux.png b/src/components/SelectField/__tests__/SelectField.spec.tsx-snapshots/SelectField-base-visual-renderAsRequired-boolean-false-validationState-string-invalid-1-chromium-linux.png
new file mode 100644
index 000000000..4de8ccf2d
Binary files /dev/null and b/src/components/SelectField/__tests__/SelectField.spec.tsx-snapshots/SelectField-base-visual-renderAsRequired-boolean-false-validationState-string-invalid-1-chromium-linux.png differ
diff --git a/src/components/SelectField/__tests__/SelectField.spec.tsx-snapshots/SelectField-base-visual-renderAsRequired-boolean-false-validationState-string-valid-1-chromium-linux.png b/src/components/SelectField/__tests__/SelectField.spec.tsx-snapshots/SelectField-base-visual-renderAsRequired-boolean-false-validationState-string-valid-1-chromium-linux.png
new file mode 100644
index 000000000..fb65808bf
Binary files /dev/null and b/src/components/SelectField/__tests__/SelectField.spec.tsx-snapshots/SelectField-base-visual-renderAsRequired-boolean-false-validationState-string-valid-1-chromium-linux.png differ
diff --git a/src/components/SelectField/__tests__/SelectField.spec.tsx-snapshots/SelectField-base-visual-renderAsRequired-boolean-false-validationState-string-warning-1-chromium-linux.png b/src/components/SelectField/__tests__/SelectField.spec.tsx-snapshots/SelectField-base-visual-renderAsRequired-boolean-false-validationState-string-warning-1-chromium-linux.png
new file mode 100644
index 000000000..63b9d2e1c
Binary files /dev/null and b/src/components/SelectField/__tests__/SelectField.spec.tsx-snapshots/SelectField-base-visual-renderAsRequired-boolean-false-validationState-string-warning-1-chromium-linux.png differ
diff --git a/src/components/SelectField/__tests__/SelectField.spec.tsx-snapshots/SelectField-base-visual-renderAsRequired-boolean-false-validationState-undefined-1-chromium-linux.png b/src/components/SelectField/__tests__/SelectField.spec.tsx-snapshots/SelectField-base-visual-renderAsRequired-boolean-false-validationState-undefined-1-chromium-linux.png
new file mode 100644
index 000000000..16f912a5e
Binary files /dev/null and b/src/components/SelectField/__tests__/SelectField.spec.tsx-snapshots/SelectField-base-visual-renderAsRequired-boolean-false-validationState-undefined-1-chromium-linux.png differ
diff --git a/src/components/SelectField/__tests__/SelectField.spec.tsx-snapshots/SelectField-base-visual-renderAsRequired-boolean-true-1-chromium-linux.png b/src/components/SelectField/__tests__/SelectField.spec.tsx-snapshots/SelectField-base-visual-renderAsRequired-boolean-true-1-chromium-linux.png
new file mode 100644
index 000000000..2fc66b36a
Binary files /dev/null and b/src/components/SelectField/__tests__/SelectField.spec.tsx-snapshots/SelectField-base-visual-renderAsRequired-boolean-true-1-chromium-linux.png differ
diff --git a/src/components/SelectField/__tests__/SelectField.spec.tsx-snapshots/SelectField-base-visual-renderAsRequired-boolean-true-validationState-string-invalid-1-chromium-linux.png b/src/components/SelectField/__tests__/SelectField.spec.tsx-snapshots/SelectField-base-visual-renderAsRequired-boolean-true-validationState-string-invalid-1-chromium-linux.png
new file mode 100644
index 000000000..cf03f7c57
Binary files /dev/null and b/src/components/SelectField/__tests__/SelectField.spec.tsx-snapshots/SelectField-base-visual-renderAsRequired-boolean-true-validationState-string-invalid-1-chromium-linux.png differ
diff --git a/src/components/SelectField/__tests__/SelectField.spec.tsx-snapshots/SelectField-base-visual-renderAsRequired-boolean-true-validationState-string-valid-1-chromium-linux.png b/src/components/SelectField/__tests__/SelectField.spec.tsx-snapshots/SelectField-base-visual-renderAsRequired-boolean-true-validationState-string-valid-1-chromium-linux.png
new file mode 100644
index 000000000..dc8c75bfc
Binary files /dev/null and b/src/components/SelectField/__tests__/SelectField.spec.tsx-snapshots/SelectField-base-visual-renderAsRequired-boolean-true-validationState-string-valid-1-chromium-linux.png differ
diff --git a/src/components/SelectField/__tests__/SelectField.spec.tsx-snapshots/SelectField-base-visual-renderAsRequired-boolean-true-validationState-string-warning-1-chromium-linux.png b/src/components/SelectField/__tests__/SelectField.spec.tsx-snapshots/SelectField-base-visual-renderAsRequired-boolean-true-validationState-string-warning-1-chromium-linux.png
new file mode 100644
index 000000000..c7af08f61
Binary files /dev/null and b/src/components/SelectField/__tests__/SelectField.spec.tsx-snapshots/SelectField-base-visual-renderAsRequired-boolean-true-validationState-string-warning-1-chromium-linux.png differ
diff --git a/src/components/SelectField/__tests__/SelectField.spec.tsx-snapshots/SelectField-base-visual-renderAsRequired-boolean-true-validationState-undefined-1-chromium-linux.png b/src/components/SelectField/__tests__/SelectField.spec.tsx-snapshots/SelectField-base-visual-renderAsRequired-boolean-true-validationState-undefined-1-chromium-linux.png
new file mode 100644
index 000000000..2fc66b36a
Binary files /dev/null and b/src/components/SelectField/__tests__/SelectField.spec.tsx-snapshots/SelectField-base-visual-renderAsRequired-boolean-true-validationState-undefined-1-chromium-linux.png differ
diff --git a/src/components/SelectField/__tests__/SelectField.spec.tsx-snapshots/SelectField-base-visual-required-boolean-false-1-chromium-linux.png b/src/components/SelectField/__tests__/SelectField.spec.tsx-snapshots/SelectField-base-visual-required-boolean-false-1-chromium-linux.png
new file mode 100644
index 000000000..16f912a5e
Binary files /dev/null and b/src/components/SelectField/__tests__/SelectField.spec.tsx-snapshots/SelectField-base-visual-required-boolean-false-1-chromium-linux.png differ
diff --git a/src/components/SelectField/__tests__/SelectField.spec.tsx-snapshots/SelectField-base-visual-required-boolean-false-validationState-string-invalid-1-chromium-linux.png b/src/components/SelectField/__tests__/SelectField.spec.tsx-snapshots/SelectField-base-visual-required-boolean-false-validationState-string-invalid-1-chromium-linux.png
new file mode 100644
index 000000000..4de8ccf2d
Binary files /dev/null and b/src/components/SelectField/__tests__/SelectField.spec.tsx-snapshots/SelectField-base-visual-required-boolean-false-validationState-string-invalid-1-chromium-linux.png differ
diff --git a/src/components/SelectField/__tests__/SelectField.spec.tsx-snapshots/SelectField-base-visual-required-boolean-false-validationState-string-valid-1-chromium-linux.png b/src/components/SelectField/__tests__/SelectField.spec.tsx-snapshots/SelectField-base-visual-required-boolean-false-validationState-string-valid-1-chromium-linux.png
new file mode 100644
index 000000000..fb65808bf
Binary files /dev/null and b/src/components/SelectField/__tests__/SelectField.spec.tsx-snapshots/SelectField-base-visual-required-boolean-false-validationState-string-valid-1-chromium-linux.png differ
diff --git a/src/components/SelectField/__tests__/SelectField.spec.tsx-snapshots/SelectField-base-visual-required-boolean-false-validationState-string-warning-1-chromium-linux.png b/src/components/SelectField/__tests__/SelectField.spec.tsx-snapshots/SelectField-base-visual-required-boolean-false-validationState-string-warning-1-chromium-linux.png
new file mode 100644
index 000000000..63b9d2e1c
Binary files /dev/null and b/src/components/SelectField/__tests__/SelectField.spec.tsx-snapshots/SelectField-base-visual-required-boolean-false-validationState-string-warning-1-chromium-linux.png differ
diff --git a/src/components/SelectField/__tests__/SelectField.spec.tsx-snapshots/SelectField-base-visual-required-boolean-false-validationState-undefined-1-chromium-linux.png b/src/components/SelectField/__tests__/SelectField.spec.tsx-snapshots/SelectField-base-visual-required-boolean-false-validationState-undefined-1-chromium-linux.png
new file mode 100644
index 000000000..16f912a5e
Binary files /dev/null and b/src/components/SelectField/__tests__/SelectField.spec.tsx-snapshots/SelectField-base-visual-required-boolean-false-validationState-undefined-1-chromium-linux.png differ
diff --git a/src/components/SelectField/__tests__/SelectField.spec.tsx-snapshots/SelectField-base-visual-required-boolean-true-1-chromium-linux.png b/src/components/SelectField/__tests__/SelectField.spec.tsx-snapshots/SelectField-base-visual-required-boolean-true-1-chromium-linux.png
new file mode 100644
index 000000000..2fc66b36a
Binary files /dev/null and b/src/components/SelectField/__tests__/SelectField.spec.tsx-snapshots/SelectField-base-visual-required-boolean-true-1-chromium-linux.png differ
diff --git a/src/components/SelectField/__tests__/SelectField.spec.tsx-snapshots/SelectField-base-visual-required-boolean-true-validationState-string-invalid-1-chromium-linux.png b/src/components/SelectField/__tests__/SelectField.spec.tsx-snapshots/SelectField-base-visual-required-boolean-true-validationState-string-invalid-1-chromium-linux.png
new file mode 100644
index 000000000..cf03f7c57
Binary files /dev/null and b/src/components/SelectField/__tests__/SelectField.spec.tsx-snapshots/SelectField-base-visual-required-boolean-true-validationState-string-invalid-1-chromium-linux.png differ
diff --git a/src/components/SelectField/__tests__/SelectField.spec.tsx-snapshots/SelectField-base-visual-required-boolean-true-validationState-string-valid-1-chromium-linux.png b/src/components/SelectField/__tests__/SelectField.spec.tsx-snapshots/SelectField-base-visual-required-boolean-true-validationState-string-valid-1-chromium-linux.png
new file mode 100644
index 000000000..dc8c75bfc
Binary files /dev/null and b/src/components/SelectField/__tests__/SelectField.spec.tsx-snapshots/SelectField-base-visual-required-boolean-true-validationState-string-valid-1-chromium-linux.png differ
diff --git a/src/components/SelectField/__tests__/SelectField.spec.tsx-snapshots/SelectField-base-visual-required-boolean-true-validationState-string-warning-1-chromium-linux.png b/src/components/SelectField/__tests__/SelectField.spec.tsx-snapshots/SelectField-base-visual-required-boolean-true-validationState-string-warning-1-chromium-linux.png
new file mode 100644
index 000000000..c7af08f61
Binary files /dev/null and b/src/components/SelectField/__tests__/SelectField.spec.tsx-snapshots/SelectField-base-visual-required-boolean-true-validationState-string-warning-1-chromium-linux.png differ
diff --git a/src/components/SelectField/__tests__/SelectField.spec.tsx-snapshots/SelectField-base-visual-required-boolean-true-validationState-undefined-1-chromium-linux.png b/src/components/SelectField/__tests__/SelectField.spec.tsx-snapshots/SelectField-base-visual-required-boolean-true-validationState-undefined-1-chromium-linux.png
new file mode 100644
index 000000000..2fc66b36a
Binary files /dev/null and b/src/components/SelectField/__tests__/SelectField.spec.tsx-snapshots/SelectField-base-visual-required-boolean-true-validationState-undefined-1-chromium-linux.png differ
diff --git a/src/components/SelectField/__tests__/SelectField.spec.tsx-snapshots/SelectField-base-visual-size-string-large-1-chromium-linux.png b/src/components/SelectField/__tests__/SelectField.spec.tsx-snapshots/SelectField-base-visual-size-string-large-1-chromium-linux.png
new file mode 100644
index 000000000..a4031919a
Binary files /dev/null and b/src/components/SelectField/__tests__/SelectField.spec.tsx-snapshots/SelectField-base-visual-size-string-large-1-chromium-linux.png differ
diff --git a/src/components/SelectField/__tests__/SelectField.spec.tsx-snapshots/SelectField-base-visual-size-string-medium-1-chromium-linux.png b/src/components/SelectField/__tests__/SelectField.spec.tsx-snapshots/SelectField-base-visual-size-string-medium-1-chromium-linux.png
new file mode 100644
index 000000000..16f912a5e
Binary files /dev/null and b/src/components/SelectField/__tests__/SelectField.spec.tsx-snapshots/SelectField-base-visual-size-string-medium-1-chromium-linux.png differ
diff --git a/src/components/SelectField/__tests__/SelectField.spec.tsx-snapshots/SelectField-base-visual-size-string-small-1-chromium-linux.png b/src/components/SelectField/__tests__/SelectField.spec.tsx-snapshots/SelectField-base-visual-size-string-small-1-chromium-linux.png
new file mode 100644
index 000000000..b55379590
Binary files /dev/null and b/src/components/SelectField/__tests__/SelectField.spec.tsx-snapshots/SelectField-base-visual-size-string-small-1-chromium-linux.png differ
diff --git a/src/components/SelectField/__tests__/SelectField.spec.tsx-snapshots/SelectField-formLayout-visual-layout-string-horizontal-1-chromium-linux.png b/src/components/SelectField/__tests__/SelectField.spec.tsx-snapshots/SelectField-formLayout-visual-layout-string-horizontal-1-chromium-linux.png
new file mode 100644
index 000000000..cde2352f1
Binary files /dev/null and b/src/components/SelectField/__tests__/SelectField.spec.tsx-snapshots/SelectField-formLayout-visual-layout-string-horizontal-1-chromium-linux.png differ
diff --git a/src/components/SelectField/__tests__/SelectField.spec.tsx-snapshots/SelectField-formLayout-visual-layout-string-vertical-1-chromium-linux.png b/src/components/SelectField/__tests__/SelectField.spec.tsx-snapshots/SelectField-formLayout-visual-layout-string-vertical-1-chromium-linux.png
new file mode 100644
index 000000000..339650dbd
Binary files /dev/null and b/src/components/SelectField/__tests__/SelectField.spec.tsx-snapshots/SelectField-formLayout-visual-layout-string-vertical-1-chromium-linux.png differ
diff --git a/src/components/SelectField/__tests__/SelectField.story.tsx b/src/components/SelectField/__tests__/SelectField.story.tsx
new file mode 100644
index 000000000..67964723f
--- /dev/null
+++ b/src/components/SelectField/__tests__/SelectField.story.tsx
@@ -0,0 +1,88 @@
+import React, {
+  useEffect,
+  useMemo,
+  useRef,
+} from 'react';
+import type { InputHTMLAttributes } from 'react';
+import { FormLayoutContext } from '../../FormLayout';
+import { SelectField } from '..';
+
+type SelectFieldForTestProps = InputHTMLAttributes<HTMLSelectElement>;
+type SelectFieldForRefTestProps = SelectFieldForTestProps & {
+  testRefAttrName: string;
+  testRefAttrValue: string;
+};
+export type SelectFieldForFormLayoutTestsProps = SelectFieldForTestProps & {
+  layout: 'vertical' | 'horizontal'
+};
+
+const defaultLabel = 'test-label';
+const defaultOptions = [
+  {
+    disabled: false,
+    key: 'key1',
+    label: 'option1',
+    value: 'value1',
+  },
+  {
+    disabled: false,
+    key: 'key2',
+    label: 'option2',
+    value: 'value2',
+  },
+];
+
+export const SelectFieldForTest = ({
+  ...props
+}: SelectFieldForTestProps) => (
+  <SelectField
+    label={defaultLabel}
+    options={defaultOptions}
+    {...props}
+  />
+);
+
+export const SelectFieldForRefTest = ({
+  testRefAttrName,
+  testRefAttrValue,
+  ...props
+}: SelectFieldForRefTestProps) => {
+  const ref = useRef<HTMLSelectElement>(undefined);
+
+  useEffect(() => {
+    ref.current?.setAttribute(testRefAttrName, testRefAttrValue);
+  }, [testRefAttrName, testRefAttrValue]);
+
+  return (
+    <SelectField
+      label={defaultLabel}
+      options={defaultOptions}
+      {...props}
+      ref={ref}
+    />
+  );
+};
+
+export const SelectFieldForFormLayoutTests = ({
+  layout,
+  ...props
+} : SelectFieldForFormLayoutTestsProps) => {
+  const values = useMemo(() => ({ layout }), [layout]);
+
+  return (
+    <FormLayoutContext.Provider
+      value={values}
+    >
+      <SelectField
+        label={defaultLabel}
+        options={defaultOptions}
+        {...props}
+      />
+      <SelectField
+        label="another-test-label"
+        options={defaultOptions}
+        {...props}
+      />
+    </FormLayoutContext.Provider>
+  );
+};
diff --git a/src/components/SelectField/__tests__/SelectField.test.jsx b/src/components/SelectField/__tests__/SelectField.test.jsx
deleted file mode 100644
index a77966747..000000000
--- a/src/components/SelectField/__tests__/SelectField.test.jsx
+++ /dev/null
@@ -1,143 +0,0 @@
-import React from 'react';
-import {
-  render,
-  screen,
-  within,
-} from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import { SelectField } from '../SelectField';
-import { disabledPropTest } from '../../../../tests/jest/propTests/disabledPropTest';
-import { refPropTest } from '../../../../tests/jest/propTests/refPropTest';
-import { fullWidthPropTest } from '../../../../tests/jest/propTests/fullWidthPropTest';
-import { helpTextPropTest } from '../../../../tests/jest/propTests/helpTextPropTest';
-import { formLayoutProviderTest } from '../../../../tests/jest/providerTests/formLayoutProviderTest';
-import { isLabelVisibleTest } from '../../../../tests/jest/propTests/isLabelVisibleTest';
-import { labelPropTest } from '../../../../tests/jest/propTests/labelPropTest';
-import { layoutPropTest } from '../../../../tests/jest/propTests/layoutPropTest';
-import { renderAsRequiredPropTest } from '../../../../tests/jest/propTests/renderAsRequiredPropTest';
-import { requiredPropTest } from '../../../../tests/jest/propTests/requiredPropTest';
-import { sizePropTest } from '../../../../tests/jest/propTests/sizePropTest';
-import { validationStatePropTest } from '../../../../tests/jest/propTests/validationStatePropTest';
-import { validationTextPropTest } from '../../../../tests/jest/propTests/validationTextPropTest';
-import { variantPropTest } from '../../../../tests/jest/propTests/variantPropTest';
-
-const mandatoryProps = {
-  label: 'label',
-  options: [
-    {
-      label: 'option 1',
-      value: 1,
-    },
-    {
-      disabled: true,
-      key: 'key',
-      label: 'option 2',
-      value: 'option2',
-    },
-  ],
-};
-
-const optgroupOptions = [
-  {
-    key: 'optgroup_key',
-    label: 'optgroup',
-    options: [
-      {
-        label: 'option 3',
-        value: 3,
-      },
-      {
-        disabled: true,
-        key: 'key',
-        label: 'option 4',
-        value: 'option4',
-      },
-    ],
-  },
-];
-
-describe('rendering', () => {
-  formLayoutProviderTest(<SelectField {...mandatoryProps} />);
-
-  it.each([
-    ...disabledPropTest,
-    ...refPropTest(React.createRef()),
-    ...fullWidthPropTest,
-    ...helpTextPropTest,
-    [
-      {
-        helpText: 'help text',
-        id: 'id',
-        validationText: 'validation text',
-      },
-      (rootElement) => {
-        expect(within(rootElement).getByTestId('id'));
-        expect(rootElement).toHaveAttribute('id', 'id__label');
-        expect(within(rootElement).getByText('help text')).toHaveAttribute('id', 'id__helpText');
-        expect(within(rootElement).getByText('label')).toHaveAttribute('id', 'id__labelText');
-        expect(within(rootElement).getByText('validation text')).toHaveAttribute('id', 'id__validationText');
-        expect(within(rootElement).getByTestId('id__item__1'));
-      },
-    ],
-    ...isLabelVisibleTest(),
-    ...labelPropTest(),
-    ...layoutPropTest,
-    [
-      {
-        id: 'id',
-        options: mandatoryProps.options,
-      },
-      (rootElement) => {
-        expect(within(rootElement).getByText('option 1')).not.toHaveAttribute('checked');
-        expect(within(rootElement).getByText('option 2')).not.toHaveAttribute('checked');
-        expect(within(rootElement).getByText('option 2')).toBeDisabled();
-        expect(within(rootElement).getByText('option 1')).toHaveAttribute('id', 'id__item__1');
-        expect(within(rootElement).getByText('option 2')).toHaveAttribute('id', 'id__item__key');
-      },
-    ],
-    [
-      {
-        id: 'id',
-        options: optgroupOptions,
-      },
-      (rootElement) => {
-        expect(within(rootElement).getByText('option 3')).not.toHaveAttribute('checked');
-        expect(within(rootElement).getByText('option 4')).not.toHaveAttribute('checked');
-        expect(within(rootElement).getByText('option 4')).toBeDisabled();
-        expect(within(rootElement).getByText('option 3')).toHaveAttribute('id', 'id__item__3');
-        expect(within(rootElement).getByText('option 4')).toHaveAttribute('id', 'id__item__key');
-      },
-    ],
-    ...renderAsRequiredPropTest,
-    ...requiredPropTest,
-    ...sizePropTest,
-    ...validationStatePropTest,
-    ...validationTextPropTest,
-    ...variantPropTest,
-  ])('renders with props: "%s"', (testedProps, assert) => {
-    const dom = render((
-      <SelectField
-        {...mandatoryProps}
-        {...testedProps}
-      />
-    ));
-
-    assert(dom.container.firstChild);
-  });
-});
-
-describe('functionality', () => {
-  it('calls synthetic event onChange() on changing selected option', async () => {
-    const spy = jest.fn();
-    render((
-      <SelectField
-        {...mandatoryProps}
-        onChange={spy}
-        value="option2"
-      />
-    ));
-
-    await userEvent.selectOptions(screen.getByDisplayValue('option 2'), '1');
-    expect(spy).toHaveBeenCalled();
-  });
-});
diff --git a/src/components/SelectField/__tests__/_propTests/openSelectFieldOptionsTest.ts b/src/components/SelectField/__tests__/_propTests/openSelectFieldOptionsTest.ts
new file mode 100644
index 000000000..babd2cc1f
--- /dev/null
+++ b/src/components/SelectField/__tests__/_propTests/openSelectFieldOptionsTest.ts
@@ -0,0 +1,94 @@
+import type { PropTests } from '../../../../../tests/playwright/types';
+
+const partiallyDisabledBaseOptions = [
+  {
+    disabled: false,
+    key: 'key1',
+    label: 'option1',
+    value: 'value1',
+  },
+  {
+    disabled: true,
+    key: 'key2',
+    label: 'option2',
+    value: 'value2',
+  },
+];
+
+const groupedOptions = [
+  {
+    key: 'optgroup_key1',
+    label: 'optgroup1',
+    options: [
+      {
+        disabled: false,
+        label: 'option1',
+        value: 'value1',
+      },
+      {
+        disabled: false,
+        label: 'option2',
+        value: 'value2',
+      },
+    ],
+  },
+];
+
+const partiallyDisabledGroupOptions = [
+  ...groupedOptions,
+  {
+    key: 'optgroup_key2',
+    label: 'optgroup2',
+    options: [
+      {
+        disabled: true,
+        label: 'option3',
+        value: 'value3',
+      },
+      {
+        disabled: false,
+        label: 'option4',
+        value: 'value4',
+      },
+    ],
+  },
+];
+
+export const openSelectFieldOptionsTest: PropTests = [
+  {
+    name: 'options:shape[defaultOpened]',
+    onBeforeSnapshot: async (page, component) => {
+      const select = component.getByRole('combobox');
+      await select.click();
+      await page.waitForTimeout(500);
+    },
+    props: {},
+  },
+  {
+    name: 'options:shape[defaultPartiallyDisabled]',
+    onBeforeSnapshot: async (page, component) => {
+      const select = component.getByRole('combobox');
+      await select.click();
+      await page.waitForTimeout(500);
+    },
+    props: { options: partiallyDisabledBaseOptions },
+  },
+  {
+    name: 'options:shape[grouped]',
+    onBeforeSnapshot: async (page, component) => {
+      const select = component.getByRole('combobox');
+      await select.click();
+      await page.waitForTimeout(500);
+    },
+    props: { options: groupedOptions },
+  },
+  {
+    name: 'options:shape[partiallyDisabledGrouped]',
+    onBeforeSnapshot: async (page, component) => {
+      const select = component.getByRole('combobox');
+      await select.click();
+      await page.waitForTimeout(500);
+    },
+    props: { options: partiallyDisabledGroupOptions },
+  },
+];
diff --git a/src/components/TextArea/__tests__/TextArea.spec.tsx b/src/components/TextArea/__tests__/TextArea.spec.tsx
new file mode 100644
index 000000000..3dca0ff32
--- /dev/null
+++ b/src/components/TextArea/__tests__/TextArea.spec.tsx
@@ -0,0 +1,159 @@
+import React from 'react';
+import {
+  expect,
+  test,
+} from '@playwright/experimental-ct-react';
+import {
+  mixPropTests,
+  propTests,
+} from '../../../../tests/playwright';
+import {
+  TextAreaForTest,
+  TextAreaForRefTest,
+  TextAreaForFormLayoutTests,
+} from './TextArea.story';
+import type { TextAreaForFormLayoutTestsProps } from './TextArea.story';
+
+test.describe('TextArea', () => {
+  test.describe('base', () => {
+    test.describe('visual', () => {
+      [
+        ...propTests.defaultComponentPropTest,
+        ...propTests.helpTextAndValidationTextPropType,
+        ...propTests.isLabelVisiblePropTest,
+        ...propTests.labelPropTest,
+        ...propTests.requiredPropTest,
+        ...propTests.sizePropTest,
+        ...mixPropTests([
+          propTests.fullWidthPropTest,
+          propTests.layoutPropTest,
+        ]),
+        ...mixPropTests([
+          propTests.requiredPropTest,
+          propTests.validationStatePropTest,
+        ]),
+        ...mixPropTests([
+          propTests.disabledPropTest,
+          propTests.validationStatePropTest,
+          propTests.variantPropTest,
+        ]),
+      ].forEach(({
+        name,
+        onBeforeTest,
+        onBeforeSnapshot,
+        props,
+      }) => {
+        test(name, async ({
+          mount,
+          page,
+        }) => {
+          if (onBeforeTest) {
+            await onBeforeTest(page);
+          }
+
+          const component = await mount(
+            <TextAreaForTest
+              {...props}
+            />,
+          );
+
+          if (onBeforeSnapshot) {
+            await onBeforeSnapshot(page, component);
+          }
+
+          const screenshot = await component.screenshot();
+          expect(screenshot).toMatchSnapshot();
+        });
+      });
+    });
+
+    test.describe('non-visual', () => {
+      test('id', async ({ mount }) => {
+        const testId = 'testId';
+        const testLabel = 'testLabel';
+        const testHelpText = 'testHelpText';
+        const testValidationText = 'testValidationText';
+
+        const component = await mount(
+          <TextAreaForTest
+            helpText={testHelpText}
+            id={testId}
+            label={testLabel}
+            validationText={testValidationText}
+          />,
+        );
+
+        await expect(component).toHaveAttribute('id', `${testId}__label`);
+        await expect(component.getByText(testLabel)).toHaveAttribute('id', `${testId}__labelText`);
+        await expect(component.getByText(testHelpText)).toHaveAttribute('id', `${testId}__helpText`);
+        await expect(component.getByText(testValidationText)).toHaveAttribute('id', `${testId}__validationText`);
+        await expect(component.getByRole('textbox')).toHaveAttribute('id', testId);
+      });
+
+      test('ref', async ({ mount }) => {
+        const component = await mount(
+          <TextAreaForRefTest
+            testRefAttrName="test-ref"
+            testRefAttrValue="test-ref-value"
+          />,
+        );
+
+        await expect(component.getByRole('textbox')).toHaveAttribute('test-ref', 'test-ref-value');
+      });
+    });
+
+    test.describe('functionality', () => {
+      test('calls synthetic event onChange() on typing', async ({ mount }) => {
+        let clickedCount = 0;
+        const value = 'testValue';
+
+        const component = await mount(
+          <TextAreaForTest
+            onChange={() => {
+              clickedCount += 1;
+            }}
+            value={value}
+          />,
+        );
+
+        await component.getByRole('textbox').pressSequentially(value);
+        expect(clickedCount).toBe(value.length);
+      });
+    });
+  });
+
+  test.describe('formLayout', () => {
+    test.describe('visual', () => {
+      [
+        ...propTests.layoutPropTest,
+      ].forEach(({
+        name,
+        onBeforeTest,
+        onBeforeSnapshot,
+        props,
+      }) => {
+        test(name, async ({
+          mount,
+          page,
+        }) => {
+          if (onBeforeTest) {
+            await onBeforeTest(page);
+          }
+
+          const component = await mount(
+            <TextAreaForFormLayoutTests
+              {...props as unknown as TextAreaForFormLayoutTestsProps}
+            />,
+          );
+
+          if (onBeforeSnapshot) {
+            await onBeforeSnapshot(page, component);
+          }
+
+          const screenshot = await component.screenshot();
+          expect(screenshot).toMatchSnapshot();
+        });
+      });
+    });
+  });
+});
diff --git a/src/components/TextArea/__tests__/TextArea.spec.tsx-snapshots/TextArea-base-visual-defaultComponentProps-object-1-chromium-linux.png b/src/components/TextArea/__tests__/TextArea.spec.tsx-snapshots/TextArea-base-visual-defaultComponentProps-object-1-chromium-linux.png
new file mode 100644
index 000000000..3263d8703
Binary files /dev/null and b/src/components/TextArea/__tests__/TextArea.spec.tsx-snapshots/TextArea-base-visual-defaultComponentProps-object-1-chromium-linux.png differ
diff --git a/src/components/TextArea/__tests__/TextArea.spec.tsx-snapshots/TextArea-base-visual-disabled-boolean-false--1b842-nState-string-warning-variant-string-filled-1-chromium-linux.png b/src/components/TextArea/__tests__/TextArea.spec.tsx-snapshots/TextArea-base-visual-disabled-boolean-false--1b842-nState-string-warning-variant-string-filled-1-chromium-linux.png
new file mode 100644
index 000000000..a5a487e65
Binary files /dev/null and b/src/components/TextArea/__tests__/TextArea.spec.tsx-snapshots/TextArea-base-visual-disabled-boolean-false--1b842-nState-string-warning-variant-string-filled-1-chromium-linux.png differ
diff --git a/src/components/TextArea/__tests__/TextArea.spec.tsx-snapshots/TextArea-base-visual-disabled-boolean-false--6e775-onState-string-valid-variant-string-outline-1-chromium-linux.png b/src/components/TextArea/__tests__/TextArea.spec.tsx-snapshots/TextArea-base-visual-disabled-boolean-false--6e775-onState-string-valid-variant-string-outline-1-chromium-linux.png
new file mode 100644
index 000000000..434252063
Binary files /dev/null and b/src/components/TextArea/__tests__/TextArea.spec.tsx-snapshots/TextArea-base-visual-disabled-boolean-false--6e775-onState-string-valid-variant-string-outline-1-chromium-linux.png differ
diff --git a/src/components/TextArea/__tests__/TextArea.spec.tsx-snapshots/TextArea-base-visual-disabled-boolean-false--c3763-State-string-warning-variant-string-outline-1-chromium-linux.png b/src/components/TextArea/__tests__/TextArea.spec.tsx-snapshots/TextArea-base-visual-disabled-boolean-false--c3763-State-string-warning-variant-string-outline-1-chromium-linux.png
new file mode 100644
index 000000000..45b9f7ac0
Binary files /dev/null and b/src/components/TextArea/__tests__/TextArea.spec.tsx-snapshots/TextArea-base-visual-disabled-boolean-false--c3763-State-string-warning-variant-string-outline-1-chromium-linux.png differ
diff --git a/src/components/TextArea/__tests__/TextArea.spec.tsx-snapshots/TextArea-base-visual-disabled-boolean-false--e6ca7-nState-string-invalid-variant-string-filled-1-chromium-linux.png b/src/components/TextArea/__tests__/TextArea.spec.tsx-snapshots/TextArea-base-visual-disabled-boolean-false--e6ca7-nState-string-invalid-variant-string-filled-1-chromium-linux.png
new file mode 100644
index 000000000..c3fb89142
Binary files /dev/null and b/src/components/TextArea/__tests__/TextArea.spec.tsx-snapshots/TextArea-base-visual-disabled-boolean-false--e6ca7-nState-string-invalid-variant-string-filled-1-chromium-linux.png differ
diff --git a/src/components/TextArea/__tests__/TextArea.spec.tsx-snapshots/TextArea-base-visual-disabled-boolean-false--e8c99-State-string-invalid-variant-string-outline-1-chromium-linux.png b/src/components/TextArea/__tests__/TextArea.spec.tsx-snapshots/TextArea-base-visual-disabled-boolean-false--e8c99-State-string-invalid-variant-string-outline-1-chromium-linux.png
new file mode 100644
index 000000000..8130fe65e
Binary files /dev/null and b/src/components/TextArea/__tests__/TextArea.spec.tsx-snapshots/TextArea-base-visual-disabled-boolean-false--e8c99-State-string-invalid-variant-string-outline-1-chromium-linux.png differ
diff --git a/src/components/TextArea/__tests__/TextArea.spec.tsx-snapshots/TextArea-base-visual-disabled-boolean-false-validationState-string-valid-variant-string-filled-1-chromium-linux.png b/src/components/TextArea/__tests__/TextArea.spec.tsx-snapshots/TextArea-base-visual-disabled-boolean-false-validationState-string-valid-variant-string-filled-1-chromium-linux.png
new file mode 100644
index 000000000..5ed2c9fee
Binary files /dev/null and b/src/components/TextArea/__tests__/TextArea.spec.tsx-snapshots/TextArea-base-visual-disabled-boolean-false-validationState-string-valid-variant-string-filled-1-chromium-linux.png differ
diff --git a/src/components/TextArea/__tests__/TextArea.spec.tsx-snapshots/TextArea-base-visual-disabled-boolean-false-validationState-undefined-variant-string-filled-1-chromium-linux.png b/src/components/TextArea/__tests__/TextArea.spec.tsx-snapshots/TextArea-base-visual-disabled-boolean-false-validationState-undefined-variant-string-filled-1-chromium-linux.png
new file mode 100644
index 000000000..a21883a2e
Binary files /dev/null and b/src/components/TextArea/__tests__/TextArea.spec.tsx-snapshots/TextArea-base-visual-disabled-boolean-false-validationState-undefined-variant-string-filled-1-chromium-linux.png differ
diff --git a/src/components/TextArea/__tests__/TextArea.spec.tsx-snapshots/TextArea-base-visual-disabled-boolean-false-validationState-undefined-variant-string-outline-1-chromium-linux.png b/src/components/TextArea/__tests__/TextArea.spec.tsx-snapshots/TextArea-base-visual-disabled-boolean-false-validationState-undefined-variant-string-outline-1-chromium-linux.png
new file mode 100644
index 000000000..3263d8703
Binary files /dev/null and b/src/components/TextArea/__tests__/TextArea.spec.tsx-snapshots/TextArea-base-visual-disabled-boolean-false-validationState-undefined-variant-string-outline-1-chromium-linux.png differ
diff --git a/src/components/TextArea/__tests__/TextArea.spec.tsx-snapshots/TextArea-base-visual-disabled-boolean-true-v-43a76-State-string-invalid-variant-string-outline-1-chromium-linux.png b/src/components/TextArea/__tests__/TextArea.spec.tsx-snapshots/TextArea-base-visual-disabled-boolean-true-v-43a76-State-string-invalid-variant-string-outline-1-chromium-linux.png
new file mode 100644
index 000000000..d2820044e
Binary files /dev/null and b/src/components/TextArea/__tests__/TextArea.spec.tsx-snapshots/TextArea-base-visual-disabled-boolean-true-v-43a76-State-string-invalid-variant-string-outline-1-chromium-linux.png differ
diff --git a/src/components/TextArea/__tests__/TextArea.spec.tsx-snapshots/TextArea-base-visual-disabled-boolean-true-v-bf3d8-nState-string-warning-variant-string-filled-1-chromium-linux.png b/src/components/TextArea/__tests__/TextArea.spec.tsx-snapshots/TextArea-base-visual-disabled-boolean-true-v-bf3d8-nState-string-warning-variant-string-filled-1-chromium-linux.png
new file mode 100644
index 000000000..1f2654588
Binary files /dev/null and b/src/components/TextArea/__tests__/TextArea.spec.tsx-snapshots/TextArea-base-visual-disabled-boolean-true-v-bf3d8-nState-string-warning-variant-string-filled-1-chromium-linux.png differ
diff --git a/src/components/TextArea/__tests__/TextArea.spec.tsx-snapshots/TextArea-base-visual-disabled-boolean-true-v-bf6a0-State-string-warning-variant-string-outline-1-chromium-linux.png b/src/components/TextArea/__tests__/TextArea.spec.tsx-snapshots/TextArea-base-visual-disabled-boolean-true-v-bf6a0-State-string-warning-variant-string-outline-1-chromium-linux.png
new file mode 100644
index 000000000..5037405a2
Binary files /dev/null and b/src/components/TextArea/__tests__/TextArea.spec.tsx-snapshots/TextArea-base-visual-disabled-boolean-true-v-bf6a0-State-string-warning-variant-string-outline-1-chromium-linux.png differ
diff --git a/src/components/TextArea/__tests__/TextArea.spec.tsx-snapshots/TextArea-base-visual-disabled-boolean-true-v-ddd41-nState-string-invalid-variant-string-filled-1-chromium-linux.png b/src/components/TextArea/__tests__/TextArea.spec.tsx-snapshots/TextArea-base-visual-disabled-boolean-true-v-ddd41-nState-string-invalid-variant-string-filled-1-chromium-linux.png
new file mode 100644
index 000000000..e0133e227
Binary files /dev/null and b/src/components/TextArea/__tests__/TextArea.spec.tsx-snapshots/TextArea-base-visual-disabled-boolean-true-v-ddd41-nState-string-invalid-variant-string-filled-1-chromium-linux.png differ
diff --git a/src/components/TextArea/__tests__/TextArea.spec.tsx-snapshots/TextArea-base-visual-disabled-boolean-true-validationState-string-valid-variant-string-filled-1-chromium-linux.png b/src/components/TextArea/__tests__/TextArea.spec.tsx-snapshots/TextArea-base-visual-disabled-boolean-true-validationState-string-valid-variant-string-filled-1-chromium-linux.png
new file mode 100644
index 000000000..02a58a27a
Binary files /dev/null and b/src/components/TextArea/__tests__/TextArea.spec.tsx-snapshots/TextArea-base-visual-disabled-boolean-true-validationState-string-valid-variant-string-filled-1-chromium-linux.png differ
diff --git a/src/components/TextArea/__tests__/TextArea.spec.tsx-snapshots/TextArea-base-visual-disabled-boolean-true-validationState-string-valid-variant-string-outline-1-chromium-linux.png b/src/components/TextArea/__tests__/TextArea.spec.tsx-snapshots/TextArea-base-visual-disabled-boolean-true-validationState-string-valid-variant-string-outline-1-chromium-linux.png
new file mode 100644
index 000000000..4f2d5789f
Binary files /dev/null and b/src/components/TextArea/__tests__/TextArea.spec.tsx-snapshots/TextArea-base-visual-disabled-boolean-true-validationState-string-valid-variant-string-outline-1-chromium-linux.png differ
diff --git a/src/components/TextArea/__tests__/TextArea.spec.tsx-snapshots/TextArea-base-visual-disabled-boolean-true-validationState-undefined-variant-string-filled-1-chromium-linux.png b/src/components/TextArea/__tests__/TextArea.spec.tsx-snapshots/TextArea-base-visual-disabled-boolean-true-validationState-undefined-variant-string-filled-1-chromium-linux.png
new file mode 100644
index 000000000..075eb66d2
Binary files /dev/null and b/src/components/TextArea/__tests__/TextArea.spec.tsx-snapshots/TextArea-base-visual-disabled-boolean-true-validationState-undefined-variant-string-filled-1-chromium-linux.png differ
diff --git a/src/components/TextArea/__tests__/TextArea.spec.tsx-snapshots/TextArea-base-visual-disabled-boolean-true-validationState-undefined-variant-string-outline-1-chromium-linux.png b/src/components/TextArea/__tests__/TextArea.spec.tsx-snapshots/TextArea-base-visual-disabled-boolean-true-validationState-undefined-variant-string-outline-1-chromium-linux.png
new file mode 100644
index 000000000..b16c85f55
Binary files /dev/null and b/src/components/TextArea/__tests__/TextArea.spec.tsx-snapshots/TextArea-base-visual-disabled-boolean-true-validationState-undefined-variant-string-outline-1-chromium-linux.png differ
diff --git a/src/components/TextArea/__tests__/TextArea.spec.tsx-snapshots/TextArea-base-visual-fullWidth-boolean-false-layout-string-horizontal-1-chromium-linux.png b/src/components/TextArea/__tests__/TextArea.spec.tsx-snapshots/TextArea-base-visual-fullWidth-boolean-false-layout-string-horizontal-1-chromium-linux.png
new file mode 100644
index 000000000..add5dc8e7
Binary files /dev/null and b/src/components/TextArea/__tests__/TextArea.spec.tsx-snapshots/TextArea-base-visual-fullWidth-boolean-false-layout-string-horizontal-1-chromium-linux.png differ
diff --git a/src/components/TextArea/__tests__/TextArea.spec.tsx-snapshots/TextArea-base-visual-fullWidth-boolean-false-layout-string-vertical-1-chromium-linux.png b/src/components/TextArea/__tests__/TextArea.spec.tsx-snapshots/TextArea-base-visual-fullWidth-boolean-false-layout-string-vertical-1-chromium-linux.png
new file mode 100644
index 000000000..3263d8703
Binary files /dev/null and b/src/components/TextArea/__tests__/TextArea.spec.tsx-snapshots/TextArea-base-visual-fullWidth-boolean-false-layout-string-vertical-1-chromium-linux.png differ
diff --git a/src/components/TextArea/__tests__/TextArea.spec.tsx-snapshots/TextArea-base-visual-fullWidth-boolean-true-layout-string-horizontal-1-chromium-linux.png b/src/components/TextArea/__tests__/TextArea.spec.tsx-snapshots/TextArea-base-visual-fullWidth-boolean-true-layout-string-horizontal-1-chromium-linux.png
new file mode 100644
index 000000000..9140f0438
Binary files /dev/null and b/src/components/TextArea/__tests__/TextArea.spec.tsx-snapshots/TextArea-base-visual-fullWidth-boolean-true-layout-string-horizontal-1-chromium-linux.png differ
diff --git a/src/components/TextArea/__tests__/TextArea.spec.tsx-snapshots/TextArea-base-visual-fullWidth-boolean-true-layout-string-vertical-1-chromium-linux.png b/src/components/TextArea/__tests__/TextArea.spec.tsx-snapshots/TextArea-base-visual-fullWidth-boolean-true-layout-string-vertical-1-chromium-linux.png
new file mode 100644
index 000000000..2a49d56d4
Binary files /dev/null and b/src/components/TextArea/__tests__/TextArea.spec.tsx-snapshots/TextArea-base-visual-fullWidth-boolean-true-layout-string-vertical-1-chromium-linux.png differ
diff --git a/src/components/TextArea/__tests__/TextArea.spec.tsx-snapshots/TextArea-base-visual-helpText-string-validationText-string-1-chromium-linux.png b/src/components/TextArea/__tests__/TextArea.spec.tsx-snapshots/TextArea-base-visual-helpText-string-validationText-string-1-chromium-linux.png
new file mode 100644
index 000000000..4873e9045
Binary files /dev/null and b/src/components/TextArea/__tests__/TextArea.spec.tsx-snapshots/TextArea-base-visual-helpText-string-validationText-string-1-chromium-linux.png differ
diff --git a/src/components/TextArea/__tests__/TextArea.spec.tsx-snapshots/TextArea-base-visual-helpText-string-validationText-undefined-1-chromium-linux.png b/src/components/TextArea/__tests__/TextArea.spec.tsx-snapshots/TextArea-base-visual-helpText-string-validationText-undefined-1-chromium-linux.png
new file mode 100644
index 000000000..5ec04f42f
Binary files /dev/null and b/src/components/TextArea/__tests__/TextArea.spec.tsx-snapshots/TextArea-base-visual-helpText-string-validationText-undefined-1-chromium-linux.png differ
diff --git a/src/components/TextArea/__tests__/TextArea.spec.tsx-snapshots/TextArea-base-visual-helpText-undefined-validationText-string-1-chromium-linux.png b/src/components/TextArea/__tests__/TextArea.spec.tsx-snapshots/TextArea-base-visual-helpText-undefined-validationText-string-1-chromium-linux.png
new file mode 100644
index 000000000..1dd2b8cda
Binary files /dev/null and b/src/components/TextArea/__tests__/TextArea.spec.tsx-snapshots/TextArea-base-visual-helpText-undefined-validationText-string-1-chromium-linux.png differ
diff --git a/src/components/TextArea/__tests__/TextArea.spec.tsx-snapshots/TextArea-base-visual-isLabelVisible-boolean-false-1-chromium-linux.png b/src/components/TextArea/__tests__/TextArea.spec.tsx-snapshots/TextArea-base-visual-isLabelVisible-boolean-false-1-chromium-linux.png
new file mode 100644
index 000000000..71b5daa4b
Binary files /dev/null and b/src/components/TextArea/__tests__/TextArea.spec.tsx-snapshots/TextArea-base-visual-isLabelVisible-boolean-false-1-chromium-linux.png differ
diff --git a/src/components/TextArea/__tests__/TextArea.spec.tsx-snapshots/TextArea-base-visual-isLabelVisible-boolean-true-1-chromium-linux.png b/src/components/TextArea/__tests__/TextArea.spec.tsx-snapshots/TextArea-base-visual-isLabelVisible-boolean-true-1-chromium-linux.png
new file mode 100644
index 000000000..3263d8703
Binary files /dev/null and b/src/components/TextArea/__tests__/TextArea.spec.tsx-snapshots/TextArea-base-visual-isLabelVisible-boolean-true-1-chromium-linux.png differ
diff --git a/src/components/TextArea/__tests__/TextArea.spec.tsx-snapshots/TextArea-base-visual-label-node-normal-1-chromium-linux.png b/src/components/TextArea/__tests__/TextArea.spec.tsx-snapshots/TextArea-base-visual-label-node-normal-1-chromium-linux.png
new file mode 100644
index 000000000..3ab492a39
Binary files /dev/null and b/src/components/TextArea/__tests__/TextArea.spec.tsx-snapshots/TextArea-base-visual-label-node-normal-1-chromium-linux.png differ
diff --git a/src/components/TextArea/__tests__/TextArea.spec.tsx-snapshots/TextArea-base-visual-label-string-long-1-chromium-linux.png b/src/components/TextArea/__tests__/TextArea.spec.tsx-snapshots/TextArea-base-visual-label-string-long-1-chromium-linux.png
new file mode 100644
index 000000000..a3ac615ae
Binary files /dev/null and b/src/components/TextArea/__tests__/TextArea.spec.tsx-snapshots/TextArea-base-visual-label-string-long-1-chromium-linux.png differ
diff --git a/src/components/TextArea/__tests__/TextArea.spec.tsx-snapshots/TextArea-base-visual-required-boolean-false-1-chromium-linux.png b/src/components/TextArea/__tests__/TextArea.spec.tsx-snapshots/TextArea-base-visual-required-boolean-false-1-chromium-linux.png
new file mode 100644
index 000000000..3263d8703
Binary files /dev/null and b/src/components/TextArea/__tests__/TextArea.spec.tsx-snapshots/TextArea-base-visual-required-boolean-false-1-chromium-linux.png differ
diff --git a/src/components/TextArea/__tests__/TextArea.spec.tsx-snapshots/TextArea-base-visual-required-boolean-false-validationState-string-invalid-1-chromium-linux.png b/src/components/TextArea/__tests__/TextArea.spec.tsx-snapshots/TextArea-base-visual-required-boolean-false-validationState-string-invalid-1-chromium-linux.png
new file mode 100644
index 000000000..8130fe65e
Binary files /dev/null and b/src/components/TextArea/__tests__/TextArea.spec.tsx-snapshots/TextArea-base-visual-required-boolean-false-validationState-string-invalid-1-chromium-linux.png differ
diff --git a/src/components/TextArea/__tests__/TextArea.spec.tsx-snapshots/TextArea-base-visual-required-boolean-false-validationState-string-valid-1-chromium-linux.png b/src/components/TextArea/__tests__/TextArea.spec.tsx-snapshots/TextArea-base-visual-required-boolean-false-validationState-string-valid-1-chromium-linux.png
new file mode 100644
index 000000000..434252063
Binary files /dev/null and b/src/components/TextArea/__tests__/TextArea.spec.tsx-snapshots/TextArea-base-visual-required-boolean-false-validationState-string-valid-1-chromium-linux.png differ
diff --git a/src/components/TextArea/__tests__/TextArea.spec.tsx-snapshots/TextArea-base-visual-required-boolean-false-validationState-string-warning-1-chromium-linux.png b/src/components/TextArea/__tests__/TextArea.spec.tsx-snapshots/TextArea-base-visual-required-boolean-false-validationState-string-warning-1-chromium-linux.png
new file mode 100644
index 000000000..45b9f7ac0
Binary files /dev/null and b/src/components/TextArea/__tests__/TextArea.spec.tsx-snapshots/TextArea-base-visual-required-boolean-false-validationState-string-warning-1-chromium-linux.png differ
diff --git a/src/components/TextArea/__tests__/TextArea.spec.tsx-snapshots/TextArea-base-visual-required-boolean-false-validationState-undefined-1-chromium-linux.png b/src/components/TextArea/__tests__/TextArea.spec.tsx-snapshots/TextArea-base-visual-required-boolean-false-validationState-undefined-1-chromium-linux.png
new file mode 100644
index 000000000..3263d8703
Binary files /dev/null and b/src/components/TextArea/__tests__/TextArea.spec.tsx-snapshots/TextArea-base-visual-required-boolean-false-validationState-undefined-1-chromium-linux.png differ
diff --git a/src/components/TextArea/__tests__/TextArea.spec.tsx-snapshots/TextArea-base-visual-required-boolean-true-1-chromium-linux.png b/src/components/TextArea/__tests__/TextArea.spec.tsx-snapshots/TextArea-base-visual-required-boolean-true-1-chromium-linux.png
new file mode 100644
index 000000000..507777f25
Binary files /dev/null and b/src/components/TextArea/__tests__/TextArea.spec.tsx-snapshots/TextArea-base-visual-required-boolean-true-1-chromium-linux.png differ
diff --git a/src/components/TextArea/__tests__/TextArea.spec.tsx-snapshots/TextArea-base-visual-required-boolean-true-validationState-string-invalid-1-chromium-linux.png b/src/components/TextArea/__tests__/TextArea.spec.tsx-snapshots/TextArea-base-visual-required-boolean-true-validationState-string-invalid-1-chromium-linux.png
new file mode 100644
index 000000000..807ef3bdd
Binary files /dev/null and b/src/components/TextArea/__tests__/TextArea.spec.tsx-snapshots/TextArea-base-visual-required-boolean-true-validationState-string-invalid-1-chromium-linux.png differ
diff --git a/src/components/TextArea/__tests__/TextArea.spec.tsx-snapshots/TextArea-base-visual-required-boolean-true-validationState-string-valid-1-chromium-linux.png b/src/components/TextArea/__tests__/TextArea.spec.tsx-snapshots/TextArea-base-visual-required-boolean-true-validationState-string-valid-1-chromium-linux.png
new file mode 100644
index 000000000..ffe844710
Binary files /dev/null and b/src/components/TextArea/__tests__/TextArea.spec.tsx-snapshots/TextArea-base-visual-required-boolean-true-validationState-string-valid-1-chromium-linux.png differ
diff --git a/src/components/TextArea/__tests__/TextArea.spec.tsx-snapshots/TextArea-base-visual-required-boolean-true-validationState-string-warning-1-chromium-linux.png b/src/components/TextArea/__tests__/TextArea.spec.tsx-snapshots/TextArea-base-visual-required-boolean-true-validationState-string-warning-1-chromium-linux.png
new file mode 100644
index 000000000..3a2714f96
Binary files /dev/null and b/src/components/TextArea/__tests__/TextArea.spec.tsx-snapshots/TextArea-base-visual-required-boolean-true-validationState-string-warning-1-chromium-linux.png differ
diff --git a/src/components/TextArea/__tests__/TextArea.spec.tsx-snapshots/TextArea-base-visual-required-boolean-true-validationState-undefined-1-chromium-linux.png b/src/components/TextArea/__tests__/TextArea.spec.tsx-snapshots/TextArea-base-visual-required-boolean-true-validationState-undefined-1-chromium-linux.png
new file mode 100644
index 000000000..507777f25
Binary files /dev/null and b/src/components/TextArea/__tests__/TextArea.spec.tsx-snapshots/TextArea-base-visual-required-boolean-true-validationState-undefined-1-chromium-linux.png differ
diff --git a/src/components/TextArea/__tests__/TextArea.spec.tsx-snapshots/TextArea-base-visual-size-string-large-1-chromium-linux.png b/src/components/TextArea/__tests__/TextArea.spec.tsx-snapshots/TextArea-base-visual-size-string-large-1-chromium-linux.png
new file mode 100644
index 000000000..bd0f31cba
Binary files /dev/null and b/src/components/TextArea/__tests__/TextArea.spec.tsx-snapshots/TextArea-base-visual-size-string-large-1-chromium-linux.png differ
diff --git a/src/components/TextArea/__tests__/TextArea.spec.tsx-snapshots/TextArea-base-visual-size-string-medium-1-chromium-linux.png b/src/components/TextArea/__tests__/TextArea.spec.tsx-snapshots/TextArea-base-visual-size-string-medium-1-chromium-linux.png
new file mode 100644
index 000000000..3263d8703
Binary files /dev/null and b/src/components/TextArea/__tests__/TextArea.spec.tsx-snapshots/TextArea-base-visual-size-string-medium-1-chromium-linux.png differ
diff --git a/src/components/TextArea/__tests__/TextArea.spec.tsx-snapshots/TextArea-base-visual-size-string-small-1-chromium-linux.png b/src/components/TextArea/__tests__/TextArea.spec.tsx-snapshots/TextArea-base-visual-size-string-small-1-chromium-linux.png
new file mode 100644
index 000000000..9003d2f18
Binary files /dev/null and b/src/components/TextArea/__tests__/TextArea.spec.tsx-snapshots/TextArea-base-visual-size-string-small-1-chromium-linux.png differ
diff --git a/src/components/TextArea/__tests__/TextArea.spec.tsx-snapshots/TextArea-formLayout-visual-layout-string-horizontal-1-chromium-linux.png b/src/components/TextArea/__tests__/TextArea.spec.tsx-snapshots/TextArea-formLayout-visual-layout-string-horizontal-1-chromium-linux.png
new file mode 100644
index 000000000..a2bcdadf5
Binary files /dev/null and b/src/components/TextArea/__tests__/TextArea.spec.tsx-snapshots/TextArea-formLayout-visual-layout-string-horizontal-1-chromium-linux.png differ
diff --git a/src/components/TextArea/__tests__/TextArea.spec.tsx-snapshots/TextArea-formLayout-visual-layout-string-vertical-1-chromium-linux.png b/src/components/TextArea/__tests__/TextArea.spec.tsx-snapshots/TextArea-formLayout-visual-layout-string-vertical-1-chromium-linux.png
new file mode 100644
index 000000000..68438b986
Binary files /dev/null and b/src/components/TextArea/__tests__/TextArea.spec.tsx-snapshots/TextArea-formLayout-visual-layout-string-vertical-1-chromium-linux.png differ
diff --git a/src/components/TextArea/__tests__/TextArea.story.tsx b/src/components/TextArea/__tests__/TextArea.story.tsx
new file mode 100644
index 000000000..daab773e1
--- /dev/null
+++ b/src/components/TextArea/__tests__/TextArea.story.tsx
@@ -0,0 +1,71 @@
+import React, {
+  useEffect,
+  useMemo,
+  useRef,
+} from 'react';
+import type { TextareaHTMLAttributes } from 'react';
+import { FormLayoutContext } from '../../FormLayout';
+import { TextArea } from '..';
+
+// Types for story component will be improved when we have full TypeScript support
+type TextAreaForTestProps = TextareaHTMLAttributes<HTMLTextAreaElement>;
+type TextAreaForRefTestProps = TextAreaForTestProps & {
+  testRefAttrName: string;
+  testRefAttrValue: string;
+};
+export type TextAreaForFormLayoutTestsProps = TextAreaForTestProps & {
+  layout: 'vertical' | 'horizontal'
+};
+
+const defaultLabel = 'test-label';
+
+export const TextAreaForTest = ({
+  ...props
+} : TextAreaForTestProps) => (
+  <TextArea
+    label={defaultLabel}
+    {...props}
+  />
+);
+
+export const TextAreaForRefTest = ({
+  testRefAttrName,
+  testRefAttrValue,
+  ...props
+} : TextAreaForRefTestProps) => {
+  const ref = useRef<HTMLTextAreaElement>(undefined);
+
+  useEffect(() => {
+    ref.current?.setAttribute(testRefAttrName, testRefAttrValue);
+  }, [testRefAttrName, testRefAttrValue]);
+
+  return (
+    <TextArea
+      label={defaultLabel}
+      {...props}
+      ref={ref}
+    />
+  );
+};
+
+export const TextAreaForFormLayoutTests = ({
+  layout,
+  ...props
+}: TextAreaForFormLayoutTestsProps) => {
+  const values = useMemo(() => ({ layout }), [layout]);
+
+  return (
+    <FormLayoutContext.Provider
+      value={values}
+    >
+      <TextArea
+        label={defaultLabel}
+        {...props}
+      />
+      <TextArea
+        label="another-test-label"
+        {...props}
+      />
+    </FormLayoutContext.Provider>
+  );
+};
diff --git a/src/components/TextArea/__tests__/TextArea.test.jsx b/src/components/TextArea/__tests__/TextArea.test.jsx
deleted file mode 100644
index 701614612..000000000
--- a/src/components/TextArea/__tests__/TextArea.test.jsx
+++ /dev/null
@@ -1,83 +0,0 @@
-import React from 'react';
-import {
-  render,
-  screen,
-  within,
-} from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import { disabledPropTest } from '../../../../tests/jest/propTests/disabledPropTest';
-import { refPropTest } from '../../../../tests/jest/propTests/refPropTest';
-import { fullWidthPropTest } from '../../../../tests/jest/propTests/fullWidthPropTest';
-import { helpTextPropTest } from '../../../../tests/jest/propTests/helpTextPropTest';
-import { formLayoutProviderTest } from '../../../../tests/jest/providerTests/formLayoutProviderTest';
-import { isLabelVisibleTest } from '../../../../tests/jest/propTests/isLabelVisibleTest';
-import { labelPropTest } from '../../../../tests/jest/propTests/labelPropTest';
-import { layoutPropTest } from '../../../../tests/jest/propTests/layoutPropTest';
-import { requiredPropTest } from '../../../../tests/jest/propTests/requiredPropTest';
-import { sizePropTest } from '../../../../tests/jest/propTests/sizePropTest';
-import { validationStatePropTest } from '../../../../tests/jest/propTests/validationStatePropTest';
-import { validationTextPropTest } from '../../../../tests/jest/propTests/validationTextPropTest';
-import { variantPropTest } from '../../../../tests/jest/propTests/variantPropTest';
-import { TextArea } from '../TextArea';
-
-const mandatoryProps = {
-  label: 'label',
-};
-
-describe('rendering', () => {
-  formLayoutProviderTest(<TextArea {...mandatoryProps} />);
-
-  it.each([
-    ...disabledPropTest,
-    ...refPropTest(React.createRef()),
-    ...fullWidthPropTest,
-    ...helpTextPropTest,
-    [
-      {
-        helpText: 'help text',
-        id: 'id',
-        validationText: 'validation text',
-      },
-      (rootElement) => {
-        expect(rootElement).toHaveAttribute('id', 'id__label');
-        expect(within(rootElement).getByTestId('id'));
-        expect(within(rootElement).getByText('label')).toHaveAttribute('id', 'id__labelText');
-        expect(within(rootElement).getByText('help text')).toHaveAttribute('id', 'id__helpText');
-        expect(within(rootElement).getByText('validation text')).toHaveAttribute('id', 'id__validationText');
-      },
-    ],
-    ...isLabelVisibleTest(),
-    ...labelPropTest(),
-    ...layoutPropTest,
-    ...requiredPropTest,
-    ...sizePropTest,
-    ...validationStatePropTest,
-    ...validationTextPropTest,
-    ...variantPropTest,
-  ])('renders with props: "%s"', (testedProps, assert) => {
-    const dom = render((
-      <TextArea
-        {...mandatoryProps}
-        {...testedProps}
-      />
-    ));
-
-    assert(dom.container.firstChild);
-  });
-});
-
-describe('functionality', () => {
-  it('calls synthetic event onChange() on typing', async () => {
-    const spy = jest.fn();
-    render((
-      <TextArea
-        {...mandatoryProps}
-        onChange={spy}
-        value="content-value"
-      />
-    ));
-
-    await userEvent.type(screen.getByRole('textbox'), 'content-value');
-    expect(spy).toHaveBeenCalledTimes(13); // once per typed character
-  });
-});
diff --git a/src/components/TextField/__tests__/TextField.spec.tsx b/src/components/TextField/__tests__/TextField.spec.tsx
new file mode 100644
index 000000000..1bffdfda7
--- /dev/null
+++ b/src/components/TextField/__tests__/TextField.spec.tsx
@@ -0,0 +1,199 @@
+import React from 'react';
+import {
+  expect,
+  test,
+} from '@playwright/experimental-ct-react';
+import {
+  mixPropTests,
+  propTests,
+} from '../../../../tests/playwright';
+import {
+  TextFieldForTest,
+  TextFieldForRefTest,
+  TextFieldForFormLayoutTests,
+} from './TextField.story';
+import type { TextFieldForFormLayoutTestsProps } from './TextField.story';
+import { inputSizePropTest } from './_propTests/inputSizePropTest';
+import { typePropTest } from './_propTests/typePropTest';
+
+test.describe('TextField', () => {
+  test.describe('base', () => {
+    test.describe('visual', () => {
+      [
+        ...propTests.defaultComponentPropTest,
+        ...propTests.labelPropTest,
+        ...propTests.isLabelVisiblePropTest,
+        ...propTests.sizePropTest,
+        ...propTests.requiredPropTest,
+        ...propTests.helpTextAndValidationTextPropType,
+        ...inputSizePropTest,
+        ...typePropTest,
+        ...mixPropTests([
+          propTests.fullWidthPropTest,
+          propTests.layoutPropTest,
+        ]),
+        ...mixPropTests([
+          propTests.requiredPropTest,
+          propTests.validationStatePropTest,
+        ]),
+        ...mixPropTests([
+          propTests.renderAsRequiredPropTest,
+          propTests.validationStatePropTest,
+        ]),
+        ...mixPropTests([
+          propTests.disabledPropTest,
+          propTests.validationStatePropTest,
+          propTests.variantPropTest,
+        ]),
+      ].forEach(({
+        name,
+        onBeforeTest,
+        onBeforeSnapshot,
+        props,
+      }) => {
+        test(name, async ({
+          mount,
+          page,
+        }) => {
+          if (onBeforeTest) {
+            await onBeforeTest(page);
+          }
+
+          const component = await mount(
+            <TextFieldForTest
+              {...props}
+            />,
+          );
+
+          if (onBeforeSnapshot) {
+            await onBeforeSnapshot(page, component);
+          }
+
+          const screenshot = await component.screenshot();
+          expect(screenshot).toMatchSnapshot();
+        });
+      });
+    });
+
+    test.describe('non-visual', () => {
+      test('id', async ({ mount }) => {
+        const testId = 'testId';
+        const testLabel = 'testLabel';
+        const testHelpText = 'testHelpText';
+        const testValidationText = 'testValidationText';
+
+        const component = await mount(
+          <TextFieldForTest
+            helpText={testHelpText}
+            id={testId}
+            label={testLabel}
+            validationText={testValidationText}
+          />,
+        );
+
+        await expect(component).toHaveAttribute('id', `${testId}__label`);
+        await expect(component.getByText(testLabel)).toHaveAttribute('id', `${testId}__labelText`);
+        await expect(component.getByText(testHelpText)).toHaveAttribute('id', `${testId}__helpText`);
+        await expect(component.getByText(testValidationText)).toHaveAttribute('id', `${testId}__validationText`);
+        await expect(component.getByRole('textbox')).toHaveAttribute('id', testId);
+      });
+
+      test('inputSize styles applied', async ({ mount }) => {
+        const inputSize = 5;
+
+        const component = await mount(
+          <TextFieldForTest
+            inputSize={inputSize}
+          />,
+        );
+
+        await expect(component).toHaveCSS('--rui-custom-input-size', `${inputSize}`);
+      });
+
+      test.describe('pass type into input', () => {
+        [
+          'email',
+          'number',
+          'password',
+          'tel',
+          'text',
+        ].forEach((type) => {
+          test(`input type ${type} passed`, async ({ mount }) => {
+            const component = await mount(
+              <TextFieldForTest
+                type={type}
+              />,
+            );
+
+            await expect(component.locator('input')).toHaveAttribute('type', type);
+          });
+        });
+      });
+
+      test('ref', async ({ mount }) => {
+        const component = await mount(
+          <TextFieldForRefTest
+            testRefAttrName="test-ref"
+            testRefAttrValue="test-ref-value"
+            type="email"
+          />,
+        );
+
+        await expect(component.getByRole('textbox')).toHaveAttribute('test-ref', 'test-ref-value');
+      });
+    });
+
+    test.describe('functionality', () => {
+      test('calls synthetic event onChange() when typing into field', async ({ mount }) => {
+        let called = false;
+        const value = 'testvalue';
+
+        const component = await mount(
+          <TextFieldForTest
+            onChange={() => {
+              called = true;
+            }}
+          />,
+        );
+
+        await component.getByRole('textbox').pressSequentially(value);
+        expect(called).toBeTruthy();
+      });
+    });
+  });
+
+  test.describe('formLayout', () => {
+    test.describe('visual', () => {
+      [
+        ...propTests.layoutPropTest,
+      ].forEach(({
+        name,
+        onBeforeTest,
+        onBeforeSnapshot,
+        props,
+      }) => {
+        test(name, async ({
+          mount,
+          page,
+        }) => {
+          if (onBeforeTest) {
+            await onBeforeTest(page);
+          }
+
+          const component = await mount(
+            <TextFieldForFormLayoutTests
+              {...props as unknown as TextFieldForFormLayoutTestsProps}
+            />,
+          );
+
+          if (onBeforeSnapshot) {
+            await onBeforeSnapshot(page, component);
+          }
+
+          const screenshot = await component.screenshot();
+          expect(screenshot).toMatchSnapshot();
+        });
+      });
+    });
+  });
+});
diff --git a/src/components/TextField/__tests__/TextField.spec.tsx-snapshots/TextField-base-visual-defaultComponentProps-object-1-chromium-linux.png b/src/components/TextField/__tests__/TextField.spec.tsx-snapshots/TextField-base-visual-defaultComponentProps-object-1-chromium-linux.png
new file mode 100644
index 000000000..3cf4122fa
Binary files /dev/null and b/src/components/TextField/__tests__/TextField.spec.tsx-snapshots/TextField-base-visual-defaultComponentProps-object-1-chromium-linux.png differ
diff --git a/src/components/TextField/__tests__/TextField.spec.tsx-snapshots/TextField-base-visual-disabled-boolean-false--33c8d-State-string-invalid-variant-string-outline-1-chromium-linux.png b/src/components/TextField/__tests__/TextField.spec.tsx-snapshots/TextField-base-visual-disabled-boolean-false--33c8d-State-string-invalid-variant-string-outline-1-chromium-linux.png
new file mode 100644
index 000000000..aa517b83e
Binary files /dev/null and b/src/components/TextField/__tests__/TextField.spec.tsx-snapshots/TextField-base-visual-disabled-boolean-false--33c8d-State-string-invalid-variant-string-outline-1-chromium-linux.png differ
diff --git a/src/components/TextField/__tests__/TextField.spec.tsx-snapshots/TextField-base-visual-disabled-boolean-false--3efe7-nState-string-warning-variant-string-filled-1-chromium-linux.png b/src/components/TextField/__tests__/TextField.spec.tsx-snapshots/TextField-base-visual-disabled-boolean-false--3efe7-nState-string-warning-variant-string-filled-1-chromium-linux.png
new file mode 100644
index 000000000..53312dccb
Binary files /dev/null and b/src/components/TextField/__tests__/TextField.spec.tsx-snapshots/TextField-base-visual-disabled-boolean-false--3efe7-nState-string-warning-variant-string-filled-1-chromium-linux.png differ
diff --git a/src/components/TextField/__tests__/TextField.spec.tsx-snapshots/TextField-base-visual-disabled-boolean-false--58757-State-string-warning-variant-string-outline-1-chromium-linux.png b/src/components/TextField/__tests__/TextField.spec.tsx-snapshots/TextField-base-visual-disabled-boolean-false--58757-State-string-warning-variant-string-outline-1-chromium-linux.png
new file mode 100644
index 000000000..2e618c27a
Binary files /dev/null and b/src/components/TextField/__tests__/TextField.spec.tsx-snapshots/TextField-base-visual-disabled-boolean-false--58757-State-string-warning-variant-string-outline-1-chromium-linux.png differ
diff --git a/src/components/TextField/__tests__/TextField.spec.tsx-snapshots/TextField-base-visual-disabled-boolean-false--61bae-ionState-string-valid-variant-string-filled-1-chromium-linux.png b/src/components/TextField/__tests__/TextField.spec.tsx-snapshots/TextField-base-visual-disabled-boolean-false--61bae-ionState-string-valid-variant-string-filled-1-chromium-linux.png
new file mode 100644
index 000000000..351478ad7
Binary files /dev/null and b/src/components/TextField/__tests__/TextField.spec.tsx-snapshots/TextField-base-visual-disabled-boolean-false--61bae-ionState-string-valid-variant-string-filled-1-chromium-linux.png differ
diff --git a/src/components/TextField/__tests__/TextField.spec.tsx-snapshots/TextField-base-visual-disabled-boolean-false--aea3e-onState-string-valid-variant-string-outline-1-chromium-linux.png b/src/components/TextField/__tests__/TextField.spec.tsx-snapshots/TextField-base-visual-disabled-boolean-false--aea3e-onState-string-valid-variant-string-outline-1-chromium-linux.png
new file mode 100644
index 000000000..54ac2fc9a
Binary files /dev/null and b/src/components/TextField/__tests__/TextField.spec.tsx-snapshots/TextField-base-visual-disabled-boolean-false--aea3e-onState-string-valid-variant-string-outline-1-chromium-linux.png differ
diff --git a/src/components/TextField/__tests__/TextField.spec.tsx-snapshots/TextField-base-visual-disabled-boolean-false--e25aa-nState-string-invalid-variant-string-filled-1-chromium-linux.png b/src/components/TextField/__tests__/TextField.spec.tsx-snapshots/TextField-base-visual-disabled-boolean-false--e25aa-nState-string-invalid-variant-string-filled-1-chromium-linux.png
new file mode 100644
index 000000000..1280fcaf4
Binary files /dev/null and b/src/components/TextField/__tests__/TextField.spec.tsx-snapshots/TextField-base-visual-disabled-boolean-false--e25aa-nState-string-invalid-variant-string-filled-1-chromium-linux.png differ
diff --git a/src/components/TextField/__tests__/TextField.spec.tsx-snapshots/TextField-base-visual-disabled-boolean-false-validationState-undefined-variant-string-filled-1-chromium-linux.png b/src/components/TextField/__tests__/TextField.spec.tsx-snapshots/TextField-base-visual-disabled-boolean-false-validationState-undefined-variant-string-filled-1-chromium-linux.png
new file mode 100644
index 000000000..5f195ac36
Binary files /dev/null and b/src/components/TextField/__tests__/TextField.spec.tsx-snapshots/TextField-base-visual-disabled-boolean-false-validationState-undefined-variant-string-filled-1-chromium-linux.png differ
diff --git a/src/components/TextField/__tests__/TextField.spec.tsx-snapshots/TextField-base-visual-disabled-boolean-false-validationState-undefined-variant-string-outline-1-chromium-linux.png b/src/components/TextField/__tests__/TextField.spec.tsx-snapshots/TextField-base-visual-disabled-boolean-false-validationState-undefined-variant-string-outline-1-chromium-linux.png
new file mode 100644
index 000000000..3cf4122fa
Binary files /dev/null and b/src/components/TextField/__tests__/TextField.spec.tsx-snapshots/TextField-base-visual-disabled-boolean-false-validationState-undefined-variant-string-outline-1-chromium-linux.png differ
diff --git a/src/components/TextField/__tests__/TextField.spec.tsx-snapshots/TextField-base-visual-disabled-boolean-true--0671c-nState-string-invalid-variant-string-filled-1-chromium-linux.png b/src/components/TextField/__tests__/TextField.spec.tsx-snapshots/TextField-base-visual-disabled-boolean-true--0671c-nState-string-invalid-variant-string-filled-1-chromium-linux.png
new file mode 100644
index 000000000..d27b61530
Binary files /dev/null and b/src/components/TextField/__tests__/TextField.spec.tsx-snapshots/TextField-base-visual-disabled-boolean-true--0671c-nState-string-invalid-variant-string-filled-1-chromium-linux.png differ
diff --git a/src/components/TextField/__tests__/TextField.spec.tsx-snapshots/TextField-base-visual-disabled-boolean-true--4dc90-onState-string-valid-variant-string-outline-1-chromium-linux.png b/src/components/TextField/__tests__/TextField.spec.tsx-snapshots/TextField-base-visual-disabled-boolean-true--4dc90-onState-string-valid-variant-string-outline-1-chromium-linux.png
new file mode 100644
index 000000000..cc8c1596e
Binary files /dev/null and b/src/components/TextField/__tests__/TextField.spec.tsx-snapshots/TextField-base-visual-disabled-boolean-true--4dc90-onState-string-valid-variant-string-outline-1-chromium-linux.png differ
diff --git a/src/components/TextField/__tests__/TextField.spec.tsx-snapshots/TextField-base-visual-disabled-boolean-true--9171b-State-string-invalid-variant-string-outline-1-chromium-linux.png b/src/components/TextField/__tests__/TextField.spec.tsx-snapshots/TextField-base-visual-disabled-boolean-true--9171b-State-string-invalid-variant-string-outline-1-chromium-linux.png
new file mode 100644
index 000000000..0d2756173
Binary files /dev/null and b/src/components/TextField/__tests__/TextField.spec.tsx-snapshots/TextField-base-visual-disabled-boolean-true--9171b-State-string-invalid-variant-string-outline-1-chromium-linux.png differ
diff --git a/src/components/TextField/__tests__/TextField.spec.tsx-snapshots/TextField-base-visual-disabled-boolean-true--966a4-nState-string-warning-variant-string-filled-1-chromium-linux.png b/src/components/TextField/__tests__/TextField.spec.tsx-snapshots/TextField-base-visual-disabled-boolean-true--966a4-nState-string-warning-variant-string-filled-1-chromium-linux.png
new file mode 100644
index 000000000..86b471e66
Binary files /dev/null and b/src/components/TextField/__tests__/TextField.spec.tsx-snapshots/TextField-base-visual-disabled-boolean-true--966a4-nState-string-warning-variant-string-filled-1-chromium-linux.png differ
diff --git a/src/components/TextField/__tests__/TextField.spec.tsx-snapshots/TextField-base-visual-disabled-boolean-true--c4312-State-string-warning-variant-string-outline-1-chromium-linux.png b/src/components/TextField/__tests__/TextField.spec.tsx-snapshots/TextField-base-visual-disabled-boolean-true--c4312-State-string-warning-variant-string-outline-1-chromium-linux.png
new file mode 100644
index 000000000..504789116
Binary files /dev/null and b/src/components/TextField/__tests__/TextField.spec.tsx-snapshots/TextField-base-visual-disabled-boolean-true--c4312-State-string-warning-variant-string-outline-1-chromium-linux.png differ
diff --git a/src/components/TextField/__tests__/TextField.spec.tsx-snapshots/TextField-base-visual-disabled-boolean-true-validationState-string-valid-variant-string-filled-1-chromium-linux.png b/src/components/TextField/__tests__/TextField.spec.tsx-snapshots/TextField-base-visual-disabled-boolean-true-validationState-string-valid-variant-string-filled-1-chromium-linux.png
new file mode 100644
index 000000000..dfc5fe9d1
Binary files /dev/null and b/src/components/TextField/__tests__/TextField.spec.tsx-snapshots/TextField-base-visual-disabled-boolean-true-validationState-string-valid-variant-string-filled-1-chromium-linux.png differ
diff --git a/src/components/TextField/__tests__/TextField.spec.tsx-snapshots/TextField-base-visual-disabled-boolean-true-validationState-undefined-variant-string-filled-1-chromium-linux.png b/src/components/TextField/__tests__/TextField.spec.tsx-snapshots/TextField-base-visual-disabled-boolean-true-validationState-undefined-variant-string-filled-1-chromium-linux.png
new file mode 100644
index 000000000..5b0a94edc
Binary files /dev/null and b/src/components/TextField/__tests__/TextField.spec.tsx-snapshots/TextField-base-visual-disabled-boolean-true-validationState-undefined-variant-string-filled-1-chromium-linux.png differ
diff --git a/src/components/TextField/__tests__/TextField.spec.tsx-snapshots/TextField-base-visual-disabled-boolean-true-validationState-undefined-variant-string-outline-1-chromium-linux.png b/src/components/TextField/__tests__/TextField.spec.tsx-snapshots/TextField-base-visual-disabled-boolean-true-validationState-undefined-variant-string-outline-1-chromium-linux.png
new file mode 100644
index 000000000..eb3a039e2
Binary files /dev/null and b/src/components/TextField/__tests__/TextField.spec.tsx-snapshots/TextField-base-visual-disabled-boolean-true-validationState-undefined-variant-string-outline-1-chromium-linux.png differ
diff --git a/src/components/TextField/__tests__/TextField.spec.tsx-snapshots/TextField-base-visual-fullWidth-boolean-false-layout-string-horizontal-1-chromium-linux.png b/src/components/TextField/__tests__/TextField.spec.tsx-snapshots/TextField-base-visual-fullWidth-boolean-false-layout-string-horizontal-1-chromium-linux.png
new file mode 100644
index 000000000..6edbcf97e
Binary files /dev/null and b/src/components/TextField/__tests__/TextField.spec.tsx-snapshots/TextField-base-visual-fullWidth-boolean-false-layout-string-horizontal-1-chromium-linux.png differ
diff --git a/src/components/TextField/__tests__/TextField.spec.tsx-snapshots/TextField-base-visual-fullWidth-boolean-false-layout-string-vertical-1-chromium-linux.png b/src/components/TextField/__tests__/TextField.spec.tsx-snapshots/TextField-base-visual-fullWidth-boolean-false-layout-string-vertical-1-chromium-linux.png
new file mode 100644
index 000000000..3cf4122fa
Binary files /dev/null and b/src/components/TextField/__tests__/TextField.spec.tsx-snapshots/TextField-base-visual-fullWidth-boolean-false-layout-string-vertical-1-chromium-linux.png differ
diff --git a/src/components/TextField/__tests__/TextField.spec.tsx-snapshots/TextField-base-visual-fullWidth-boolean-true-layout-string-horizontal-1-chromium-linux.png b/src/components/TextField/__tests__/TextField.spec.tsx-snapshots/TextField-base-visual-fullWidth-boolean-true-layout-string-horizontal-1-chromium-linux.png
new file mode 100644
index 000000000..bd67df6a5
Binary files /dev/null and b/src/components/TextField/__tests__/TextField.spec.tsx-snapshots/TextField-base-visual-fullWidth-boolean-true-layout-string-horizontal-1-chromium-linux.png differ
diff --git a/src/components/TextField/__tests__/TextField.spec.tsx-snapshots/TextField-base-visual-fullWidth-boolean-true-layout-string-vertical-1-chromium-linux.png b/src/components/TextField/__tests__/TextField.spec.tsx-snapshots/TextField-base-visual-fullWidth-boolean-true-layout-string-vertical-1-chromium-linux.png
new file mode 100644
index 000000000..84b074979
Binary files /dev/null and b/src/components/TextField/__tests__/TextField.spec.tsx-snapshots/TextField-base-visual-fullWidth-boolean-true-layout-string-vertical-1-chromium-linux.png differ
diff --git a/src/components/TextField/__tests__/TextField.spec.tsx-snapshots/TextField-base-visual-helpText-string-validationText-string-1-chromium-linux.png b/src/components/TextField/__tests__/TextField.spec.tsx-snapshots/TextField-base-visual-helpText-string-validationText-string-1-chromium-linux.png
new file mode 100644
index 000000000..52aabaf92
Binary files /dev/null and b/src/components/TextField/__tests__/TextField.spec.tsx-snapshots/TextField-base-visual-helpText-string-validationText-string-1-chromium-linux.png differ
diff --git a/src/components/TextField/__tests__/TextField.spec.tsx-snapshots/TextField-base-visual-helpText-string-validationText-undefined-1-chromium-linux.png b/src/components/TextField/__tests__/TextField.spec.tsx-snapshots/TextField-base-visual-helpText-string-validationText-undefined-1-chromium-linux.png
new file mode 100644
index 000000000..5eca241b1
Binary files /dev/null and b/src/components/TextField/__tests__/TextField.spec.tsx-snapshots/TextField-base-visual-helpText-string-validationText-undefined-1-chromium-linux.png differ
diff --git a/src/components/TextField/__tests__/TextField.spec.tsx-snapshots/TextField-base-visual-helpText-undefined-validationText-string-1-chromium-linux.png b/src/components/TextField/__tests__/TextField.spec.tsx-snapshots/TextField-base-visual-helpText-undefined-validationText-string-1-chromium-linux.png
new file mode 100644
index 000000000..b70ae1a3e
Binary files /dev/null and b/src/components/TextField/__tests__/TextField.spec.tsx-snapshots/TextField-base-visual-helpText-undefined-validationText-string-1-chromium-linux.png differ
diff --git a/src/components/TextField/__tests__/TextField.spec.tsx-snapshots/TextField-base-visual-inputSize-number-12-1-chromium-linux.png b/src/components/TextField/__tests__/TextField.spec.tsx-snapshots/TextField-base-visual-inputSize-number-12-1-chromium-linux.png
new file mode 100644
index 000000000..970d9c89a
Binary files /dev/null and b/src/components/TextField/__tests__/TextField.spec.tsx-snapshots/TextField-base-visual-inputSize-number-12-1-chromium-linux.png differ
diff --git a/src/components/TextField/__tests__/TextField.spec.tsx-snapshots/TextField-base-visual-inputSize-number-24-1-chromium-linux.png b/src/components/TextField/__tests__/TextField.spec.tsx-snapshots/TextField-base-visual-inputSize-number-24-1-chromium-linux.png
new file mode 100644
index 000000000..e1e8abd82
Binary files /dev/null and b/src/components/TextField/__tests__/TextField.spec.tsx-snapshots/TextField-base-visual-inputSize-number-24-1-chromium-linux.png differ
diff --git a/src/components/TextField/__tests__/TextField.spec.tsx-snapshots/TextField-base-visual-inputSize-number-3-1-chromium-linux.png b/src/components/TextField/__tests__/TextField.spec.tsx-snapshots/TextField-base-visual-inputSize-number-3-1-chromium-linux.png
new file mode 100644
index 000000000..b35f02ac4
Binary files /dev/null and b/src/components/TextField/__tests__/TextField.spec.tsx-snapshots/TextField-base-visual-inputSize-number-3-1-chromium-linux.png differ
diff --git a/src/components/TextField/__tests__/TextField.spec.tsx-snapshots/TextField-base-visual-inputSize-number-6-1-chromium-linux.png b/src/components/TextField/__tests__/TextField.spec.tsx-snapshots/TextField-base-visual-inputSize-number-6-1-chromium-linux.png
new file mode 100644
index 000000000..c50b1fb3a
Binary files /dev/null and b/src/components/TextField/__tests__/TextField.spec.tsx-snapshots/TextField-base-visual-inputSize-number-6-1-chromium-linux.png differ
diff --git a/src/components/TextField/__tests__/TextField.spec.tsx-snapshots/TextField-base-visual-isLabelVisible-boolean-false-1-chromium-linux.png b/src/components/TextField/__tests__/TextField.spec.tsx-snapshots/TextField-base-visual-isLabelVisible-boolean-false-1-chromium-linux.png
new file mode 100644
index 000000000..7569b42b6
Binary files /dev/null and b/src/components/TextField/__tests__/TextField.spec.tsx-snapshots/TextField-base-visual-isLabelVisible-boolean-false-1-chromium-linux.png differ
diff --git a/src/components/TextField/__tests__/TextField.spec.tsx-snapshots/TextField-base-visual-isLabelVisible-boolean-true-1-chromium-linux.png b/src/components/TextField/__tests__/TextField.spec.tsx-snapshots/TextField-base-visual-isLabelVisible-boolean-true-1-chromium-linux.png
new file mode 100644
index 000000000..3cf4122fa
Binary files /dev/null and b/src/components/TextField/__tests__/TextField.spec.tsx-snapshots/TextField-base-visual-isLabelVisible-boolean-true-1-chromium-linux.png differ
diff --git a/src/components/TextField/__tests__/TextField.spec.tsx-snapshots/TextField-base-visual-label-node-normal-1-chromium-linux.png b/src/components/TextField/__tests__/TextField.spec.tsx-snapshots/TextField-base-visual-label-node-normal-1-chromium-linux.png
new file mode 100644
index 000000000..794b6e53d
Binary files /dev/null and b/src/components/TextField/__tests__/TextField.spec.tsx-snapshots/TextField-base-visual-label-node-normal-1-chromium-linux.png differ
diff --git a/src/components/TextField/__tests__/TextField.spec.tsx-snapshots/TextField-base-visual-label-string-long-1-chromium-linux.png b/src/components/TextField/__tests__/TextField.spec.tsx-snapshots/TextField-base-visual-label-string-long-1-chromium-linux.png
new file mode 100644
index 000000000..fba0551de
Binary files /dev/null and b/src/components/TextField/__tests__/TextField.spec.tsx-snapshots/TextField-base-visual-label-string-long-1-chromium-linux.png differ
diff --git a/src/components/TextField/__tests__/TextField.spec.tsx-snapshots/TextField-base-visual-renderAsRequired-boolean-false-validationState-string-invalid-1-chromium-linux.png b/src/components/TextField/__tests__/TextField.spec.tsx-snapshots/TextField-base-visual-renderAsRequired-boolean-false-validationState-string-invalid-1-chromium-linux.png
new file mode 100644
index 000000000..aa517b83e
Binary files /dev/null and b/src/components/TextField/__tests__/TextField.spec.tsx-snapshots/TextField-base-visual-renderAsRequired-boolean-false-validationState-string-invalid-1-chromium-linux.png differ
diff --git a/src/components/TextField/__tests__/TextField.spec.tsx-snapshots/TextField-base-visual-renderAsRequired-boolean-false-validationState-string-valid-1-chromium-linux.png b/src/components/TextField/__tests__/TextField.spec.tsx-snapshots/TextField-base-visual-renderAsRequired-boolean-false-validationState-string-valid-1-chromium-linux.png
new file mode 100644
index 000000000..54ac2fc9a
Binary files /dev/null and b/src/components/TextField/__tests__/TextField.spec.tsx-snapshots/TextField-base-visual-renderAsRequired-boolean-false-validationState-string-valid-1-chromium-linux.png differ
diff --git a/src/components/TextField/__tests__/TextField.spec.tsx-snapshots/TextField-base-visual-renderAsRequired-boolean-false-validationState-string-warning-1-chromium-linux.png b/src/components/TextField/__tests__/TextField.spec.tsx-snapshots/TextField-base-visual-renderAsRequired-boolean-false-validationState-string-warning-1-chromium-linux.png
new file mode 100644
index 000000000..2e618c27a
Binary files /dev/null and b/src/components/TextField/__tests__/TextField.spec.tsx-snapshots/TextField-base-visual-renderAsRequired-boolean-false-validationState-string-warning-1-chromium-linux.png differ
diff --git a/src/components/TextField/__tests__/TextField.spec.tsx-snapshots/TextField-base-visual-renderAsRequired-boolean-false-validationState-undefined-1-chromium-linux.png b/src/components/TextField/__tests__/TextField.spec.tsx-snapshots/TextField-base-visual-renderAsRequired-boolean-false-validationState-undefined-1-chromium-linux.png
new file mode 100644
index 000000000..3cf4122fa
Binary files /dev/null and b/src/components/TextField/__tests__/TextField.spec.tsx-snapshots/TextField-base-visual-renderAsRequired-boolean-false-validationState-undefined-1-chromium-linux.png differ
diff --git a/src/components/TextField/__tests__/TextField.spec.tsx-snapshots/TextField-base-visual-renderAsRequired-boolean-true-validationState-string-invalid-1-chromium-linux.png b/src/components/TextField/__tests__/TextField.spec.tsx-snapshots/TextField-base-visual-renderAsRequired-boolean-true-validationState-string-invalid-1-chromium-linux.png
new file mode 100644
index 000000000..aa517b83e
Binary files /dev/null and b/src/components/TextField/__tests__/TextField.spec.tsx-snapshots/TextField-base-visual-renderAsRequired-boolean-true-validationState-string-invalid-1-chromium-linux.png differ
diff --git a/src/components/TextField/__tests__/TextField.spec.tsx-snapshots/TextField-base-visual-renderAsRequired-boolean-true-validationState-string-valid-1-chromium-linux.png b/src/components/TextField/__tests__/TextField.spec.tsx-snapshots/TextField-base-visual-renderAsRequired-boolean-true-validationState-string-valid-1-chromium-linux.png
new file mode 100644
index 000000000..54ac2fc9a
Binary files /dev/null and b/src/components/TextField/__tests__/TextField.spec.tsx-snapshots/TextField-base-visual-renderAsRequired-boolean-true-validationState-string-valid-1-chromium-linux.png differ
diff --git a/src/components/TextField/__tests__/TextField.spec.tsx-snapshots/TextField-base-visual-renderAsRequired-boolean-true-validationState-string-warning-1-chromium-linux.png b/src/components/TextField/__tests__/TextField.spec.tsx-snapshots/TextField-base-visual-renderAsRequired-boolean-true-validationState-string-warning-1-chromium-linux.png
new file mode 100644
index 000000000..2e618c27a
Binary files /dev/null and b/src/components/TextField/__tests__/TextField.spec.tsx-snapshots/TextField-base-visual-renderAsRequired-boolean-true-validationState-string-warning-1-chromium-linux.png differ
diff --git a/src/components/TextField/__tests__/TextField.spec.tsx-snapshots/TextField-base-visual-renderAsRequired-boolean-true-validationState-undefined-1-chromium-linux.png b/src/components/TextField/__tests__/TextField.spec.tsx-snapshots/TextField-base-visual-renderAsRequired-boolean-true-validationState-undefined-1-chromium-linux.png
new file mode 100644
index 000000000..3cf4122fa
Binary files /dev/null and b/src/components/TextField/__tests__/TextField.spec.tsx-snapshots/TextField-base-visual-renderAsRequired-boolean-true-validationState-undefined-1-chromium-linux.png differ
diff --git a/src/components/TextField/__tests__/TextField.spec.tsx-snapshots/TextField-base-visual-required-boolean-false-1-chromium-linux.png b/src/components/TextField/__tests__/TextField.spec.tsx-snapshots/TextField-base-visual-required-boolean-false-1-chromium-linux.png
new file mode 100644
index 000000000..3cf4122fa
Binary files /dev/null and b/src/components/TextField/__tests__/TextField.spec.tsx-snapshots/TextField-base-visual-required-boolean-false-1-chromium-linux.png differ
diff --git a/src/components/TextField/__tests__/TextField.spec.tsx-snapshots/TextField-base-visual-required-boolean-false-validationState-string-invalid-1-chromium-linux.png b/src/components/TextField/__tests__/TextField.spec.tsx-snapshots/TextField-base-visual-required-boolean-false-validationState-string-invalid-1-chromium-linux.png
new file mode 100644
index 000000000..aa517b83e
Binary files /dev/null and b/src/components/TextField/__tests__/TextField.spec.tsx-snapshots/TextField-base-visual-required-boolean-false-validationState-string-invalid-1-chromium-linux.png differ
diff --git a/src/components/TextField/__tests__/TextField.spec.tsx-snapshots/TextField-base-visual-required-boolean-false-validationState-string-valid-1-chromium-linux.png b/src/components/TextField/__tests__/TextField.spec.tsx-snapshots/TextField-base-visual-required-boolean-false-validationState-string-valid-1-chromium-linux.png
new file mode 100644
index 000000000..54ac2fc9a
Binary files /dev/null and b/src/components/TextField/__tests__/TextField.spec.tsx-snapshots/TextField-base-visual-required-boolean-false-validationState-string-valid-1-chromium-linux.png differ
diff --git a/src/components/TextField/__tests__/TextField.spec.tsx-snapshots/TextField-base-visual-required-boolean-false-validationState-string-warning-1-chromium-linux.png b/src/components/TextField/__tests__/TextField.spec.tsx-snapshots/TextField-base-visual-required-boolean-false-validationState-string-warning-1-chromium-linux.png
new file mode 100644
index 000000000..2e618c27a
Binary files /dev/null and b/src/components/TextField/__tests__/TextField.spec.tsx-snapshots/TextField-base-visual-required-boolean-false-validationState-string-warning-1-chromium-linux.png differ
diff --git a/src/components/TextField/__tests__/TextField.spec.tsx-snapshots/TextField-base-visual-required-boolean-false-validationState-undefined-1-chromium-linux.png b/src/components/TextField/__tests__/TextField.spec.tsx-snapshots/TextField-base-visual-required-boolean-false-validationState-undefined-1-chromium-linux.png
new file mode 100644
index 000000000..3cf4122fa
Binary files /dev/null and b/src/components/TextField/__tests__/TextField.spec.tsx-snapshots/TextField-base-visual-required-boolean-false-validationState-undefined-1-chromium-linux.png differ
diff --git a/src/components/TextField/__tests__/TextField.spec.tsx-snapshots/TextField-base-visual-required-boolean-true-1-chromium-linux.png b/src/components/TextField/__tests__/TextField.spec.tsx-snapshots/TextField-base-visual-required-boolean-true-1-chromium-linux.png
new file mode 100644
index 000000000..4cd5e3e3a
Binary files /dev/null and b/src/components/TextField/__tests__/TextField.spec.tsx-snapshots/TextField-base-visual-required-boolean-true-1-chromium-linux.png differ
diff --git a/src/components/TextField/__tests__/TextField.spec.tsx-snapshots/TextField-base-visual-required-boolean-true-validationState-string-invalid-1-chromium-linux.png b/src/components/TextField/__tests__/TextField.spec.tsx-snapshots/TextField-base-visual-required-boolean-true-validationState-string-invalid-1-chromium-linux.png
new file mode 100644
index 000000000..4090970e2
Binary files /dev/null and b/src/components/TextField/__tests__/TextField.spec.tsx-snapshots/TextField-base-visual-required-boolean-true-validationState-string-invalid-1-chromium-linux.png differ
diff --git a/src/components/TextField/__tests__/TextField.spec.tsx-snapshots/TextField-base-visual-required-boolean-true-validationState-string-valid-1-chromium-linux.png b/src/components/TextField/__tests__/TextField.spec.tsx-snapshots/TextField-base-visual-required-boolean-true-validationState-string-valid-1-chromium-linux.png
new file mode 100644
index 000000000..6d033624f
Binary files /dev/null and b/src/components/TextField/__tests__/TextField.spec.tsx-snapshots/TextField-base-visual-required-boolean-true-validationState-string-valid-1-chromium-linux.png differ
diff --git a/src/components/TextField/__tests__/TextField.spec.tsx-snapshots/TextField-base-visual-required-boolean-true-validationState-string-warning-1-chromium-linux.png b/src/components/TextField/__tests__/TextField.spec.tsx-snapshots/TextField-base-visual-required-boolean-true-validationState-string-warning-1-chromium-linux.png
new file mode 100644
index 000000000..2b4fdf970
Binary files /dev/null and b/src/components/TextField/__tests__/TextField.spec.tsx-snapshots/TextField-base-visual-required-boolean-true-validationState-string-warning-1-chromium-linux.png differ
diff --git a/src/components/TextField/__tests__/TextField.spec.tsx-snapshots/TextField-base-visual-required-boolean-true-validationState-undefined-1-chromium-linux.png b/src/components/TextField/__tests__/TextField.spec.tsx-snapshots/TextField-base-visual-required-boolean-true-validationState-undefined-1-chromium-linux.png
new file mode 100644
index 000000000..4cd5e3e3a
Binary files /dev/null and b/src/components/TextField/__tests__/TextField.spec.tsx-snapshots/TextField-base-visual-required-boolean-true-validationState-undefined-1-chromium-linux.png differ
diff --git a/src/components/TextField/__tests__/TextField.spec.tsx-snapshots/TextField-base-visual-size-string-large-1-chromium-linux.png b/src/components/TextField/__tests__/TextField.spec.tsx-snapshots/TextField-base-visual-size-string-large-1-chromium-linux.png
new file mode 100644
index 000000000..5ef036bdc
Binary files /dev/null and b/src/components/TextField/__tests__/TextField.spec.tsx-snapshots/TextField-base-visual-size-string-large-1-chromium-linux.png differ
diff --git a/src/components/TextField/__tests__/TextField.spec.tsx-snapshots/TextField-base-visual-size-string-medium-1-chromium-linux.png b/src/components/TextField/__tests__/TextField.spec.tsx-snapshots/TextField-base-visual-size-string-medium-1-chromium-linux.png
new file mode 100644
index 000000000..3cf4122fa
Binary files /dev/null and b/src/components/TextField/__tests__/TextField.spec.tsx-snapshots/TextField-base-visual-size-string-medium-1-chromium-linux.png differ
diff --git a/src/components/TextField/__tests__/TextField.spec.tsx-snapshots/TextField-base-visual-size-string-small-1-chromium-linux.png b/src/components/TextField/__tests__/TextField.spec.tsx-snapshots/TextField-base-visual-size-string-small-1-chromium-linux.png
new file mode 100644
index 000000000..f86ce9eb6
Binary files /dev/null and b/src/components/TextField/__tests__/TextField.spec.tsx-snapshots/TextField-base-visual-size-string-small-1-chromium-linux.png differ
diff --git a/src/components/TextField/__tests__/TextField.spec.tsx-snapshots/TextField-base-visual-type-string-email-1-chromium-linux.png b/src/components/TextField/__tests__/TextField.spec.tsx-snapshots/TextField-base-visual-type-string-email-1-chromium-linux.png
new file mode 100644
index 000000000..a4da659e9
Binary files /dev/null and b/src/components/TextField/__tests__/TextField.spec.tsx-snapshots/TextField-base-visual-type-string-email-1-chromium-linux.png differ
diff --git a/src/components/TextField/__tests__/TextField.spec.tsx-snapshots/TextField-base-visual-type-string-number-1-chromium-linux.png b/src/components/TextField/__tests__/TextField.spec.tsx-snapshots/TextField-base-visual-type-string-number-1-chromium-linux.png
new file mode 100644
index 000000000..f3faaa17d
Binary files /dev/null and b/src/components/TextField/__tests__/TextField.spec.tsx-snapshots/TextField-base-visual-type-string-number-1-chromium-linux.png differ
diff --git a/src/components/TextField/__tests__/TextField.spec.tsx-snapshots/TextField-base-visual-type-string-password-1-chromium-linux.png b/src/components/TextField/__tests__/TextField.spec.tsx-snapshots/TextField-base-visual-type-string-password-1-chromium-linux.png
new file mode 100644
index 000000000..5e1285b66
Binary files /dev/null and b/src/components/TextField/__tests__/TextField.spec.tsx-snapshots/TextField-base-visual-type-string-password-1-chromium-linux.png differ
diff --git a/src/components/TextField/__tests__/TextField.spec.tsx-snapshots/TextField-base-visual-type-string-tel-1-chromium-linux.png b/src/components/TextField/__tests__/TextField.spec.tsx-snapshots/TextField-base-visual-type-string-tel-1-chromium-linux.png
new file mode 100644
index 000000000..6c8adb84f
Binary files /dev/null and b/src/components/TextField/__tests__/TextField.spec.tsx-snapshots/TextField-base-visual-type-string-tel-1-chromium-linux.png differ
diff --git a/src/components/TextField/__tests__/TextField.spec.tsx-snapshots/TextField-base-visual-type-string-text-1-chromium-linux.png b/src/components/TextField/__tests__/TextField.spec.tsx-snapshots/TextField-base-visual-type-string-text-1-chromium-linux.png
new file mode 100644
index 000000000..36e809b91
Binary files /dev/null and b/src/components/TextField/__tests__/TextField.spec.tsx-snapshots/TextField-base-visual-type-string-text-1-chromium-linux.png differ
diff --git a/src/components/TextField/__tests__/TextField.spec.tsx-snapshots/TextField-formLayout-visual-layout-string-horizontal-1-chromium-linux.png b/src/components/TextField/__tests__/TextField.spec.tsx-snapshots/TextField-formLayout-visual-layout-string-horizontal-1-chromium-linux.png
new file mode 100644
index 000000000..baa3857a3
Binary files /dev/null and b/src/components/TextField/__tests__/TextField.spec.tsx-snapshots/TextField-formLayout-visual-layout-string-horizontal-1-chromium-linux.png differ
diff --git a/src/components/TextField/__tests__/TextField.spec.tsx-snapshots/TextField-formLayout-visual-layout-string-vertical-1-chromium-linux.png b/src/components/TextField/__tests__/TextField.spec.tsx-snapshots/TextField-formLayout-visual-layout-string-vertical-1-chromium-linux.png
new file mode 100644
index 000000000..453983fe0
Binary files /dev/null and b/src/components/TextField/__tests__/TextField.spec.tsx-snapshots/TextField-formLayout-visual-layout-string-vertical-1-chromium-linux.png differ
diff --git a/src/components/TextField/__tests__/TextField.story.tsx b/src/components/TextField/__tests__/TextField.story.tsx
new file mode 100644
index 000000000..d024862e7
--- /dev/null
+++ b/src/components/TextField/__tests__/TextField.story.tsx
@@ -0,0 +1,71 @@
+import React, {
+  useEffect,
+  useMemo,
+  useRef,
+} from 'react';
+import type { InputHTMLAttributes } from 'react';
+import { FormLayoutContext } from '../../FormLayout';
+import { TextField } from '..';
+
+// Types for story component will be improved when we have full TypeScript support
+type TextFieldForTestProps = InputHTMLAttributes<HTMLInputElement>;
+type TextFieldForRefTestProps = TextFieldForTestProps & {
+  testRefAttrName: string;
+  testRefAttrValue: string;
+};
+export type TextFieldForFormLayoutTestsProps = TextFieldForTestProps & {
+  layout: 'vertical' | 'horizontal'
+};
+
+const defaultLabel = 'test-label';
+
+export const TextFieldForTest = ({
+  ...props
+} : TextFieldForTestProps) => (
+  <TextField
+    label={defaultLabel}
+    {...props}
+  />
+);
+
+export const TextFieldForRefTest = ({
+  testRefAttrName,
+  testRefAttrValue,
+  ...props
+} : TextFieldForRefTestProps) => {
+  const ref = useRef<HTMLInputElement>(undefined);
+
+  useEffect(() => {
+    ref.current?.setAttribute(testRefAttrName, testRefAttrValue);
+  }, [testRefAttrName, testRefAttrValue]);
+
+  return (
+    <TextField
+      label={defaultLabel}
+      {...props}
+      ref={ref}
+    />
+  );
+};
+
+export const TextFieldForFormLayoutTests = ({
+  layout,
+  ...props
+}: TextFieldForFormLayoutTestsProps) => {
+  const values = useMemo(() => ({ layout }), [layout]);
+
+  return (
+    <FormLayoutContext.Provider
+      value={values}
+    >
+      <TextField
+        label={defaultLabel}
+        {...props}
+      />
+      <TextField
+        label="another-test-label"
+        {...props}
+      />
+    </FormLayoutContext.Provider>
+  );
+};
diff --git a/src/components/TextField/__tests__/TextField.test.jsx b/src/components/TextField/__tests__/TextField.test.jsx
deleted file mode 100644
index 16265c62b..000000000
--- a/src/components/TextField/__tests__/TextField.test.jsx
+++ /dev/null
@@ -1,121 +0,0 @@
-import React from 'react';
-import {
-  render,
-  screen,
-  within,
-} from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import { TextField } from '../TextField';
-import { disabledPropTest } from '../../../../tests/jest/propTests/disabledPropTest';
-import { refPropTest } from '../../../../tests/jest/propTests/refPropTest';
-import { fullWidthPropTest } from '../../../../tests/jest/propTests/fullWidthPropTest';
-import { helpTextPropTest } from '../../../../tests/jest/propTests/helpTextPropTest';
-import { formLayoutProviderTest } from '../../../../tests/jest/providerTests/formLayoutProviderTest';
-import { isLabelVisibleTest } from '../../../../tests/jest/propTests/isLabelVisibleTest';
-import { labelPropTest } from '../../../../tests/jest/propTests/labelPropTest';
-import { layoutPropTest } from '../../../../tests/jest/propTests/layoutPropTest';
-import { requiredPropTest } from '../../../../tests/jest/propTests/requiredPropTest';
-import { sizePropTest } from '../../../../tests/jest/propTests/sizePropTest';
-import { validationStatePropTest } from '../../../../tests/jest/propTests/validationStatePropTest';
-import { validationTextPropTest } from '../../../../tests/jest/propTests/validationTextPropTest';
-import { variantPropTest } from '../../../../tests/jest/propTests/variantPropTest';
-
-const mandatoryProps = {
-  label: 'label',
-};
-
-describe('rendering', () => {
-  formLayoutProviderTest(<TextField {...mandatoryProps} />);
-
-  it.each([
-    ...disabledPropTest,
-    ...refPropTest(React.createRef()),
-    ...fullWidthPropTest,
-    ...helpTextPropTest,
-    [
-      {
-        helpText: 'help text',
-        id: 'id',
-        validationText: 'validation text',
-      },
-      (rootElement) => {
-        expect(rootElement).toHaveAttribute('id', 'id__label');
-        expect(within(rootElement).getByTestId('id'));
-        expect(within(rootElement).getByText('label')).toHaveAttribute('id', 'id__labelText');
-        expect(within(rootElement).getByText('help text')).toHaveAttribute('id', 'id__helpText');
-        expect(within(rootElement).getByText('validation text')).toHaveAttribute('id', 'id__validationText');
-      },
-    ],
-    [
-      { inputSize: 3 },
-      (rootElement) => {
-        expect(within(rootElement).getByRole('textbox')).toHaveAttribute('size', '3');
-        expect(rootElement).toHaveStyle('--rui-custom-input-size: 3');
-      },
-    ],
-    [
-      {
-        inputSize: 3,
-        type: 'number',
-      },
-      (rootElement) => {
-        expect(within(rootElement).getByLabelText('label')).not.toHaveAttribute('size');
-        expect(rootElement).toHaveClass('hasRootCustomInputSize');
-        expect(rootElement).toHaveStyle('--rui-custom-input-size: 3');
-      },
-    ],
-    ...isLabelVisibleTest(),
-    ...labelPropTest(),
-    ...layoutPropTest,
-    ...requiredPropTest,
-    ...sizePropTest,
-    [
-      { type: 'email' },
-      (rootElement) => expect(within(rootElement).getByRole('textbox')).toHaveAttribute('type', 'email'),
-    ],
-    [
-      { type: 'number' },
-      (rootElement) => expect(within(rootElement).getByLabelText('label')).toHaveAttribute('type', 'number'),
-    ],
-    [
-      { type: 'password' },
-      (rootElement) => expect(within(rootElement).getByLabelText('label')).toHaveAttribute('type', 'password'),
-    ],
-    [
-      { type: 'tel' },
-      (rootElement) => expect(within(rootElement).getByRole('textbox')).toHaveAttribute('type', 'tel'),
-    ],
-    [
-      { type: 'text' },
-      (rootElement) => expect(within(rootElement).getByRole('textbox')).toHaveAttribute('type', 'text'),
-    ],
-    ...validationStatePropTest,
-    ...validationTextPropTest,
-    ...variantPropTest,
-  ])('renders with props: "%s"', (testedProps, assert) => {
-    const dom = render((
-      <TextField
-        {...mandatoryProps}
-        {...testedProps}
-      />
-    ));
-
-    assert(dom.container.firstChild);
-  });
-});
-
-describe('functionality', () => {
-  it('calls synthetic event onChange() on changing selected option', async () => {
-    const spy = jest.fn();
-    render((
-      <TextField
-        {...mandatoryProps}
-        onChange={spy}
-        value="content-value"
-      />
-    ));
-
-    await userEvent.type(screen.getByRole('textbox'), 'content-value');
-    expect(spy).toHaveBeenCalledTimes(13); // once per typed character
-  });
-});
diff --git a/src/components/TextField/__tests__/_propTests/inputSizePropTest.ts b/src/components/TextField/__tests__/_propTests/inputSizePropTest.ts
new file mode 100644
index 000000000..651ee6d44
--- /dev/null
+++ b/src/components/TextField/__tests__/_propTests/inputSizePropTest.ts
@@ -0,0 +1,20 @@
+import type { PropTests } from '../../../../../tests/playwright/types';
+
+export const inputSizePropTest: PropTests = [
+  {
+    name: 'inputSize:number=3',
+    props: { inputSize: 3 },
+  },
+  {
+    name: 'inputSize:number=6',
+    props: { inputSize: 6 },
+  },
+  {
+    name: 'inputSize:number=12',
+    props: { inputSize: 12 },
+  },
+  {
+    name: 'inputSize:number=24',
+    props: { inputSize: 24 },
+  },
+];
diff --git a/src/components/TextField/__tests__/_propTests/typePropTest.ts b/src/components/TextField/__tests__/_propTests/typePropTest.ts
new file mode 100644
index 000000000..a2fe3fa60
--- /dev/null
+++ b/src/components/TextField/__tests__/_propTests/typePropTest.ts
@@ -0,0 +1,39 @@
+import type { PropTests } from '../../../../../tests/playwright/types';
+
+export const typePropTest: PropTests = [
+  {
+    name: 'type:string=email',
+    props: {
+      type: 'email',
+      value: 'email@domain.com',
+    },
+  },
+  {
+    name: 'type:string=number',
+    props: {
+      type: 'number',
+      value: '1234',
+    },
+  },
+  {
+    name: 'type:string=password',
+    props: {
+      type: 'password',
+      value: 'password',
+    },
+  },
+  {
+    name: 'type:string=tel',
+    props: {
+      type: 'tel',
+      value: '123456789',
+    },
+  },
+  {
+    name: 'type:string=text',
+    props: {
+      type: 'text',
+      value: 'test text value',
+    },
+  },
+];
diff --git a/src/components/TextLink/__tests__/TextLink.spec.tsx b/src/components/TextLink/__tests__/TextLink.spec.tsx
index 74ebb9338..205595147 100644
--- a/src/components/TextLink/__tests__/TextLink.spec.tsx
+++ b/src/components/TextLink/__tests__/TextLink.spec.tsx
@@ -15,6 +15,7 @@ test.describe('TextLink', () => {
     ].forEach(({
       name,
       onBeforeTest,
+      onBeforeSnapshot,
       props,
     }) => {
       test(name, async ({
@@ -31,6 +32,10 @@ test.describe('TextLink', () => {
           />,
         );
 
+        if (onBeforeSnapshot) {
+          await onBeforeSnapshot(page, component);
+        }
+
         const screenshot = await component.screenshot();
         expect(screenshot).toMatchSnapshot();
       });
diff --git a/src/components/TextLink/__tests__/TextLink.spec.tsx-snapshots/TextLink-visual-label-node-normal-1-chromium-linux.png b/src/components/TextLink/__tests__/TextLink.spec.tsx-snapshots/TextLink-visual-label-node-normal-1-chromium-linux.png
new file mode 100644
index 000000000..9c4a92bc8
Binary files /dev/null and b/src/components/TextLink/__tests__/TextLink.spec.tsx-snapshots/TextLink-visual-label-node-normal-1-chromium-linux.png differ
diff --git a/src/components/TextLink/__tests__/TextLink.spec.tsx-snapshots/TextLink-visual-label-1-chromium-linux.png b/src/components/TextLink/__tests__/TextLink.spec.tsx-snapshots/TextLink-visual-label-string-long-1-chromium-linux.png
similarity index 100%
rename from src/components/TextLink/__tests__/TextLink.spec.tsx-snapshots/TextLink-visual-label-1-chromium-linux.png
rename to src/components/TextLink/__tests__/TextLink.spec.tsx-snapshots/TextLink-visual-label-string-long-1-chromium-linux.png
diff --git a/src/components/Toggle/__tests__/Toggle.spec.tsx b/src/components/Toggle/__tests__/Toggle.spec.tsx
new file mode 100644
index 000000000..8ba3a87a9
--- /dev/null
+++ b/src/components/Toggle/__tests__/Toggle.spec.tsx
@@ -0,0 +1,177 @@
+import React from 'react';
+import {
+  expect,
+  test,
+} from '@playwright/experimental-ct-react';
+import {
+  mixPropTests,
+  propTests,
+} from '../../../../tests/playwright';
+import {
+  ToggleForTest,
+  ToggleForRefTest,
+  ToggleForFormLayoutTests,
+} from './Toggle.story';
+import type { ToggleForFormLayoutTestsProps } from './Toggle.story';
+
+test.describe('Toggle', () => {
+  test.describe('base', () => {
+    test.describe('visual', () => {
+      [
+        ...propTests.defaultComponentPropTest,
+        ...propTests.helpTextAndValidationTextPropType,
+        ...propTests.isLabelVisiblePropTest,
+        ...propTests.labelPositionPropTest,
+        ...propTests.labelPropTest,
+        ...propTests.renderAsRequiredPropTest,
+        ...propTests.requiredPropTest,
+        ...mixPropTests([
+          propTests.checkedPropTest,
+          propTests.requiredPropTest,
+          propTests.validationStatePropTest,
+        ]),
+        ...mixPropTests([
+          propTests.checkedPropTest,
+          propTests.renderAsRequiredPropTest,
+          propTests.validationStatePropTest,
+        ]),
+        ...mixPropTests([
+          propTests.disabledPropTest,
+          propTests.checkedPropTest,
+          propTests.validationStatePropTest,
+        ]),
+      ].forEach(({
+        name,
+        onBeforeTest,
+        onBeforeSnapshot,
+        props,
+      }) => {
+        test(name, async ({
+          mount,
+          page,
+        }) => {
+          if (onBeforeTest) {
+            await onBeforeTest(page);
+          }
+
+          const component = await mount(
+            <ToggleForTest
+              {...props}
+            />,
+          );
+
+          if (onBeforeSnapshot) {
+            await onBeforeSnapshot(page, component);
+          }
+
+          const screenshot = await component.screenshot();
+          expect(screenshot).toMatchSnapshot();
+        });
+      });
+    });
+
+    test.describe('non-visual', () => {
+      test('id', async ({ mount }) => {
+        const testId = 'testId';
+        const testLabel = 'testLabel';
+        const testHelpText = 'testHelpText';
+        const testValidationText = 'testValidationText';
+
+        const component = await mount(
+          <ToggleForTest
+            helpText={testHelpText}
+            id={testId}
+            label={testLabel}
+            validationText={testValidationText}
+          />,
+        );
+
+        await expect(component).toHaveAttribute('id', `${testId}__label`);
+        await expect(component.getByText(testLabel)).toHaveAttribute('id', `${testId}__labelText`);
+        await expect(component.getByText(testHelpText)).toHaveAttribute('id', `${testId}__helpText`);
+        await expect(component.getByText(testValidationText)).toHaveAttribute('id', `${testId}__validationText`);
+        await expect(component.getByRole('checkbox')).toHaveAttribute('id', testId);
+      });
+
+      test('ref', async ({ mount }) => {
+        const component = await mount(
+          <ToggleForRefTest
+            testRefAttrName="test-ref"
+            testRefAttrValue="test-ref-value"
+          />,
+        );
+
+        await expect(component.getByRole('checkbox')).toHaveAttribute('test-ref', 'test-ref-value');
+      });
+    });
+
+    test.describe('functionality', () => {
+      test('calls synthetic event onChange() on toggling', async ({ mount }) => {
+        let called = false;
+
+        const component = await mount(
+          <ToggleForTest
+            onChange={() => {
+              called = true;
+            }}
+          />,
+        );
+
+        await component.getByRole('checkbox').click({ force: true });
+        expect(called).toBeTruthy();
+      });
+
+      test('toggle on space press', async ({ mount }) => {
+        let called = false;
+
+        const component = await mount(
+          <ToggleForTest
+            onChange={() => {
+              called = true;
+            }}
+          />,
+        );
+
+        const input = component.getByRole('checkbox');
+        await input.focus();
+        await input.press('Space');
+        expect(called).toBeTruthy();
+      });
+    });
+  });
+
+  test.describe('formLayout', () => {
+    test.describe('visual', () => {
+      [
+        ...propTests.layoutPropTest,
+      ].forEach(({
+        name,
+        onBeforeTest,
+        onBeforeSnapshot,
+        props,
+      }) => {
+        test(name, async ({
+          mount,
+          page,
+        }) => {
+          if (onBeforeTest) {
+            await onBeforeTest(page);
+          }
+
+          const component = await mount(
+            <ToggleForFormLayoutTests
+              {...props as unknown as ToggleForFormLayoutTestsProps}
+            />,
+          );
+
+          if (onBeforeSnapshot) {
+            await onBeforeSnapshot(page, component);
+          }
+
+          const screenshot = await component.screenshot();
+          expect(screenshot).toMatchSnapshot();
+        });
+      });
+    });
+  });
+});
diff --git a/src/components/Toggle/__tests__/Toggle.spec.tsx-snapshots/Toggle-base-visual-checked-boolean-false-ren-5a171-ired-boolean-true-validationState-undefined-1-chromium-linux.png b/src/components/Toggle/__tests__/Toggle.spec.tsx-snapshots/Toggle-base-visual-checked-boolean-false-ren-5a171-ired-boolean-true-validationState-undefined-1-chromium-linux.png
new file mode 100644
index 000000000..ec88eff55
Binary files /dev/null and b/src/components/Toggle/__tests__/Toggle.spec.tsx-snapshots/Toggle-base-visual-checked-boolean-false-ren-5a171-ired-boolean-true-validationState-undefined-1-chromium-linux.png differ
diff --git a/src/components/Toggle/__tests__/Toggle.spec.tsx-snapshots/Toggle-base-visual-checked-boolean-false-ren-6382f-red-boolean-false-validationState-undefined-1-chromium-linux.png b/src/components/Toggle/__tests__/Toggle.spec.tsx-snapshots/Toggle-base-visual-checked-boolean-false-ren-6382f-red-boolean-false-validationState-undefined-1-chromium-linux.png
new file mode 100644
index 000000000..e2cbb96ba
Binary files /dev/null and b/src/components/Toggle/__tests__/Toggle.spec.tsx-snapshots/Toggle-base-visual-checked-boolean-false-ren-6382f-red-boolean-false-validationState-undefined-1-chromium-linux.png differ
diff --git a/src/components/Toggle/__tests__/Toggle.spec.tsx-snapshots/Toggle-base-visual-checked-boolean-false-ren-68622-oolean-false-validationState-string-invalid-1-chromium-linux.png b/src/components/Toggle/__tests__/Toggle.spec.tsx-snapshots/Toggle-base-visual-checked-boolean-false-ren-68622-oolean-false-validationState-string-invalid-1-chromium-linux.png
new file mode 100644
index 000000000..aac0952b2
Binary files /dev/null and b/src/components/Toggle/__tests__/Toggle.spec.tsx-snapshots/Toggle-base-visual-checked-boolean-false-ren-68622-oolean-false-validationState-string-invalid-1-chromium-linux.png differ
diff --git a/src/components/Toggle/__tests__/Toggle.spec.tsx-snapshots/Toggle-base-visual-checked-boolean-false-ren-70394-d-boolean-true-validationState-string-valid-1-chromium-linux.png b/src/components/Toggle/__tests__/Toggle.spec.tsx-snapshots/Toggle-base-visual-checked-boolean-false-ren-70394-d-boolean-true-validationState-string-valid-1-chromium-linux.png
new file mode 100644
index 000000000..04c6d5db7
Binary files /dev/null and b/src/components/Toggle/__tests__/Toggle.spec.tsx-snapshots/Toggle-base-visual-checked-boolean-false-ren-70394-d-boolean-true-validationState-string-valid-1-chromium-linux.png differ
diff --git a/src/components/Toggle/__tests__/Toggle.spec.tsx-snapshots/Toggle-base-visual-checked-boolean-false-ren-84789-boolean-true-validationState-string-warning-1-chromium-linux.png b/src/components/Toggle/__tests__/Toggle.spec.tsx-snapshots/Toggle-base-visual-checked-boolean-false-ren-84789-boolean-true-validationState-string-warning-1-chromium-linux.png
new file mode 100644
index 000000000..1972a26c2
Binary files /dev/null and b/src/components/Toggle/__tests__/Toggle.spec.tsx-snapshots/Toggle-base-visual-checked-boolean-false-ren-84789-boolean-true-validationState-string-warning-1-chromium-linux.png differ
diff --git a/src/components/Toggle/__tests__/Toggle.spec.tsx-snapshots/Toggle-base-visual-checked-boolean-false-ren-acdd9-oolean-false-validationState-string-warning-1-chromium-linux.png b/src/components/Toggle/__tests__/Toggle.spec.tsx-snapshots/Toggle-base-visual-checked-boolean-false-ren-acdd9-oolean-false-validationState-string-warning-1-chromium-linux.png
new file mode 100644
index 000000000..9c562d980
Binary files /dev/null and b/src/components/Toggle/__tests__/Toggle.spec.tsx-snapshots/Toggle-base-visual-checked-boolean-false-ren-acdd9-oolean-false-validationState-string-warning-1-chromium-linux.png differ
diff --git a/src/components/Toggle/__tests__/Toggle.spec.tsx-snapshots/Toggle-base-visual-checked-boolean-false-ren-bffb9-boolean-true-validationState-string-invalid-1-chromium-linux.png b/src/components/Toggle/__tests__/Toggle.spec.tsx-snapshots/Toggle-base-visual-checked-boolean-false-ren-bffb9-boolean-true-validationState-string-invalid-1-chromium-linux.png
new file mode 100644
index 000000000..ddb7daca8
Binary files /dev/null and b/src/components/Toggle/__tests__/Toggle.spec.tsx-snapshots/Toggle-base-visual-checked-boolean-false-ren-bffb9-boolean-true-validationState-string-invalid-1-chromium-linux.png differ
diff --git a/src/components/Toggle/__tests__/Toggle.spec.tsx-snapshots/Toggle-base-visual-checked-boolean-false-ren-db109--boolean-false-validationState-string-valid-1-chromium-linux.png b/src/components/Toggle/__tests__/Toggle.spec.tsx-snapshots/Toggle-base-visual-checked-boolean-false-ren-db109--boolean-false-validationState-string-valid-1-chromium-linux.png
new file mode 100644
index 000000000..67b510aa4
Binary files /dev/null and b/src/components/Toggle/__tests__/Toggle.spec.tsx-snapshots/Toggle-base-visual-checked-boolean-false-ren-db109--boolean-false-validationState-string-valid-1-chromium-linux.png differ
diff --git a/src/components/Toggle/__tests__/Toggle.spec.tsx-snapshots/Toggle-base-visual-checked-boolean-false-required-boolean-false-validationState-string-invalid-1-chromium-linux.png b/src/components/Toggle/__tests__/Toggle.spec.tsx-snapshots/Toggle-base-visual-checked-boolean-false-required-boolean-false-validationState-string-invalid-1-chromium-linux.png
new file mode 100644
index 000000000..aac0952b2
Binary files /dev/null and b/src/components/Toggle/__tests__/Toggle.spec.tsx-snapshots/Toggle-base-visual-checked-boolean-false-required-boolean-false-validationState-string-invalid-1-chromium-linux.png differ
diff --git a/src/components/Toggle/__tests__/Toggle.spec.tsx-snapshots/Toggle-base-visual-checked-boolean-false-required-boolean-false-validationState-string-valid-1-chromium-linux.png b/src/components/Toggle/__tests__/Toggle.spec.tsx-snapshots/Toggle-base-visual-checked-boolean-false-required-boolean-false-validationState-string-valid-1-chromium-linux.png
new file mode 100644
index 000000000..67b510aa4
Binary files /dev/null and b/src/components/Toggle/__tests__/Toggle.spec.tsx-snapshots/Toggle-base-visual-checked-boolean-false-required-boolean-false-validationState-string-valid-1-chromium-linux.png differ
diff --git a/src/components/Toggle/__tests__/Toggle.spec.tsx-snapshots/Toggle-base-visual-checked-boolean-false-required-boolean-false-validationState-string-warning-1-chromium-linux.png b/src/components/Toggle/__tests__/Toggle.spec.tsx-snapshots/Toggle-base-visual-checked-boolean-false-required-boolean-false-validationState-string-warning-1-chromium-linux.png
new file mode 100644
index 000000000..9c562d980
Binary files /dev/null and b/src/components/Toggle/__tests__/Toggle.spec.tsx-snapshots/Toggle-base-visual-checked-boolean-false-required-boolean-false-validationState-string-warning-1-chromium-linux.png differ
diff --git a/src/components/Toggle/__tests__/Toggle.spec.tsx-snapshots/Toggle-base-visual-checked-boolean-false-required-boolean-false-validationState-undefined-1-chromium-linux.png b/src/components/Toggle/__tests__/Toggle.spec.tsx-snapshots/Toggle-base-visual-checked-boolean-false-required-boolean-false-validationState-undefined-1-chromium-linux.png
new file mode 100644
index 000000000..e2cbb96ba
Binary files /dev/null and b/src/components/Toggle/__tests__/Toggle.spec.tsx-snapshots/Toggle-base-visual-checked-boolean-false-required-boolean-false-validationState-undefined-1-chromium-linux.png differ
diff --git a/src/components/Toggle/__tests__/Toggle.spec.tsx-snapshots/Toggle-base-visual-checked-boolean-false-required-boolean-true-validationState-string-invalid-1-chromium-linux.png b/src/components/Toggle/__tests__/Toggle.spec.tsx-snapshots/Toggle-base-visual-checked-boolean-false-required-boolean-true-validationState-string-invalid-1-chromium-linux.png
new file mode 100644
index 000000000..ddb7daca8
Binary files /dev/null and b/src/components/Toggle/__tests__/Toggle.spec.tsx-snapshots/Toggle-base-visual-checked-boolean-false-required-boolean-true-validationState-string-invalid-1-chromium-linux.png differ
diff --git a/src/components/Toggle/__tests__/Toggle.spec.tsx-snapshots/Toggle-base-visual-checked-boolean-false-required-boolean-true-validationState-string-valid-1-chromium-linux.png b/src/components/Toggle/__tests__/Toggle.spec.tsx-snapshots/Toggle-base-visual-checked-boolean-false-required-boolean-true-validationState-string-valid-1-chromium-linux.png
new file mode 100644
index 000000000..04c6d5db7
Binary files /dev/null and b/src/components/Toggle/__tests__/Toggle.spec.tsx-snapshots/Toggle-base-visual-checked-boolean-false-required-boolean-true-validationState-string-valid-1-chromium-linux.png differ
diff --git a/src/components/Toggle/__tests__/Toggle.spec.tsx-snapshots/Toggle-base-visual-checked-boolean-false-required-boolean-true-validationState-string-warning-1-chromium-linux.png b/src/components/Toggle/__tests__/Toggle.spec.tsx-snapshots/Toggle-base-visual-checked-boolean-false-required-boolean-true-validationState-string-warning-1-chromium-linux.png
new file mode 100644
index 000000000..1972a26c2
Binary files /dev/null and b/src/components/Toggle/__tests__/Toggle.spec.tsx-snapshots/Toggle-base-visual-checked-boolean-false-required-boolean-true-validationState-string-warning-1-chromium-linux.png differ
diff --git a/src/components/Toggle/__tests__/Toggle.spec.tsx-snapshots/Toggle-base-visual-checked-boolean-false-required-boolean-true-validationState-undefined-1-chromium-linux.png b/src/components/Toggle/__tests__/Toggle.spec.tsx-snapshots/Toggle-base-visual-checked-boolean-false-required-boolean-true-validationState-undefined-1-chromium-linux.png
new file mode 100644
index 000000000..ec88eff55
Binary files /dev/null and b/src/components/Toggle/__tests__/Toggle.spec.tsx-snapshots/Toggle-base-visual-checked-boolean-false-required-boolean-true-validationState-undefined-1-chromium-linux.png differ
diff --git a/src/components/Toggle/__tests__/Toggle.spec.tsx-snapshots/Toggle-base-visual-checked-boolean-true-rend-07a3c-oolean-false-validationState-string-warning-1-chromium-linux.png b/src/components/Toggle/__tests__/Toggle.spec.tsx-snapshots/Toggle-base-visual-checked-boolean-true-rend-07a3c-oolean-false-validationState-string-warning-1-chromium-linux.png
new file mode 100644
index 000000000..c1ae34f0a
Binary files /dev/null and b/src/components/Toggle/__tests__/Toggle.spec.tsx-snapshots/Toggle-base-visual-checked-boolean-true-rend-07a3c-oolean-false-validationState-string-warning-1-chromium-linux.png differ
diff --git a/src/components/Toggle/__tests__/Toggle.spec.tsx-snapshots/Toggle-base-visual-checked-boolean-true-rend-08579-boolean-true-validationState-string-invalid-1-chromium-linux.png b/src/components/Toggle/__tests__/Toggle.spec.tsx-snapshots/Toggle-base-visual-checked-boolean-true-rend-08579-boolean-true-validationState-string-invalid-1-chromium-linux.png
new file mode 100644
index 000000000..d01036471
Binary files /dev/null and b/src/components/Toggle/__tests__/Toggle.spec.tsx-snapshots/Toggle-base-visual-checked-boolean-true-rend-08579-boolean-true-validationState-string-invalid-1-chromium-linux.png differ
diff --git a/src/components/Toggle/__tests__/Toggle.spec.tsx-snapshots/Toggle-base-visual-checked-boolean-true-rend-318ea-ired-boolean-true-validationState-undefined-1-chromium-linux.png b/src/components/Toggle/__tests__/Toggle.spec.tsx-snapshots/Toggle-base-visual-checked-boolean-true-rend-318ea-ired-boolean-true-validationState-undefined-1-chromium-linux.png
new file mode 100644
index 000000000..4f4bb3e35
Binary files /dev/null and b/src/components/Toggle/__tests__/Toggle.spec.tsx-snapshots/Toggle-base-visual-checked-boolean-true-rend-318ea-ired-boolean-true-validationState-undefined-1-chromium-linux.png differ
diff --git a/src/components/Toggle/__tests__/Toggle.spec.tsx-snapshots/Toggle-base-visual-checked-boolean-true-rend-57e71-oolean-false-validationState-string-invalid-1-chromium-linux.png b/src/components/Toggle/__tests__/Toggle.spec.tsx-snapshots/Toggle-base-visual-checked-boolean-true-rend-57e71-oolean-false-validationState-string-invalid-1-chromium-linux.png
new file mode 100644
index 000000000..6c19f3df5
Binary files /dev/null and b/src/components/Toggle/__tests__/Toggle.spec.tsx-snapshots/Toggle-base-visual-checked-boolean-true-rend-57e71-oolean-false-validationState-string-invalid-1-chromium-linux.png differ
diff --git a/src/components/Toggle/__tests__/Toggle.spec.tsx-snapshots/Toggle-base-visual-checked-boolean-true-rend-5fdf1--boolean-false-validationState-string-valid-1-chromium-linux.png b/src/components/Toggle/__tests__/Toggle.spec.tsx-snapshots/Toggle-base-visual-checked-boolean-true-rend-5fdf1--boolean-false-validationState-string-valid-1-chromium-linux.png
new file mode 100644
index 000000000..c2a52e7c9
Binary files /dev/null and b/src/components/Toggle/__tests__/Toggle.spec.tsx-snapshots/Toggle-base-visual-checked-boolean-true-rend-5fdf1--boolean-false-validationState-string-valid-1-chromium-linux.png differ
diff --git a/src/components/Toggle/__tests__/Toggle.spec.tsx-snapshots/Toggle-base-visual-checked-boolean-true-rend-b5311-d-boolean-true-validationState-string-valid-1-chromium-linux.png b/src/components/Toggle/__tests__/Toggle.spec.tsx-snapshots/Toggle-base-visual-checked-boolean-true-rend-b5311-d-boolean-true-validationState-string-valid-1-chromium-linux.png
new file mode 100644
index 000000000..b8075a1a3
Binary files /dev/null and b/src/components/Toggle/__tests__/Toggle.spec.tsx-snapshots/Toggle-base-visual-checked-boolean-true-rend-b5311-d-boolean-true-validationState-string-valid-1-chromium-linux.png differ
diff --git a/src/components/Toggle/__tests__/Toggle.spec.tsx-snapshots/Toggle-base-visual-checked-boolean-true-rend-f6641-boolean-true-validationState-string-warning-1-chromium-linux.png b/src/components/Toggle/__tests__/Toggle.spec.tsx-snapshots/Toggle-base-visual-checked-boolean-true-rend-f6641-boolean-true-validationState-string-warning-1-chromium-linux.png
new file mode 100644
index 000000000..cf460dec5
Binary files /dev/null and b/src/components/Toggle/__tests__/Toggle.spec.tsx-snapshots/Toggle-base-visual-checked-boolean-true-rend-f6641-boolean-true-validationState-string-warning-1-chromium-linux.png differ
diff --git a/src/components/Toggle/__tests__/Toggle.spec.tsx-snapshots/Toggle-base-visual-checked-boolean-true-rend-f9831-red-boolean-false-validationState-undefined-1-chromium-linux.png b/src/components/Toggle/__tests__/Toggle.spec.tsx-snapshots/Toggle-base-visual-checked-boolean-true-rend-f9831-red-boolean-false-validationState-undefined-1-chromium-linux.png
new file mode 100644
index 000000000..92c23700d
Binary files /dev/null and b/src/components/Toggle/__tests__/Toggle.spec.tsx-snapshots/Toggle-base-visual-checked-boolean-true-rend-f9831-red-boolean-false-validationState-undefined-1-chromium-linux.png differ
diff --git a/src/components/Toggle/__tests__/Toggle.spec.tsx-snapshots/Toggle-base-visual-checked-boolean-true-required-boolean-false-validationState-string-invalid-1-chromium-linux.png b/src/components/Toggle/__tests__/Toggle.spec.tsx-snapshots/Toggle-base-visual-checked-boolean-true-required-boolean-false-validationState-string-invalid-1-chromium-linux.png
new file mode 100644
index 000000000..6c19f3df5
Binary files /dev/null and b/src/components/Toggle/__tests__/Toggle.spec.tsx-snapshots/Toggle-base-visual-checked-boolean-true-required-boolean-false-validationState-string-invalid-1-chromium-linux.png differ
diff --git a/src/components/Toggle/__tests__/Toggle.spec.tsx-snapshots/Toggle-base-visual-checked-boolean-true-required-boolean-false-validationState-string-valid-1-chromium-linux.png b/src/components/Toggle/__tests__/Toggle.spec.tsx-snapshots/Toggle-base-visual-checked-boolean-true-required-boolean-false-validationState-string-valid-1-chromium-linux.png
new file mode 100644
index 000000000..c2a52e7c9
Binary files /dev/null and b/src/components/Toggle/__tests__/Toggle.spec.tsx-snapshots/Toggle-base-visual-checked-boolean-true-required-boolean-false-validationState-string-valid-1-chromium-linux.png differ
diff --git a/src/components/Toggle/__tests__/Toggle.spec.tsx-snapshots/Toggle-base-visual-checked-boolean-true-required-boolean-false-validationState-string-warning-1-chromium-linux.png b/src/components/Toggle/__tests__/Toggle.spec.tsx-snapshots/Toggle-base-visual-checked-boolean-true-required-boolean-false-validationState-string-warning-1-chromium-linux.png
new file mode 100644
index 000000000..c1ae34f0a
Binary files /dev/null and b/src/components/Toggle/__tests__/Toggle.spec.tsx-snapshots/Toggle-base-visual-checked-boolean-true-required-boolean-false-validationState-string-warning-1-chromium-linux.png differ
diff --git a/src/components/Toggle/__tests__/Toggle.spec.tsx-snapshots/Toggle-base-visual-checked-boolean-true-required-boolean-false-validationState-undefined-1-chromium-linux.png b/src/components/Toggle/__tests__/Toggle.spec.tsx-snapshots/Toggle-base-visual-checked-boolean-true-required-boolean-false-validationState-undefined-1-chromium-linux.png
new file mode 100644
index 000000000..92c23700d
Binary files /dev/null and b/src/components/Toggle/__tests__/Toggle.spec.tsx-snapshots/Toggle-base-visual-checked-boolean-true-required-boolean-false-validationState-undefined-1-chromium-linux.png differ
diff --git a/src/components/Toggle/__tests__/Toggle.spec.tsx-snapshots/Toggle-base-visual-checked-boolean-true-required-boolean-true-validationState-string-invalid-1-chromium-linux.png b/src/components/Toggle/__tests__/Toggle.spec.tsx-snapshots/Toggle-base-visual-checked-boolean-true-required-boolean-true-validationState-string-invalid-1-chromium-linux.png
new file mode 100644
index 000000000..d01036471
Binary files /dev/null and b/src/components/Toggle/__tests__/Toggle.spec.tsx-snapshots/Toggle-base-visual-checked-boolean-true-required-boolean-true-validationState-string-invalid-1-chromium-linux.png differ
diff --git a/src/components/Toggle/__tests__/Toggle.spec.tsx-snapshots/Toggle-base-visual-checked-boolean-true-required-boolean-true-validationState-string-valid-1-chromium-linux.png b/src/components/Toggle/__tests__/Toggle.spec.tsx-snapshots/Toggle-base-visual-checked-boolean-true-required-boolean-true-validationState-string-valid-1-chromium-linux.png
new file mode 100644
index 000000000..b8075a1a3
Binary files /dev/null and b/src/components/Toggle/__tests__/Toggle.spec.tsx-snapshots/Toggle-base-visual-checked-boolean-true-required-boolean-true-validationState-string-valid-1-chromium-linux.png differ
diff --git a/src/components/Toggle/__tests__/Toggle.spec.tsx-snapshots/Toggle-base-visual-checked-boolean-true-required-boolean-true-validationState-string-warning-1-chromium-linux.png b/src/components/Toggle/__tests__/Toggle.spec.tsx-snapshots/Toggle-base-visual-checked-boolean-true-required-boolean-true-validationState-string-warning-1-chromium-linux.png
new file mode 100644
index 000000000..cf460dec5
Binary files /dev/null and b/src/components/Toggle/__tests__/Toggle.spec.tsx-snapshots/Toggle-base-visual-checked-boolean-true-required-boolean-true-validationState-string-warning-1-chromium-linux.png differ
diff --git a/src/components/Toggle/__tests__/Toggle.spec.tsx-snapshots/Toggle-base-visual-checked-boolean-true-required-boolean-true-validationState-undefined-1-chromium-linux.png b/src/components/Toggle/__tests__/Toggle.spec.tsx-snapshots/Toggle-base-visual-checked-boolean-true-required-boolean-true-validationState-undefined-1-chromium-linux.png
new file mode 100644
index 000000000..4f4bb3e35
Binary files /dev/null and b/src/components/Toggle/__tests__/Toggle.spec.tsx-snapshots/Toggle-base-visual-checked-boolean-true-required-boolean-true-validationState-undefined-1-chromium-linux.png differ
diff --git a/src/components/Toggle/__tests__/Toggle.spec.tsx-snapshots/Toggle-base-visual-defaultComponentProps-object-1-chromium-linux.png b/src/components/Toggle/__tests__/Toggle.spec.tsx-snapshots/Toggle-base-visual-defaultComponentProps-object-1-chromium-linux.png
new file mode 100644
index 000000000..e2cbb96ba
Binary files /dev/null and b/src/components/Toggle/__tests__/Toggle.spec.tsx-snapshots/Toggle-base-visual-defaultComponentProps-object-1-chromium-linux.png differ
diff --git a/src/components/Toggle/__tests__/Toggle.spec.tsx-snapshots/Toggle-base-visual-disabled-boolean-false-checked-boolean-false-validationState-string-invalid-1-chromium-linux.png b/src/components/Toggle/__tests__/Toggle.spec.tsx-snapshots/Toggle-base-visual-disabled-boolean-false-checked-boolean-false-validationState-string-invalid-1-chromium-linux.png
new file mode 100644
index 000000000..aac0952b2
Binary files /dev/null and b/src/components/Toggle/__tests__/Toggle.spec.tsx-snapshots/Toggle-base-visual-disabled-boolean-false-checked-boolean-false-validationState-string-invalid-1-chromium-linux.png differ
diff --git a/src/components/Toggle/__tests__/Toggle.spec.tsx-snapshots/Toggle-base-visual-disabled-boolean-false-checked-boolean-false-validationState-string-valid-1-chromium-linux.png b/src/components/Toggle/__tests__/Toggle.spec.tsx-snapshots/Toggle-base-visual-disabled-boolean-false-checked-boolean-false-validationState-string-valid-1-chromium-linux.png
new file mode 100644
index 000000000..67b510aa4
Binary files /dev/null and b/src/components/Toggle/__tests__/Toggle.spec.tsx-snapshots/Toggle-base-visual-disabled-boolean-false-checked-boolean-false-validationState-string-valid-1-chromium-linux.png differ
diff --git a/src/components/Toggle/__tests__/Toggle.spec.tsx-snapshots/Toggle-base-visual-disabled-boolean-false-checked-boolean-false-validationState-string-warning-1-chromium-linux.png b/src/components/Toggle/__tests__/Toggle.spec.tsx-snapshots/Toggle-base-visual-disabled-boolean-false-checked-boolean-false-validationState-string-warning-1-chromium-linux.png
new file mode 100644
index 000000000..9c562d980
Binary files /dev/null and b/src/components/Toggle/__tests__/Toggle.spec.tsx-snapshots/Toggle-base-visual-disabled-boolean-false-checked-boolean-false-validationState-string-warning-1-chromium-linux.png differ
diff --git a/src/components/Toggle/__tests__/Toggle.spec.tsx-snapshots/Toggle-base-visual-disabled-boolean-false-checked-boolean-false-validationState-undefined-1-chromium-linux.png b/src/components/Toggle/__tests__/Toggle.spec.tsx-snapshots/Toggle-base-visual-disabled-boolean-false-checked-boolean-false-validationState-undefined-1-chromium-linux.png
new file mode 100644
index 000000000..e2cbb96ba
Binary files /dev/null and b/src/components/Toggle/__tests__/Toggle.spec.tsx-snapshots/Toggle-base-visual-disabled-boolean-false-checked-boolean-false-validationState-undefined-1-chromium-linux.png differ
diff --git a/src/components/Toggle/__tests__/Toggle.spec.tsx-snapshots/Toggle-base-visual-disabled-boolean-false-checked-boolean-true-validationState-string-invalid-1-chromium-linux.png b/src/components/Toggle/__tests__/Toggle.spec.tsx-snapshots/Toggle-base-visual-disabled-boolean-false-checked-boolean-true-validationState-string-invalid-1-chromium-linux.png
new file mode 100644
index 000000000..6c19f3df5
Binary files /dev/null and b/src/components/Toggle/__tests__/Toggle.spec.tsx-snapshots/Toggle-base-visual-disabled-boolean-false-checked-boolean-true-validationState-string-invalid-1-chromium-linux.png differ
diff --git a/src/components/Toggle/__tests__/Toggle.spec.tsx-snapshots/Toggle-base-visual-disabled-boolean-false-checked-boolean-true-validationState-string-valid-1-chromium-linux.png b/src/components/Toggle/__tests__/Toggle.spec.tsx-snapshots/Toggle-base-visual-disabled-boolean-false-checked-boolean-true-validationState-string-valid-1-chromium-linux.png
new file mode 100644
index 000000000..c2a52e7c9
Binary files /dev/null and b/src/components/Toggle/__tests__/Toggle.spec.tsx-snapshots/Toggle-base-visual-disabled-boolean-false-checked-boolean-true-validationState-string-valid-1-chromium-linux.png differ
diff --git a/src/components/Toggle/__tests__/Toggle.spec.tsx-snapshots/Toggle-base-visual-disabled-boolean-false-checked-boolean-true-validationState-string-warning-1-chromium-linux.png b/src/components/Toggle/__tests__/Toggle.spec.tsx-snapshots/Toggle-base-visual-disabled-boolean-false-checked-boolean-true-validationState-string-warning-1-chromium-linux.png
new file mode 100644
index 000000000..c1ae34f0a
Binary files /dev/null and b/src/components/Toggle/__tests__/Toggle.spec.tsx-snapshots/Toggle-base-visual-disabled-boolean-false-checked-boolean-true-validationState-string-warning-1-chromium-linux.png differ
diff --git a/src/components/Toggle/__tests__/Toggle.spec.tsx-snapshots/Toggle-base-visual-disabled-boolean-false-checked-boolean-true-validationState-undefined-1-chromium-linux.png b/src/components/Toggle/__tests__/Toggle.spec.tsx-snapshots/Toggle-base-visual-disabled-boolean-false-checked-boolean-true-validationState-undefined-1-chromium-linux.png
new file mode 100644
index 000000000..92c23700d
Binary files /dev/null and b/src/components/Toggle/__tests__/Toggle.spec.tsx-snapshots/Toggle-base-visual-disabled-boolean-false-checked-boolean-true-validationState-undefined-1-chromium-linux.png differ
diff --git a/src/components/Toggle/__tests__/Toggle.spec.tsx-snapshots/Toggle-base-visual-disabled-boolean-true-checked-boolean-false-validationState-string-invalid-1-chromium-linux.png b/src/components/Toggle/__tests__/Toggle.spec.tsx-snapshots/Toggle-base-visual-disabled-boolean-true-checked-boolean-false-validationState-string-invalid-1-chromium-linux.png
new file mode 100644
index 000000000..0accaf149
Binary files /dev/null and b/src/components/Toggle/__tests__/Toggle.spec.tsx-snapshots/Toggle-base-visual-disabled-boolean-true-checked-boolean-false-validationState-string-invalid-1-chromium-linux.png differ
diff --git a/src/components/Toggle/__tests__/Toggle.spec.tsx-snapshots/Toggle-base-visual-disabled-boolean-true-checked-boolean-false-validationState-string-valid-1-chromium-linux.png b/src/components/Toggle/__tests__/Toggle.spec.tsx-snapshots/Toggle-base-visual-disabled-boolean-true-checked-boolean-false-validationState-string-valid-1-chromium-linux.png
new file mode 100644
index 000000000..35b8debef
Binary files /dev/null and b/src/components/Toggle/__tests__/Toggle.spec.tsx-snapshots/Toggle-base-visual-disabled-boolean-true-checked-boolean-false-validationState-string-valid-1-chromium-linux.png differ
diff --git a/src/components/Toggle/__tests__/Toggle.spec.tsx-snapshots/Toggle-base-visual-disabled-boolean-true-checked-boolean-false-validationState-string-warning-1-chromium-linux.png b/src/components/Toggle/__tests__/Toggle.spec.tsx-snapshots/Toggle-base-visual-disabled-boolean-true-checked-boolean-false-validationState-string-warning-1-chromium-linux.png
new file mode 100644
index 000000000..f3e20b4f1
Binary files /dev/null and b/src/components/Toggle/__tests__/Toggle.spec.tsx-snapshots/Toggle-base-visual-disabled-boolean-true-checked-boolean-false-validationState-string-warning-1-chromium-linux.png differ
diff --git a/src/components/Toggle/__tests__/Toggle.spec.tsx-snapshots/Toggle-base-visual-disabled-boolean-true-checked-boolean-false-validationState-undefined-1-chromium-linux.png b/src/components/Toggle/__tests__/Toggle.spec.tsx-snapshots/Toggle-base-visual-disabled-boolean-true-checked-boolean-false-validationState-undefined-1-chromium-linux.png
new file mode 100644
index 000000000..de776702c
Binary files /dev/null and b/src/components/Toggle/__tests__/Toggle.spec.tsx-snapshots/Toggle-base-visual-disabled-boolean-true-checked-boolean-false-validationState-undefined-1-chromium-linux.png differ
diff --git a/src/components/Toggle/__tests__/Toggle.spec.tsx-snapshots/Toggle-base-visual-disabled-boolean-true-checked-boolean-true-validationState-string-invalid-1-chromium-linux.png b/src/components/Toggle/__tests__/Toggle.spec.tsx-snapshots/Toggle-base-visual-disabled-boolean-true-checked-boolean-true-validationState-string-invalid-1-chromium-linux.png
new file mode 100644
index 000000000..6019bb7c9
Binary files /dev/null and b/src/components/Toggle/__tests__/Toggle.spec.tsx-snapshots/Toggle-base-visual-disabled-boolean-true-checked-boolean-true-validationState-string-invalid-1-chromium-linux.png differ
diff --git a/src/components/Toggle/__tests__/Toggle.spec.tsx-snapshots/Toggle-base-visual-disabled-boolean-true-checked-boolean-true-validationState-string-valid-1-chromium-linux.png b/src/components/Toggle/__tests__/Toggle.spec.tsx-snapshots/Toggle-base-visual-disabled-boolean-true-checked-boolean-true-validationState-string-valid-1-chromium-linux.png
new file mode 100644
index 000000000..51b720b92
Binary files /dev/null and b/src/components/Toggle/__tests__/Toggle.spec.tsx-snapshots/Toggle-base-visual-disabled-boolean-true-checked-boolean-true-validationState-string-valid-1-chromium-linux.png differ
diff --git a/src/components/Toggle/__tests__/Toggle.spec.tsx-snapshots/Toggle-base-visual-disabled-boolean-true-checked-boolean-true-validationState-string-warning-1-chromium-linux.png b/src/components/Toggle/__tests__/Toggle.spec.tsx-snapshots/Toggle-base-visual-disabled-boolean-true-checked-boolean-true-validationState-string-warning-1-chromium-linux.png
new file mode 100644
index 000000000..bad16931c
Binary files /dev/null and b/src/components/Toggle/__tests__/Toggle.spec.tsx-snapshots/Toggle-base-visual-disabled-boolean-true-checked-boolean-true-validationState-string-warning-1-chromium-linux.png differ
diff --git a/src/components/Toggle/__tests__/Toggle.spec.tsx-snapshots/Toggle-base-visual-disabled-boolean-true-checked-boolean-true-validationState-undefined-1-chromium-linux.png b/src/components/Toggle/__tests__/Toggle.spec.tsx-snapshots/Toggle-base-visual-disabled-boolean-true-checked-boolean-true-validationState-undefined-1-chromium-linux.png
new file mode 100644
index 000000000..7ee155d27
Binary files /dev/null and b/src/components/Toggle/__tests__/Toggle.spec.tsx-snapshots/Toggle-base-visual-disabled-boolean-true-checked-boolean-true-validationState-undefined-1-chromium-linux.png differ
diff --git a/src/components/Toggle/__tests__/Toggle.spec.tsx-snapshots/Toggle-base-visual-helpText-string-validationText-string-1-chromium-linux.png b/src/components/Toggle/__tests__/Toggle.spec.tsx-snapshots/Toggle-base-visual-helpText-string-validationText-string-1-chromium-linux.png
new file mode 100644
index 000000000..b0de5072c
Binary files /dev/null and b/src/components/Toggle/__tests__/Toggle.spec.tsx-snapshots/Toggle-base-visual-helpText-string-validationText-string-1-chromium-linux.png differ
diff --git a/src/components/Toggle/__tests__/Toggle.spec.tsx-snapshots/Toggle-base-visual-helpText-string-validationText-undefined-1-chromium-linux.png b/src/components/Toggle/__tests__/Toggle.spec.tsx-snapshots/Toggle-base-visual-helpText-string-validationText-undefined-1-chromium-linux.png
new file mode 100644
index 000000000..6bb74c599
Binary files /dev/null and b/src/components/Toggle/__tests__/Toggle.spec.tsx-snapshots/Toggle-base-visual-helpText-string-validationText-undefined-1-chromium-linux.png differ
diff --git a/src/components/Toggle/__tests__/Toggle.spec.tsx-snapshots/Toggle-base-visual-helpText-undefined-validationText-string-1-chromium-linux.png b/src/components/Toggle/__tests__/Toggle.spec.tsx-snapshots/Toggle-base-visual-helpText-undefined-validationText-string-1-chromium-linux.png
new file mode 100644
index 000000000..f83b5a98e
Binary files /dev/null and b/src/components/Toggle/__tests__/Toggle.spec.tsx-snapshots/Toggle-base-visual-helpText-undefined-validationText-string-1-chromium-linux.png differ
diff --git a/src/components/Toggle/__tests__/Toggle.spec.tsx-snapshots/Toggle-base-visual-isLabelVisible-boolean-false-1-chromium-linux.png b/src/components/Toggle/__tests__/Toggle.spec.tsx-snapshots/Toggle-base-visual-isLabelVisible-boolean-false-1-chromium-linux.png
new file mode 100644
index 000000000..204ef0fb6
Binary files /dev/null and b/src/components/Toggle/__tests__/Toggle.spec.tsx-snapshots/Toggle-base-visual-isLabelVisible-boolean-false-1-chromium-linux.png differ
diff --git a/src/components/Toggle/__tests__/Toggle.spec.tsx-snapshots/Toggle-base-visual-isLabelVisible-boolean-true-1-chromium-linux.png b/src/components/Toggle/__tests__/Toggle.spec.tsx-snapshots/Toggle-base-visual-isLabelVisible-boolean-true-1-chromium-linux.png
new file mode 100644
index 000000000..e2cbb96ba
Binary files /dev/null and b/src/components/Toggle/__tests__/Toggle.spec.tsx-snapshots/Toggle-base-visual-isLabelVisible-boolean-true-1-chromium-linux.png differ
diff --git a/src/components/Toggle/__tests__/Toggle.spec.tsx-snapshots/Toggle-base-visual-label-node-normal-1-chromium-linux.png b/src/components/Toggle/__tests__/Toggle.spec.tsx-snapshots/Toggle-base-visual-label-node-normal-1-chromium-linux.png
new file mode 100644
index 000000000..a3d68fba4
Binary files /dev/null and b/src/components/Toggle/__tests__/Toggle.spec.tsx-snapshots/Toggle-base-visual-label-node-normal-1-chromium-linux.png differ
diff --git a/src/components/Toggle/__tests__/Toggle.spec.tsx-snapshots/Toggle-base-visual-label-string-long-1-chromium-linux.png b/src/components/Toggle/__tests__/Toggle.spec.tsx-snapshots/Toggle-base-visual-label-string-long-1-chromium-linux.png
new file mode 100644
index 000000000..13cf2f40e
Binary files /dev/null and b/src/components/Toggle/__tests__/Toggle.spec.tsx-snapshots/Toggle-base-visual-label-string-long-1-chromium-linux.png differ
diff --git a/src/components/Toggle/__tests__/Toggle.spec.tsx-snapshots/Toggle-base-visual-labelPosition-string-after-1-chromium-linux.png b/src/components/Toggle/__tests__/Toggle.spec.tsx-snapshots/Toggle-base-visual-labelPosition-string-after-1-chromium-linux.png
new file mode 100644
index 000000000..e2cbb96ba
Binary files /dev/null and b/src/components/Toggle/__tests__/Toggle.spec.tsx-snapshots/Toggle-base-visual-labelPosition-string-after-1-chromium-linux.png differ
diff --git a/src/components/Toggle/__tests__/Toggle.spec.tsx-snapshots/Toggle-base-visual-labelPosition-string-before-1-chromium-linux.png b/src/components/Toggle/__tests__/Toggle.spec.tsx-snapshots/Toggle-base-visual-labelPosition-string-before-1-chromium-linux.png
new file mode 100644
index 000000000..068d80d0e
Binary files /dev/null and b/src/components/Toggle/__tests__/Toggle.spec.tsx-snapshots/Toggle-base-visual-labelPosition-string-before-1-chromium-linux.png differ
diff --git a/src/components/Toggle/__tests__/Toggle.spec.tsx-snapshots/Toggle-base-visual-renderAsRequired-boolean-false-1-chromium-linux.png b/src/components/Toggle/__tests__/Toggle.spec.tsx-snapshots/Toggle-base-visual-renderAsRequired-boolean-false-1-chromium-linux.png
new file mode 100644
index 000000000..e2cbb96ba
Binary files /dev/null and b/src/components/Toggle/__tests__/Toggle.spec.tsx-snapshots/Toggle-base-visual-renderAsRequired-boolean-false-1-chromium-linux.png differ
diff --git a/src/components/Toggle/__tests__/Toggle.spec.tsx-snapshots/Toggle-base-visual-renderAsRequired-boolean-true-1-chromium-linux.png b/src/components/Toggle/__tests__/Toggle.spec.tsx-snapshots/Toggle-base-visual-renderAsRequired-boolean-true-1-chromium-linux.png
new file mode 100644
index 000000000..ec88eff55
Binary files /dev/null and b/src/components/Toggle/__tests__/Toggle.spec.tsx-snapshots/Toggle-base-visual-renderAsRequired-boolean-true-1-chromium-linux.png differ
diff --git a/src/components/Toggle/__tests__/Toggle.spec.tsx-snapshots/Toggle-base-visual-required-boolean-false-1-chromium-linux.png b/src/components/Toggle/__tests__/Toggle.spec.tsx-snapshots/Toggle-base-visual-required-boolean-false-1-chromium-linux.png
new file mode 100644
index 000000000..e2cbb96ba
Binary files /dev/null and b/src/components/Toggle/__tests__/Toggle.spec.tsx-snapshots/Toggle-base-visual-required-boolean-false-1-chromium-linux.png differ
diff --git a/src/components/Toggle/__tests__/Toggle.spec.tsx-snapshots/Toggle-base-visual-required-boolean-true-1-chromium-linux.png b/src/components/Toggle/__tests__/Toggle.spec.tsx-snapshots/Toggle-base-visual-required-boolean-true-1-chromium-linux.png
new file mode 100644
index 000000000..ec88eff55
Binary files /dev/null and b/src/components/Toggle/__tests__/Toggle.spec.tsx-snapshots/Toggle-base-visual-required-boolean-true-1-chromium-linux.png differ
diff --git a/src/components/Toggle/__tests__/Toggle.spec.tsx-snapshots/Toggle-formLayout-visual-layout-string-horizontal-1-chromium-linux.png b/src/components/Toggle/__tests__/Toggle.spec.tsx-snapshots/Toggle-formLayout-visual-layout-string-horizontal-1-chromium-linux.png
new file mode 100644
index 000000000..2aa885423
Binary files /dev/null and b/src/components/Toggle/__tests__/Toggle.spec.tsx-snapshots/Toggle-formLayout-visual-layout-string-horizontal-1-chromium-linux.png differ
diff --git a/src/components/Toggle/__tests__/Toggle.spec.tsx-snapshots/Toggle-formLayout-visual-layout-string-vertical-1-chromium-linux.png b/src/components/Toggle/__tests__/Toggle.spec.tsx-snapshots/Toggle-formLayout-visual-layout-string-vertical-1-chromium-linux.png
new file mode 100644
index 000000000..af488cfdd
Binary files /dev/null and b/src/components/Toggle/__tests__/Toggle.spec.tsx-snapshots/Toggle-formLayout-visual-layout-string-vertical-1-chromium-linux.png differ
diff --git a/src/components/Toggle/__tests__/Toggle.story.tsx b/src/components/Toggle/__tests__/Toggle.story.tsx
new file mode 100644
index 000000000..5fd392f57
--- /dev/null
+++ b/src/components/Toggle/__tests__/Toggle.story.tsx
@@ -0,0 +1,71 @@
+import React, {
+  useEffect,
+  useMemo,
+  useRef,
+} from 'react';
+import type { InputHTMLAttributes } from 'react';
+import { FormLayoutContext } from '../../FormLayout';
+import { Toggle } from '..';
+
+// Types for story component will be improved when we have full TypeScript support
+type ToggleForTestProps = InputHTMLAttributes<HTMLInputElement>;
+type ToggleForRefTestProps = ToggleForTestProps & {
+  testRefAttrName: string;
+  testRefAttrValue: string;
+};
+export type ToggleForFormLayoutTestsProps = ToggleForTestProps & {
+  layout: 'vertical' | 'horizontal'
+};
+
+const defaultLabel = 'test-label';
+
+export const ToggleForTest = ({
+  ...props
+} : ToggleForTestProps) => (
+  <Toggle
+    label={defaultLabel}
+    {...props}
+  />
+);
+
+export const ToggleForRefTest = ({
+  testRefAttrName,
+  testRefAttrValue,
+  ...props
+} : ToggleForRefTestProps) => {
+  const ref = useRef<HTMLInputElement>(undefined);
+
+  useEffect(() => {
+    ref.current?.setAttribute(testRefAttrName, testRefAttrValue);
+  }, [testRefAttrName, testRefAttrValue]);
+
+  return (
+    <Toggle
+      label={defaultLabel}
+      {...props}
+      ref={ref}
+    />
+  );
+};
+
+export const ToggleForFormLayoutTests = ({
+  layout,
+  ...props
+}: ToggleForFormLayoutTestsProps) => {
+  const values = useMemo(() => ({ layout }), [layout]);
+
+  return (
+    <FormLayoutContext.Provider
+      value={values}
+    >
+      <Toggle
+        label={defaultLabel}
+        {...props}
+      />
+      <Toggle
+        label="another-test-label"
+        {...props}
+      />
+    </FormLayoutContext.Provider>
+  );
+};
diff --git a/src/components/Toggle/__tests__/Toggle.test.jsx b/src/components/Toggle/__tests__/Toggle.test.jsx
deleted file mode 100644
index 275c8d532..000000000
--- a/src/components/Toggle/__tests__/Toggle.test.jsx
+++ /dev/null
@@ -1,84 +0,0 @@
-import React from 'react';
-import {
-  render,
-  screen,
-  within,
-} from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import { Toggle } from '../Toggle';
-import { disabledPropTest } from '../../../../tests/jest/propTests/disabledPropTest';
-import { refPropTest } from '../../../../tests/jest/propTests/refPropTest';
-import { helpTextPropTest } from '../../../../tests/jest/propTests/helpTextPropTest';
-import { formLayoutProviderTest } from '../../../../tests/jest/providerTests/formLayoutProviderTest';
-import { isLabelVisibleTest } from '../../../../tests/jest/propTests/isLabelVisibleTest';
-import { labelPropTest } from '../../../../tests/jest/propTests/labelPropTest';
-import { renderAsRequiredPropTest } from '../../../../tests/jest/propTests/renderAsRequiredPropTest';
-import { requiredPropTest } from '../../../../tests/jest/propTests/requiredPropTest';
-import { validationStatePropTest } from '../../../../tests/jest/propTests/validationStatePropTest';
-import { validationTextPropTest } from '../../../../tests/jest/propTests/validationTextPropTest';
-
-const mandatoryProps = {
-  label: 'label',
-};
-
-describe('rendering', () => {
-  formLayoutProviderTest(<Toggle {...mandatoryProps} />);
-
-  it.each([
-    ...disabledPropTest,
-    ...refPropTest(React.createRef()),
-    ...helpTextPropTest,
-    [
-      {
-        helpText: 'help text',
-        id: 'id',
-        validationText: 'validation text',
-      },
-      (rootElement) => {
-        expect(rootElement).toHaveAttribute('id', 'id__label');
-        expect(within(rootElement).getByTestId('id'));
-        expect(within(rootElement).getByText('label')).toHaveAttribute('id', 'id__labelText');
-        expect(within(rootElement).getByText('help text')).toHaveAttribute('id', 'id__helpText');
-        expect(within(rootElement).getByText('validation text')).toHaveAttribute('id', 'id__validationText');
-      },
-    ],
-    ...isLabelVisibleTest(),
-    ...labelPropTest(),
-    [
-      { labelPosition: 'before' },
-      (rootElement) => expect(rootElement).toHaveClass('hasRootLabelBefore'),
-    ],
-    [
-      { labelPosition: 'after' },
-      (rootElement) => expect(rootElement).not.toHaveClass('hasRootLabelBefore'),
-    ],
-    ...renderAsRequiredPropTest,
-    ...requiredPropTest,
-    ...validationStatePropTest,
-    ...validationTextPropTest,
-  ])('renders with props: "%s"', (testedProps, assert) => {
-    const dom = render((
-      <Toggle
-        {...mandatoryProps}
-        {...testedProps}
-      />
-    ));
-
-    assert(dom.container.firstChild);
-  });
-});
-
-describe('functionality', () => {
-  it('calls synthetic event onChange() on toggling', async () => {
-    const spy = jest.fn();
-    render((
-      <Toggle
-        {...mandatoryProps}
-        onChange={spy}
-      />
-    ));
-
-    await userEvent.click(screen.getByRole('checkbox'));
-    expect(spy).toHaveBeenCalled();
-  });
-});
diff --git a/tests/playwright/index.ts b/tests/playwright/index.ts
index 77dca9135..86173244d 100644
--- a/tests/playwright/index.ts
+++ b/tests/playwright/index.ts
@@ -2,17 +2,30 @@ import { actionColorPropTest } from './propTests/actionColorPropTest';
 import { afterLabelPropTest } from './propTests/afterLabelPropTest';
 import { beforeLabelPropTest } from './propTests/beforeLabelPropTest';
 import { blockPropTest } from './propTests/blockPropTest';
+import { defaultComponentPropTest } from './propTests/defaultComponentPropTest';
 import { disabledPropTest } from './propTests/disabledPropTest';
+import { checkedPropTest } from './propTests/checkedPropTest';
 import { endCornerPropTest } from './propTests/endCornerPropTest';
 import { feedbackColorPropTest } from './propTests/feedbackColorPropTest';
 import { feedbackIconPropTest } from './propTests/feedbackIconPropTest';
+import { fullWidthPropTest } from './propTests/fullWidthPropTest';
+import { helpTextPropTest } from './propTests/helpTextPropTest';
+import { helpTextAndValidationTextPropType } from './propTests/helpTextAndValidationTextPropType';
 import { iconPropTest } from './propTests/iconPropTest';
+import { isLabelVisiblePropTest } from './propTests/isLabelVisiblePropTest';
+import { labelPositionPropTest } from './propTests/labelPositionPropTest';
 import { labelPropTest } from './propTests/labelPropTest';
 import { labelVisibilityPropTest } from './propTests/labelVisibilityPropTest';
+import { layoutPropTest } from './propTests/layoutPropTest';
 import { neutralColorPropTest } from './propTests/neutralColorPropTest';
 import { priorityPropTest } from './propTests/priorityPropTest';
+import { renderAsRequiredPropTest } from './propTests/renderAsRequiredPropTest';
 import { sizePropTest } from './propTests/sizePropTest';
 import { startCornerPropTest } from './propTests/startCornerPropTest';
+import { validationStatePropTest } from './propTests/validationStatePropTest';
+import { validationTextPropTest } from './propTests/validationTextPropTest';
+import { variantPropTest } from './propTests/variantPropTest';
+import { requiredPropTest } from './propTests/requiredPropTest';
 
 export { TestIcon } from './components/TestIcon';
 
@@ -23,16 +36,29 @@ export const propTests = {
   afterLabelPropTest,
   beforeLabelPropTest,
   blockPropTest,
+  checkedPropTest,
+  defaultComponentPropTest,
   disabledPropTest,
   endCornerPropTest,
   feedbackColorPropTest,
   feedbackIconPropTest,
+  fullWidthPropTest,
+  helpTextAndValidationTextPropType,
+  helpTextPropTest,
   iconPropTest,
+  isLabelVisiblePropTest,
+  labelPositionPropTest,
   labelPropTest,
   labelVisibilityPropTest,
+  layoutPropTest,
   neutralColorPropTest,
   priorityPropTest,
+  renderAsRequiredPropTest,
+  requiredPropTest,
   sizePropTest,
   startCornerPropTest,
+  validationStatePropTest,
+  validationTextPropTest,
+  variantPropTest,
 };
 
diff --git a/tests/playwright/propTests/actionColorPropTest.ts b/tests/playwright/propTests/actionColorPropTest.ts
index f25e6cfa7..653da744b 100644
--- a/tests/playwright/propTests/actionColorPropTest.ts
+++ b/tests/playwright/propTests/actionColorPropTest.ts
@@ -2,15 +2,15 @@ import type { PropTests } from '../types';
 
 export const actionColorPropTest: PropTests = [
   {
-    name: 'color=primary',
+    name: 'color:string=primary',
     props: { color: 'primary' },
   },
   {
-    name: 'color=secondary',
+    name: 'color:string=secondary',
     props: { color: 'secondary' },
   },
   {
-    name: 'color=selected',
+    name: 'color:string=selected',
     props: { color: 'selected' },
   },
 ];
diff --git a/tests/playwright/propTests/afterLabelPropTest.tsx b/tests/playwright/propTests/afterLabelPropTest.tsx
index 119444757..2c0434fad 100644
--- a/tests/playwright/propTests/afterLabelPropTest.tsx
+++ b/tests/playwright/propTests/afterLabelPropTest.tsx
@@ -4,7 +4,7 @@ import type { PropTests } from '../types';
 
 export const afterLabelPropTest: PropTests = [
   {
-    name: 'afterLabel',
+    name: 'afterLabel:node',
     props: { afterLabel: <TestIcon /> },
   },
 ];
diff --git a/tests/playwright/propTests/beforeLabelPropTest.tsx b/tests/playwright/propTests/beforeLabelPropTest.tsx
index c7059842f..b2d0c8f0f 100644
--- a/tests/playwright/propTests/beforeLabelPropTest.tsx
+++ b/tests/playwright/propTests/beforeLabelPropTest.tsx
@@ -4,7 +4,7 @@ import type { PropTests } from '../types';
 
 export const beforeLabelPropTest: PropTests = [
   {
-    name: 'beforeLabel',
+    name: 'beforeLabel:node',
     props: { beforeLabel: <TestIcon /> },
   },
 ];
diff --git a/tests/playwright/propTests/blockPropTest.ts b/tests/playwright/propTests/blockPropTest.ts
index d7ada604b..03fc17584 100644
--- a/tests/playwright/propTests/blockPropTest.ts
+++ b/tests/playwright/propTests/blockPropTest.ts
@@ -2,11 +2,11 @@ import type { PropTests } from '../types';
 
 export const blockPropTest: PropTests = [
   {
-    name: 'block=false',
+    name: 'block:boolean=false',
     props: { block: false },
   },
   {
-    name: 'block=true',
+    name: 'block:boolean=true',
     props: { block: true },
   },
 ];
diff --git a/tests/playwright/propTests/checkedPropTest.ts b/tests/playwright/propTests/checkedPropTest.ts
new file mode 100644
index 000000000..f89a2fef1
--- /dev/null
+++ b/tests/playwright/propTests/checkedPropTest.ts
@@ -0,0 +1,12 @@
+import type { PropTests } from '../types';
+
+export const checkedPropTest: PropTests = [
+  {
+    name: 'checked:boolean=true',
+    props: { checked: true },
+  },
+  {
+    name: 'checked:boolean=false',
+    props: { checked: false },
+  },
+];
diff --git a/tests/playwright/propTests/defaultComponentPropTest.ts b/tests/playwright/propTests/defaultComponentPropTest.ts
new file mode 100644
index 000000000..d42ba6d8d
--- /dev/null
+++ b/tests/playwright/propTests/defaultComponentPropTest.ts
@@ -0,0 +1,8 @@
+import type { PropTests } from '../types';
+
+export const defaultComponentPropTest: PropTests = [
+  {
+    name: 'defaultComponentProps:object',
+    props: {},
+  },
+];
diff --git a/tests/playwright/propTests/disabledPropTest.ts b/tests/playwright/propTests/disabledPropTest.ts
index 8d7502d3b..efb0116f4 100644
--- a/tests/playwright/propTests/disabledPropTest.ts
+++ b/tests/playwright/propTests/disabledPropTest.ts
@@ -2,11 +2,11 @@ import type { PropTests } from '../types';
 
 export const disabledPropTest: PropTests = [
   {
-    name: 'disabled=false',
+    name: 'disabled:boolean=false',
     props: { disabled: false },
   },
   {
-    name: 'disabled=true',
+    name: 'disabled:boolean=true',
     props: { disabled: true },
   },
 ];
diff --git a/tests/playwright/propTests/endCornerPropTest.tsx b/tests/playwright/propTests/endCornerPropTest.tsx
index 13fbfebeb..b316bb46c 100644
--- a/tests/playwright/propTests/endCornerPropTest.tsx
+++ b/tests/playwright/propTests/endCornerPropTest.tsx
@@ -4,7 +4,7 @@ import type { PropTests } from '../types';
 
 export const endCornerPropTest: PropTests = [
   {
-    name: 'endCorner',
+    name: 'endCorner:node',
     props: { endCorner: <TestIcon /> },
   },
 ];
diff --git a/tests/playwright/propTests/feedbackColorPropTest.ts b/tests/playwright/propTests/feedbackColorPropTest.ts
index 2d59cf8c9..6f8fd1096 100644
--- a/tests/playwright/propTests/feedbackColorPropTest.ts
+++ b/tests/playwright/propTests/feedbackColorPropTest.ts
@@ -2,27 +2,27 @@ import type { PropTests } from '../types';
 
 export const feedbackColorPropTest: PropTests = [
   {
-    name: 'color=danger',
+    name: 'color:string=danger',
     props: { color: 'danger' },
   },
   {
-    name: 'color=help',
+    name: 'color:string=help',
     props: { color: 'help' },
   },
   {
-    name: 'color=info',
+    name: 'color:string=info',
     props: { color: 'info' },
   },
   {
-    name: 'color=note',
+    name: 'color:string=note',
     props: { color: 'note' },
   },
   {
-    name: 'color=success',
+    name: 'color:string=success',
     props: { color: 'success' },
   },
   {
-    name: 'color=warning',
+    name: 'color:string=warning',
     props: { color: 'warning' },
   },
 ];
diff --git a/tests/playwright/propTests/feedbackIconPropTest.tsx b/tests/playwright/propTests/feedbackIconPropTest.tsx
index 538d22abb..b5124b720 100644
--- a/tests/playwright/propTests/feedbackIconPropTest.tsx
+++ b/tests/playwright/propTests/feedbackIconPropTest.tsx
@@ -4,7 +4,7 @@ import type { PropTests } from '../types';
 
 export const feedbackIconPropTest: PropTests = [
   {
-    name: 'feedbackIcon',
+    name: 'feedbackIcon:node',
     props: { feedbackIcon: <TestIcon /> },
   },
 ];
diff --git a/tests/playwright/propTests/fullWidthPropTest.ts b/tests/playwright/propTests/fullWidthPropTest.ts
new file mode 100644
index 000000000..272b013fc
--- /dev/null
+++ b/tests/playwright/propTests/fullWidthPropTest.ts
@@ -0,0 +1,12 @@
+import type { PropTests } from '../types';
+
+export const fullWidthPropTest: PropTests = [
+  {
+    name: 'fullWidth:boolean=true',
+    props: { fullWidth: true },
+  },
+  {
+    name: 'fullWidth:boolean=false',
+    props: { fullWidth: false },
+  },
+];
diff --git a/tests/playwright/propTests/helpTextAndValidationTextPropType.ts b/tests/playwright/propTests/helpTextAndValidationTextPropType.ts
new file mode 100644
index 000000000..b245fc203
--- /dev/null
+++ b/tests/playwright/propTests/helpTextAndValidationTextPropType.ts
@@ -0,0 +1,25 @@
+import type { PropTests } from '../types';
+
+export const helpTextAndValidationTextPropType: PropTests = [
+  {
+    name: 'helpText:string & validationText:undefined',
+    props: {
+      helpText: 'Some normal helpText.',
+      validationText: undefined,
+    },
+  },
+  {
+    name: 'helpText:undefined & validationText:string',
+    props: {
+      helpText: undefined,
+      validationText: 'Some normal validationText.',
+    },
+  },
+  {
+    name: 'helpText:string & validationText:string',
+    props: {
+      helpText: 'Some normal helpText.',
+      validationText: 'Some normal validationText.',
+    },
+  },
+];
diff --git a/tests/playwright/propTests/helpTextPropTest.tsx b/tests/playwright/propTests/helpTextPropTest.tsx
new file mode 100644
index 000000000..13fbe6583
--- /dev/null
+++ b/tests/playwright/propTests/helpTextPropTest.tsx
@@ -0,0 +1,17 @@
+import React from 'react';
+import type { PropTests } from '../types';
+
+export const helpTextPropTest: PropTests = [
+  {
+    name: 'helpText:string[long]',
+    props: { helpText: 'Extra long helpText that exceeds regular length that anyone would expect to input in this property.' },
+  },
+  {
+    name: 'helpText:string[normal]',
+    props: { helpText: 'Some normal helpText.' },
+  },
+  {
+    name: 'helpText:node[normal]',
+    props: { validationText: <div>Node help text</div> },
+  },
+];
diff --git a/tests/playwright/propTests/iconPropTest.tsx b/tests/playwright/propTests/iconPropTest.tsx
index c24f7861e..7131cc3de 100644
--- a/tests/playwright/propTests/iconPropTest.tsx
+++ b/tests/playwright/propTests/iconPropTest.tsx
@@ -4,7 +4,7 @@ import type { PropTests } from '../types';
 
 export const iconPropTest: PropTests = [
   {
-    name: 'icon',
+    name: 'icon:node',
     props: { icon: <TestIcon /> },
   },
 ];
diff --git a/tests/playwright/propTests/isLabelVisiblePropTest.ts b/tests/playwright/propTests/isLabelVisiblePropTest.ts
new file mode 100644
index 000000000..1f7416422
--- /dev/null
+++ b/tests/playwright/propTests/isLabelVisiblePropTest.ts
@@ -0,0 +1,12 @@
+import type { PropTests } from '../types';
+
+export const isLabelVisiblePropTest: PropTests = [
+  {
+    name: 'isLabelVisible:boolean=true',
+    props: { isLabelVisible: true },
+  },
+  {
+    name: 'isLabelVisible:boolean=false',
+    props: { isLabelVisible: false },
+  },
+];
diff --git a/tests/playwright/propTests/labelPositionPropTest.ts b/tests/playwright/propTests/labelPositionPropTest.ts
new file mode 100644
index 000000000..4f0fd33f4
--- /dev/null
+++ b/tests/playwright/propTests/labelPositionPropTest.ts
@@ -0,0 +1,12 @@
+import type { PropTests } from '../types';
+
+export const labelPositionPropTest: PropTests = [
+  {
+    name: 'labelPosition:string=before',
+    props: { labelPosition: 'before' },
+  },
+  {
+    name: 'labelPosition:string=after',
+    props: { labelPosition: 'after' },
+  },
+];
diff --git a/tests/playwright/propTests/labelPropTest.ts b/tests/playwright/propTests/labelPropTest.tsx
similarity index 56%
rename from tests/playwright/propTests/labelPropTest.ts
rename to tests/playwright/propTests/labelPropTest.tsx
index bba722840..d502504c1 100644
--- a/tests/playwright/propTests/labelPropTest.ts
+++ b/tests/playwright/propTests/labelPropTest.tsx
@@ -1,8 +1,13 @@
+import React from 'react';
 import type { PropTests } from '../types';
 
 export const labelPropTest: PropTests = [
   {
-    name: 'label',
+    name: 'label:string[long]',
     props: { label: 'Extra long label that exceeds regular length that anyone would expect' },
   },
+  {
+    name: 'label:node[normal]',
+    props: { label: <div>Label as node</div> },
+  },
 ];
diff --git a/tests/playwright/propTests/labelVisibilityPropTest.ts b/tests/playwright/propTests/labelVisibilityPropTest.ts
index 47506c233..920632ee3 100644
--- a/tests/playwright/propTests/labelVisibilityPropTest.ts
+++ b/tests/playwright/propTests/labelVisibilityPropTest.ts
@@ -6,13 +6,13 @@ const windowHeight = 100;
 const generateLabelVisibilityPropTests = () => {
   const tests: PropTests = [
     {
-      name: 'labelVisibility: none (hidden)',
+      name: 'labelVisibility:string[hidden]=none',
       props: {
         labelVisibility: 'none',
       },
     },
     {
-      name: 'labelVisibility: xs (visible)',
+      name: 'labelVisibility:string[visible]=xs',
       props: {
         labelVisibility: 'xs',
       },
@@ -21,7 +21,7 @@ const generateLabelVisibilityPropTests = () => {
 
   Object.entries(breakpoints).forEach(([breakpointName, breakpointValue]) => {
     tests.push({
-      name: `labelVisibility: ${breakpointName} (visible)`,
+      name: `labelVisibility:string[visible]=${breakpointName}`,
       onBeforeTest: async (page) => {
         await page.setViewportSize({
           height: windowHeight,
@@ -33,7 +33,7 @@ const generateLabelVisibilityPropTests = () => {
       },
     });
     tests.push({
-      name: `labelVisibility: ${breakpointName} (hidden)`,
+      name: `labelVisibility:string[hidden]=${breakpointName}`,
       onBeforeTest: async (page) => {
         await page.setViewportSize({
           height: windowHeight,
diff --git a/tests/playwright/propTests/layoutPropTest.ts b/tests/playwright/propTests/layoutPropTest.ts
new file mode 100644
index 000000000..56be46962
--- /dev/null
+++ b/tests/playwright/propTests/layoutPropTest.ts
@@ -0,0 +1,12 @@
+import type { PropTests } from '../types';
+
+export const layoutPropTest: PropTests = [
+  {
+    name: 'layout:string=vertical',
+    props: { layout: 'vertical' },
+  },
+  {
+    name: 'layout:string=horizontal',
+    props: { layout: 'horizontal' },
+  },
+];
diff --git a/tests/playwright/propTests/neutralColorPropTest.ts b/tests/playwright/propTests/neutralColorPropTest.ts
index faa5d5f36..d8c8950e6 100644
--- a/tests/playwright/propTests/neutralColorPropTest.ts
+++ b/tests/playwright/propTests/neutralColorPropTest.ts
@@ -2,11 +2,11 @@ import type { PropTests } from '../types';
 
 export const neutralColorPropTest: PropTests = [
   {
-    name: 'color=dark',
+    name: 'color:string=dark',
     props: { color: 'dark' },
   },
   {
-    name: 'color=light',
+    name: 'color:string=light',
     props: { color: 'light' },
   },
 ];
diff --git a/tests/playwright/propTests/priorityPropTest.ts b/tests/playwright/propTests/priorityPropTest.ts
index 8f9c17f1e..94a56e56c 100644
--- a/tests/playwright/propTests/priorityPropTest.ts
+++ b/tests/playwright/propTests/priorityPropTest.ts
@@ -2,15 +2,15 @@ import type { PropTests } from '../types';
 
 export const priorityPropTest: PropTests = [
   {
-    name: 'priority=filled',
+    name: 'priority:string=filled',
     props: { priority: 'filled' },
   },
   {
-    name: 'priority=outline',
+    name: 'priority:string=outline',
     props: { priority: 'outline' },
   },
   {
-    name: 'priority=flat',
+    name: 'priority:string=flat',
     props: { priority: 'flat' },
   },
 ];
diff --git a/tests/playwright/propTests/renderAsRequiredPropTest.ts b/tests/playwright/propTests/renderAsRequiredPropTest.ts
new file mode 100644
index 000000000..c5f1a5cd1
--- /dev/null
+++ b/tests/playwright/propTests/renderAsRequiredPropTest.ts
@@ -0,0 +1,12 @@
+import type { PropTests } from '../types';
+
+export const renderAsRequiredPropTest: PropTests = [
+  {
+    name: 'renderAsRequired:boolean=true',
+    props: { renderAsRequired: true },
+  },
+  {
+    name: 'renderAsRequired:boolean=false',
+    props: { renderAsRequired: false },
+  },
+];
diff --git a/tests/playwright/propTests/requiredPropTest.ts b/tests/playwright/propTests/requiredPropTest.ts
new file mode 100644
index 000000000..88448d7d0
--- /dev/null
+++ b/tests/playwright/propTests/requiredPropTest.ts
@@ -0,0 +1,12 @@
+import type { PropTests } from '../types';
+
+export const requiredPropTest: PropTests = [
+  {
+    name: 'required:boolean=true',
+    props: { required: true },
+  },
+  {
+    name: 'required:boolean=false',
+    props: { required: false },
+  },
+];
diff --git a/tests/playwright/propTests/sizePropTest.ts b/tests/playwright/propTests/sizePropTest.ts
index af7956302..b8844ad62 100644
--- a/tests/playwright/propTests/sizePropTest.ts
+++ b/tests/playwright/propTests/sizePropTest.ts
@@ -2,15 +2,15 @@ import type { PropTests } from '../types';
 
 export const sizePropTest: PropTests = [
   {
-    name: 'size=small',
+    name: 'size:string=small',
     props: { size: 'small' },
   },
   {
-    name: 'size=medium',
+    name: 'size:string=medium',
     props: { size: 'medium' },
   },
   {
-    name: 'size=large',
+    name: 'size:string=large',
     props: { size: 'large' },
   },
 ];
diff --git a/tests/playwright/propTests/startCornerPropTest.tsx b/tests/playwright/propTests/startCornerPropTest.tsx
index 4d43c7e21..e29b04b3f 100644
--- a/tests/playwright/propTests/startCornerPropTest.tsx
+++ b/tests/playwright/propTests/startCornerPropTest.tsx
@@ -4,7 +4,7 @@ import type { PropTests } from '../types';
 
 export const startCornerPropTest: PropTests = [
   {
-    name: 'startCorner',
+    name: 'startCorner:node',
     props: { startCorner: <TestIcon /> },
   },
 ];
diff --git a/tests/playwright/propTests/validationStatePropTest.ts b/tests/playwright/propTests/validationStatePropTest.ts
new file mode 100644
index 000000000..f90a38d2f
--- /dev/null
+++ b/tests/playwright/propTests/validationStatePropTest.ts
@@ -0,0 +1,20 @@
+import type { PropTests } from '../types';
+
+export const validationStatePropTest: PropTests = [
+  {
+    name: 'validationState:string=valid',
+    props: { validationState: 'valid' },
+  },
+  {
+    name: 'validationState:string=warning',
+    props: { validationState: 'warning' },
+  },
+  {
+    name: 'validationState:string=invalid',
+    props: { validationState: 'invalid' },
+  },
+  {
+    name: 'validationState:undefined',
+    props: { validationState: undefined },
+  },
+];
diff --git a/tests/playwright/propTests/validationTextPropTest.tsx b/tests/playwright/propTests/validationTextPropTest.tsx
new file mode 100644
index 000000000..39d93d15c
--- /dev/null
+++ b/tests/playwright/propTests/validationTextPropTest.tsx
@@ -0,0 +1,17 @@
+import React from 'react';
+import type { PropTests } from '../types';
+
+export const validationTextPropTest: PropTests = [
+  {
+    name: 'validationText:string[long]',
+    props: { validationText: 'Extra long validationText that exceeds regular length that anyone would expect to input in this property.' },
+  },
+  {
+    name: 'validationText:string[normal]',
+    props: { validationText: 'Some normal validationText.' },
+  },
+  {
+    name: 'validationText:node[normal]',
+    props: { validationText: <div>Node validation text</div> },
+  },
+];
diff --git a/tests/playwright/propTests/variantPropTest.ts b/tests/playwright/propTests/variantPropTest.ts
new file mode 100644
index 000000000..b734c2363
--- /dev/null
+++ b/tests/playwright/propTests/variantPropTest.ts
@@ -0,0 +1,12 @@
+import type { PropTests } from '../types';
+
+export const variantPropTest: PropTests = [
+  {
+    name: 'variant:string=filled',
+    props: { variant: 'filled' },
+  },
+  {
+    name: 'variant:string=outline',
+    props: { variant: 'outline' },
+  },
+];
diff --git a/tests/playwright/types.ts b/tests/playwright/types.ts
index d174c283d..499f7c780 100644
--- a/tests/playwright/types.ts
+++ b/tests/playwright/types.ts
@@ -1,7 +1,9 @@
+import type { MountResult } from '@playwright/experimental-ct-react';
 import type { Page } from 'playwright/test';
 
 export type PropTest = {
   name: string,
+  onBeforeSnapshot?: (page: Page, component: MountResult) => Promise<void>,
   onBeforeTest?: (page: Page) => Promise<void>,
   props: {
     [name: string]: unknown