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.

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>
      <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 (with before_inputs)
#govuk_time_field (with before_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</span>) }

<%= 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</span>) } %>

Output

Rendered
HTML

Text field Some text before Some HTML after

<div class="govuk-form-group">
  <label for="person-first-name-field" class="govuk-label govuk-label--l">
    Text field
  </label>
  Some text before<input id="person-first-name-field" class="govuk-input" type="text" name="person[first_name]" />
  <span class="govuk-body">
    Some HTML after
  </span>
</div>