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 radio button collection with a custom warning

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: "Which department do you want to nominate?" } do

    p.final-decision-warning
      | Your decision is final and cannot be edited later
<%= f.govuk_collection_radio_buttons :department_id, departments, :id, :name, legend: { text: "Which department do you want to nominate?" } do %>
  <p class="final-decision-warning">
    Your decision is final and cannot be edited later
  </p>
<% end %>

Rendered output

Which department do you want to nominate?

Your decision is final and cannot be edited later

HTML output

<div class="govuk-form-group">
  <fieldset class="govuk-fieldset" aria-describedby="person-department-id-supplemental">
    <legend class="govuk-fieldset__legend govuk-fieldset__legend--m">
      Which department do you want to nominate?
    </legend>
    <div id="person-department-id-supplemental">
      <p class="final-decision-warning">
        Your decision is final and cannot be edited later
      </p>
    </div>
    <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>