Global CSS API: Fields - Choice (Checkbox, Radio, Image, & Consent)
The following CSS custom properties are used for the choice based field UI, such as checkbox, radio, consent, and image choice fields.
Choice Field Base
Properties used for base choice based field UI.
| Property | Description | Default |
|---|---|---|
| --gf-field-choice-gap | Gap. | var(--gf-label-space-x-secondary) |
| --gf-field-choice-align-x-gap-y | Vertical (top/bottom) gap for horizontal choice field alignment. | var(--gf-field-choice-gap) |
| --gf-field-choice-align-x-gap-x | Horizontal (left/right) gap for horizontal choice field alignment. | 16px |
| --gf-field-choice-meta-margin-y-start | Vertical start (top) margin for choice field meta. | 4px |
| --gf-field-choice-meta-space | Spacer for choice field meta. | 16px |
| --gf-field-choice-other-ctrl-max-width | Max width for other field control. | 256px |
Image Choice Field
Properties used for the image choice field UI.
| Property | Description | Default |
|---|---|---|
| Base | ||
| --gf-field-img-choice-aspect-ratio | Image aspect ratio. | 1/1 |
| --gf-field-img-choice-gap | Gap. | var(--gf-field-gap-x) |
| --gf-field-img-choice-margin-y-end | Vertical end (bottom) margin for image. | 12px |
| --gf-field-img-choice-placeholder-icon-font-size | Image placeholder icon font size. | 60px |
| --gf-field-img-choice-radius-square | Image border radius when using square style. | var(--gf-ctrl-radius-max-sm) |
| --gf-field-img-choice-radius-round | Image border radius when using round style. | 50% |
| --gf-field-img-choice-shadow | Image box shadow. | 0 0 0 rgba(18, 25, 97, 0.05), 0 2px 5px rgba(18, 25, 97, 0.1), 0 1px 1px rgba(18, 25, 97, 0.15) |
| --gf-field-img-choice-shadow-hover | Image box shadow on hover. | 0 0 1px rgba(18, 25, 97, 0.24), 0 24px 24px rgba(18, 25, 97, 0.03), 0 2px 2px rgba(18, 25, 97, 0.03), 0 4px 4px rgba(18, 25, 97, 0.03), 0 8px 8px rgba(18, 25, 97, 0.03), 0 16px 16px rgba(18, 25, 97, 0.03) |
| --gf-field-img-choice-size-sm | Small image choice size. | 125px |
| --gf-field-img-choice-size-md | Medium image choice size. | 200px |
| --gf-field-img-choice-size-lg | Large image choice size. | 300px |
| --gf-field-img-choice-size | Image choice size. | var(--gf-field-img-choice-size-md) |
| Appearance - Card | ||
| --gf-field-img-choice-card-placeholder-bg-color | Image placeholder background color. | rgba(var(--gf-color-in-ctrl-light-rgb), 0.05) |
| --gf-field-img-choice-card-placeholder-color | Image placeholder color. | rgba(var(--gf-color-in-ctrl-dark-rgb), 0.4) |
| --gf-field-img-choice-card-check-ind-bg-color | Checked indicator background color. | var(--gf-color-in-ctrl-primary) |
| --gf-field-img-choice-card-check-ind-icon-color | Checked indicator icon color. | var(--gf-color-in-ctrl-primary-contrast) |
| --gf-field-img-choice-card-space-sm | Spacer for small image choice UI. | 8px |
| --gf-field-img-choice-card-space-md | Spacer for medium image choice UI. | 12px |
| --gf-field-img-choice-card-space-lg | Spacer for large image choice UI. | 16px |
| --gf-field-img-choice-card-space | Spacer for image choice UI. | var(--gf-field-img-choice-card-space-md) |
| Appearance - No Card | ||
| --gf-field-img-choice-no-card-placeholder-bg-color | Image placeholder background color. | rgba(var(--gf-color-out-ctrl-light-rgb), 0.05) |
| --gf-field-img-choice-no-card-placeholder-color | Image placeholder color. | rgba(var(--gf-color-out-ctrl-dark-rgb), 0.4) |
| --gf-field-img-choice-no-card-check-ind-bg-color | Checked indicator background color. | var(--gf-color-in-ctrl-primary) |
| --gf-field-img-choice-no-card-check-ind-icon-color | Checked indicator icon color. | var(--gf-color-in-ctrl-primary-contrast) |
| Checked Indicator | ||
| --gf-field-img-choice-check-ind-icon | Icon. | var(--gf-icon-ctrl-checkbox) |
| --gf-field-img-choice-check-ind-radius | Border radius. | 50% |
| --gf-field-img-choice-check-ind-shadow | Box shadow. | drop-shadow(0 1px 1px rgba(18, 25, 97, 0.15)) drop-shadow(0 2px 5px rgba(18, 25, 97, 0.1)) drop-shadow(0 0 0 rgba(18, 25, 97, 0.05)) |
| --gf-field-img-choice-check-ind-size-sm | Checked indicator size for small image choice. | 24px |
| --gf-field-img-choice-check-ind-size-md | Checked indicator size for medium image choice. | 38px |
| --gf-field-img-choice-check-ind-size-lg | Checked indicator size for large image choice. | 64px |
| --gf-field-img-choice-check-ind-size | Checked indicator size. | var(--gf-field-img-choice-check-ind-size-md) |
| --gf-field-img-choice-check-ind-icon-size-sm | Icon size for small image choice. | 12px |
| --gf-field-img-choice-check-ind-icon-size-md | Icon size for medium image choice. | var(--gf-icon-font-size) |
| --gf-field-img-choice-check-ind-icon-size-lg | Icon size for large image choice. | 30px |
| --gf-field-img-choice-check-ind-icon-size | Icon size. | var(--gf-field-img-choice-check-ind-icon-size-md) |
| Miscellaneous UI | ||
| --gf-field-img-choice-ctrl-opacity | Control opacity. | 1 |
| --gf-field-img-choice-ctrl-opacity-disabled | Control opacity when disabled. | 0.5 |
| --gf-field-img-choice-other-ctrl-margin-y-start | Vertical start (top) margin for other control. | 16px |