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.
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.
React editor HTML
Arrow left Arrow right < FormGroup name = " form-group-1 " required = " * " label = " Form group " >
{ ( inputProps ) => (
< InputGroup >
< InputControl >
< TextInput { ... inputProps } placeholder = " Custom control " />
</ InputControl >
</ InputGroup >
) }
</ FormGroup >
An example passing child as node:
React editor HTML
Arrow left Arrow right < FormGroup name = " form-group-2 " required label = " Form group " >
< InputGroup >
< InputControl >
< TextInput name = " form-group-2 " placeholder = " Custom control " />
</ InputControl >
</ InputGroup >
</ FormGroup >
Hiding the label whilst ensuring it's accessible to screen readers:
React editor HTML
Arrow left Arrow right < FormGroup name = " form-group-3 " hideLabel label = " Form group " >
< InputGroup >
< InputControl >
< TextInput
name = " form-group-3 "
placeholder = " Custom control with hidden label "
/>
</ InputControl >
</ InputGroup >
</ FormGroup >
Displaying info:
React editor HTML
Arrow left Arrow right < FormGroup
name = " form-group-4 "
info = { < span > Supporting text to help users complete the control </ span > }
label = " Form group "
>
< InputGroup >
< InputControl >
< TextInput name = " form-group-4 " placeholder = " Custom control " />
</ InputControl >
</ InputGroup >
</ FormGroup >
Displaying error:
React editor HTML
Arrow left Arrow right < FormGroup
name = " form-group-5 "
error = { < span > Please enter a valid value </ span > }
label = " Form group "
>
< InputGroup >
< InputControl >
< TextInput name = " form-group-5 " placeholder = " Custom control " />
</ InputControl >
</ InputGroup >
</ FormGroup >
Displaying warning:
React editor HTML
Arrow left Arrow right < FormGroup
name = " form-group-6 "
warning = { < span > Are you sure that is correct? </ span > }
label = " Form group "
>
< InputGroup >
< InputControl >
< TextInput name = " form-group-6 " placeholder = " Custom control " />
</ InputControl >
</ InputGroup >
</ FormGroup >
Was this page helpful? Our team can answer any questions about using form groups or give you a helping hand with your next project.