FormLayout
Arrange fields in a form with consistant spacing and positioning.
Props#
FormLayout renders a SimpleGrid and accepts all of it's props. See Chakra UI docs
| Prop | Type | Default | Description |
|---|---|---|---|
| autoColumns | ResponsiveValue<GridAutoColumns<0 | (string & {})>> | Shorthand prop for gridAutoColumns | |
| autoFlow | ResponsiveValue<GridAutoFlow> | Shorthand prop for gridAutoFlow | |
| autoRows | ResponsiveValue<GridAutoRows<0 | (string & {})>> | Shorthand prop for gridAutoRows | |
| column | ResponsiveValue<GridColumn> | Shorthand prop for gridColumn | |
| columnGap | ResponsiveValue<string | number | (string & {})> | Shorthand prop for gridColumnGap | |
| columns | ResponsiveValue<number> | The number of columns | |
| gap | ResponsiveValue<string | number | (string & {})> | Shorthand prop for gridGap | |
| minChildWidth | ResponsiveValue<string | number | (string & {})> | The width at which child elements will break into columns. Pass a number for pixel values or a string for any other valid CSS length. | |
| row | ResponsiveValue<GridRow> | Shorthand prop for gridRow | |
| rowGap | ResponsiveValue<string | number | (string & {})> | Shorthand prop for gridRowGap | |
| spacing | ResponsiveValue<string | number | (string & {})> | The gap between the grid items | |
| spacingX | ResponsiveValue<string | number | (string & {})> | The column gap between the grid items | |
| spacingY | ResponsiveValue<string | number | (string & {})> | The row gap between the grid items | |
| templateAreas | ResponsiveValue<GridTemplateAreas> | Shorthand prop for gridTemplateAreas | |
| templateColumns | ResponsiveValue<GridTemplateColumns<0 | (string & {})>> | Shorthand prop for gridTemplateColumns | |
| templateRows | ResponsiveValue<GridTemplateRows<0 | (string & {})>> | Shorthand prop for gridTemplateRows |
Was this helpful?