When to use this component
The fieldset component is used to wrap multiple form input components to provide context to the contained inputs via a
How to use this component
Generally speaking you should not need to
onsFieldset yourself as it is already called from within form input components. However if you need to create a pattern or component that requires a fieldset or you can use
nunjucks’ call functionality
Legend as page/question title
When a fieldset is on a page such as a question page, it’s quite possible that the page heading (
h1) is the same as what the legend needs to be.
A quick way to avoid visual repitition of the same text is to add the utility class
.u-vh to visually hide the legend. This doesn’t avoid repetition for screen reader users however.
We recommend wrapping the
h1 inside the legend. There are two options for doing this:
With the question macro
- When using the question macro include the parameter
"legendIsQuestionTitle": trueinside the
"dontWrap": truein the configuration of the input you are using.
- Do not use the
legendClassesparameters on the input being used.
Without the question macro
- Only include the parameter
"legendIsQuestionTitle": truein the configuration of the input you are using.
- Do not use the
|id||string||true||The id of the fieldset|
|classes||string||false||Classes to apply to the fieldset|
|legend||string||true||Text for the legend|
|legendClasses||string||false||Classes to apply to the legend element|
|description||string||false||Description for the fieldset|
|attributes||object||false||HTML attributes (for example data attributes) to add to the fieldset|
||false||Configuration for validation errors|
Help improve this component
Let us know how we could improve this component or share your user research findings.