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>
<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 %}

Fieldset with size S legend

Open this example in a new tab: Fieldset with size S legend

What is your address?

Code

Markup

<fieldset class="nhsuk-fieldset">
  <legend class="nhsuk-fieldset__legend nhsuk-fieldset__legend--s">
    <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: "s",
    isPageHeading: true
  }
}) }}

Fieldset with size M legend

Open this example in a new tab: Fieldset with size M legend

What is your address?

Code

Markup

<fieldset class="nhsuk-fieldset">
  <legend class="nhsuk-fieldset__legend nhsuk-fieldset__legend--m">
    <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: "m",
    isPageHeading: true
  }
}) }}

Fieldset with size L legend

Open this example in a new tab: Fieldset with size L legend

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 size XL legend

Open this example in a new tab: Fieldset with size XL legend

What is your address?

Code

Markup

<fieldset class="nhsuk-fieldset">
  <legend class="nhsuk-fieldset__legend nhsuk-fieldset__legend--xl">
    <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: "xl",
    isPageHeading: true
  }
}) }}

Fieldset with legend size class

Open this example in a new tab: Fieldset with legend size class

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?",
    classes: "nhsuk-fieldset__legend--l",
    isPageHeading: true
  }
}) }}

Fieldset with legend size class overriding size param

Open this example in a new tab: Fieldset with legend size class overriding size param

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?",
    classes: "nhsuk-fieldset__legend--l",
    size: "s",
    isPageHeading: true
  }
}) }}

Fieldset without page heading

Open this example in a new tab: Fieldset without page 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: {
    text: "What is your address?"
  }
}) }}