CSS variables
| Expand or collapse column | Selector | Variable | Value | |
|---|---|---|---|---|
| .pf-v6-c-form | --pf-v6-c-form--GridGap | 1.5rem | ||
| ||||
| .pf-v6-c-form | --pf-v6-c-form__group--Gap | 0.5rem | ||
| ||||
| .pf-v6-c-form | --pf-v6-c-form__group--m-action--MarginBlockStart | 2rem | ||
| ||||
| .pf-v6-c-form | --pf-v6-c-form--m-horizontal__group-label--md--GridColumnWidth | 9.375rem | ||
| .pf-v6-c-form | --pf-v6-c-form--m-horizontal__group-label--md--GridColumnGap | 1rem | ||
| ||||
| .pf-v6-c-form | --pf-v6-c-form--m-horizontal__group-control--md--GridColumnWidth | 1fr | ||
| .pf-v6-c-form | --pf-v6-c-form--m-limit-width--MaxWidth | 55rem | ||
| .pf-v6-c-form | --pf-v6-c-form--m-horizontal__group-label--md--PaddingBlockStart | calc((((((0.875rem * 1.5) + (2 * 1px)) - 0.875rem) / 2) + 0.875rem) - ((((0.75rem * 1.5) - 0.75rem) / 2) + 0.75rem) + 1px) | ||
| ||||
| .pf-v6-c-form | --pf-v6-c-form__group-label--PaddingBlockEnd | 0.5rem | ||
| ||||
| .pf-v6-c-form | --pf-v6-c-form--m-horizontal__group-label--m-no-padding--md--PaddingBlockStart | 0 | ||
| .pf-v6-c-form | --pf-v6-c-form--m-horizontal__group-label--m-no-padding--md--TranslateY | calc(((((0.75rem * 1.5) - 0.75rem) / 2) + 0.75rem) - ((((0.875rem * 1.5) - 0.875rem) / 2) + 0.875rem)) | ||
| ||||
| .pf-v6-c-form | --pf-v6-c-form__label--FontSize | 0.875rem | ||
| ||||
| .pf-v6-c-form | --pf-v6-c-form__label--LineHeight | 1.5 | ||
| ||||
| .pf-v6-c-form | --pf-v6-c-form__label--m-disabled--Color | (In light theme) #a3a3a3 | ||
| ||||
| .pf-v6-c-form | --pf-v6-c-form__label--hover--Cursor | pointer | ||
| .pf-v6-c-form | --pf-v6-c-form__label--m-disabled--hover--Cursor | not-allowed | ||
| .pf-v6-c-form | --pf-v6-c-form__label-text--FontWeight | 600 | ||
| ||||
| .pf-v6-c-form | --pf-v6-c-form__label-required--MarginInlineStart | 0.25rem | ||
| ||||
| .pf-v6-c-form | --pf-v6-c-form__label-required--FontSize | 0.875rem | ||
| ||||
| .pf-v6-c-form | --pf-v6-c-form__label-required--Color | (In light theme) #b1380b | ||
| ||||
| .pf-v6-c-form | --pf-v6-c-form__group-label-help--FontSize | 0.875rem | ||
| ||||
| .pf-v6-c-form | --pf-v6-c-form__group-label--m-info--Gap | undefined | ||
| ||||
| .pf-v6-c-form | --pf-v6-c-form__group-label-info--FontSize | 0.75rem | ||
| ||||
| .pf-v6-c-form | --pf-v6-c-form--m-horizontal__group-label--m-info--Gap | 0.5rem | ||
| ||||
| .pf-v6-c-form | --pf-v6-c-form__group-control--m-inline--Gap | 1rem | ||
| ||||
| .pf-v6-c-form | --pf-v6-c-form__group-control__helper-text--MarginBlockEnd | 0.25rem | ||
| ||||
| .pf-v6-c-form | --pf-v6-c-form__group-control--m-stack--Gap | 0.5rem | ||
| ||||
| .pf-v6-c-form | --pf-v6-c-form__group-control--m-stack__helper-text--MarginBlockStart | calc(0.5rem * -1 + 0.25rem) | ||
| ||||
| .pf-v6-c-form | --pf-v6-c-form__actions--child--MarginBlockStart | 0.5rem | ||
| ||||
| .pf-v6-c-form | --pf-v6-c-form__actions--child--MarginInlineEnd | 0.5rem | ||
| ||||
| .pf-v6-c-form | --pf-v6-c-form__actions--child--MarginBlockEnd | 0.5rem | ||
| ||||
| .pf-v6-c-form | --pf-v6-c-form__actions--child--MarginInlineStart | 0.5rem | ||
| ||||
| .pf-v6-c-form | --pf-v6-c-form__actions--MarginBlockStart | calc(0.5rem * -1) | ||
| ||||
| .pf-v6-c-form | --pf-v6-c-form__actions--MarginInlineEnd | calc(0.5rem * -1) | ||
| ||||
| .pf-v6-c-form | --pf-v6-c-form__actions--MarginBlockEnd | calc(0.5rem * -1) | ||
| ||||
| .pf-v6-c-form | --pf-v6-c-form__actions--MarginInlineStart | calc(0.5rem * -1) | ||
| ||||
| .pf-v6-c-form | --pf-v6-c-form__helper-text--MarginBlockStart--base | 0.25rem | ||
| ||||
| .pf-v6-c-form | --pf-v6-c-form__helper-text--MarginBlockStart | 0.25rem | ||
| ||||
| .pf-v6-c-form | --pf-v6-c-form__section--MarginBlockStart | 2rem | ||
| ||||
| .pf-v6-c-form | --pf-v6-c-form__section--Gap | 1.5rem | ||
| ||||
| .pf-v6-c-form | --pf-v6-c-form__section-title--FontSize | 1rem | ||
| ||||
| .pf-v6-c-form | --pf-v6-c-form__section-title--FontWeight | 600 | ||
| ||||
| .pf-v6-c-form | --pf-v6-c-form__section-title--MarginBlockEnd | calc(0.5rem * -1) | ||
| ||||
| .pf-v6-c-form | --pf-v6-c-form__field-group--border-width-base | 1px | ||
| ||||
| .pf-v6-c-form | --pf-v6-c-form__field-group--BorderBlockStartWidth | 1px | ||
| ||||
| .pf-v6-c-form | --pf-v6-c-form__field-group--BorderBlockStartColor | (In light theme) #e0e0e0 | ||
| ||||
| .pf-v6-c-form | --pf-v6-c-form__field-group--BorderBlockEndWidth | 1px | ||
| ||||
| .pf-v6-c-form | --pf-v6-c-form__field-group--BorderBlockEndColor | (In light theme) #e0e0e0 | ||
| ||||
| .pf-v6-c-form | --pf-v6-c-form__field-group--field-group--MarginBlockStart | calc(1.5rem * -1) | ||
| ||||
| .pf-v6-c-form | --pf-v6-c-form__field-group--GridTemplateColumns--toggle | calc(1rem * 2 + 0.875rem + 0.25rem) | ||
| ||||
| .pf-v6-c-form | --pf-v6-c-form__field-group-toggle--PaddingBlockStart | 1rem | ||
| ||||
| .pf-v6-c-form | --pf-v6-c-form__field-group-toggle--PaddingInlineEnd | 0.25rem | ||
| ||||
| .pf-v6-c-form | --pf-v6-c-form__field-group__field-group__field-group-toggle--PaddingBlockStart | 1.5rem | ||
| ||||
| .pf-v6-c-form | --pf-v6-c-form__field-group-header-toggle--BorderWidth--base | 1px | ||
| ||||
| .pf-v6-c-form | --pf-v6-c-form__field-group__field-group--field-group__field-group-toggle--after--BorderBlockStartWidth | 1px | ||
| ||||
| .pf-v6-c-form | --pf-v6-c-form__field-group-toggle-button--MarginBlockStart | calc(0.5rem * -1) | ||
| ||||
| .pf-v6-c-form | --pf-v6-c-form__field-group-toggle-button--MarginBlockEnd | calc(0.5rem * -1) | ||
| ||||
| .pf-v6-c-form | --pf-v6-c-form__field-group-toggle-icon--TransitionDuration | 100ms | ||
| ||||
| .pf-v6-c-form | --pf-v6-c-form__field-group-toggle-icon--TransitionTimingFunction | cubic-bezier(.4, 0, .2, 1) | ||
| ||||
| .pf-v6-c-form | --pf-v6-c-form__field-group-toggle-icon--MinWidth | 0.875rem | ||
| ||||
| .pf-v6-c-form | --pf-v6-c-form__field-group-toggle-icon--Rotate | 0 | ||
| .pf-v6-c-form | --pf-v6-c-form__field-group--m-expanded__toggle-icon--Rotate | -180deg | ||
| .pf-v6-c-form | --pf-v6-c-form__field-group-header--PaddingBlockStart | 1rem | ||
| ||||
| .pf-v6-c-form | --pf-v6-c-form__field-group-header--PaddingBlockEnd | 1rem | ||
| ||||
| .pf-v6-c-form | --pf-v6-c-form__field-group-header--GridColumn | 1 / 3 | ||
| .pf-v6-c-form | --pf-v6-c-form__field-group__field-group__field-group-header--PaddingBlockStart | 1.5rem | ||
| ||||
| .pf-v6-c-form | --pf-v6-c-form__field-group__field-group__field-group-header--PaddingBlockEnd | 1.5rem | ||
| ||||
| .pf-v6-c-form | --pf-v6-c-form__field-group-toggle--field-group-header--GridColumn | 2 / 3 | ||
| .pf-v6-c-form | --pf-v6-c-form__field-group__field-group--field-group__field-group-header--after--BorderBlockStartWidth | 1px | ||
| ||||
| .pf-v6-c-form | --pf-v6-c-form__field-group-header-description--MarginBlockStart | 0.25rem | ||
| ||||
| .pf-v6-c-form | --pf-v6-c-form__field-group-header-description--Color | (In light theme) #4d4d4d | ||
| ||||
| .pf-v6-c-form | --pf-v6-c-form__field-group-header-actions--MarginInlineStart | 0.5rem | ||
| ||||
| .pf-v6-c-form | --pf-v6-c-form__field-group-header-actions--MarginBlockStart | calc(0.5rem * -1) | ||
| ||||
| .pf-v6-c-form | --pf-v6-c-form__field-group-header-actions--MarginBlockEnd | calc(0.5rem * -1) | ||
| ||||
| .pf-v6-c-form | --pf-v6-c-form__field-group-body--PaddingBlockStart | 1.5rem | ||
| ||||
| .pf-v6-c-form | --pf-v6-c-form__field-group-body--PaddingBlockEnd | 1.5rem | ||
| ||||
| .pf-v6-c-form | --pf-v6-c-form__field-group-body--Gap | 1.5rem | ||
| ||||
| .pf-v6-c-form | --pf-v6-c-form__field-group-body--GridColumn | 2 / 3 | ||
| .pf-v6-c-form | --pf-v6-c-form__field-group__field-group__field-group-body--GridColumn | 1 / 3 | ||
| .pf-v6-c-form | --pf-v6-c-form__field-group__field-group__field-group-toggle--field-group-body--GridColumn | 2 / 3 | ||
| .pf-v6-c-form | --pf-v6-c-form__field-group-body__field-group--last-child--MarginBlockEnd | calc(1.5rem * -1) | ||
| ||||
| .pf-v6-c-form | --pf-v6-c-form__field-group-body--TranslateY | 0 | ||
| .pf-v6-c-form | --pf-v6-c-form__field-group--m-expanded__field-group-body--TranslateY | 0 | ||
| .pf-v6-c-form | --pf-v6-c-form__field-group-body--TransitionDuration--expand--slide | 0s | ||
| .pf-v6-c-form | --pf-v6-c-form__field-group-body--TransitionDuration--expand--fade | 200ms | ||
| ||||
| .pf-v6-c-form | --pf-v6-c-form__field-group-body--TransitionDuration--collapse--slide | 0s | ||
| .pf-v6-c-form | --pf-v6-c-form__field-group-body--TransitionDuration--collapse--fade | 100ms | ||
| ||||
| .pf-v6-c-form__group-label | --pf-v6-c-form__helper-text--MarginBlockStart | 0 | ||
| .pf-v6-c-form__group-label-help .pf-v6-c-button | --pf-v6-c-button--FontSize | 0.875rem | ||
| ||||
| .pf-v6-c-form__group-control.pf-m-stack | --pf-v6-c-form__helper-text--MarginBlockStart | calc(0.5rem * -1 + 0.25rem) | ||
| ||||
| .pf-v6-c-form__group-control .pf-v6-c-form__helper-text:first-child | --pf-v6-c-form__helper-text--MarginBlockStart | 0 | ||
| .pf-v6-c-form__field-group | --pf-v6-c-form__field-group--BorderBlockStartWidth | 1px | ||
| ||||
| .pf-v6-c-form__field-group:last-child | --pf-v6-c-form__field-group--BorderBlockEndWidth | 0 | ||
| .pf-v6-c-form__field-group + .pf-v6-c-form__field-group | --pf-v6-c-form__field-group--BorderBlockStartWidth | 0 | ||
| .pf-v6-c-form__field-group .pf-v6-c-form__field-group | --pf-v6-c-form__field-group-body--GridColumn | 1 / 3 | ||
| ||||
| .pf-v6-c-form__field-group .pf-v6-c-form__field-group | --pf-v6-c-form__field-group-toggle--PaddingBlockStart | 1.5rem | ||
| ||||
| .pf-v6-c-form__field-group .pf-v6-c-form__field-group | --pf-v6-c-form__field-group-header--PaddingBlockStart | 1.5rem | ||
| ||||
| .pf-v6-c-form__field-group .pf-v6-c-form__field-group | --pf-v6-c-form__field-group-header--PaddingBlockEnd | 1.5rem | ||
| ||||
| .pf-v6-c-form__field-group .pf-v6-c-form__field-group | --pf-v6-c-form__field-group-body--PaddingBlockStart | 0 | ||
| .pf-v6-c-form__field-group .pf-v6-c-form__field-group .pf-v6-c-form__field-group-toggle ~ .pf-v6-c-form__field-group-body | --pf-v6-c-form__field-group-body--GridColumn | 2 / 3 | ||
| ||||
| .pf-v6-c-form__field-group.pf-m-expanded > .pf-v6-c-form__field-group-toggle | --pf-v6-c-form__field-group-toggle-icon--Rotate | -180deg | ||
| ||||
| .pf-v6-c-form__field-group-toggle + .pf-v6-c-form__field-group-header | --pf-v6-c-form__field-group-header--GridColumn | 2 / 3 | ||
| ||||
| .pf-v6-c-form__field-group-body > .pf-v6-c-form__field-group:first-child | --pf-v6-c-form__field-group-toggle--PaddingBlockStart | 0 | ||
| .pf-v6-c-form__field-group-body > .pf-v6-c-form__field-group:first-child | --pf-v6-c-form__field-group-header--PaddingBlockStart | 0 | ||
