diff --git a/src/assets/scss/components/_radio-card.scss b/src/assets/scss/components/_radio-card.scss
index 37426e2e5..772064dd1 100644
--- a/src/assets/scss/components/_radio-card.scss
+++ b/src/assets/scss/components/_radio-card.scss
@@ -14,6 +14,10 @@
         background-color: $blue-100;
         border: 1px solid $blue-600;
       }
+      &.invalid + label {
+        background-color: $white;
+        border: 1px solid $red-500;
+      }
    }
    label {
      display: flex;
diff --git a/src/components/forms/radioCard.vue b/src/components/forms/radioCard.vue
index 9ea04070d..da7b334d7 100644
--- a/src/components/forms/radioCard.vue
+++ b/src/components/forms/radioCard.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="col-4 mb-3 d-flex radio-card">
-    <input type="radio" v-bind:id="radioID" v-bind:name="groupName" :value="radioLabel" v-model="picked" v-bind:tabindex="tabIndex"/>
+    <input type="radio" v-bind:class="className" v-bind:id="radioID" v-bind:name="groupName" :value="radioLabel" v-model="picked" v-bind:tabindex="tabIndex"/>
       <label v-bind:for="radioID">
         <img class="px-1 pt-3 pb-1 mt-auto" v-bind:src="require(`@/assets/img/icons/${radioImage}`)" v-bind:alt="altText"/>
         <span class="mt-auto">{{radioLabel}}</span>
@@ -14,7 +14,7 @@
 <script>
 export default {
   name: 'radioCard',
-  props: ['groupName','radioLabel','radioImage','altText','radioID','tabIndex'],
+  props: ['groupName','radioLabel','radioImage','altText','radioID','tabIndex','className'],
   data() {
     return {
       picked: "picked"