Fieldset
Use the fieldset component to group related form inputs.
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.
<div class="app-example app-example--tabs">
<div class="app-example__toolbar">
<a href="/components/fieldset/address-group/index.html" class="app-example__new-window" target="_blank">
Open this
<span class="govuk-visually-hidden">fieldset address group</span>
example in a new tab
</a>
</div>
<iframe title="Fieldset address group example" data-module="app-example-frame" class="app-example__frame app-example__frame--resizable app-example__frame--xl" src="/components/fieldset/address-group/index.html" frameBorder="0" loading="lazy"></iframe>
</div>
<span id="options-fieldset-address-group-example"></span>
<ul class="app-tabs" role="tablist">
<li class="app-tabs__item js-tabs__item" role="presentation"><a href="#fieldset-address-group-example-html" role="tab" aria-controls="fieldset-address-group-example-html" data-track="tab-html">HTML</a></li>
<li class="app-tabs__item js-tabs__item" role="presentation"><a href="#fieldset-address-group-example-nunjucks" role="tab" aria-controls="fieldset-address-group-example-nunjucks" data-track="tab-nunjucks">Nunjucks</a></li>
</ul>
<div class="app-tabs__heading js-tabs__heading"><a href="#fieldset-address-group-example-html" aria-controls="fieldset-address-group-example-html" data-track="tab-html">HTML</a></div>
<div class="app-tabs__container js-tabs__container" id="fieldset-address-group-example-html" role="tabpanel">
<div class="app-example__code">
<pre data-module="app-copy" tabindex="0"><code class="hljs html"><span class="hljs-tag"><<span class="hljs-name">fieldset</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-fieldset"</span>></span>
<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>
<div class="app-tabs__heading js-tabs__heading"><a class="app-tabs__heading-link" href="#fieldset-address-group-example-nunjucks" aria-controls="fieldset-address-group-example-nunjucks" data-track="tab-nunjucks">Nunjucks</a></div>
<div class="app-tabs__container js-tabs__container" id="fieldset-address-group-example-nunjucks" role="tabpanel">
<details class="govuk-details app-options" data-module="govuk-details" id="options-fieldset-address-group-example-details">
<p>
Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.
</p>
<p>
Some options are required for the macro to work; these are marked as "Required" in the option description.
</p>
<p>
If you're using Nunjucks macros in production with "html" options, or ones ending with "html", you must sanitise the HTML to protect against <a href="https://developer.mozilla.org/en-US/docs/Glossary/Cross-site_scripting">cross-site scripting exploits</a>.
</p>
<table class="govuk-table app-options__table" id="options-fieldset-address-group-example--primary">
<caption class="govuk-table__caption govuk-heading-m govuk-visually-hidden">Primary options</caption>
<thead class="govuk-table__head">
<tr class="govuk-table__row">
<th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th>
<th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th>
<th class="govuk-table__header" scope="col">Description</th>
</tr>
</thead>
<tbody class="govuk-table__body">
<tr class="govuk-table__row">
<th class="govuk-table__header" scope="row">describedBy</th>
<td class="govuk-table__cell ">string</td>
<td class="govuk-table__cell ">
One or more element IDs to add to the <code>aria-describedby</code> attribute, used to provide additional descriptive information for screenreader users.
</td>
</tr>
<tr class="govuk-table__row">
<th class="govuk-table__header" scope="row">legend</th>
<td class="govuk-table__cell ">object</td>
<td class="govuk-table__cell ">
Options for the legend
See <a href="#options-fieldset-address-group-example--legend">legend</a>.
</td>
</tr>
<tr class="govuk-table__row">
<th class="govuk-table__header" scope="row">classes</th>
<td class="govuk-table__cell ">string</td>
<td class="govuk-table__cell ">
Classes to add to the fieldset container.
</td>
</tr>
<tr class="govuk-table__row">
<th class="govuk-table__header" scope="row">role</th>
<td class="govuk-table__cell ">string</td>
<td class="govuk-table__cell ">
Optional ARIA role attribute.
</td>
</tr>
<tr class="govuk-table__row">
<th class="govuk-table__header" scope="row">attributes</th>
<td class="govuk-table__cell ">object</td>
<td class="govuk-table__cell ">
HTML attributes (for example data attributes) to add to the fieldset container.
</td>
</tr>
<tr class="govuk-table__row">
<th class="govuk-table__header" scope="row">html</th>
<td class="govuk-table__cell ">string</td>
<td class="govuk-table__cell ">
HTML to use/render within the fieldset element.
</td>
</tr>
<tr class="govuk-table__row">
<th class="govuk-table__header" scope="row">caller</th>
<td class="govuk-table__cell ">nunjucks-block</td>
<td class="govuk-table__cell ">
Not strictly a parameter but <a href="https://mozilla.github.io/nunjucks/templating.html#call">Nunjucks code convention</a>. Using a <code>call</code> 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 <code>call</code> block.
</td>
</tr>
</tbody>
</table>
<table class="govuk-table app-options__table" id="options-fieldset-address-group-example--legend">
<caption class="govuk-table__caption govuk-heading-m ">Options for legend</caption>
<thead class="govuk-table__head">
<tr class="govuk-table__row">
<th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th>
<th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th>
<th class="govuk-table__header" scope="col">Description</th>
</tr>
</thead>
<tbody class="govuk-table__body">
<tr class="govuk-table__row">
<th class="govuk-table__header" scope="row">text</th>
<td class="govuk-table__cell ">string</td>
<td class="govuk-table__cell ">
<strong>Required.</strong>
If <code>html</code> is set, this is not required. Text to use within the legend. If <code>html</code> is provided, the <code>text</code> option will be ignored.
</td>
</tr>
<tr class="govuk-table__row">
<th class="govuk-table__header" scope="row">html</th>
<td class="govuk-table__cell ">string</td>
<td class="govuk-table__cell ">
<strong>Required.</strong>
If <code>text</code> is set, this is not required. HTML to use within the legend. If <code>html</code> is provided, the <code>text</code> option will be ignored.
</td>
</tr>
<tr class="govuk-table__row">
<th class="govuk-table__header" scope="row">classes</th>
<td class="govuk-table__cell ">string</td>
<td class="govuk-table__cell ">
Classes to add to the legend.
</td>
</tr>
<tr class="govuk-table__row">
<th class="govuk-table__header" scope="row">isPageHeading</th>
<td class="govuk-table__cell ">boolean</td>
<td class="govuk-table__cell ">
Whether the legend also acts as the heading for the page.
</td>
</tr>
</tbody>
</table>
<div class="app-example__code">
<pre data-module="app-copy" tabindex="0"><code class="hljs js">{% <span class="hljs-keyword">from</span> <span class="hljs-string">"govuk/components/input/macro.njk"</span> <span class="hljs-keyword">import</span> govukInput %}
{% from "govuk/components/fieldset/macro.njk" import govukFieldset %} {% call govukFieldset({ legend: { text: "What is your address?", classes: "govuk-fieldset__legend--l", isPageHeading: true } }) %} {{ govukInput({ label: { text: 'Address line 1' }, id: "address-line-1", name: "address-line-1", autocomplete: "address-line1" }) }} {{ govukInput({ label: { text: 'Address line 2 (optional)' }, id: "address-line-2", name: "address-line-2", autocomplete: "address-line2" }) }} {{ govukInput({ label: { text: "Town or city" }, classes: "govuk-!-width-two-thirds", id: "address-town", name: "address-town", autocomplete: "address-level2" }) }} {{ govukInput({ label: { text: "Postcode" }, classes: "govuk-input--width-10", id: "address-postcode", name: "address-postcode", autocomplete: "postal-code" }) }} {% endcall %}