Skip to main content

This is an internal development app.

To learn how to design and build digital services, visit the design system in the NHS digital service manual for guidance and examples.

Fieldset

These examples are used for automated tests and may not follow service manual best practice.

Fieldset default

Open this example in a new tab: Fieldset default

What is your address?

Code

Markup

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

Macro

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

{{ fieldset({
  legend: {
    text: "What is your address?",
    size: "l",
    isPageHeading: true
  }
}) }}

Fieldset with HTML

Open this example in a new tab: Fieldset with HTML

What is your address?

Code

Markup

<fieldset class="nhsuk-fieldset">
  <legend class="nhsuk-fieldset__legend nhsuk-fieldset__legend--l">
    <h1 class="nhsuk-fieldset__heading">
      What is your address?
    </h1>
  </legend>
  <div class="nhsuk-form-group">
  <label class="nhsuk-label" for="address-line1">
    Address line 1
  </label>
  <input class="nhsuk-input" id="address-line1" name="address-line1" type="text" autocomplete="address-line1">
</div>

<div class="nhsuk-form-group">
  <label class="nhsuk-label" for="address-line2">
    Address line 2 (optional)
  </label>
  <input class="nhsuk-input" id="address-line2" name="address-line2" type="text" autocomplete="address-line2">
</div>

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

<div class="nhsuk-form-group">
  <label class="nhsuk-label" for="address-postcode">
    Postcode
  </label>
  <input class="nhsuk-input nhsuk-input--width-10" id="address-postcode" name="address-postcode" type="text" autocomplete="postal-code">
</div>
</fieldset>

Macro

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

{{ fieldset({
  legend: {
    text: "What is your address?",
    size: "l",
    isPageHeading: true
  },
  html: '<div class="nhsuk-form-group">\n  <label class="nhsuk-label" for="address-line1">\n    Address line 1\n  </label>\n  <input class="nhsuk-input" id="address-line1" name="address-line1" type="text" autocomplete="address-line1">\n</div>\n\n<div class="nhsuk-form-group">\n  <label class="nhsuk-label" for="address-line2">\n    Address line 2 (optional)\n  </label>\n  <input class="nhsuk-input" id="address-line2" name="address-line2" type="text" autocomplete="address-line2">\n</div>\n\n<div class="nhsuk-form-group">\n  <label class="nhsuk-label" for="address-town">\n    Town or city\n  </label>\n  <input class="nhsuk-input nhsuk-u-width-two-thirds" id="address-town" name="address-town" type="text" autocomplete="address-level2">\n</div>\n\n<div class="nhsuk-form-group">\n  <label class="nhsuk-label" for="address-postcode">\n    Postcode\n  </label>\n  <input class="nhsuk-input nhsuk-input--width-10" id="address-postcode" name="address-postcode" type="text" autocomplete="postal-code">\n</div>\n'
}) }}

Fieldset with HTML via call block

Open this example in a new tab: Fieldset with HTML via call block

What is your address?

Code

Markup

<fieldset class="nhsuk-fieldset">
  <legend class="nhsuk-fieldset__legend nhsuk-fieldset__legend--l">
    <h1 class="nhsuk-fieldset__heading">
      What is your address?
    </h1>
  </legend>
<div class="nhsuk-form-group">
  <label class="nhsuk-label" for="address-line1">
    Address line 1
  </label>
  <input class="nhsuk-input" id="address-line1" name="address-line1" type="text" autocomplete="address-line1">
</div>

<div class="nhsuk-form-group">
  <label class="nhsuk-label" for="address-line2">
    Address line 2 (optional)
  </label>
  <input class="nhsuk-input" id="address-line2" name="address-line2" type="text" autocomplete="address-line2">
</div>

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

<div class="nhsuk-form-group">
  <label class="nhsuk-label" for="address-postcode">
    Postcode
  </label>
  <input class="nhsuk-input nhsuk-input--width-10" id="address-postcode" name="address-postcode" type="text" autocomplete="postal-code">
</div>
</fieldset>

Macro

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

{% call fieldset({
  legend: {
    text: "What is your address?",
    size: "l",
    isPageHeading: true
  }
}) %}
<div class="nhsuk-form-group">
  <label class="nhsuk-label" for="address-line1">
    Address line 1
  </label>
  <input class="nhsuk-input" id="address-line1" name="address-line1" type="text" autocomplete="address-line1">
</div>

<div class="nhsuk-form-group">
  <label class="nhsuk-label" for="address-line2">
    Address line 2 (optional)
  </label>
  <input class="nhsuk-input" id="address-line2" name="address-line2" type="text" autocomplete="address-line2">
</div>

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

<div class="nhsuk-form-group">
  <label class="nhsuk-label" for="address-postcode">
    Postcode
  </label>
  <input class="nhsuk-input nhsuk-input--width-10" id="address-postcode" name="address-postcode" type="text" autocomplete="postal-code">
</div>
{%- endcall %}