Form group

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:

• Button component
• Checkbox component
• Password field component
• Radio button component
• Search component
• Text input component

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.

An example passing child as node:

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

Displaying info:

Displaying error:

Displaying warning:

Was this page helpful?