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="-hint ">
    <legend class="tna-fieldset__legend">
      <h1 class="tna-fieldset__heading tna-heading-xl">
        Enter your address
      </h1>
    </legend>
    <p id="-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>.
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.
error object

If set, the details of any errors.

See macro options for error.
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",
  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