Form group

A form group can be used to create accessible and customisable input fields.

How to use a form group

The form group is a wrapper component that adds consistent and accessible functionality for multiple input components like checkboxes, switches, and radio buttons.

They can also be used to create custom form components.

The form group can be used with these different input types:

For guidelines on these components, use the links to read the individual component guidance.

Examples of a form group

This example is passing child as render prop function to make it more convenient to set name, aria-describedby, required and invalid on the wrapped input.

  • Interactive demo - Sainsbury's

An example passing child as node:

  • Interactive demo - Sainsbury's

Hiding the label whilst ensuring it's accessible to screen readers:

  • Interactive demo - Sainsbury's

Displaying info:

  • Interactive demo - Sainsbury's

Displaying error:

  • Interactive demo - Sainsbury's

Displaying warning:

  • Interactive demo - Sainsbury's

Was this page helpful?

Get in touch

Our team can answer any questions about using form groups or give you a helping hand with your next project.
Select a theme to demo: