Components

Fieldset

Use the fieldset component to group related form inputs.

Open this example in a new tab

What is your address?

• HTML
• Nunjucks

HTML

<fieldset class="govuk-fieldset">
  <legend class="govuk-fieldset__legend govuk-fieldset__legend--l">
    <h1 class="govuk-fieldset__heading">What is your address?</h1>
  </legend>
  <div class="govuk-form-group">
    <label class="govuk-label" for="address-line-1"> Address line 1 </label>
    <input
      class="govuk-input"
      id="address-line-1"
      name="address-line-1"
      type="text"
      autocomplete="address-line1"
    />
  </div>
  <div class="govuk-form-group">
    <label class="govuk-label" for="address-line-2">
      Address line 2 (optional)
    </label>
    <input
      class="govuk-input"
      id="address-line-2"
      name="address-line-2"
      type="text"
      autocomplete="address-line2"
    />
  </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"
      autocomplete="address-level2"
    />
  </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"
      autocomplete="postal-code"
    />
  </div>
</fieldset>

Nunjucks

Nunjucks macro options

Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.

Some options are required for the macro to work; these are marked as "Required" in the option description.

If you’re using Nunjucks macros in production with "html" options, or ones ending with "html", you must sanitise the HTML to protect against cross-site scripting exploits.

Name	Type	Description
describedBy	string	One or more element IDs to add to the aria-describedby attribute, used to provide additional descriptive information for screenreader users.
legend	object	The legend for the fieldset component. See legend.
classes	string	Classes to add to the fieldset container.
role	string	Optional ARIA role attribute.
attributes	object	HTML attributes (for example data attributes) to add to the fieldset container.
html	string	HTML to use/render within the fieldset element.
caller	nunjucks-block	Not strictly a parameter but Nunjucks code convention. Using a call block enables you to call a macro with all the text inside the tag. This is helpful if you want to pass a lot of content into a macro. To use it, you will need to wrap the entire fieldset component in a call block.

Options for legend

Name	Type	Description
text	string	Required. If html is set, this is not required. Text to use within the legend. If html is provided, the text option will be ignored.
html	string	Required. If text is set, this is not required. HTML to use within the legend. If html is provided, the text option will be ignored.
classes	string	Classes to add to the legend.
isPageHeading	boolean	Whether the legend also acts as the heading for the page.

{% from "moduk/components/input/macro.njk" import modukInput -%}
{% from "moduk/components/fieldset/macro.njk" import modukFieldset -%}

{% call modukFieldset({
  legend: {
    text: "What is your address?",
    classes: "govuk-fieldset__legend--l",
    isPageHeading: true
  }
}) -%}
  {{ modukInput({
    label: {
      text: 'Address line 1'
    },
    id: "address-line-1",
    name: "address-line-1",
    autocomplete: "address-line1"
  }) -}}
  {{ modukInput({
    label: {
      text: 'Address line 2 (optional)'
    },
    id: "address-line-2",
    name: "address-line-2",
    autocomplete: "address-line2"
  }) -}}
  {{ modukInput({
    label: {
      text: "Town or city"
    },
    classes: "govuk-!-width-two-thirds",
    id: "address-town",
    name: "address-town",
    autocomplete: "address-level2"
  }) -}}
  {{ modukInput({
    label: {
      text: "Postcode"
    },
    classes: "govuk-input--width-10",
    id: "address-postcode",
    name: "address-postcode",
    autocomplete: "postal-code"
  }) -}}
{% endcall -%}

See GOV.UK fieldset component guidance for:

• when to use this component
• how it works

Changes from the GOV.UK version

MOD.UK Design System components are closely based on GOV.UK Design System components.

For this component we’ve changed the font.

Have you tested this component?

Let us know how we could improve this component or share your user research findings.

Email the MOD.UK Design System team at design-system@digital.mod.uk

Need help?

Email the MOD.UK Design System team at design-system@digital.mod.uk if you have questions or feedback.