Global CSS API: Controls - Choice (Checkbox, Radio, & Consent)

The following CSS custom properties are used for the choice input type control UI, such as checkbox and radio input types and the consent field.

Choice Base

Properties used for base choice control UI.

PropertyDescriptionDefault
--gf-ctrl-choice-check-colorChecked color.var(--gf-color-in-ctrl-primary)
--gf-ctrl-choice-check-color-disabledChecked color when disabled.rgba(var(--gf-color-in-ctrl-contrast-rgb), 0.2)
--gf-ctrl-choice-size-smSmall control size.18px
--gf-ctrl-choice-size-mdMedium control size.20px
--gf-ctrl-choice-size-lgLarge control size.22px
--gf-ctrl-choice-size-xlExtra large control size.28px
--gf-ctrl-choice-sizeControl size.var(--gf-ctrl-choice-size-md)

Choice - Checkbox

Properties used for choice control checkbox input type UI.

PropertyDescriptionDefault
--gf-ctrl-checkbox-check-radiusChecked radius.var(--gf-ctrl-radius-max-sm)
--gf-ctrl-checkbox-check-size-smSmall control size check.12px
--gf-ctrl-checkbox-check-size-mdMedium control size check.initial
--gf-ctrl-checkbox-check-size-lgLarge control size check.15px
--gf-ctrl-checkbox-check-size-xlExtra large control size check.19px
--gf-ctrl-checkbox-check-sizeControl size check.var(--gf-ctrl-checkbox-check-size-md)

Choice - Radio

Properties used for choice control radio input type UI.

PropertyDescriptionDefault
--gf-ctrl-radio-check-radiusChecked radius.50%
--gf-ctrl-radio-check-contentCheck content / icon.""
--gf-ctrl-radio-check-size-smSmall control size check.6px
--gf-ctrl-radio-check-size-mdMedium control size check.7px
--gf-ctrl-radio-check-size-lgLarge control size check.8px
--gf-ctrl-radio-check-size-xlExtra large control size check.10px
--gf-ctrl-radio-check-sizeControl size check.var(--gf-ctrl-radio-check-size-md)