Package:
@react-form-builder/components-material-ui
· Source code
Introduction
The Stack component manages layout of immediate children along the vertical or horizontal axis with optional spacing and dividers.
It is a one-dimensional layout component that simplifies the arrangement of elements in a linear flow, replacing the need for manual
margin/padding calculations. The component follows Material Design layout principles with consistent spacing and responsive behavior.
The Stack component is based on Material UI Stack. It is included within the following
NPM package: @react-form-builder/components-material-ui.
The Stack component can be styled and configured to fit specific design and functionality requirements by using various properties
that are presented and described below.
Main properties
The following general properties are available within the Main tab:
| Name | Type | Description |
|---|
| Sx | object | The system prop that allows defining system overrides as well as additional CSS styles |
| Direction | 'row' | 'row-reverse' | 'column' | 'column-reverse' | The direction of the stack (default: 'column') |
| Spacing | number | string | array | The spacing between children (uses theme spacing multiplier) |
| Justify content | 'flex-start' | 'center' | 'flex-end' | 'space-between' | 'space-around' | 'space-evenly' | The justify-content CSS property |
| Align items | 'flex-start' | 'center' | 'flex-end' | 'stretch' | 'baseline' | The align-items CSS property |
| Flex wrap | 'nowrap' | 'wrap' | 'wrap-reverse' | The flex-wrap CSS property |
| Use flex gap | boolean | If true, uses CSS flexbox gap for spacing (requires browser support) |
Style properties
These are properties that allow to customize the size, color and other style properties of your component:
-
For Device: You can provide component’s style customization for all devices or specific
devices by using this dropdown list. Refer to Adaptive Layout for more
details.
-
Component > Class Name: Add a class name for your component for the subsequent styling if necessary.
-
Wrapper: The options below enable you to tailor the appearance of your component and customize
it for a specific device type, as selected in the For Device property:
| Name | Type | Description |
|---|
| Width | number | Specifies the width for your component |
| Height | number | Specifies the height for your component |
| Margin top/right/bottom/left | number | Margin values for you component |
| Color | string | Allows customizing the text color |
| Background color | string | Enables customizing the background color |
Last modified on April 16, 2026
