diff --git a/es-ds-components/components/es-form-radio-card.vue b/es-ds-components/components/es-form-radio-card.vue
new file mode 100644
index 000000000..1fac66c65
--- /dev/null
+++ b/es-ds-components/components/es-form-radio-card.vue
@@ -0,0 +1,57 @@
+<script setup lang="ts">
+import { useFocus } from '@vueuse/core';
+
+const inputElem = useTemplateRef('input-elem');
+const { focused: inputFocused } = useFocus(inputElem);
+
+/* eslint-disable @typescript-eslint/no-explicit-any */
+interface IProps {
+    id: string;
+    name: string;
+    value: any;
+    disabled?: boolean;
+    inline?: boolean;
+    displayName?: string;
+}
+
+const props = withDefaults(defineProps<IProps>(), {
+    disabled: false,
+    inline: false,
+    displayName: '',
+});
+
+// Need to define the implicit emit from v-model, so that it can also get fired
+// from the label clicks
+const emit = defineEmits(['update:modelValue']);
+
+function handleRadioButtonClick() {
+    if (!props.disabled) {
+        emit('update:modelValue', props.value);
+    }
+}
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const model = defineModel<any>();
+const isChecked = computed(() => props.value === model.value);
+</script>
+
+<template>
+    <label
+        class="es-form-radio-card es-card interactive w-100 btn btn-outline-primary"
+        :class="{ active: isChecked, disabled: props.disabled, focus: isChecked || inputFocused }"
+        @click="handleRadioButtonClick">
+        <input
+            :id="id"
+            ref="input-elem"
+            v-model="model"
+            :disabled="props.disabled"
+            type="radio"
+            name="props.name"
+            :value="props.value"
+            :checked="isChecked"
+            @click="handleRadioButtonClick" />
+        <slot>
+            {{ displayName }}
+        </slot>
+    </label>
+</template>
diff --git a/es-ds-components/components/es-form-radio-cards.vue b/es-ds-components/components/es-form-radio-cards.vue
new file mode 100644
index 000000000..3e0922fed
--- /dev/null
+++ b/es-ds-components/components/es-form-radio-cards.vue
@@ -0,0 +1,78 @@
+<script setup lang="ts">
+interface Option {
+    id: string;
+    text: string;
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    value: any;
+    disabled?: boolean;
+    inline?: boolean;
+}
+
+interface Props {
+    id: string;
+    label: string;
+    name?: string;
+    options?: Option[];
+    inline?: boolean;
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    modelValue?: any;
+    hasIcon?: boolean;
+    labelClass?: string;
+    labelSrOnly?: boolean;
+}
+const props = withDefaults(defineProps<Props>(), {
+    name: '',
+    options: undefined,
+    inline: false,
+    modelValue: undefined,
+    hasIcon: false,
+    labelClass: 'font-size-h3',
+    labelSrOnly: false,
+});
+
+const emit = defineEmits(['update:model-value']);
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+function handleUpdate(value: any) {
+    emit('update:model-value', value);
+}
+</script>
+
+<template>
+    <fieldset
+        :id="`${props.id}-fieldset`"
+        class="form-group">
+        <legend
+            :id="`${props.id}-legend`"
+            class="font-size-h1 font-weight-bolder mb-200 pb-0 text-dark"
+            :class="{ 'sr-only': props.labelSrOnly }"
+            tabindex="-1">
+            {{ props.label }}
+        </legend>
+        <div>
+            <div
+                :id="`${props.id}-radiogroup`"
+                role="radiogroup"
+                tabindex="-1"
+                class="es-form-radio-cards d-flex justify-content-center btn-group-vertical"
+                :class="{ 'has-icon': props.hasIcon }">
+                <slot :options="options">
+                    <es-form-radio-card
+                        v-for="option in options"
+                        :id="option.id"
+                        :key="option.value"
+                        :disabled="option?.disabled || false"
+                        :name="props.name"
+                        :value="option.value"
+                        :model-value="props.modelValue"
+                        :inline="props.inline || false"
+                        @update:model-value="handleUpdate">
+                        <span :class="props.labelClass">
+                            {{ option.text }}
+                        </span>
+                    </es-form-radio-card>
+                </slot>
+            </div>
+        </div>
+    </fieldset>
+</template>
diff --git a/es-ds-components/components/es-radio-button-group.vue b/es-ds-components/components/es-radio-button-group.vue
index 80ce3aa85..e7a0ffb1d 100644
--- a/es-ds-components/components/es-radio-button-group.vue
+++ b/es-ds-components/components/es-radio-button-group.vue
@@ -1,14 +1,6 @@
 <script setup lang="ts">
-/*
-Similar API to https://bootstrap-vue.org/docs/components/form-radio#component-reference
-
-Only more restrained, and based on historical usage. Things like configurable
-value field aren't supported as they weren't used downstream.
-
-Similarly things like size are not implemented
-*/
-
 interface IOptions {
+    id: string;
     text: string;
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     value: any;
@@ -21,16 +13,17 @@ interface IProps {
     name?: string;
     options?: IOptions[];
     inline?: boolean;
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    modelValue?: any;
 }
-
-withDefaults(defineProps<IProps>(), {
+const props = withDefaults(defineProps<IProps>(), {
     inline: false,
     name: '',
     options: undefined,
+    modelValue: undefined,
 });
 
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-const model = defineModel<any>();
+defineEmits(['update:model-value']);
 </script>
 
 <template>
@@ -38,24 +31,23 @@ const model = defineModel<any>();
         :id="id"
         class="form-group">
         <legend
-            :id="`legend-${id}`"
+            :id="`${props.id}-legend`"
             class="font-size-100"
             tabindex="-1">
-            {{ label }}
+            {{ props.label }}
         </legend>
-        <template v-if="$slots.default">
-            <slot />
-        </template>
-        <template v-else>
+        <slot :options="options">
             <es-radio-button
                 v-for="option in options"
+                :id="option.id"
                 :key="option.value"
-                v-model="model"
                 :disabled="option?.disabled || false"
-                :display-name="option?.text"
-                :group-name="name"
-                :inline="inline"
-                :value="option.value" />
-        </template>
+                :name="props.name"
+                :value="option.value"
+                :model-value="props.modelValue"
+                :inline="props.inline || false"
+                :display-name="option.text"
+                @update:model-value="$emit('update:model-value', option.value)" />
+        </slot>
     </fieldset>
 </template>
diff --git a/es-ds-components/components/es-radio-button.vue b/es-ds-components/components/es-radio-button.vue
index b171a7aa4..355d3a2c5 100644
--- a/es-ds-components/components/es-radio-button.vue
+++ b/es-ds-components/components/es-radio-button.vue
@@ -1,40 +1,57 @@
 <script setup lang="ts">
-import RadioButton from 'primevue/radiobutton';
-
+/* eslint-disable @typescript-eslint/no-explicit-any */
 interface IProps {
+    name: string;
+    value: any;
+    id: string;
     disabled?: boolean;
-    displayName: string;
-    groupName?: string;
     inline?: boolean;
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    value: any;
+    displayName?: string;
 }
 
 const props = withDefaults(defineProps<IProps>(), {
     disabled: false,
-    displayName: '',
-    groupName: '',
     inline: false,
-    value: null,
+    displayName: '',
 });
+
+// Need to define the implicit emit from v-model, so that it can also get fired
+// from the label clicks
+const emit = defineEmits(['update:modelValue']);
+function handleRadioButtonClick() {
+    if (!props.disabled) {
+        emit('update:modelValue', props.value);
+    }
+}
+
+// Similar to the API of https://bootstrap-vue.org/docs/components/form-radio#changing-the-option-field-names
+// the value can be a string, number, or simple object. Avoid using complex types in values.
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const model = defineModel<any>();
+const isChecked = computed(() => props.value === model.value);
 </script>
 
 <template>
-    <div :class="`custom-control custom-radio custom-control${inline ? '-inline' : ''}`">
-        <radio-button
+    <div
+        class="custom-control custom-radio"
+        :class="{ 'custom-control-inline': props.inline }">
+        <input
+            :id="id"
+            v-model="model"
+            :disabled="props.disabled"
+            type="radio"
+            :name="props.name"
             class="custom-control-input"
-            input-class="custom-radio-input"
-            v-bind="$attrs"
-            :disabled="disabled"
-            :input-id="`${props.value}-${props.groupName}`"
-            :name="props.groupName"
-            :value="props.value" />
-        <slot>
-            <label
-                :for="`${props.value}-${props.groupName}`"
-                class="custom-control-label">
-                {{ props.displayName }}
-            </label>
-        </slot>
+            :value="props.value"
+            :checked="isChecked"
+            @click="handleRadioButtonClick" />
+        <label
+            class="custom-control-label"
+            :for="id"
+            @click="handleRadioButtonClick">
+            <slot>
+                {{ displayName }}
+            </slot>
+        </label>
     </div>
 </template>
diff --git a/es-ds-components/nuxt.config.ts b/es-ds-components/nuxt.config.ts
index 3129776df..074e32957 100644
--- a/es-ds-components/nuxt.config.ts
+++ b/es-ds-components/nuxt.config.ts
@@ -48,6 +48,7 @@ export default defineNuxtConfig({
                 '@vuelidate/core',
                 '@vuelidate/validators',
                 'html-truncate',
+                '@vueuse/core',
                 'primevue/accordion',
                 'primevue/accordiontab',
                 'primevue/breadcrumb',
diff --git a/es-ds-components/package-lock.json b/es-ds-components/package-lock.json
index 9db216507..880ebb049 100644
--- a/es-ds-components/package-lock.json
+++ b/es-ds-components/package-lock.json
@@ -12,6 +12,7 @@
                 "@nuxtjs/google-fonts": "^3.2.0",
                 "@vuelidate/core": "^2.0.3",
                 "@vuelidate/validators": "^2.0.4",
+                "@vueuse/core": "^11.1.0",
                 "html-truncate": "^1.2.2",
                 "nuxt": "^3.13.1",
                 "nuxt-primevue": "^3.0.0",
@@ -2336,6 +2337,11 @@
             "resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-1.20.2.tgz",
             "integrity": "sha512-60BCwRFOZCQhDncwQdxxeOEEkbc5dIMccYLwbxsS4TUNeVECQ/pBJ0j09mrHOl/JJvpRPGwO9SvE4nR2Nb/a4Q=="
         },
+        "node_modules/@types/web-bluetooth": {
+            "version": "0.0.20",
+            "resolved": "https://registry.npmjs.org/@types/web-bluetooth/-/web-bluetooth-0.0.20.tgz",
+            "integrity": "sha512-g9gZnnXVq7gM7v3tJCWV/qw7w+KeOlSHAhgF9RytFyifW6AF61hdT2ucrYhPq9hLs5JIryeupHV3qGk95dH9ow=="
+        },
         "node_modules/@typescript-eslint/eslint-plugin": {
             "version": "8.4.0",
             "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-8.4.0.tgz",
@@ -3499,6 +3505,89 @@
                 }
             }
         },
+        "node_modules/@vueuse/core": {
+            "version": "11.1.0",
+            "resolved": "https://registry.npmjs.org/@vueuse/core/-/core-11.1.0.tgz",
+            "integrity": "sha512-P6dk79QYA6sKQnghrUz/1tHi0n9mrb/iO1WTMk/ElLmTyNqgDeSZ3wcDf6fRBGzRJbeG1dxzEOvLENMjr+E3fg==",
+            "dependencies": {
+                "@types/web-bluetooth": "^0.0.20",
+                "@vueuse/metadata": "11.1.0",
+                "@vueuse/shared": "11.1.0",
+                "vue-demi": ">=0.14.10"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/antfu"
+            }
+        },
+        "node_modules/@vueuse/core/node_modules/vue-demi": {
+            "version": "0.14.10",
+            "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.10.tgz",
+            "integrity": "sha512-nMZBOwuzabUO0nLgIcc6rycZEebF6eeUfaiQx9+WSk8e29IbLvPU9feI6tqW4kTo3hvoYAJkMh8n8D0fuISphg==",
+            "hasInstallScript": true,
+            "bin": {
+                "vue-demi-fix": "bin/vue-demi-fix.js",
+                "vue-demi-switch": "bin/vue-demi-switch.js"
+            },
+            "engines": {
+                "node": ">=12"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/antfu"
+            },
+            "peerDependencies": {
+                "@vue/composition-api": "^1.0.0-rc.1",
+                "vue": "^3.0.0-0 || ^2.6.0"
+            },
+            "peerDependenciesMeta": {
+                "@vue/composition-api": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/@vueuse/metadata": {
+            "version": "11.1.0",
+            "resolved": "https://registry.npmjs.org/@vueuse/metadata/-/metadata-11.1.0.tgz",
+            "integrity": "sha512-l9Q502TBTaPYGanl1G+hPgd3QX5s4CGnpXriVBR5fEZ/goI6fvDaVmIl3Td8oKFurOxTmbXvBPSsgrd6eu6HYg==",
+            "funding": {
+                "url": "https://github.com/sponsors/antfu"
+            }
+        },
+        "node_modules/@vueuse/shared": {
+            "version": "11.1.0",
+            "resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-11.1.0.tgz",
+            "integrity": "sha512-YUtIpY122q7osj+zsNMFAfMTubGz0sn5QzE5gPzAIiCmtt2ha3uQUY1+JPyL4gRCTsLPX82Y9brNbo/aqlA91w==",
+            "dependencies": {
+                "vue-demi": ">=0.14.10"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/antfu"
+            }
+        },
+        "node_modules/@vueuse/shared/node_modules/vue-demi": {
+            "version": "0.14.10",
+            "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.10.tgz",
+            "integrity": "sha512-nMZBOwuzabUO0nLgIcc6rycZEebF6eeUfaiQx9+WSk8e29IbLvPU9feI6tqW4kTo3hvoYAJkMh8n8D0fuISphg==",
+            "hasInstallScript": true,
+            "bin": {
+                "vue-demi-fix": "bin/vue-demi-fix.js",
+                "vue-demi-switch": "bin/vue-demi-switch.js"
+            },
+            "engines": {
+                "node": ">=12"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/antfu"
+            },
+            "peerDependencies": {
+                "@vue/composition-api": "^1.0.0-rc.1",
+                "vue": "^3.0.0-0 || ^2.6.0"
+            },
+            "peerDependenciesMeta": {
+                "@vue/composition-api": {
+                    "optional": true
+                }
+            }
+        },
         "node_modules/abbrev": {
             "version": "1.1.1",
             "resolved": "https://registry.npmjs.org/abbrev/-/abbrev-1.1.1.tgz",
diff --git a/es-ds-components/package.json b/es-ds-components/package.json
index a3571e2f8..d448d3446 100644
--- a/es-ds-components/package.json
+++ b/es-ds-components/package.json
@@ -20,12 +20,13 @@
         "@nuxtjs/google-fonts": "^3.2.0",
         "@vuelidate/core": "^2.0.3",
         "@vuelidate/validators": "^2.0.4",
+        "@vueuse/core": "^11.1.0",
+        "html-truncate": "^1.2.2",
         "nuxt": "^3.13.1",
-        "primevue": "^3.53.0",
         "nuxt-primevue": "^3.0.0",
+        "primevue": "^3.53.0",
         "prismjs": "^1.29.0",
-        "vue": "^3.5.4",
-        "html-truncate": "^1.2.2"
+        "vue": "^3.5.4"
     },
     "devDependencies": {
         "@eslint/js": "^9.9.0",
diff --git a/es-ds-docs/components/ds-molecules-list.vue b/es-ds-docs/components/ds-molecules-list.vue
index 995779eb7..3cbaad1d2 100644
--- a/es-ds-docs/components/ds-molecules-list.vue
+++ b/es-ds-docs/components/ds-molecules-list.vue
@@ -51,6 +51,9 @@
         <li>
             <ds-link to="/molecules/radio-button"> Radio button </ds-link>
         </li>
+        <li>
+            <ds-link to="/molecules/radio-cards"> Radio cards </ds-link>
+        </li>
         <li>
             <ds-link to="/molecules/rating"> Rating </ds-link>
         </li>
diff --git a/es-ds-docs/package-lock.json b/es-ds-docs/package-lock.json
index 904325e6e..29b8c8e9c 100644
--- a/es-ds-docs/package-lock.json
+++ b/es-ds-docs/package-lock.json
@@ -14,6 +14,7 @@
                 "@nuxtjs/google-fonts": "^3.2.0",
                 "@vuelidate/core": "^2.0.3",
                 "@vuelidate/validators": "^2.0.4",
+                "@vueuse/core": "^11.1.0",
                 "clipboard": "^2.0.11",
                 "html-truncate": "^1.2.2",
                 "nuxt": "^3.13.1",
@@ -2393,6 +2394,11 @@
             "resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-1.20.2.tgz",
             "integrity": "sha512-60BCwRFOZCQhDncwQdxxeOEEkbc5dIMccYLwbxsS4TUNeVECQ/pBJ0j09mrHOl/JJvpRPGwO9SvE4nR2Nb/a4Q=="
         },
+        "node_modules/@types/web-bluetooth": {
+            "version": "0.0.20",
+            "resolved": "https://registry.npmjs.org/@types/web-bluetooth/-/web-bluetooth-0.0.20.tgz",
+            "integrity": "sha512-g9gZnnXVq7gM7v3tJCWV/qw7w+KeOlSHAhgF9RytFyifW6AF61hdT2ucrYhPq9hLs5JIryeupHV3qGk95dH9ow=="
+        },
         "node_modules/@typescript-eslint/eslint-plugin": {
             "version": "8.4.0",
             "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-8.4.0.tgz",
@@ -3556,6 +3562,89 @@
                 }
             }
         },
+        "node_modules/@vueuse/core": {
+            "version": "11.1.0",
+            "resolved": "https://registry.npmjs.org/@vueuse/core/-/core-11.1.0.tgz",
+            "integrity": "sha512-P6dk79QYA6sKQnghrUz/1tHi0n9mrb/iO1WTMk/ElLmTyNqgDeSZ3wcDf6fRBGzRJbeG1dxzEOvLENMjr+E3fg==",
+            "dependencies": {
+                "@types/web-bluetooth": "^0.0.20",
+                "@vueuse/metadata": "11.1.0",
+                "@vueuse/shared": "11.1.0",
+                "vue-demi": ">=0.14.10"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/antfu"
+            }
+        },
+        "node_modules/@vueuse/core/node_modules/vue-demi": {
+            "version": "0.14.10",
+            "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.10.tgz",
+            "integrity": "sha512-nMZBOwuzabUO0nLgIcc6rycZEebF6eeUfaiQx9+WSk8e29IbLvPU9feI6tqW4kTo3hvoYAJkMh8n8D0fuISphg==",
+            "hasInstallScript": true,
+            "bin": {
+                "vue-demi-fix": "bin/vue-demi-fix.js",
+                "vue-demi-switch": "bin/vue-demi-switch.js"
+            },
+            "engines": {
+                "node": ">=12"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/antfu"
+            },
+            "peerDependencies": {
+                "@vue/composition-api": "^1.0.0-rc.1",
+                "vue": "^3.0.0-0 || ^2.6.0"
+            },
+            "peerDependenciesMeta": {
+                "@vue/composition-api": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/@vueuse/metadata": {
+            "version": "11.1.0",
+            "resolved": "https://registry.npmjs.org/@vueuse/metadata/-/metadata-11.1.0.tgz",
+            "integrity": "sha512-l9Q502TBTaPYGanl1G+hPgd3QX5s4CGnpXriVBR5fEZ/goI6fvDaVmIl3Td8oKFurOxTmbXvBPSsgrd6eu6HYg==",
+            "funding": {
+                "url": "https://github.com/sponsors/antfu"
+            }
+        },
+        "node_modules/@vueuse/shared": {
+            "version": "11.1.0",
+            "resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-11.1.0.tgz",
+            "integrity": "sha512-YUtIpY122q7osj+zsNMFAfMTubGz0sn5QzE5gPzAIiCmtt2ha3uQUY1+JPyL4gRCTsLPX82Y9brNbo/aqlA91w==",
+            "dependencies": {
+                "vue-demi": ">=0.14.10"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/antfu"
+            }
+        },
+        "node_modules/@vueuse/shared/node_modules/vue-demi": {
+            "version": "0.14.10",
+            "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.10.tgz",
+            "integrity": "sha512-nMZBOwuzabUO0nLgIcc6rycZEebF6eeUfaiQx9+WSk8e29IbLvPU9feI6tqW4kTo3hvoYAJkMh8n8D0fuISphg==",
+            "hasInstallScript": true,
+            "bin": {
+                "vue-demi-fix": "bin/vue-demi-fix.js",
+                "vue-demi-switch": "bin/vue-demi-switch.js"
+            },
+            "engines": {
+                "node": ">=12"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/antfu"
+            },
+            "peerDependencies": {
+                "@vue/composition-api": "^1.0.0-rc.1",
+                "vue": "^3.0.0-0 || ^2.6.0"
+            },
+            "peerDependenciesMeta": {
+                "@vue/composition-api": {
+                    "optional": true
+                }
+            }
+        },
         "node_modules/@yarnpkg/lockfile": {
             "version": "1.1.0",
             "resolved": "https://registry.npmjs.org/@yarnpkg/lockfile/-/lockfile-1.1.0.tgz",
diff --git a/es-ds-docs/package.json b/es-ds-docs/package.json
index 0436b2433..578c37b7a 100644
--- a/es-ds-docs/package.json
+++ b/es-ds-docs/package.json
@@ -23,13 +23,14 @@
         "@nuxtjs/google-fonts": "^3.2.0",
         "@vuelidate/core": "^2.0.3",
         "@vuelidate/validators": "^2.0.4",
+        "@vueuse/core": "^11.1.0",
         "clipboard": "^2.0.11",
+        "html-truncate": "^1.2.2",
         "nuxt": "^3.13.1",
         "nuxt-primevue": "^3.0.0",
         "primevue": "^3.53.0",
         "prismjs": "^1.29.0",
-        "vue": "^3.5.4",
-        "html-truncate": "^1.2.2"
+        "vue": "^3.5.4"
     },
     "devDependencies": {
         "@eslint/js": "^9.9.0",
diff --git a/es-ds-docs/pages/molecules/radio-button.vue b/es-ds-docs/pages/molecules/radio-button.vue
index 343b8e8c9..94cc77959 100644
--- a/es-ds-docs/pages/molecules/radio-button.vue
+++ b/es-ds-docs/pages/molecules/radio-button.vue
@@ -1,41 +1,39 @@
 <script setup lang="ts">
-import { ref } from 'vue';
-
 const selectedFruit = ref('banana');
 const fruits = ref([
-    { name: 'Apple', key: 'apple' },
-    { name: 'Banana', key: 'banana' },
-    { name: 'Cherry', key: 'cherry' },
+    { name: 'Apple', key: 'apple', id: 'id_apple' },
+    { name: 'Banana', key: 'banana', id: 'id_banana' },
+    { name: 'Cherry', key: 'cherry', id: 'id_cherry' },
+]);
+const test2Options = ref([
+    { text: 'Toggle this custom radio', value: 'first', id: 'idFirst' },
+    { text: 'Or toggle this other custom radio', value: 'second', id: 'idSecond' },
+    { text: 'This one is Disabled', value: 'third', disabled: true, id: 'idThird' },
+    { text: 'This is the 4th radio', value: { fourth: 4 }, id: 'idFourth' },
 ]);
-const test2Options = [
-    { text: 'Toggle this custom radio', value: 'first' },
-    { text: 'Or toggle this other custom radio', value: 'second' },
-    { text: 'This one is Disabled', value: 'third', disabled: true },
-    { text: 'This is the 4th radio', value: { fourth: 4 } },
-];
 const test2Selected = ref('first');
 
 // Name, Type, Default, Description
 const radioButtonPropTableRows = [
+    ['name', 'String', 'n/a', 'Required. Name of radio group'],
+    ['value', 'Any', 'n/a', 'Required. Value of radio button'],
+    ['id', 'String', 'n/a', 'Required.'],
     ['disabled', 'Boolean', 'false', 'When present, it specifies that the radio button should be disabled.'],
     ['inline', 'Boolean', 'false', 'When present, it specifies that the radio buttons should be displayed inline.'],
-    ['v-model', 'Any', 'n/a', 'Required. The v-model directive binds the radio button to a data property.'],
-    ['display-name', 'String', 'n/a', 'Required. The text to display next to the radio button.'],
-    ['value', 'Any', 'n/a', 'Required. The value to be used by v-model.'],
     [
-        'group-name',
+        'displayName',
         'String',
-        "''",
-        'Descriptive name of the radio button group. Optional but should be used if multiple groups ' +
-            'use the same v-model.',
+        '',
+        'Required, if not using the default slot. The text to display next to the radio button.',
     ],
+    ['v-model', 'Any', 'n/a', 'Optional. The v-model directive binds the radio button to a data property.'],
 ];
 
 // Name, Type, Default, Description
 const radioButtonGroupPropTableRows = [
     ['id', 'String', 'n/a', 'Required.'],
     ['label', 'String', 'n/a', 'Required. Corresponds to the legend value describing the group'],
-    ['name', 'String', `''`, 'Optional. Maps to the group name for each radio input'],
+    ['name', 'String', `''`, 'Required, if using the default slot. Maps to the name for each radio input'],
     [
         'options',
         'Array',
@@ -49,16 +47,19 @@ const { $prism } = useNuxtApp();
 const radioButtonComponentCode = ref('');
 const radioButtonGroupComponentCode = ref('');
 const docCode = ref('');
+
 onMounted(async () => {
     if ($prism) {
+        /* eslint-disable import/no-self-import */
         const radioButtonComponentSource = await import(
             '@energysage/es-ds-components/components/es-radio-button.vue?raw'
         );
+        // eslint-disable-next-line max-len
         const radioButtonGroupComponentSource = await import(
             '@energysage/es-ds-components/components/es-radio-button-group.vue?raw'
         );
-        // eslint-disable-next-line import/no-self-import
         const docSource = await import('./radio-button.vue?raw');
+        /* eslint-enable import/no-self-import */
 
         radioButtonComponentCode.value = $prism.normalizeCode(radioButtonComponentSource.default);
         radioButtonGroupComponentCode.value = $prism.normalizeCode(radioButtonGroupComponentSource.default);
@@ -70,26 +71,20 @@ onMounted(async () => {
 
 <template>
     <div>
-        <p class="mb-500">
-            Uses
-            <a
-                href="https://v3.primevue.org/radiobutton/"
-                target="_blank">
-                PrimeVue RadioButton
-            </a>
-        </p>
+        <h1>Radio button</h1>
 
         <div class="my-500">
             <h2>Inline</h2>
             <es-radio-button-group
-                id="idFruits"
+                id="idFruitsInline"
                 label="Please choose your favorite fruit.">
                 <es-radio-button
                     v-for="fruit in fruits"
+                    :id="`id_${fruit.key}2`"
                     :key="fruit.key"
                     v-model="selectedFruit"
                     :display-name="fruit.name"
-                    group-name="inline"
+                    name="inline"
                     :value="fruit.key"
                     inline />
             </es-radio-button-group>
@@ -98,14 +93,15 @@ onMounted(async () => {
         <div class="my-500">
             <h2>Stacked</h2>
             <es-radio-button-group
-                id="idFruits2"
+                id="idFruitsStacked"
                 label="Please choose your favorite fruit.">
                 <es-radio-button
                     v-for="fruit in fruits"
+                    :id="`id_${fruit.key}3`"
                     :key="fruit.key"
                     v-model="selectedFruit"
                     :display-name="fruit.name"
-                    group-name="stacked"
+                    name="stacked"
                     :value="fruit.key" />
             </es-radio-button-group>
         </div>
@@ -113,14 +109,15 @@ onMounted(async () => {
         <div class="my-500">
             <h2>Disabled</h2>
             <es-radio-button-group
-                id="idFruits3"
+                id="idFruitsDisabled"
                 label="Please choose your favorite fruit.">
                 <es-radio-button
                     v-for="fruit in fruits"
+                    :id="`id_${fruit.key}4`"
                     :key="fruit.key"
                     v-model="selectedFruit"
                     :display-name="fruit.name"
-                    group-name="disabled"
+                    name="disabled"
                     :value="fruit.key"
                     disabled />
             </es-radio-button-group>
@@ -129,35 +126,34 @@ onMounted(async () => {
         <div class="my-500">
             <h2>Using options prop</h2>
             <es-radio-button-group
-                id="test2RadioGroup"
+                id="idRadioGroupUsingOptionsProp"
                 v-model="test2Selected"
-                label="Radios using options"
                 :options="test2Options"
-                name="test2" />
-
+                label="Radios using options"
+                name="radioGroupUsingOptionsProp" />
             <div>selected: {{ test2Selected }}</div>
         </div>
 
-        <div class="mb-500">
-            <h2>EsRadioButton props</h2>
-            <ds-prop-table :rows="radioButtonPropTableRows" />
-        </div>
-
         <div class="mb-500">
             <h2>EsRadioButtonGroup props</h2>
             <ds-prop-table :rows="radioButtonGroupPropTableRows" />
         </div>
 
-        <ds-doc-source
-            comp-title="Radio button component"
-            :comp-code="radioButtonComponentCode"
-            comp-source="es-ds-components/components/es-radio-button.vue" />
+        <div class="mb-500">
+            <h2>EsRadioButton props</h2>
+            <ds-prop-table :rows="radioButtonPropTableRows" />
+        </div>
 
         <ds-doc-source
             comp-title="Radio button group component"
             :comp-code="radioButtonGroupComponentCode"
             comp-source="es-ds-components/components/es-radio-button-group.vue" />
 
+        <ds-doc-source
+            comp-title="Radio button component"
+            :comp-code="radioButtonComponentCode"
+            comp-source="es-ds-components/components/es-radio-button.vue" />
+
         <ds-doc-source
             doc-title="Radio button & radio button group documentation"
             :doc-code="docCode"
diff --git a/es-ds-docs/pages/molecules/radio-cards.vue b/es-ds-docs/pages/molecules/radio-cards.vue
new file mode 100644
index 000000000..f21384640
--- /dev/null
+++ b/es-ds-docs/pages/molecules/radio-cards.vue
@@ -0,0 +1,320 @@
+<script setup lang="ts">
+const form = ref({
+    installTimeline: '',
+    propertyType: '',
+    storageReason: '',
+});
+
+const propertyTypeOptions = [
+    { label: 'Home', value: 'residential' },
+    { label: 'Business', value: 'commercial' },
+    { label: 'Nonprofit', value: 'nonprofit' },
+];
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const storageReasonOptions: { [key: string]: any }[] = [
+    {
+        title: 'Back up power',
+        description: 'Run appliances during a power outage, with backup power',
+        icon: 'IconSettingsVertical',
+        component: resolveComponent('icon-settings-vertical'),
+        value: 'Back up power',
+    },
+    {
+        title: 'Maximize savings',
+        description: 'Avoid paying for energy during peak hours',
+        icon: 'IconShoppingBag',
+        component: resolveComponent('icon-shopping-bag'),
+        value: 'Maximize savings',
+    },
+    {
+        title: 'Self supply',
+        description: 'Limit how much energy you pull from the grid',
+        icon: 'IconPersonCheck',
+        component: resolveComponent('icon-person-check'),
+        value: 'Self supply',
+    },
+];
+
+const installTimelineLabel = 'What’s your timeline for installing heat pumps?';
+const installTimelineOptions = [
+    { label: 'ASAP', value: 'ASAP' },
+    { label: 'Within the next 2-4 weeks', value: '2-4 weeks' },
+    { label: 'Within the next 2-4 months', value: '2-4 months' },
+    { label: '5+ months', value: '5+ months' },
+];
+
+const test2Options = ref([
+    { text: 'Toggle this custom radio', value: 'first', id: 'idFirst' },
+    { text: 'Or toggle this other custom radio', value: 'second', id: 'idSecond' },
+    { text: 'This one is Disabled', value: 'third', disabled: true, id: 'idThird' },
+    { text: 'This is the 4th radio', value: { fourth: 4 }, id: 'idFourth' },
+]);
+const test2Selected = ref('first');
+
+const { $prism } = useNuxtApp();
+const componentCodeRadioCard = ref('');
+const componentCodeRadioCards = ref('');
+const docCode = ref('');
+
+onMounted(async () => {
+    if ($prism) {
+        /* eslint-disable import/no-self-import */
+        const componentCodeRadioCardSource = await import(
+            '@energysage/es-ds-components/components/es-form-radio-card.vue?raw'
+        );
+        const componentCodeRadioCardsSource = await import(
+            '@energysage/es-ds-components/components/es-form-radio-cards.vue?raw'
+        );
+        const docSource = await import('./radio-cards.vue?raw');
+        /* eslint-enable import/no-self-import */
+
+        componentCodeRadioCard.value = $prism.normalizeCode(componentCodeRadioCardSource.default);
+        componentCodeRadioCards.value = $prism.normalizeCode(componentCodeRadioCardsSource.default);
+        docCode.value = $prism.normalizeCode(docSource.default);
+        $prism.highlight();
+    }
+});
+
+function handleSubmit() {
+    // eslint-disable-next-line no-console
+    console.log('handleSubmit');
+}
+
+// Name, Type, Default, Description
+const propTableRowsRadioCard = [
+    ['id', 'String', 'n/a', 'Required.'],
+    ['name', 'String', 'n/a', 'Required. Name of radio group'],
+    ['value', 'Any', 'n/a', 'Required. Value of radio button'],
+    ['disabled', 'Boolean', 'false', 'Optional. When present, it specifies that the radio button should be disabled.'],
+    [
+        'inline',
+        'Boolean',
+        'false',
+        'Optional. When present, it specifies that the radio buttons should be displayed inline.',
+    ],
+    [
+        'displayName',
+        'String',
+        `''`,
+        'Optional. Required, if not using the default slot. The text to display next to the radio button.',
+    ],
+    ['v-model', 'Any', 'n/a', 'Required.'],
+];
+
+const propTableRowsRadioCards = [
+    ['id', 'String', 'n/a', 'Required.'],
+    ['label', 'String', 'n/a', 'Required.'],
+    ['name', 'String', `''`, 'Optional.'],
+    ['options', 'Array', 'undefined', 'Optional. Alternative to creating an es-form-radio-card in the default slot.'],
+    ['inline', 'Boolean', 'false', 'Optional.'],
+    ['v-model', 'Any', 'undefined', 'Optional. Required, only if passing the options prop'],
+    ['hasIcon', 'Boolean', 'false', 'Optional. Adds a "has-icon" class to the radiogroup'],
+    ['labelClass', 'String', `''`, 'Optional. Apply class to the input label. Defaults to "font-size-h3"'],
+    ['labelSrOnly', 'Boolean', 'false', 'Optional. Applies an `sr-only` class to the label'],
+];
+</script>
+
+<template>
+    <div>
+        <h1>Radio cards</h1>
+
+        <h2>Radio card</h2>
+
+        <div class="mb-200 mb-lg-500">
+            <es-form-radio-card
+                id="idRadioCard1"
+                v-model="form.propertyType"
+                name="radioCard1"
+                :value="propertyTypeOptions[0].value"
+                >{{ propertyTypeOptions[0].label }}</es-form-radio-card
+            >
+        </div>
+
+        <h2>Default</h2>
+        <p>
+            Responsive font sizing is applied by default. This means the text will be smaller on mobile and larger on
+            desktop.
+        </p>
+        <es-card class="mb-200 mb-lg-500">
+            <form @submit="handleSubmit">
+                <es-form-radio-cards
+                    id="idRadioCards1"
+                    name="radioCards1"
+                    label="What type of property do you want quotes for?">
+                    <es-form-radio-card
+                        v-for="option in propertyTypeOptions"
+                        :id="`id${option.value}`"
+                        :key="option.value"
+                        v-model="form.propertyType"
+                        name="radioCards1"
+                        :value="option.value"
+                        :display-name="option.label" />
+                </es-form-radio-cards>
+            </form>
+            <p class="mb-0">
+                <span class="font-weight-bold">Selection:</span>
+                {{ form.propertyType || '[none]' }}
+            </p>
+        </es-card>
+
+        <h2>Custom card styling</h2>
+        <p>
+            This example demonstrates customizing the content, spacing, and typography of the cards, as well as
+            changing the layout based on the breakpoint.
+        </p>
+        <es-card class="mb-200 mb-lg-500">
+            <form @submit="handleSubmit">
+                <es-form-radio-cards
+                    id="idCustomCardStyling"
+                    label="What’s the main reason you want a battery?"
+                    has-icon>
+                    <b-row>
+                        <b-col
+                            v-for="option in storageReasonOptions"
+                            :key="option.value"
+                            cols="12"
+                            lg="4">
+                            <es-form-radio-card
+                                :id="option.value"
+                                v-model="form.storageReason"
+                                class="align-items-center d-block d-lg-flex flex-column font-size-base font-weight-normal line-height-base pt-lg-200 px-lg-200 text-lg-center"
+                                name="customCardStyling"
+                                :value="option.value">
+                                <component
+                                    :is="option.component"
+                                    class="d-none d-lg-block mb-50"
+                                    height="48px"
+                                    width="48px" />
+                                <span class="font-weight-bolder mb-lg-100">
+                                    {{ option.title }}
+                                </span>
+                                <span class="d-lg-none">
+                                    {{ ' - ' }}
+                                </span>
+                                <span>
+                                    {{ option.description }}
+                                </span>
+                            </es-form-radio-card>
+                        </b-col>
+                    </b-row>
+                </es-form-radio-cards>
+            </form>
+            <p class="mb-0">
+                <span class="font-weight-bold">Selection:</span>
+                {{ form.storageReason || '[none]' }}
+            </p>
+        </es-card>
+
+        <h2>Detached label</h2>
+        <p>
+            This example demonstrates a case where more control is needed over the position of the field label on the
+            desktop breakpoint, so it is rendered separately of the radio cards component. We do still need to pass the
+            label text into the radio cards component for accessibility purposes, but hide it visually by passing in a
+            prop.
+        </p>
+        <div class="border mb-500 p-100 p-lg-200 rounded">
+            <form @submit="handleSubmit">
+                <b-row>
+                    <b-col
+                        cols="12"
+                        lg="4">
+                        <h3
+                            class="h1"
+                            aria-hidden="true">
+                            {{ installTimelineLabel }}
+                        </h3>
+                    </b-col>
+                    <b-col
+                        cols="12"
+                        lg="8">
+                        <es-form-radio-cards
+                            id="idDetachedLabel"
+                            :label="installTimelineLabel"
+                            name="detachedLabel"
+                            label-sr-only>
+                            <es-form-radio-card
+                                v-for="option in installTimelineOptions"
+                                :id="option.value"
+                                :key="option.value"
+                                v-model="form.installTimeline"
+                                name="detachedLabel"
+                                :value="option.value">
+                                {{ option.label }}
+                            </es-form-radio-card>
+                        </es-form-radio-cards>
+                    </b-col>
+                </b-row>
+            </form>
+            <p class="mb-0">
+                <span class="font-weight-bold">Selection:</span>
+                {{ form.installTimeline || '[none]' }}
+            </p>
+        </div>
+
+        <h2>Passing options</h2>
+        <div class="border mb-500 p-100 p-lg-200 rounded">
+            <form @submit="handleSubmit">
+                <es-form-radio-cards
+                    id="idPassingOptions"
+                    v-model="test2Selected"
+                    label="Passing Options"
+                    name="passingOptions"
+                    :options="test2Options" />
+            </form>
+            <p class="mb-0">
+                <span class="font-weight-bold">Selection:</span>
+                {{ test2Selected || '[none]' }}
+            </p>
+        </div>
+
+        <div class="mb-500">
+            <h2>EsFormRadioCards props</h2>
+            <ds-prop-table :rows="propTableRowsRadioCards" />
+        </div>
+
+        <div class="mb-500">
+            <h2>EsFormRadioCard props</h2>
+            <ds-prop-table :rows="propTableRowsRadioCard" />
+        </div>
+
+        <h2>Migrating from ESDS 2.0 form radio cards</h2>
+        <p>
+            The previous
+            <a
+                href="https://github.com/EnergySage/es-ds-legacy/blob/main/es-vue-base/src/lib-components/EsFormRadioCard.vue">
+                radio card
+            </a>
+            and
+            <a
+                href="https://github.com/EnergySage/es-ds-legacy/blob/main/es-vue-base/src/lib-components/EsFormRadioCards.vue"
+                >radio card group</a
+            >
+            components were based on
+            <a href="https://bootstrap-vue.org/docs/components/form-radio"> bootstrap-vue </a>'s implementation.
+        </p>
+        <p>
+            Going forward the <code>v-model</code> should be on the <strong>radio card group</strong> component when
+            passing in the <code>options</code> prop.
+        </p>
+        <p>
+            When using the radio card group's default slot the <code>v-model</code> should be on the
+            <strong>radio card</strong> components within that slot.
+        </p>
+
+        <ds-doc-source
+            comp-title="Radio cards component"
+            :comp-code="componentCodeRadioCards"
+            comp-source="es-ds-components/components/es-form-radio-cards.vue" />
+
+        <ds-doc-source
+            comp-title="Radio card component"
+            :comp-code="componentCodeRadioCard"
+            comp-source="es-ds-components/components/es-form-radio-card.vue" />
+
+        <ds-doc-source
+            doc-title="Radio card & radio cards documentation"
+            :doc-code="docCode"
+            doc-source="es-ds-docs/pages/molecules/radio-cards.vue" />
+    </div>
+</template>
diff --git a/es-ds-styles/scss/_custom-forms.scss b/es-ds-styles/scss/_custom-forms.scss
index 8b795a825..72b1a0ac6 100644
--- a/es-ds-styles/scss/_custom-forms.scss
+++ b/es-ds-styles/scss/_custom-forms.scss
@@ -181,21 +181,21 @@
     border-radius: variables.$custom-radio-indicator-border-radius;
   }
 
-  .custom-control-input:has(.custom-radio-input:checked) ~ .custom-control-label {
+  .custom-control-input:checked ~ .custom-control-label {
     &::before {
       background-color: variables.$custom-control-indicator-bg;
     }
     &::after {
-      background-image: functions.escape-svg(variables.$custom-radio-indicator-icon-checked) !important;
+      background-image: functions.escape-svg(variables.$custom-radio-indicator-icon-checked);
     }
   }
 
-  .custom-control-input:has(.custom-radio-input:disabled:checked) ~ .custom-control-label {
+  .custom-control-input:disabled:checked ~ .custom-control-label {
     &::before {
       @include gradients.gradient-bg(variables.$custom-control-indicator-checked-disabled-bg);
     }
     &::after {
-      background-image: functions.escape-svg(variables.$custom-radio-indicator-icon-checked-disabled) !important;
+      background-image: functions.escape-svg(variables.$custom-radio-indicator-icon-checked-disabled);
     }
   }
 }
diff --git a/es-ds-styles/scss/vue/components/_radio-cards.scss b/es-ds-styles/scss/vue/components/_radio-cards.scss
index c1147a314..47e43dfa3 100644
--- a/es-ds-styles/scss/vue/components/_radio-cards.scss
+++ b/es-ds-styles/scss/vue/components/_radio-cards.scss
@@ -148,6 +148,16 @@ $inner-circle-translate-y-from-top-desktop: $inner-circle-translate-x-from-left-
     transform: variables.$btn-active-transform;
   }
 
+  &.disabled {
+    background: variables.$gray-50;
+    border-color: variables.$gray-200;
+    color: variables.$gray-500;
+
+    &::before {
+      border: 2.5px solid variables.$gray-500;
+    }
+  }
+
   input {
     /**
      * hide the radio button input elements the same way bootstrap vue does.