Skip to main content Skip to list of components
Service phase: Beta

This is a new service – give us your feedback to help improve it.

Components

Fieldset

The fieldset can group together related form fields.

Contents

  1. Component status
Open this example in new tab

HTML 

<div class="tna-fieldset">
  <fieldset class="tna-fieldset__inner" aria-describedby="address-hint">
    <legend class="tna-fieldset__legend">
      <h1 class="tna-fieldset__heading tna-heading-xl">
        Enter your address
      </h1>
    </legend>
    <p id="address-hint" class="tna-fieldset__hint">
      This is your primary address for correspondence.
    </p>
    <div class="tna-fieldset__body">
      <div class="tna-form-item" data-module="tna-text-input">
        <div class="tna-form-item__header">
          <label class="tna-form-item__label tna-heading-xs" for="address1">
            Address line 1
          </label>
        </div>
        <div class="tna-form-item__body">
          <input id="address1" class="tna-text-input tna-text-input--l" name="address1" value="" type="text" spellcheck="false" autocapitalize="off" autocorrect="off" autocomplete="address-line1">
        </div>
      </div>
      <div class="tna-form-item" data-module="tna-text-input">
        <div class="tna-form-item__header">
          <label class="tna-form-item__label tna-heading-xs" for="address2">
            Address line 2 (optional)
          </label>
        </div>
        <div class="tna-form-item__body">
          <input id="address2" class="tna-text-input tna-text-input--l" name="address2" value="" type="text" spellcheck="false" autocapitalize="off" autocorrect="off" autocomplete="address-line2">
        </div>
      </div>
      <div class="tna-form-item" data-module="tna-text-input">
        <div class="tna-form-item__header">
          <label class="tna-form-item__label tna-heading-xs" for="city">
            Town or city
          </label>
        </div>
        <div class="tna-form-item__body">
          <input id="city" class="tna-text-input tna-text-input--m" name="city" value="" type="text" spellcheck="false" autocapitalize="off" autocorrect="off" autocomplete="address-level2">
        </div>
      </div>
      <div class="tna-form-item" data-module="tna-text-input">
        <div class="tna-form-item__header">
          <label class="tna-form-item__label tna-heading-xs" for="county">
            County (optional)
          </label>
        </div>
        <div class="tna-form-item__body">
          <input id="county" class="tna-text-input tna-text-input--m" name="county" value="" type="text" spellcheck="false" autocapitalize="off" autocorrect="off" autocomplete="address-level1">
        </div>
      </div>
      <div class="tna-form-item" data-module="tna-text-input">
        <div class="tna-form-item__header">
          <label class="tna-form-item__label tna-heading-xs" for="postcode">
            Postcode
          </label>
        </div>
        <div class="tna-form-item__body">
          <input id="postcode" class="tna-text-input tna-text-input--s" name="postcode" value="" type="text" spellcheck="false" autocapitalize="off" autocorrect="off" autocomplete="postal-code">
        </div>
      </div>
    </div>
  </fieldset>
</div>

Nunjucks

Nunjucks options
Primary options
Name Type Description
legend string

Required.

The legend for the fieldset.
headingLevel number

The heading level which represents an element from <h1> through to <h6>. Leave blank or set to 0 to use a plain <label> element with no heading.
headingSize string

The physical size of the fieldset legend (xl, l, m, s or xs).

Default value: m
html string

The HTML for the main body of the fieldset. An alternative is to use the caller function to include content from a block.
id string

Required.

A unique ID for the fieldset component.
hint string

An optional hint to display above the form fields in a fieldset.
smallerHint boolean

If true, make the fieldset hint smaller to match other form field components.
error object

If set, the details of any errors. This is used primarily to display errors on checkbox, date input and radio components and generally not on custom fieldsets.

See macro options for error.
fieldsetClasses string

Classes to add to the <fieldset> element.
fieldsetAttributes object

HTML attributes (for example data attributes) to add to the <fieldset> element.
classes string

Classes to add to the fieldset elements.
attributes object

HTML attributes (for example data attributes) to add to the fieldset elements.
Options for error
Name Type Description
text string

Required.

The error text to display.

 
{% from "nationalarchives/components/fieldset/macro.njk" import tnaFieldset %}
{% from "nationalarchives/components/text-input/macro.njk" import tnaTextInput %}

{{ tnaFieldset({
  legend: "Enter your address",
  headingLevel: 1,
  headingSize: "xl",
  id: "address",
  hint: "This is your primary address for correspondence.",
  body: "Please note this page references hunger strikes and force feeding, which some people may find upsetting.",
  html:
    tnaTextInput({
      label: "Address line 1",
      headingSize: "xs",
      id: "address1",
      name: "address1",
      size: "l",
      autocomplete: "address-line1"
    }) ~
    tnaTextInput({
      label: "Address line 2 (optional)",
      headingSize: "xs",
      id: "address2",
      name: "address2",
      size: "l",
      autocomplete: "address-line2"
    }) ~
    tnaTextInput({
      label: "Town or city",
      headingSize: "xs",
      id: "city",
      name: "city",
      size: "m",
      autocomplete: "address-level2"
    }) ~
    tnaTextInput({
      label: "County (optional)",
      headingSize: "xs",
      id: "county",
      name: "county",
      size: "m",
      autocomplete: "address-level1"
    }) ~
    tnaTextInput({
      label: "Postcode",
      headingSize: "xs",
      id: "postcode",
      name: "postcode",
      size: "s",
      autocomplete: "postal-code"
    })
}) }}

Jinja

Important information

This is an experimental feature that outputs a Jinja template based on the Nunjucks example. Check the converted code for accuracy. 
{% from "components/fieldset/macro.html" import tnaFieldset %}
{% from "components/text-input/macro.html" import tnaTextInput %}

{{ tnaFieldset({
  "legend": "Enter your address",
  "headingLevel": 1,
  "headingSize": "xl",
  "id": "address",
  "hint": "This is your primary address for correspondence.",
  "body": "Please note this page references hunger strikes and force feeding, which some people may find upsetting.",
  html:
    tnaTextInput({
      "label": "Address line 1",
      "headingSize": "xs",
      "id": "address1",
      "name": "address1",
      "size": "l",
      "autocomplete": "address-line1"
    }) ~
    tnaTextInput({
      "label": "Address line 2 (optional)",
      "headingSize": "xs",
      "id": "address2",
      "name": "address2",
      "size": "l",
      "autocomplete": "address-line2"
    }) ~
    tnaTextInput({
      "label": "Town or city",
      "headingSize": "xs",
      "id": "city",
      "name": "city",
      "size": "m",
      "autocomplete": "address-level2"
    }) ~
    tnaTextInput({
      "label": "County (optional)",
      "headingSize": "xs",
      "id": "county",
      "name": "county",
      "size": "m",
      "autocomplete": "address-level1"
    }) ~
    tnaTextInput({
      "label": "Postcode",
      "headingSize": "xs",
      "id": "postcode",
      "name": "postcode",
      "size": "s",
      "autocomplete": "postal-code"
    })
}) }}

Component status

Phase
To be reviewed
Tested without CSS
Yes
Passed DAC audit
Not yet audied
Documentation complete
No

Back to top