Allow the 'Details' component to be used within form components

[joelanman]

From @jfranciswebdesign on July 5, 2018 8:34

What

Allow the 'Details' component to be used within form components (for example, radio buttons)

Why

The hint text item is not suitable for large amounts of 'help' content, or content which does not need to be seen by the majority of users.

Copied from original issue: alphagov/govuk-design-system-backlog#147

[NickColley]

By using the individual components and composing them this should be possible.

See https://github.com/alphagov/govuk-frontend/blob/master/app/views/examples/form-alignment/index.njk#L52 for an example of this.

I wonder where we could document this...

[NickColley]

Hey @jfranciswebdesign,

I've put together an example of how you would do this:

<form action="/form-handler" method="post">
  {% call govukFieldset({
    legend: {
      text: "How did you prepare your accounts?",
      isPageHeading: true,
      classes: "govuk-fieldset__legend--xl"
    }
  }) %}
    {{ govukDetails({
      summaryText: "What's this?",
      text: "Lorem ipsum"
    }) }}
    {{ govukRadios({
      idPrefix: "how-did-you-prepare-your-accounts",
      name: "how-did-you-prepare-your-accounts",
      items: [
        {
          value: "standard-102",
          text: "These financial statements have been prepared in accordance with the provisions of Section 1A (Small Entities) of Financial Reporting Standard 102"
        },
        {
          value: "other-standard",
          text: "These accounts ahve been prepared in accordance with another standard"
        }
      ]
    }) }}
  {% endcall %}

  {{ govukButton({
    text: "Continue"
  }) }}
</form>

[NickColley]

I'm going to close this out, @jfranciswebdesign, feel free to re-open if you need any more help :)

[jfranciswebdesign]

This is great - thanks all for the speedy turnaround.

[Vikingwind]

Hi, We in Norwegian Labour and Welfare Administration design system has same problem of detail solution for question in form. Because of long and annoying content and description of each question, we need to use detail component, but too many of them will still create much visual noise for user. Any suggestions?