Form layout in Material-UI is simple if you are aware of all the components and props at your disposal. In this post we will discuss some of the form subcomponents that give you control over positioning.
Additionally, we will examine when to use the Grid component for form layout. There will be full code and screenshots to illustrate the form layout examples.
A Code Sandbox with full React code is linked in the Resources section. Here are additional useful resources:
- Understanding MUI Labels: TextField Labels, Input Labels, and Form Labels
- Every Material-UI Form Component Explained
- The Essential Guide to Submitting MUI Forms
- The Ultimate Guide to Material-UI FormControl: 3 Examples
- The Ultimate MUI Switch Example: Color, onChange, More
Layout With FormGroup and RadioGroup
MUI FormGroup and RadioGroup are the most granular form layout components. They control a singular set of related components, such as radio buttons, switches, or text inputs.
FormGroup has an important layout prop called row. It is false by default, which makes children render in a vertical column. A horizontal layout can be achieved by setting the row value to true. Take a look at the below code and UI screenshot where identical batches of switches are set horizontally and vertically.
<FormGroup row>
//Children FormControlLabel with switches
</FormGroup>
<Divider />
<FormGroup>
//Children FormControlLabel with switches
</FormGroup>
RadioGroup is specialized FormGroup component that should only be used with radio buttons. It has all the same props including the row prop (plus it has additional props).
The FormGroup and RadioGroup row prop is similar to the MUI v5 Stack Component’s direction prop. Additionally, the FormGroup and RadioGroup provide semantic value to search engines. Because of this, I believe you don’t need to use Stack in your forms.
Layout With FormControl
The FormControl component manages state for children components. It is not built for strong control of the visual layout of children.
However, FormControl styles its children with flex styling by default. This gives us options for controlling styling in the DOM. Also notice the vertical alignment of the two RadioGroups inside the FormControl.
Like all components in MUI v5, the FormControl component has the new sx prop which can accept CSS values. (This can also be accomplished via makeStyles if you are still using Material-UI v4).
Simply setting the flexDirection to row signficantly changes the UI. Notice that the two RadioGroups are now horizontally aligned instead of vertically aligned.
sx={{ flexDirection: "row" }}
My favorite aspect of the new sx prop is how easy it is to style based on breakpoints. We can add mobile responsive styling to our FormControl where ‘extra small’ screens have a vertical layout and ‘small’ screens have a horizontal layout:
sx={{ flexDirection: { xs: "column", sm: "row" } }}We could add this value across all FormControls in a form to quickly create mobile responsive forms.
Arguably, adjusting the flex styling of the FormControl can satisfy most Material-UI form alignment needs. However, the Grid may be useful when the form is part of a larger composition in a UI.
Layout With FormControlLabel
FormControlLabel is used to control the layout of a single input, radio, or switch respective to it’s label.
The above is a single FormControlLabel which is wrapped inside a RadioGroup mentioned earlier.
The most important prop for positioning is the labelPlacement, which positions the label relative to the control component. The possible values are start, end, bottom, and top, with end as the default value.
Using Grid to Structure Form Components
Grids are useful for structuring more complex two-dimensional form layouts.
Their greatest strength is ease of arranging complex vertical and horizontal layouts based on breakpoints. Take a look at the simple setup below and try adjusting the screen size while running the Code Sandbox.
<form>
//other form subcomponents
<Grid container>
<Grid item xs={12} sm={4}>
<Input placeholder="input 1" />
</Grid>
<Grid item xs={12} sm={4}>
<Input placeholder="input 2" />
</Grid>
<Grid item xs={12} sm={4}>
<Input placeholder="input 3" />
</Grid>
</Grid>
</form>Grids are not designed specifically for forms and Grids can quickly become ‘div soup’ if you aren’t careful.
A good design pattern is to use the Grid to layout FormControls and FormGroups. You gain the power of the props these components offer while being able to manage UI complexity with the Grid.
