GOVUK Fieldset

An example of the govuk fieldset component.

Open example in new window
HTML 




<fieldset class="govuk-fieldset">

  <legend class="govuk-fieldset__legend govuk-fieldset__legend--xl">

      <h1 class="govuk-fieldset__heading">
        What is your address?
      </h1>

  </legend>






<div class="govuk-form-group">
  <label class="govuk-label" for="address-line-1">
    Building and street <span class="govuk-visually-hidden">line 1 of 2</span>
  </label>

<input class="govuk-input" id="address-line-1" name="address-line-1" type="text">
</div>






<div class="govuk-form-group">
  <label class="govuk-label" for="address-line-2">
    <span class="govuk-visually-hidden">Building and street line 2 of 2</span>
  </label>

<input class="govuk-input" id="address-line-2" name="address-line-2" type="text">
</div>






<div class="govuk-form-group">
  <label class="govuk-label" for="address-town">
    Town or city
  </label>

<input class="govuk-input govuk-!-width-two-thirds" id="address-town" name="address-town" type="text">
</div>






<div class="govuk-form-group">
  <label class="govuk-label" for="address-county">
    County
  </label>

<input class="govuk-input govuk-!-width-two-thirds" id="address-county" name="address-county" type="text">
</div>






<div class="govuk-form-group">
  <label class="govuk-label" for="address-postcode">
    Postcode
  </label>

<input class="govuk-input govuk-input--width-10" id="address-postcode" name="address-postcode" type="text">
</div>





</fieldset>
Jinja 
{% from "govuk_frontend_jinja/components/input/macro.html" import govukInput %}
{% from "govuk_frontend_jinja/components/fieldset/macro.html" import govukFieldset %}

{% call govukFieldset({
  "legend": {
    "text": "What is your address?",
    "classes": "govuk-fieldset__legend--xl",
    "isPageHeading": true
  }
}) %}

{{ govukInput({
    "label": {
      "html": 'Building and street <span class="govuk-visually-hidden">line 1 of 2</span>'
    },
    "id": "address-line-1",
    "name": "address-line-1"
  }) }}

{{ govukInput({
    "label": {
      "html": '<span class="govuk-visually-hidden">Building and street line 2 of 2</span>'
    },
    "id": "address-line-2",
    "name": "address-line-2"
  }) }}

{{ govukInput({
    "label": {
      "text": "Town or city"
    },
    "classes": "govuk-!-width-two-thirds",
    "id": "address-town",
    "name": "address-town"
  }) }}

{{ govukInput({
    "label": {
      "text": "County"
    },
    "classes": "govuk-!-width-two-thirds",
    "id": "address-county",
    "name": "address-county"
  }) }}

{{ govukInput({
    "label": {
      "text": "Postcode"
    },
    "classes": "govuk-input--width-10",
    "id": "address-postcode",
    "name": "address-postcode"
  }) }}

{% endcall %}