Examples
Props
ActionGroup
| Name | Type | Default | Description |
|---|---|---|---|
| children | React.ReactNode | null | Anything that can be rendered as ActionGroup content. |
| className | string | '' | Additional classes added to the ActionGroup. |
Form
| Name | Type | Default | Description |
|---|---|---|---|
| children | React.ReactNode | null | Anything that can be rendered as Form content. |
| className | string | '' | Additional classes added to the Form. |
| isHorizontal | boolean | false | Sets the Form to horizontal. |
| isWidthLimited | boolean | false | Limits the max-width of the form. |
| maxWidth | string | '' | Sets a custom max-width for the form. |
FormGroup
| Name | Type | Default | Description |
|---|---|---|---|
| children | React.ReactNode | null | Anything that can be rendered as FormGroup content. |
| className | string | '' | Additional classes added to the FormGroup. |
| fieldId | string | ID of an individual field or a group of multiple fields. Required when a role of "group" or "radiogroup" is passed in. If only one field is included, its ID attribute and this prop must be the same. | |
| hasNoPaddingTop | boolean | false | Removes top spacer from label. |
| helperText | React.ReactNode | Helper text regarding the field. It can be a simple text or an object. | |
| helperTextIcon | React.ReactNode | Icon displayed to the left of the helper text. | |
| helperTextInvalid | React.ReactNode | Helper text after the field when the field is invalid. It can be a simple text or an object. | |
| helperTextInvalidIcon | React.ReactNode | Icon displayed to the left of the helper text when the field is invalid. | |
| isHelperTextBeforeField | boolean | false | Flag to position the helper text before the field. False by default |
| isInline | boolean | false | Sets the FormGroup isInline. |
| isRequired | boolean | false | Sets the FormGroup required. |
| isStack | boolean | false | Sets the FormGroupControl to be stacked |
| label | React.ReactNode | Label text before the field. | |
| labelIcon | React.ReactElement | Sets an icon for the label. For providing additional context. Host element for Popover | |
| labelInfo | React.ReactNode | Additional label information displayed after the label. | |
| role | string | Sets the role of the form group. Pass in "radiogroup" when the form group contains multiple radio inputs, or pass in "group" when the form group contains multiple of any other input type. | |
| validated | 'success' | 'warning' | 'error' | 'default' | 'default' | Sets the FormGroup validated. If you set to success, text color of helper text will be modified to indicate valid state. If set to error, text color of helper text will be modified to indicate error state. If set to warning, text color of helper text will be modified to indicate warning state. |
FormSection
| Name | Type | Default | Description |
|---|---|---|---|
| children | React.ReactNode | Content rendered inside the section | |
| className | string | '' | Additional classes added to the section |
| title | React.ReactNode | '' | Title for the section |
| titleElement | 'div' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'div' | Element to wrap the section title |
FormHelperText
| Name | Type | Default | Description |
|---|---|---|---|
| children | React.ReactNode | null | Content rendered inside the Helper Text Item |
| className | string | '' | Additional classes added to the Helper Text Item |
| component | 'p' | 'div' | 'p' | Component type of the form helper text |
| icon | React.ReactNode | null | Icon displayed to the left of the helper text. |
| isError | boolean | false | Adds error styling to the Helper Text * |
| isHidden | boolean | true | Hides the helper text * |
FormFieldGroup
| Name | Type | Default | Description |
|---|---|---|---|
| children | React.ReactNode | Anything that can be rendered as form field group content. | |
| className | string | Additional classes added to the form field group. | |
| header | React.ReactNode | Form field group header |
FormFieldGroupExpandable
| Name | Type | Default | Description |
|---|---|---|---|
| children | React.ReactNode | Anything that can be rendered as form field group content. | |
| className | string | Additional classes added to the form field group. | |
| header | React.ReactNode | Form field group header | |
| isExpanded | boolean | false | Flag indicating if the form field group is initially expanded |
| toggleAriaLabel | string | Aria-label to use on the form field group toggle button |
FormFieldGroupHeader
| Name | Type | Default | Description |
|---|---|---|---|
| actions | React.ReactNode | Field group header actions | |
| className | string | Additional classes added to the section | |
| titleDescription | React.ReactNode | Field group header title description | |
| titleText | FormFieldGroupHeaderTitleTextObject | Field group header title text |
FormFieldGroupHeaderTitleTextObject
| Name | Type | Default | Description |
|---|
Button
| Name | Type | Default | Description |
|---|---|---|---|
| aria-label | string | Adds accessible text to the button. | |
| children | React.ReactNode | Content rendered inside the button | |
| className | string | Additional classes added to the button | |
| component | React.ElementType<any> | React.ComponentType<any> | Sets the base component to render. defaults to button | |
| icon | React.ReactNode | null | Icon for the button. Usable by all variants except for plain. | |
| iconPosition | 'left' | 'right' | Sets position of the link icon | |
| innerRef | React.Ref<any> | Forwarded ref | |
| inoperableEvents | string[] | Events to prevent when the button is in an aria-disabled state | |
| isActive | boolean | Adds active styling to button. | |
| isAriaDisabled | boolean | Adds disabled styling and communicates that the button is disabled using the aria-disabled html attribute | |
| isBlock | boolean | Adds block styling to button | |
| isDanger | boolean | Adds danger styling to secondary or link button variants | |
| isDisabled | boolean | Adds disabled styling and disables the button using the disabled html attribute | |
| isInline | boolean | Adds inline styling to a link button | |
| isLarge | boolean | Adds large styling to the button | |
| isLoading | boolean | Adds progress styling to button | |
| isSmall | boolean | Adds small styling to the button | |
| spinnerAriaLabel | string | Accessible label for the spinner to describe what is loading | |
| spinnerAriaLabelledBy | string | Id of element which describes what is being loaded | |
| spinnerAriaValueText | string | Text describing that current loading status or progress | |
| tabIndex | number | Sets the button tabindex. | |
| type | 'button' | 'submit' | 'reset' | Sets button type | |
| variant | 'primary' | 'secondary' | 'tertiary' | 'danger' | 'warning' | 'link' | 'plain' | 'control' | Adds button variant styles |
Popover
| Name | Type | Default | Description |
|---|---|---|---|
| bodyContentrequired | React.ReactNode | ((hide: () => void) => React.ReactNode) | Body content If you want to close the popover after an action within the bodyContent, you can use the isVisible prop for manual control, or you can provide a function which will receive a callback as an argument to hide the popover i.e. bodyContent={hide => <Button onClick={() => hide()}>Close</Button>} | |
| alertSeverityScreenReaderTextBeta | string | Text announced by screen reader when alert severity variant is set to indicate severity level | |
| alertSeverityVariantBeta | 'default' | 'info' | 'warning' | 'success' | 'danger' | Severity variants for an alert popover. This modifies the color of the header to match the severity. | |
| animationDuration | number | 300 | CSS fade transition animation duration |
| appendTo | HTMLElement | ((ref?: HTMLElement) => HTMLElement) | () => document.body | The element to append the popover to, defaults to body |
| aria-label | string | '' | Accessible label, required when header is not present |
| Deprecated: boundary | 'scrollParent' | 'window' | 'viewport' | HTMLElement | - no longer used. if you want to constrain the popper to a specific element use the appendTo prop instead | |
| children | ReactElement<any> | The reference element to which the Popover is relatively placed to. If you cannot wrap the reference with the Popover, you can use the reference prop instead. Usage: <Popover><Button>Reference</Button></Popover> | |
| className | string | '' | Popover additional class |
| closeBtnAriaLabel | string | 'Close' | Aria label for the Close button |
| distance | number | 25 | Distance of the popover to its target, defaults to 25 |
| enableFlip | boolean | true | If true, tries to keep the popover in view by flipping it if necessary. If the position is set to 'auto', this prop is ignored |
| flipBehavior | 'flip' | ( | 'top' | 'bottom' | 'left' | 'right' | 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end' | 'left-start' | 'left-end' | 'right-start' | 'right-end' )[] | ['top', 'right', 'bottom', 'left', 'top', 'right', 'bottom'] | The desired position to flip the popover to if the initial position is not possible. By setting this prop to 'flip' it attempts to flip the popover to the opposite side if there is no space. You can also pass an array of positions that determines the flip order. It should contain the initial position followed by alternative positions if that position is unavailable. Example: Initial position is 'top'. Button with popover is in the top right corner. 'flipBehavior' is set to ['top', 'right', 'left']. Since there is no space to the top, it checks if right is available. There's also no space to the right, so it finally shows the popover on the left. |
| footerContent | React.ReactNode | ((hide: () => void) => React.ReactNode) | null | Footer content If you want to close the popover after an action within the bodyContent, you can use the isVisible prop for manual control, or you can provide a function which will receive a callback as an argument to hide the popover i.e. footerContent={hide => <Button onClick={() => hide()}>Close</Button>} |
| hasAutoWidth | boolean | false | Removes fixed-width and allows width to be defined by contents |
| hasNoPadding | boolean | false | Allows content to touch edges of popover container |
| headerComponent | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'h6' | Sets the heading level to use for the popover header. Default is h6. |
| headerContent | React.ReactNode | ((hide: () => void) => React.ReactNode) | null | Simple header content to be placed within a title. If you want to close the popover after an action within the bodyContent, you can use the isVisible prop for manual control, or you can provide a function which will receive a callback as an argument to hide the popover i.e. headerContent={hide => <Button onClick={() => hide()}>Close</Button>} |
| headerIconBeta | React.ReactNode | null | Icon to be displayed in the popover header * |
| hideOnOutsideClick | boolean | true | Hides the popover when a click occurs outside (only works if isVisible is not controlled by the user) |
| id | string | id used as part of the various popover elements (popover-${id}-header/body/footer) | |
| isVisible | boolean | null | True to show the popover programmatically. Used in conjunction with the shouldClose prop. By default, the popover child element handles click events automatically. If you want to control this programmatically, the popover will not auto-close if the Close button is clicked, ESC key is used, or if a click occurs outside the popover. Instead, the consumer is responsible for closing the popover themselves by adding a callback listener for the shouldClose prop. |
| maxWidth | string | popoverMaxWidth && popoverMaxWidth.value | Maximum width of the popover (default 18.75rem) |
| minWidth | string | popoverMinWidth && popoverMinWidth.value | Minimum width of the popover (default 6.25rem) |
| onHidden | (tip?: TippyInstance) => void | (): void => null | Lifecycle function invoked when the popover has fully transitioned out. Note: The tip argument is no longer passed and has been deprecated. |
| onHide | (tip?: TippyInstance) => void | (): void => null | Lifecycle function invoked when the popover begins to transition out. Note: The tip argument is no longer passed and has been deprecated. |
| onMount | (tip?: TippyInstance) => void | (): void => null | Lifecycle function invoked when the popover has been mounted to the DOM. Note: The tip argument is no longer passed and has been deprecated. |
| onShow | (tip?: TippyInstance) => void | (): void => null | Lifecycle function invoked when the popover begins to transition in. Note: The tip argument is no longer passed and has been deprecated. |
| onShown | (tip?: TippyInstance) => void | (): void => null | Lifecycle function invoked when the popover has fully transitioned in. Note: The tip argument is no longer passed and has been deprecated. |
| position | PopoverPosition | 'auto' | 'top' | 'bottom' | 'left' | 'right' | 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end' | 'left-start' | 'left-end' | 'right-start' | 'right-end' | 'top' | Popover position. Note: With 'enableFlip' set to true, it will change the position if there is not enough space for the starting position. The behavior of where it flips to can be controlled through the flipBehavior prop. |
| reference | HTMLElement | (() => HTMLElement) | React.RefObject<any> | The reference element to which the Popover is relatively placed to. If you can wrap the reference with the Popover, you can use the children prop instead. Usage: <Popover reference={() => document.getElementById('reference-element')} /> | |
| shouldClose | (tip?: TippyInstance, hideFunction?: () => void, event?: MouseEvent | KeyboardEvent) => void | (): void => null | Callback function that is only invoked when isVisible is also controlled. Called when the popover Close button is clicked, Enter key was used on it, or the ESC key is used. Note: The tip argument is no longer passed and has been deprecated. |
| shouldOpen | (showFunction?: () => void, event?: MouseEvent | KeyboardEvent) => void | (): void => null | Callback function that is only invoked when isVisible is also controlled. Called when the Enter key is used on the focused trigger |
| showClose | boolean | true | Whether to show the close button |
| Deprecated: tippyProps | Partial<TippyProps> | - no longer used | |
| withFocusTrap | boolean | Whether to trap focus in the popover | |
| zIndex | number | 9999 | z-index of the popover |
CSS variables
| .pf-c-form | --pf-c-form--GridGap | 1.5rem | ||
| .pf-c-form | --pf-c-form__group--m-action--MarginTop | 2rem | ||
| .pf-c-form | --pf-c-form--m-horizontal__group-label--md--GridColumnWidth | 9.375rem | ||
| .pf-c-form | --pf-c-form--m-horizontal__group-label--md--GridColumnGap | 1rem | ||
| .pf-c-form | --pf-c-form--m-horizontal__group-control--md--GridColumnWidth | 1fr | ||
| .pf-c-form | --pf-c-form--m-limit-width--MaxWidth | 55rem | ||
| .pf-c-form | --pf-c-form--m-horizontal__group-label--md--PaddingTop | calc((((((1rem * 1.5) + (2 * 1px)) - 1rem) / 2) + 1rem) - ((((0.875rem * 1.3) - 0.875rem) / 2) + 0.875rem) + 1px) | ||
| .pf-c-form | --pf-c-form__group-label--PaddingBottom | 0.5rem | ||
| .pf-c-form | --pf-c-form--m-horizontal__group-label--m-no-padding--md--PaddingTop | 0 | ||
| .pf-c-form | --pf-c-form--m-horizontal__group-label--m-no-padding--md--TranslateY | calc(((((0.875rem * 1.3) - 0.875rem) / 2) + 0.875rem) - ((((1rem * 1.3) - 1rem) / 2) + 1rem)) | ||
| .pf-c-form | --pf-c-form__label--FontSize | 0.875rem | ||
| .pf-c-form | --pf-c-form__label--LineHeight | 1.3 | ||
| .pf-c-form | --pf-c-form__label--m-disabled--Color | #6a6e73 | ||
| .pf-c-form | --pf-c-form__label--hover--Cursor | pointer | ||
| .pf-c-form | --pf-c-form__label--m-disabled--hover--Cursor | not-allowed | ||
| .pf-c-form | --pf-c-form__label-text--FontWeight | 700 | ||
| .pf-c-form | --pf-c-form__label-required--MarginLeft | 0.25rem | ||
| .pf-c-form | --pf-c-form__label-required--FontSize | 0.875rem | ||
| .pf-c-form | --pf-c-form__label-required--Color | #c9190b | ||
| .pf-c-form | --pf-c-form__group-label-help--PaddingTop | 0.25rem | ||
| .pf-c-form | --pf-c-form__group-label-help--PaddingRight | 0.25rem | ||
| .pf-c-form | --pf-c-form__group-label-help--PaddingBottom | 0.25rem | ||
| .pf-c-form | --pf-c-form__group-label-help--PaddingLeft | 0.25rem | ||
| .pf-c-form | --pf-c-form__group-label-help--MarginTop | calc(0.25rem * -1) | ||
| .pf-c-form | --pf-c-form__group-label-help--MarginRight | calc(0.25rem * -1) | ||
| .pf-c-form | --pf-c-form__group-label-help--MarginBottom | calc(0.25rem * -1) | ||
| .pf-c-form | --pf-c-form__group-label-help--MarginLeft | calc(0.25rem * -1 + 0.25rem) | ||
| .pf-c-form | --pf-c-form__group-label-help--FontSize | 0.875rem | ||
| .pf-c-form | --pf-c-form__group-label-help--TranslateY | 0.125rem | ||
| .pf-c-form | --pf-c-form__group-label-help--Color | #6a6e73 | ||
| .pf-c-form | --pf-c-form__group-label-help--hover--Color | #151515 | ||
| .pf-c-form | --pf-c-form__group-label-help--focus--Color | #151515 | ||
| .pf-c-form | --pf-c-form__group-label-info--MarginLeft | 0.5rem | ||
| .pf-c-form | --pf-c-form__group-label-info--FontSize | 0.875rem | ||
| .pf-c-form | --pf-c-form__group-control--m-inline--child--MarginRight | 1.5rem | ||
| .pf-c-form | --pf-c-form__group-control__helper-text--MarginBottom | 0.25rem | ||
| .pf-c-form | --pf-c-grid__group-control--m-stack--Gap | 0.5rem | ||
| .pf-c-form | --pf-c-grid__group-control--m-stack__helper-text--MarginTop | calc(0.5rem * -1 + 0.25rem) | ||
| .pf-c-form | --pf-c-form__actions--child--MarginTop | 0.5rem | ||
| .pf-c-form | --pf-c-form__actions--child--MarginRight | 0.5rem | ||
| .pf-c-form | --pf-c-form__actions--child--MarginBottom | 0.5rem | ||
| .pf-c-form | --pf-c-form__actions--child--MarginLeft | 0.5rem | ||
| .pf-c-form | --pf-c-form__actions--MarginTop | calc(0.5rem * -1) | ||
| .pf-c-form | --pf-c-form__actions--MarginRight | calc(0.5rem * -1) | ||
| .pf-c-form | --pf-c-form__actions--MarginBottom | calc(0.5rem * -1) | ||
| .pf-c-form | --pf-c-form__actions--MarginLeft | calc(0.5rem * -1) | ||
| .pf-c-form | --pf-c-form__helper-text--MarginTop--base | 0.25rem | ||
| .pf-c-form | --pf-c-form__helper-text--MarginTop | 0.25rem | ||
| .pf-c-form | --pf-c-form__helper-text--FontSize | 0.875rem | ||
| .pf-c-form | --pf-c-form__helper-text--Color | #151515 | ||
| .pf-c-form | --pf-c-form__helper-text-icon--FontSize | 1rem | ||
| .pf-c-form | --pf-c-form__helper-text-icon--MarginRight | 0.25rem | ||
| .pf-c-form | --pf-c-form__helper-text--m-success--Color | #1e4f18 | ||
| .pf-c-form | --pf-c-form__helper-text--m-warning--Color | #795600 | ||
| .pf-c-form | --pf-c-form__helper-text--m-error--Color | #c9190b | ||
| .pf-c-form | --pf-c-form__section--MarginTop | 2rem | ||
| .pf-c-form | --pf-c-form__section--Gap | 1.5rem | ||
| .pf-c-form | --pf-c-form__section-title--FontSize | 1.125rem | ||
| .pf-c-form | --pf-c-form__section-title--FontWeight | 700 | ||
| .pf-c-form | --pf-c-form__section-title--MarginBottom | calc(0.5rem * -1) | ||
| .pf-c-form | --pf-c-form__field-group--border-width-base | 1px | ||
| .pf-c-form | --pf-c-form__field-group--BorderTopWidth | 1px | ||
| .pf-c-form | --pf-c-form__field-group--BorderTopColor | #d2d2d2 | ||
| .pf-c-form | --pf-c-form__field-group--BorderBottomWidth | 1px | ||
| .pf-c-form | --pf-c-form__field-group--BorderBottomColor | #d2d2d2 | ||
| .pf-c-form | --pf-c-form__field-group--field-group--MarginTop | calc(1.5rem * -1) | ||
| .pf-c-form | --pf-c-form__field-group--GridTemplateColumns--toggle | calc(1rem * 2 + 1rem + 0.25rem) | ||
| .pf-c-form | --pf-c-form__field-group-toggle--PaddingTop | 1rem | ||
| .pf-c-form | --pf-c-form__field-group-toggle--PaddingRight | 0.25rem | ||
| .pf-c-form | --pf-c-form__field-group__field-group__field-group-toggle--PaddingTop | 1.5rem | ||
| .pf-c-form | --pf-c-form__field-group-header-toggle--BorderWidth--base | 1px | ||
| .pf-c-form | --pf-c-form__field-group__field-group--field-group__field-group-toggle--after--BorderTopWidth | 1px | ||
| .pf-c-form | --pf-c-form__field-group-toggle-button--MarginTop | calc(0.375rem * -1) | ||
| .pf-c-form | --pf-c-form__field-group-toggle-button--MarginBottom | calc(0.375rem * -1) | ||
| .pf-c-form | --pf-c-form__field-group-toggle-icon--Transition | all 250ms cubic-bezier(.42, 0, .58, 1) | ||
| .pf-c-form | --pf-c-form__field-group-toggle-icon--MinWidth | 1rem | ||
| .pf-c-form | --pf-c-form__field-group-toggle-icon--Rotate | 0 | ||
| .pf-c-form | --pf-c-form__field-group--m-expanded__toggle-icon--Rotate | 90deg | ||
| .pf-c-form | --pf-c-form__field-group-header--PaddingTop | 1rem | ||
| .pf-c-form | --pf-c-form__field-group-header--PaddingBottom | 1rem | ||
| .pf-c-form | --pf-c-form__field-group-header--GridColumn | 1 / 3 | ||
| .pf-c-form | --pf-c-form__field-group__field-group__field-group-header--PaddingTop | 1.5rem | ||
| .pf-c-form | --pf-c-form__field-group__field-group__field-group-header--PaddingBottom | 1.5rem | ||
| .pf-c-form | --pf-c-form__field-group-toggle--field-group-header--GridColumn | 2 / 3 | ||
| .pf-c-form | --pf-c-form__field-group__field-group--field-group__field-group-header--after--BorderTopWidth | 1px | ||
| .pf-c-form | --pf-c-form__field-group-header-description--MarginTop | 0.25rem | ||
| .pf-c-form | --pf-c-form__field-group-header-description--Color | #6a6e73 | ||
| .pf-c-form | --pf-c-form__field-group-header-actions--MarginTop | calc(0.375rem * -1) | ||
| .pf-c-form | --pf-c-form__field-group-header-actions--MarginBottom | calc(0.375rem * -1) | ||
| .pf-c-form | --pf-c-form__field-group-header-actions--MarginLeft | 0.5rem | ||
| .pf-c-form | --pf-c-form__field-group-body--PaddingTop | 1.5rem | ||
| .pf-c-form | --pf-c-form__field-group-body--PaddingBottom | 1.5rem | ||
| .pf-c-form | --pf-c-form__field-group-body--Gap | 1.5rem | ||
| .pf-c-form | --pf-c-form__field-group-body--GridColumn | 2 / 3 | ||
| .pf-c-form | --pf-c-form__field-group__field-group__field-group-body--GridColumn | 1 / 3 | ||
| .pf-c-form | --pf-c-form__field-group__field-group__field-group-toggle--field-group-body--GridColumn | 2 / 3 | ||
| .pf-c-form | --pf-c-form__field-group-body__field-group--last-child--MarginBottom | calc(1.5rem * -1) | ||
| .pf-c-form__group-label | --pf-c-form__helper-text--MarginTop | 0 | ||
| .pf-c-form__group-label-help:hover | --pf-c-form__group-label-help--Color | #151515 | ||
| .pf-c-form__group-label-help:focus-within | --pf-c-form__group-label-help--Color | #151515 | ||
| .pf-c-form__group-control.pf-m-inline > :last-child | --pf-c-form__group-control--m-inline--child--MarginRight | 0 | ||
| .pf-c-form__group-control.pf-m-stack | --pf-c-form__helper-text--MarginTop | calc(0.5rem * -1 + 0.25rem) | ||
| .pf-c-form__group-control .pf-c-form__helper-text:first-child | --pf-c-form__helper-text--MarginTop | 0 | ||
| .pf-c-form__helper-text.pf-m-error | --pf-c-form__helper-text--Color | #c9190b | ||
| .pf-c-form__helper-text.pf-m-success | --pf-c-form__helper-text--Color | #1e4f18 | ||
| .pf-c-form__helper-text.pf-m-warning | --pf-c-form__helper-text--Color | #795600 | ||
| .pf-c-form__field-group | --pf-c-form__field-group--BorderTopWidth | 1px | ||
| .pf-c-form__field-group:last-child | --pf-c-form__field-group--BorderBottomWidth | 0 | ||
| .pf-c-form__field-group + .pf-c-form__field-group | --pf-c-form__field-group--BorderTopWidth | 0 | ||
| .pf-c-form__field-group .pf-c-form__field-group | --pf-c-form__field-group-body--GridColumn | 1 / 3 | ||
| .pf-c-form__field-group .pf-c-form__field-group | --pf-c-form__field-group-toggle--PaddingTop | 1.5rem | ||
| .pf-c-form__field-group .pf-c-form__field-group | --pf-c-form__field-group-header--PaddingTop | 1.5rem | ||
| .pf-c-form__field-group .pf-c-form__field-group | --pf-c-form__field-group-header--PaddingBottom | 1.5rem | ||
| .pf-c-form__field-group .pf-c-form__field-group | --pf-c-form__field-group-body--PaddingTop | 0 | ||
| .pf-c-form__field-group .pf-c-form__field-group .pf-c-form__field-group-toggle ~ .pf-c-form__field-group-body | --pf-c-form__field-group-body--GridColumn | 2 / 3 | ||
| .pf-c-form__field-group.pf-m-expanded > .pf-c-form__field-group-toggle | --pf-c-form__field-group-toggle-icon--Rotate | 90deg | ||
| .pf-c-form__field-group-toggle + .pf-c-form__field-group-header | --pf-c-form__field-group-header--GridColumn | 2 / 3 | ||
| .pf-c-form__field-group-body > .pf-c-form__field-group:first-child | --pf-c-form__field-group-toggle--PaddingTop | 0 | ||
| .pf-c-form__field-group-body > .pf-c-form__field-group:first-child | --pf-c-form__field-group-header--PaddingTop | 0 | ||
View source on GitHub
