diff --git a/packages/theme/styles/components.scss b/packages/theme/styles/components.scss
index aad085c539..51f5fbf52b 100644
--- a/packages/theme/styles/components.scss
+++ b/packages/theme/styles/components.scss
@@ -431,6 +431,15 @@
       }
     }
   }
+  &.marker-visible.checked {
+    .marker {
+      background-color: var(--primary-button-disabled);
+
+      &::after {
+        content: '';
+      }
+    }
+  }
   &.disabled {
     cursor: not-allowed;
 
diff --git a/packages/ui/src/components/RadioButton.svelte b/packages/ui/src/components/RadioButton.svelte
index 5fbe1fe429..bc72f71c96 100644
--- a/packages/ui/src/components/RadioButton.svelte
+++ b/packages/ui/src/components/RadioButton.svelte
@@ -29,6 +29,7 @@
   export let action: () => void = () => {}
   export let gap: 'large' | 'small' | 'medium' | 'none' = 'none'
   export let labelGap: 'large' | 'medium' = 'medium'
+  export let isMarkerVisible: boolean = false
 </script>
 
 <!-- svelte-ignore a11y-click-events-have-key-events -->
@@ -38,6 +39,7 @@
   class:disabled
   class:checked={group === value}
   tabindex="-1"
+  class:marker-visible={isMarkerVisible}
   on:click={() => {
     if (!disabled && group !== value) action()
   }}