Skip to main content

Internal review app NHS.UK frontend

Use design system guidance and examples to build consistent, accessible NHS services for the public and staff.

Deployed automatically from main branch (opens in new tab).

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: {
    heading: "What is your address?",
    size: "l"
  }
}) }}

Fieldset with HTML

Open this example in a new tab: Fieldset with HTML

About you What is your address?

Code

Markup

<fieldset class="nhsuk-fieldset">
  <legend class="nhsuk-fieldset__legend nhsuk-fieldset__legend--l">
    <h1 class="nhsuk-fieldset__heading">
      <span class="nhsuk-caption-l">
        About you
      </span>
      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: {
    caption: "About you",
    heading: "What is your address?",
    size: "l"
  },
  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

About you What is your address?

Code

Markup

<fieldset class="nhsuk-fieldset">
  <legend class="nhsuk-fieldset__legend nhsuk-fieldset__legend--l">
    <h1 class="nhsuk-fieldset__heading">
      <span class="nhsuk-caption-l">
        About you
      </span>
      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: {
    caption: "About you",
    heading: "What is your address?",
    size: "l"
  }
}) %}
<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 %}

Fieldset without legend heading

Open this example in a new tab: Fieldset without legend heading

What is your address?
Code

Markup

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

Macro

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

{{ fieldset({
  legend: "What is your address?"
}) }}