Fieldsets

Fieldsets are used to group related form elements. They are added automatically by the radio button, checkbox and date helpers but can be manually applied to other groups where applicable.

A fieldset for capturing an address

A common use case for fieldsets is grouping address fields. The individual components of an address don’t really make sense alone so grouping them is a logical step. The grouping also improves the experience for screen reader users, the screen reader will announce the legend before reading the individual field labels.

Input

= f.govuk_fieldset legend: { text: 'Where do you live?' } do
  = f.govuk_text_field :address_one,   width: 'one-half',    label: { text: 'House number and street' }
  = f.govuk_text_field :address_two,   width: 'one-half',    label: { text: 'Town', hidden: true }
  = f.govuk_text_field :address_three, width: 'one-half',    label: { text: 'City' }
  = f.govuk_text_field :postcode,      width: 'one-quarter', label: { text: 'Postcode' }

<%= f.govuk_fieldset legend: { text: 'Where do you live?' } do %>
  <%= f.govuk_text_field :address_one,   width: 'one-half',    label: { text: 'House number and street' } %>
  <%= f.govuk_text_field :address_two,   width: 'one-half',    label: { text: 'Town', hidden: true } %>
  <%= f.govuk_text_field :address_three, width: 'one-half',    label: { text: 'City' } %>
  <%= f.govuk_text_field :postcode,      width: 'one-quarter', label: { text: 'Postcode' } %>
<% end %>

Output

Where do you live?

<fieldset class="govuk-fieldset">
  <legend class="govuk-fieldset__legend govuk-fieldset__legend--m">
    Where do you live?
  </legend>
  <div class="govuk-form-group">
    <label for="person-address-one-field" class="govuk-label">
      House number and street
    </label>
    <input id="person-address-one-field" class="govuk-input govuk-!-width-one-half" type="text" name="person[address_one]" />
  </div>
  <div class="govuk-form-group">
    <label for="person-address-two-field" class="govuk-label">
      <span class="govuk-visually-hidden">
        Town
      </span>
    </label>
    <input id="person-address-two-field" class="govuk-input govuk-!-width-one-half" type="text" name="person[address_two]" />
  </div>
  <div class="govuk-form-group">
    <label for="person-address-three-field" class="govuk-label">
      City
    </label>
    <input id="person-address-three-field" class="govuk-input govuk-!-width-one-half" type="text" name="person[address_three]" />
  </div>
  <div class="govuk-form-group">
    <label for="person-postcode-field" class="govuk-label">
      Postcode
    </label>
    <input id="person-postcode-field" class="govuk-input govuk-!-width-one-quarter" type="text" name="person[postcode]" />
  </div>
</fieldset>