Cookies on ons.gov.uk

Cookies are small files stored on your device when you visit a website. We use some essential cookies to make this website work.

We would like to set additional cookies to remember your settings and understand how you use the site. This helps us to improve our services.

View cookies

You have accepted all additional cookies. You have rejected all additional cookies. You can change your cookie preferences at any time.

Skip to main content

Fieldset

Use this component to wrap multiple form input components and provide context to the contained inputs with a title, using the <legend> element.

How to use this component

Usually, the onsFieldset macro is already called from within form input components, so you should not need to call this yourself.

However if you need to create a pattern or component that requires a field you can use Nunjucks' call functionality (opens in a new tab) 

Legend as page/question title

To avoid the legend repeating the <h1> on a question page, you can add the utility class .ons-u-vh to visually hide the legend.

However, this does not avoid repetition for screen reader users. Therefore, you must wrap the <h1> in the legend. There are two ways of doing this:

With the question macro

  1. When using the question macro include the parameter "legendIsQuestionTitle": true inside the onsQuestion configuration.
  2. Include "dontWrap": true in the configuration of the input you are using.
  3. Do not use the legend and legendClasses parameters on the input being used.

Without the question macro

  1. Only include the parameter "legendIsQuestionTitle": true in the configuration of the input you are using.
  2. Do not use the legendClasses parameters.

Configuration

NameTypeRequiredDescription
idstringfalseThe HTML id of the fieldset
classesstringfalseClasses to apply to the fieldset
legendstringtrue (unless legendIsQuestionTitle is set)Text for the fieldset’s legend
legendClassesstringfalseClasses to apply to the legend element
legendIsQuestionTitlebooleantrue (unless legend is set)Creates an h1 inside the legend. Use when there is only a single fieldset on the page.
legendTitleClassesstringfalseClasses to apply to the h1 created using legendIsQuestionTitle
descriptionstringfalseDescription for the fieldset
attributesobjectfalseHTML attributes (for example, data attributes) to add to the fieldset
errorError (ref)falseConfiguration for validation errors
dontWrapbooleanfalsePrevents the fields from being wrapped in a fieldset

Help improve this page

Let us know how we could improve this page, or share your user research findings. Discuss the ‘Fieldset’ component on GitHub (opens in a new tab) 

Back to top