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.
| Property | Description | Default |
|---|---|---|
| --gf-ctrl-choice-check-color | Checked color. | var(--gf-color-in-ctrl-primary) |
| --gf-ctrl-choice-check-color-disabled | Checked color when disabled. | rgba(var(--gf-color-in-ctrl-contrast-rgb), 0.2) |
| --gf-ctrl-choice-size-sm | Small control size. | 18px |
| --gf-ctrl-choice-size-md | Medium control size. | 20px |
| --gf-ctrl-choice-size-lg | Large control size. | 22px |
| --gf-ctrl-choice-size-xl | Extra large control size. | 28px |
| --gf-ctrl-choice-size | Control size. | var(--gf-ctrl-choice-size-md) |
Choice - Checkbox
Properties used for choice control checkbox input type UI.
| Property | Description | Default |
|---|---|---|
| --gf-ctrl-checkbox-check-radius | Checked radius. | var(--gf-ctrl-radius-max-sm) |
| --gf-ctrl-checkbox-check-size-sm | Small control size check. | 12px |
| --gf-ctrl-checkbox-check-size-md | Medium control size check. | initial |
| --gf-ctrl-checkbox-check-size-lg | Large control size check. | 15px |
| --gf-ctrl-checkbox-check-size-xl | Extra large control size check. | 19px |
| --gf-ctrl-checkbox-check-size | Control size check. | var(--gf-ctrl-checkbox-check-size-md) |
Choice - Radio
Properties used for choice control radio input type UI.
| Property | Description | Default |
|---|---|---|
| --gf-ctrl-radio-check-radius | Checked radius. | 50% |
| --gf-ctrl-radio-check-content | Check content / icon. | "" |
| --gf-ctrl-radio-check-size-sm | Small control size check. | 6px |
| --gf-ctrl-radio-check-size-md | Medium control size check. | 7px |
| --gf-ctrl-radio-check-size-lg | Large control size check. | 8px |
| --gf-ctrl-radio-check-size-xl | Extra large control size check. | 10px |
| --gf-ctrl-radio-check-size | Control size check. | var(--gf-ctrl-radio-check-size-md) |