diff --git a/src/components/radios/conditional-reveal-error/index.njk b/src/components/radios/conditional-reveal-error/index.njk new file mode 100644 index 0000000000..9397cd5759 --- /dev/null +++ b/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 + } + } + ] +}) }} \ No newline at end of file diff --git a/src/components/radios/index.md.njk b/src/components/radios/index.md.njk index e063a97781..f3c78128d9 100644 --- a/src/components/radios/index.md.njk +++ b/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).