Fieldset

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 <legend> tag.

How to use this component

Generally speaking you should not need to call  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  onsFieldset.

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

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

Name	Type	Required	Description
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
legendIsQuestionTitle	boolean	false	Creates a h1 inside the legend
description	string	false	Description for the fieldset
attributes	object	false	HTML attributes (for example data attributes) to add to the fieldset
error	Error (ref)	false	Configuration for validation errors

Help improve this component

Let us know how we could improve this component or share your user research findings.

Discuss the ‘Fieldset’ component on GitHub