Fieldset
Use the fieldset component to group related form inputs.
When to use this component
Use the fieldset component when you need to show a relationship between multiple form inputs.
If you’re using the examples or macros for a radios component, checkboxes component or date input component, the fieldset will already be included.
How it works
The first element inside a fieldset must be a legend which describes the group of inputs. This could be a question, such as ‘What is your current address?’ or a statement like ‘Personal details’.
If you’re asking one question per page as recommended, you can set the contents of the <legend> as the page heading, as shown in the example on this page. This is good practice as it means that users of screen readers will only hear the contents once.
There are 2 ways to use the fieldset component. You can use HTML or, if you’re using Nunjucks, you can use the Nunjucks macro.
Get the Nunjucks macro for this example from the Camden Frontend library
On question pages containing a group of inputs, make the question the legend. This helps users of screen readers to understand that the inputs that follow are all related to that question.
Include general help text in the legend if it would help the user fill in the form, and you cannot write it as hint text. However, try to keep it as short as possible.
Research on this component
This component is based on the fieldset component from the GOV.UK Design System.
You can take part in the ‘Fieldset' discussion on GOV.UK’s Design System’s GitHub and share your research.