Global CSS API: Controls - Label
The following CSS custom properties are used for the control label UI.
Primary Label
Properties used for field labels UI.
| Property | Description | Default |
|---|---|---|
| --gf-ctrl-label-color-primary | Color. | var(--gf-color-out-ctrl-dark-darker) |
| --gf-ctrl-label-font-family-primary | Font family. | var(--gf-font-family-secondary) |
| --gf-ctrl-label-font-size-primary | Font size. | var(--gf-font-size-secondary) |
| --gf-ctrl-label-font-style-primary | Font style. | var(--gf-font-style-secondary) |
| --gf-ctrl-label-font-weight-primary | Font weight. | var(--gf-font-weight-secondary) |
| --gf-ctrl-label-letter-spacing-primary | Letter spacing. | var(--gf-letter-spacing-secondary) |
| --gf-ctrl-label-line-height-primary | Line height. | var(--gf-line-height-secondary) |
Secondary Label
Properties used for radio, checkbox, and consent control labels UI.
| Property | Description | Default |
|---|---|---|
| --gf-ctrl-label-color-secondary | Color. | var(--gf-color-out-ctrl-dark-darker) |
| --gf-ctrl-label-font-family-secondary | Font family. | var(--gf-font-family-secondary) |
| --gf-ctrl-label-font-size-secondary | Font size. | var(--gf-font-size-secondary) |
| --gf-ctrl-label-font-style-secondary | Font style. | var(--gf-font-style-secondary) |
| --gf-ctrl-label-font-weight-secondary | Font weight. | 400 |
| --gf-ctrl-label-letter-spacing-secondary | Letter spacing. | var(--gf-letter-spacing-secondary) |
| --gf-ctrl-label-line-height-secondary | Line height. | var(--gf-line-height-secondary) |
Tertiary Label
Properties used for complex fields and fieldset control label UI (sub-labels).
| Property | Description | Default |
|---|---|---|
| --gf-ctrl-label-color-tertiary | Color. | var(--gf-color-out-ctrl-dark) |
| --gf-ctrl-label-font-family-tertiary | Font family. | var(--gf-font-family-tertiary) |
| --gf-ctrl-label-font-size-tertiary | Font size. | var(--gf-font-size-tertiary) |
| --gf-ctrl-label-font-style-tertiary | Font style. | var(--gf-font-style-tertiary) |
| --gf-ctrl-label-font-weight-tertiary | Font weight. | var(--gf-font-weight-tertiary) |
| --gf-ctrl-label-letter-spacing-tertiary | Letter spacing. | var(--gf-letter-spacing-tertiary) |
| --gf-ctrl-label-line-height-tertiary | Line height. | var(--gf-line-height-tertiary) |
Quaternary Label
Properties used for simpler control label UI, such as product pricing.
| Property | Description | Default |
|---|---|---|
| --gf-ctrl-label-color-quaternary | Color. | var(--gf-color-out-ctrl-dark) |
| --gf-ctrl-label-font-family-quaternary | Font family. | var(--gf-font-family-tertiary) |
| --gf-ctrl-label-font-size-quaternary | Font size. | var(--gf-font-size-secondary) |
| --gf-ctrl-label-font-style-quaternary | Font style. | var(--gf-font-style-tertiary) |
| --gf-ctrl-label-font-weight-quaternary | Font weight. | var(--gf-font-weight-secondary) |
| --gf-ctrl-label-letter-spacing-quaternary | Letter spacing. | var(--gf-letter-spacing-tertiary) |
| --gf-ctrl-label-line-height-quaternary | Line height. | var(--gf-line-height-tertiary) |
Required Label
Properties used for field label required indicator UI.
| Property | Description | Default |
|---|---|---|
| --gf-ctrl-label-color-req | Color. | var(--gf-color-danger) |
| --gf-ctrl-label-font-family-req | Font family. | var(--gf-ctrl-label-font-family-primary) |
| --gf-ctrl-label-font-size-req | Font size. | 14px |
| --gf-ctrl-label-font-style-req | Font style. | var(--gf-ctrl-label-font-style-primary) |
| --gf-ctrl-label-font-weight-req | Font weight. | var(--gf-ctrl-label-font-weight-primary) |
| --gf-ctrl-label-letter-spacing-req | Letter spacing. | var(--gf-ctrl-label-letter-spacing-primary) |
| --gf-ctrl-label-line-height-req | Line height. | var(--gf-ctrl-label-line-height-primary) |