Fieldset examples

• # default

  Open this example in a new tab

  What is your address?

  {
    "legend": {
      "text": "What is your address?"
    }
  }

  
  {% from "govuk/components/fieldset/macro.njk" import govukFieldset %}
  
  {{ govukFieldset({
    "legend": {
      "text": "What is your address?"
    }
  }) }}
          

• # styled as xl text

  Open this example in a new tab

  What is your address?

  {
    "legend": {
      "text": "What is your address?",
      "classes": "govuk-fieldset__legend--xl"
    }
  }

  
  {% from "govuk/components/fieldset/macro.njk" import govukFieldset %}
  
  {{ govukFieldset({
    "legend": {
      "text": "What is your address?",
      "classes": "govuk-fieldset__legend--xl"
    }
  }) }}
          

• # styled as large text

  Open this example in a new tab

  What is your address?

  {
    "legend": {
      "text": "What is your address?",
      "classes": "govuk-fieldset__legend--l"
    }
  }

  
  {% from "govuk/components/fieldset/macro.njk" import govukFieldset %}
  
  {{ govukFieldset({
    "legend": {
      "text": "What is your address?",
      "classes": "govuk-fieldset__legend--l"
    }
  }) }}
          

• # styled as medium text

  Open this example in a new tab

  What is your address?

  {
    "legend": {
      "text": "What is your address?",
      "classes": "govuk-fieldset__legend--m"
    }
  }

  
  {% from "govuk/components/fieldset/macro.njk" import govukFieldset %}
  
  {{ govukFieldset({
    "legend": {
      "text": "What is your address?",
      "classes": "govuk-fieldset__legend--m"
    }
  }) }}
          

• # styled as small text

  Open this example in a new tab

  What is your address?

  {
    "legend": {
      "text": "What is your address?",
      "classes": "govuk-fieldset__legend--s"
    }
  }

  
  {% from "govuk/components/fieldset/macro.njk" import govukFieldset %}
  
  {{ govukFieldset({
    "legend": {
      "text": "What is your address?",
      "classes": "govuk-fieldset__legend--s"
    }
  }) }}
          

• # as page heading xl

  Open this example in a new tab

  What is your address?

  {
    "legend": {
      "text": "What is your address?",
      "classes": "govuk-fieldset__legend--xl",
      "isPageHeading": true
    }
  }

  
  {% from "govuk/components/fieldset/macro.njk" import govukFieldset %}
  
  {{ govukFieldset({
    "legend": {
      "text": "What is your address?",
      "classes": "govuk-fieldset__legend--xl",
      "isPageHeading": true
    }
  }) }}
          

• # as page heading l

  Open this example in a new tab

  What is your address?

  {
    "legend": {
      "text": "What is your address?",
      "classes": "govuk-fieldset__legend--l",
      "isPageHeading": true
    }
  }

  
  {% from "govuk/components/fieldset/macro.njk" import govukFieldset %}
  
  {{ govukFieldset({
    "legend": {
      "text": "What is your address?",
      "classes": "govuk-fieldset__legend--l",
      "isPageHeading": true
    }
  }) }}
          

• # as page heading m

  Open this example in a new tab

  What is your address?

  {
    "legend": {
      "text": "What is your address?",
      "classes": "govuk-fieldset__legend--m",
      "isPageHeading": true
    }
  }

  
  {% from "govuk/components/fieldset/macro.njk" import govukFieldset %}
  
  {{ govukFieldset({
    "legend": {
      "text": "What is your address?",
      "classes": "govuk-fieldset__legend--m",
      "isPageHeading": true
    }
  }) }}
          

• # as page heading s

  Open this example in a new tab

  What is your address?

  {
    "legend": {
      "text": "What is your address?",
      "classes": "govuk-fieldset__legend--s",
      "isPageHeading": true
    }
  }

  
  {% from "govuk/components/fieldset/macro.njk" import govukFieldset %}
  
  {{ govukFieldset({
    "legend": {
      "text": "What is your address?",
      "classes": "govuk-fieldset__legend--s",
      "isPageHeading": true
    }
  }) }}
          

• # as page heading without class

  Open this example in a new tab

  What is your address?

  {
    "legend": {
      "text": "What is your address?",
      "isPageHeading": true
    }
  }

  
  {% from "govuk/components/fieldset/macro.njk" import govukFieldset %}
  
  {{ govukFieldset({
    "legend": {
      "text": "What is your address?",
      "isPageHeading": true
    }
  }) }}
          

• # html fieldset content

  Open this example in a new tab

  What is your address?

  This is some content to put inside the fieldset

  {
    "legend": {
      "text": "What is your address?"
    },
    "html": "<div class=\"my-content\">\n  <p>This is some content to put inside the fieldset</p>\n</div>\n"
  }

  
  {% from "govuk/components/fieldset/macro.njk" import govukFieldset %}
  
  {{ govukFieldset({
    "legend": {
      "text": "What is your address?"
    },
    "html": "<div class=\"my-content\">\n  <p>This is some content to put inside the fieldset</p>\n</div>\n"
  }) }}
          

• # with describedBy

  Open this example in a new tab

  Which option?

  {
    "describedBy": "test-target-element",
    "legend": {
      "text": "Which option?"
    }
  }

  
  {% from "govuk/components/fieldset/macro.njk" import govukFieldset %}
  
  {{ govukFieldset({
    "describedBy": "test-target-element",
    "legend": {
      "text": "Which option?"
    }
  }) }}
          

• # html as text

  Open this example in a new tab

  What is <b>your</b> address?

  {
    "legend": {
      "text": "What is <b>your</b> address?"
    }
  }

  
  {% from "govuk/components/fieldset/macro.njk" import govukFieldset %}
  
  {{ govukFieldset({
    "legend": {
      "text": "What is <b>your</b> address?"
    }
  }) }}
          

• # html

  Open this example in a new tab

  What is your address?

  {
    "legend": {
      "html": "What is <b>your</b> address?"
    }
  }

  
  {% from "govuk/components/fieldset/macro.njk" import govukFieldset %}
  
  {{ govukFieldset({
    "legend": {
      "html": "What is <b>your</b> address?"
    }
  }) }}
          

• # legend classes

  Open this example in a new tab

  What is your address?

  {
    "legend": {
      "text": "What is your address?",
      "classes": "my-custom-class"
    }
  }

  
  {% from "govuk/components/fieldset/macro.njk" import govukFieldset %}
  
  {{ govukFieldset({
    "legend": {
      "text": "What is your address?",
      "classes": "my-custom-class"
    }
  }) }}
          

• # classes

  Open this example in a new tab

  Which option?

  {
    "classes": "app-fieldset--custom-modifier",
    "legend": {
      "text": "Which option?"
    }
  }

  
  {% from "govuk/components/fieldset/macro.njk" import govukFieldset %}
  
  {{ govukFieldset({
    "classes": "app-fieldset--custom-modifier",
    "legend": {
      "text": "Which option?"
    }
  }) }}
          

• # role

  Open this example in a new tab

  Which option?

  {
    "role": "group",
    "legend": {
      "text": "Which option?"
    }
  }

  
  {% from "govuk/components/fieldset/macro.njk" import govukFieldset %}
  
  {{ govukFieldset({
    "role": "group",
    "legend": {
      "text": "Which option?"
    }
  }) }}
          

• # attributes

  Open this example in a new tab

  Which option?

  {
    "attributes": {
      "data-attribute": "value"
    },
    "legend": {
      "text": "Which option?"
    }
  }

  
  {% from "govuk/components/fieldset/macro.njk" import govukFieldset %}
  
  {{ govukFieldset({
    "attributes": {
      "data-attribute": "value"
    },
    "legend": {
      "text": "Which option?"
    }
  }) }}