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_select
#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

department = Struct.new(:id, :name, keyword_init: true)
departments = [
  department.new(id: 1, name: 'Sales'),
  department.new(id: 2, name: 'Marketing'),
  department.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 autocomplete="off" value="" 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>

Adding custom content before and after form elements

Content can be added before and after some form components too, using the before_input and after_input parameters.

This works for the following components:

#govuk_text_field
#govuk_number_field
#govuk_email_field
#govuk_phone_field
#govuk_url_field
#govuk_date_field note that for dates the arguments are before_inputs and after_inputs
#govuk_file_field
#govuk_select
#govuk_collection_select

Input

Slim
ERB

= f.govuk_text_field :first_name,
                     label: { text: 'Text field', size: 'l' },
                     before_input: -> { "Some text before" },
                     after_input: -> { %(<span class="govuk-body">Some HTML after</html>) }

<%= f.govuk_text_field :first_name, label: { text: 'Text field', size: 'l' }, before_input: -> { "Some text before" }, after_input: -> { %(<span class="govuk-body">Some HTML after</html>) } %>

Output

Rendered
HTML

Text field Some text before Some HTML after