Global CSS API: Form Layout & Spacing
The following CSS custom properties are used to control more of the overall form level layout and spacing of form UI.
Form Layout & Spacing
Properties used for form UI layout and spacing.
| Property | Description | Default |
|---|---|---|
| --gf-form-gap-x | Column gap for the form. | 16px |
| --gf-form-gap-y | Row gap for the form. | 40px |
| --gf-form-footer-margin-y-start | Vertical start (top) margin for the form footer. | 24px |
| --gf-form-footer-gap | Gap between the form footer and form. | 8px |
Field Layout & Spacing
Properties used for field UI layout and spacing.
| Property | Description | Default |
|---|---|---|
| --gf-field-gap-x | Column gap for a field. | 12px |
| --gf-field-gap-y | Row gap for a field. | 12px |
| --gf-field-date-width | Width of the date field. | 168px |
| --gf-field-time-width | Width of the time field. | 110px |
| --gf-field-list-btns-gap | Gap between the buttons in a list field. | 8px |
| --gf-field-list-btns-width | Width of the buttons in a list field. | calc(32px + var(--gf-field-list-btns-gap) + var(--gf-field-gap-x)) |
| --gf-field-pg-steps-gap-y | Row gap for the page steps. | 8px |
| --gf-field-pg-steps-gap-x | Column gap for the page steps. | 24px |
Field Label Layout & Spacing
Properties used for label UI layout and spacing.
| Property | Description | Default |
|---|---|---|
| --gf-label-width | Width of the label when label position is left or right. | 30% |
| --gf-label-req-gap | Gap between the label text and required indicator. | 6px |