Skip to main content

This is a guide on using the GOV.UK Design System Form Builder

  1. Index
  2. Injecting content

Injecting content

Sometimes a label, legend and hint don’t give enough of an explanation as to why a question is being asked or what the consequences of answering it might be. In these cases, the form builder supports the injection of HTML into most helpers. This content is inserted after the hint and before the form control.

Injected content is automatically associated with the element via its aria-describedby attribute allowing assistive technologies to provide the user with a full explanation of what is required.

The following helpers support content injection:

  • #govuk_collection_check_boxes
  • #govuk_collection_radio_buttons
  • #govuk_collection_select
  • #govuk_date_field
  • #govuk_email_field
  • #govuk_file_field
  • #govuk_number_field
  • #govuk_password_field
  • #govuk_phone_field
  • #govuk_text_area
  • #govuk_text_field
  • #govuk_url_field

A collection of radio buttons with a paragraph explaining what will happen when the form is submitted

All content supplied via a block is considered supplementary to the label and hint.

Data

departments = [
  OpenStruct.new(id: 1, name: 'Sales'),
  OpenStruct.new(id: 2, name: 'Marketing'),
  OpenStruct.new(id: 3, name: 'Finance')
]

Input

= f.govuk_collection_radio_buttons :department_id,
  departments,
  :id,
  :name,
  legend: { text: "Who do you want to nominate for the Best Department award?" },
  hint_text: "The department will not be notified they've been nominated for an award until the annual awards evening." do

    .govuk-warning-text
      span.govuk-warning-text__icon aria-hidden=true !
      strong.govuk-warning-text__text
        span.govuk-warning-text__assistive
          | Warning
        | Unlike in previous years, nominations are not anonymous. The
          list of voters will be published after the prizes have been
          awarded.

Rendered output

Who do you want to nominate for the Best Department award?

! Warning Unlike in previous years, nominations are not anonymous. The list of voters will be published after the prizes have been awarded.
The department will not be notified they’ve been nominated for an award until the annual awards evening.

HTML output

<div class="govuk-form-group">
  <fieldset class="govuk-fieldset" aria-describedby="person-department-id-hint person-department-id-supplemental">
    <legend class="govuk-fieldset__legend govuk-fieldset__legend--m">
      <h1 class="govuk-fieldset__heading">
        Who do you want to nominate for the Best Department award?
      </h1>
    </legend>
    <div id="person-department-id-supplemental">
      <div class="govuk-warning-text">
        <span aria-hidden="" class="govuk-warning-text__icon">
          !
        </span>
        <strong class="govuk-warning-text__text">
          <span class="govuk-warning-text__assistive">
            Warning
          </span>
          Unlike in previous years, nominations are not anonymous. The
          list of voters will be published after the prizes have been
          awarded.
        </strong>
      </div>
    </div>
    <span class="govuk-hint" id="person-department-id-hint">
      The department will not be notified they've been nominated for an award until the annual awards evening.
    </span>
    <div class="govuk-radios" data-module="govuk-radios">
      <div class="govuk-radios__item">
        <input id="person-department-id-1-field" class="govuk-radios__input" type="radio" value="1" name="person[department_id]" />
        <label for="person-department-id-1-field" class="govuk-label govuk-radios__label">
          Sales
        </label>
      </div>
      <div class="govuk-radios__item">
        <input id="person-department-id-2-field" class="govuk-radios__input" type="radio" value="2" name="person[department_id]" />
        <label for="person-department-id-2-field" class="govuk-label govuk-radios__label">
          Marketing
        </label>
      </div>
      <div class="govuk-radios__item">
        <input id="person-department-id-3-field" class="govuk-radios__input" type="radio" value="3" name="person[department_id]" />
        <label for="person-department-id-3-field" class="govuk-label govuk-radios__label">
          Finance
        </label>
      </div>
    </div>
  </fieldset>
</div>