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?