Add guidance for conditional reveal error messages

src/components/radios/conditional-reveal-error/index.njk

@@ -0,0 +1,89 @@
+---
+title: Radios with conditionally revealing content showing an error
+layout: layout-example.njk
+---
+
+{% from "govuk/components/radios/macro.njk" import govukRadios %}
+{% from "govuk/components/input/macro.njk" import govukInput %}
+
+{% set emailHtml %}
+{{ govukInput({
+  id: "contact-by-email",
+  name: "contact-by-email",
+  type: "email",
+  autocomplete: "email",
+  spellcheck: false,
+  classes: "govuk-!-width-one-half",
+  label: {
+    text: "Email address"
+  },
+  errorMessage: {
+    text: "Email address cannot be blank"
+  }
+}) }}
+{% endset -%}
+
+{% set phoneHtml %}
+{{ govukInput({
+  id: "contact-by-phone",
+  name: "contact-by-phone",
+  type: "tel",
+  autocomplete: "tel",
+  classes: "govuk-!-width-one-third",
+  label: {
+    text: "Phone number"
+  }
+}) }}
+{% endset -%}
+
+{% set textHtml %}
+{{ govukInput({
+  id: "contact-by-text",
+  name: "contact-by-text",
+  type: "tel",
+  autocomplete: "tel",
+  classes: "govuk-!-width-one-third",
+  label: {
+    text: "Mobile phone number"
+  }
+}) }}
+{% endset -%}
+
+{{ govukRadios({
+  idPrefix: "contact",
+  name: "contact",
+  fieldset: {
+    legend: {
+      text: "How would you prefer to be contacted?",
+      isPageHeading: true,
+      classes: "govuk-fieldset__legend--l"
+    }
+  },
+  hint: {
+    text: "Select one option."
+  },
+  items: [
+    {
+      value: "email",
+      text: "Email",
+      checked: true,
+      conditional: {
+        html: emailHtml
+      }
+    },
+    {
+      value: "phone",
+      text: "Phone",
+      conditional: {
+        html: phoneHtml
+      }
+    },
+    {
+      value: "text",
+      text: "Text message",
+      conditional: {
+        html: textHtml
+      }
+    }
+  ]
+}) }}

src/components/radios/index.md.njk

@@ -118,7 +118,10 @@ In services like these, the risk that they will not be noticed is lower because
 
 ### Error messages
 
-Display an error message if none of the radios are selected.
+Display an error message if the user has not:
+
+- selected any radios
+- answered a conditionally revealed question
 
 Error messages should be styled like this:
 
@@ -138,6 +141,12 @@ Say ‘Select if [whatever it is]’. For example, ‘Select if you are employed
 
 Say ‘Select [whatever it is]’. For example, ‘Select the day of the week you pay your rent’.
 
+#### If it's a conditionally revealed question
+
+Include an [error message](/components/error-message/) that is clearly related to the initial question.
+
+{{ example({group: "components", item: "radios", example: "conditional-reveal-error", html: true, nunjucks: true, open: false, size: "s"}) }}
+
 ## Research on this component
 
 If you’ve done any user research involving conditionally revealed questions, particularly with users of assistive technologies, [tell us what you’ve learned by adding a comment to the discussion about this component](https://github.com/alphagov/govuk-design-system-backlog/issues/59).