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_error_summary
#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')
]

= 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 %>

Output

Rendered
HTML

Which department do you want to nominate?

Your decision is final and cannot be edited later

Sales

Marketing

Finance

<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>
    <input value="" autocomplete="off" type="hidden" name="person[department_id]" id="person_department_id" />
    <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>