NICE Design System home

Form Group

Use a form group to show a relationship between multiple form inputs.

Personal information

Introduction/what is it?

Use a form group to show a relationship between multiple form inputs. For example, when asking for an address, you may need to group a set of text inputs into a single form group.

If you're using radios, checkboxes or input, the fieldset will already be included.

Code snippets

[Code snippets to be added to live site].

When to use

Use a form group component to group related form inputs.

When not use

If users need to be able to pick more than one option from a list, use the checkboxes component instead.

How to use

The 1st element in a fieldset must be a legend describing the input group. For example, it could be a question, such as "What is your organisation's name?" or a statement like "Personal information".

If you are asking just 1 question per page, as we recommend, you can set the contents of the legend as the page heading. You can see an example below. It is good practice as it means that users of screen readers will only hear the contents once.

Read more about why and how to set legends as headings on the GOV.UK Design System.

Default form group

Are you happy for us to contact you in the future?
React
HTML

_10
<FormGroup
_10
legend="Are you happy for us to contact you in the future?"
_10
name="contact-preference"
_10
>
_10
<Radio label="Yes" value="yes" />
_10
<Radio label="No" value="no" />
_10
</FormGroup>

Inline radios

Are you happy for us to contact you in the future?
React
HTML

_10
<FormGroup
_10
legend="Are you happy for us to contact you in the future?"
_10
name="contact-preference-inline"
_10
inline
_10
>
_10
<Radio label="Yes" value="yes" />
_10
<Radio label="No" value="no" />
_10
</FormGroup>

Form group with hints

You can add hints to form groups to provide additional information about the options.

Placeholder image - live preview to be used on Design system site.

How would you like us to contact you?

We promise not to contact you too often

React
HTML

_10
<FormGroup
_10
legend="How would you like us to contact you?"
_10
hint="We promise not to contact you too often"
_10
>
_10
<Checkbox label="Email" value="email" name="contact-preference-hints" />
_10
<Checkbox label="Telephone" value="phone" name="contact-preference-hints" />
_10
</FormGroup>

Error messages

Form group error messages should be styled like this:

How would you like us to contact you?

Please choose at least one contact method!

React
HTML

_10
<FormGroup
_10
legend="How would you like us to contact you?"
_10
groupError="Please choose at least one contact method!"
_10
>
_10
<Checkbox label="Email" value="email" name="contact-preference-error" />
_10
<Checkbox label="Telephone" value="phone" name="contact-preference-error" />
_10
</FormGroup>

Accessibility

On question pages containing a group of inputs, include the question as the legend as that helps screen reader users understand that the inputs are all related to that question.

Put any essential help text that cannot be written as hint text in the legend, but keep it as concise as possible.

Component meets WCAG AA guidelines for accessibility on:

  • Text contrast - Text has a contrast ratio of at least 4.5:1 for small text and at least 3:1 for large text (WCAG 2.0 )1.4.3).
  • UI contrast - Visual information required to identify components and states (except inactive components) has a contrast ratio of at least 3:1 (WCAG 2.1 1.4.11).
  • Accessible use of colour - Colour is not used as the only visual means of conveying information (WCAG 2.0 1.4.1).

Research/evidence

We tested the radio component on a "In consultation Comment Collection" prototype in 2021. Users understood the purpose of the radios and were able to use them.

Help improve this page

To help make sure that this page is useful, relevant and up to date, you can:

Need help?

If you've got a question about the NICE Design System, contact the team.