Skip to main content

Testing

Help us to improve the ONS Design System. Take part in a short study

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