Merge pull request #2012 from alphagov/errors-cond-fields

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).