Global CSS API: Field Layout & Spacing
The following CSS custom properties are used to control more of the field level layout and spacing of form UI.
Form
Properties used for form UI layout and spacing.
| Property | Description | Default |
|---|---|---|
| --gf-padding-x | Horizontal (left/right) padding for form UI. | 12px |
| --gf-padding-y | Vertical (top/bottom) padding for form UI. | 12px |
Primary Label
Properties used for the primary label UI layout and spacing, the field level label.
| Property | Description | Default |
|---|---|---|
| --gf-label-space-primary | Primary label spacer. | 8px |
| --gf-label-choice-field-space-primary | Primary label spacer for choice based fields. | 12px |
Secondary Label
Properties used for the secondary label UI layout and spacing, the radio, checkbox, and consent field labels.
| Property | Description | Default |
|---|---|---|
| --gf-label-space-x-secondary | Secondary label horizontal (left/right) spacer. | 12px |
| --gf-label-space-y-sm-secondary | Secondary label vertical (top/bottom) spacer for fields using the small control size. | -1px |
| --gf-label-space-y-md-secondary | Secondary label vertical (top/bottom) spacer for fields using the medium control size. | 0 |
| --gf-label-space-y-lg-secondary | Secondary label vertical (top/bottom) spacer for fields using the large control size. | 1px |
| --gf-label-space-y-xl-secondary | Secondary label vertical (top/bottom) spacer for fields using the extra large control size. | 4px |
| --gf-label-space-y-secondary | Secondary label vertical (top/bottom) spacer. | var(--gf-label-space-y-md-secondary) |
Tertiary Label
Properties used for the tertiary label UI layout and spacing, the complex field and fieldset labels.
| Property | Description | Default |
|---|---|---|
| --gf-label-space-tertiary | Tertiary label spacer. | 8px |
Field Description
Properties used for the field description UI layout and spacing.
| Property | Description | Default |
|---|---|---|
| --gf-desc-space | Description spacer. | 8px |
| --gf-desc-choice-field-space | Description spacer for choice based fields. | 12px |