Components Fieldset

Use the fieldset component to group related form inputs.

Open this example in a new window

HTML

<fieldset class="govuk-fieldset">
  <legend class="govuk-fieldset__legend govuk-fieldset__legend--xl">
    <h1 class="govuk-fieldset__heading">
      Legend text goes here
    </h1>
  </legend>
</fieldset>

Nunjucks

{% from "fieldset/macro.njk" import govukFieldset %}

{{ govukFieldset({
  legend: {
    text: "Legend text goes here",
    classes: "govuk-fieldset__legend--xl",
    isPageHeading: true
  }
}) }}

You can configure this component using the Nunjucks macro arguments.

When to use this component

Use the fieldset component when you need to show a relationship between multiple form inputs. For example, you may need to group a set of text inputs into a single fieldset when asking for an address.

Open this example in a new window

HTML

<fieldset class="govuk-fieldset">
  <legend class="govuk-fieldset__legend govuk-fieldset__legend--xl">
    <h1 class="govuk-fieldset__heading">
      What is your address?
    </h1>
  </legend>

  <div class="govuk-form-group">
    <label class="govuk-label" for="address-line-1">
    Building and street <span class="govuk-visually-hidden">line 1 of 2</span>
  </label>
    <input class="govuk-input" id="address-line-1" name="address-line-1" type="text">
  </div>

  <div class="govuk-form-group">
    <label class="govuk-label" for="address-line-2">
    <span class="govuk-visually-hidden">Building and street line 2 of 2</span>
  </label>
    <input class="govuk-input" id="address-line-2" name="address-line-2" type="text">
  </div>

  <div class="govuk-form-group">
    <label class="govuk-label" for="address-town">
    Town or city
  </label>
    <input class="govuk-input govuk-!-width-two-thirds" id="address-town" name="address-town" type="text">
  </div>

  <div class="govuk-form-group">
    <label class="govuk-label" for="address-county">
    County
  </label>
    <input class="govuk-input govuk-!-width-two-thirds" id="address-county" name="address-county" type="text">
  </div>

  <div class="govuk-form-group">
    <label class="govuk-label" for="address-postcode">
    Postcode
  </label>
    <input class="govuk-input govuk-input--width-10" id="address-postcode" name="address-postcode" type="text">
  </div>

</fieldset>

Nunjucks

{% from "input/macro.njk" import govukInput %}
{% from "fieldset/macro.njk" import govukFieldset %}

{% call govukFieldset({
  legend: {
    text: "What is your address?",
    classes: "govuk-fieldset__legend--xl",
    isPageHeading: true
  }
}) %}

  {{ govukInput({
    label: {
      html: 'Building and street <span class="govuk-visually-hidden">line 1 of 2</span>'
    },
    id: "address-line-1",
    name: "address-line-1"
  }) }}

  {{ govukInput({
    label: {
      html: '<span class="govuk-visually-hidden">Building and street line 2 of 2</span>'
    },
    id: "address-line-2",
    name: "address-line-2"
  }) }}

  {{ govukInput({
    label: {
      text: "Town or city"
    },
    classes: "govuk-!-width-two-thirds",
    id: "address-town",
    name: "address-town"
  }) }}

  {{ govukInput({
    label: {
      text: "County"
    },
    classes: "govuk-!-width-two-thirds",
    id: "address-county",
    name: "address-county"
  }) }}

  {{ govukInput({
    label: {
      text: "Postcode"
    },
    classes: "govuk-input--width-10",
    id: "address-postcode",
    name: "address-postcode"
  }) }}

{% endcall %}

You can configure this component using the Nunjucks macro arguments.

If you’re using the examples or macros for radios, checkboxes or date input, the fieldset will already be included.

How it works

The first element inside a fieldset must be a legend which describes the group of inputs. This could be a question, such as ‘What is your current address?’ or a statement like ‘Personal details’.

Open this example in a new window

HTML

<fieldset class="govuk-fieldset">
  <legend class="govuk-fieldset__legend govuk-fieldset__legend--xl">
    <h1 class="govuk-fieldset__heading">
      Legend text goes here
    </h1>
  </legend>
</fieldset>

Nunjucks

{% from "fieldset/macro.njk" import govukFieldset %}

{{ govukFieldset({
  legend: {
    text: "Legend text goes here",
    classes: "govuk-fieldset__legend--xl",
    isPageHeading: true
  }
}) }}

You can configure this component using the Nunjucks macro arguments.

On question pages containing a group of inputs, including the question as the legend helps users of screenreaders to understand that the inputs are all related to that question.

Include any general help text which is important for filling in the form and can’t be written as hint text in the legend, but try to keep it as concise as possible.

Research on this component

If you’ve used this component, get in touch to share your user research findings.

Get in touch

If you’ve got a question, idea or suggestion share it in #govuk-design-system on cross-government Slack (open in app) or email the Design System team on govuk-design-system-support@digital.cabinet-office.gov.uk

Discuss ‘Fieldset’ on GitHub