FormControl
The FormControl component provides context and grouping for form elements such as labels, inputs, helper text, and error messages. It manages layout, state propagation (like error, disabled, and required), and accessibility for its children.
FormControl acts as a wrapper that provides shared state and consistent layout for form inputs. Instead of manually passing props like error, disabled, or required to every child, FormControl propagates these states automatically to its descendants.
Usage
Basic FormControl with Select
Wrap a label, input, and helper text inside FormControl to group them as a single logical unit.
Select your age range
FormControl with Checkboxes
Use FormControl together with FormGroup and FormControlLabel to create accessible checkbox groups.
FormControl with RadioGroup
Pair FormControl with RadioGroup to create accessible radio button groups.
States
FormControl supports error, disabled, and required props. These are propagated to all child components automatically.
This field is required
Invalid selection
This field is disabled
Learn More
Visit the Guidance tab for best practices and the Code tab for implementation details.
