Skip to content
PatternFly

Form

A form is a group of elements used to collect information from a user in a variety of contexts including in a modal, in a wizard, or on a page. Use cases for forms include tasks reliant on user-inputted information for completion like logging in, registering, configuring settings, or completing surveys.

Examples

When using helper text inside a FormGroup, the HelperText component should be wrapped with the FormHelperText component to provide additional spacing.

Basic

Include your middle name if you have one.
How can we contact you?
Time zone

Horizontal

Include your middle name if you have one.
How can we contact you?
Time zone

Limit width

Include your middle name if you have one.
How can we contact you?
Time zone

Invalid

Must be a number

Invalid with form alert

Danger alert:Fill out all required fields before continuing.

Must be a number

Validated

Enter your age to continue

Horizontal stacked no padding top

Label

Horizontal stacked helper text on top

Label
Select all that apply:

Form group with additional label info

Additional label info
Include your middle name if you have one.

Form Sections

Form section 2 (optional title)

Grid form

Include your middle name if you have one.

Field Groups

Field group 1
Field group 1 description text.
Nested field group 1
Nested field group 1 description text.
Nested field group 2
Nested field group 3
Field group 3 description text.
Field group 2
Field group 2 description text.
Field group 3
Field group 3 description text.
Nested field group 1 (non-expandable)
Nested field group 2 (non-expandable)
Field group 2 description text.
Field group 4 (non-expandable)
Field group 4 description text.

Form state

Props

ActionGroup

*required
NameTypeDefaultDescription
childrenReact.ReactNodenullAnything that can be rendered as ActionGroup content.
classNamestring''Additional classes added to the ActionGroup.

Form

*required
NameTypeDefaultDescription
childrenReact.ReactNodeAnything that can be rendered as Form content.
classNamestringAdditional classes added to the Form.
isHorizontalbooleanSets the Form to horizontal.
isWidthLimitedbooleanLimits the max-width of the form.
maxWidthstringSets a custom max-width for the form.

FormGroup

*required
NameTypeDefaultDescription
childrenReact.ReactNodenullAnything that can be rendered as FormGroup content.
classNamestring''Additional classes added to the FormGroup.
fieldIdstringID 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.
hasNoPaddingTopbooleanfalseRemoves top spacer from label.
isInlinebooleanfalseSets the FormGroup isInline.
isRequiredbooleanfalseSets the FormGroup required.
isStackbooleanfalseSets the FormGroupControl to be stacked
labelReact.ReactNodeLabel text before the field.
labelIconReact.ReactElementSets an icon for the label. For providing additional context. Host element for Popover
labelInfoReact.ReactNodeAdditional label information displayed after the label.
rolestringSets 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.

FormSection

*required
NameTypeDefaultDescription
childrenReact.ReactNodeContent rendered inside the section
classNamestring''Additional classes added to the section
titleReact.ReactNode''Title for the section
titleElement'div' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6''div'Element to wrap the section title

FormHelperText

*required
NameTypeDefaultDescription
childrenReact.ReactNodenullContent rendered inside the helper text wrapper
classNamestring''Additional classes added to the helper text wrapper

FormFieldGroup

*required
NameTypeDefaultDescription
childrenReact.ReactNodeAnything that can be rendered as form field group content.
classNamestringAdditional classes added to the form field group.
headerReact.ReactNodeForm field group header

FormFieldGroupExpandable

*required
NameTypeDefaultDescription
childrenReact.ReactNodeAnything that can be rendered as form field group content.
classNamestringAdditional classes added to the form field group.
headerReact.ReactNodeForm field group header
isExpandedbooleanfalseFlag indicating if the form field group is initially expanded
toggleAriaLabelstringAria-label to use on the form field group toggle button

FormFieldGroupHeader

*required
NameTypeDefaultDescription
actionsReact.ReactNodeField group header actions
classNamestringAdditional classes added to the section
titleDescriptionReact.ReactNodeField group header title description
titleTextFormFieldGroupHeaderTitleTextObjectField group header title text

FormFieldGroupHeaderTitleTextObject

*required
NameTypeDefaultDescription

FormContextProps

*required
NameTypeDefaultDescription
errorsrequiredRecord<string, string>Record of errors for all fieldIds
getErrorrequiredstringGet the error message for a given fieldId
getValuerequiredstringGet the value for a given fieldId
isTouchedrequiredbooleanUsed to determine touched state for a given fieldId
isValidrequiredbooleanFlag to determine the overall validity. True if the record of errors is empty.
setErrorrequiredvoidSet the error message for a given fieldId
setErrorsrequiredDispatch<SetStateAction<Record<string, string>>>Set multiple errors within the managed record of errors
setTouchedrequiredvoidUsed to update the touched state for a given fieldId
setValidatorrequiredvoidSet a validator for a specific fieldId
setValuerequiredvoidSet the value for a given fieldId
setValuesrequiredDispatch<SetStateAction<Record<string, string>>>Set multiple values within the managed record of values
touchedrequiredRecord<string, boolean>Record of touched state for all fieldIds
validaterequiredRecord<string, string | null>Triggers all fieldId-specific validators
valuesrequiredRecord<string, string>Record of values for all fieldIds

FormContextProviderProps

*required
NameTypeDefaultDescription
childrenReact.ReactNode | ((props: FormContextProps) => React.ReactNode)Any react node. Can optionally use render function to return context props.
initialValuesRecord<string, string>Record of initial values

Button

*required
NameTypeDefaultDescription
aria-labelstringAdds accessible text to the button.
childrenReact.ReactNodeContent rendered inside the button
classNamestringAdditional classes added to the button
componentReact.ElementType<any> | React.ComponentType<any>Sets the base component to render. defaults to button
countOptionsBadgeCountObjectAdds count number to button
iconReact.ReactNode | nullIcon for the button. Usable by all variants except for plain.
iconPosition'start' | 'end' | 'left' | 'right'Sets position of the icon. Note: "left" and "right" are deprecated. Use "start" and "end" instead
inoperableEventsstring[]Events to prevent when the button is in an aria-disabled state
isActivebooleanAdds active styling to button.
isAriaDisabledbooleanAdds disabled styling and communicates that the button is disabled using the aria-disabled html attribute
isBlockbooleanAdds block styling to button
isDangerbooleanAdds danger styling to secondary or link button variants
isDisabledbooleanAdds disabled styling and disables the button using the disabled html attribute
isInlinebooleanAdds inline styling to a link button
isLoadingbooleanAdds progress styling to button
ouiaIdnumber | stringValue to overwrite the randomly generated data-ouia-component-id.
ouiaSafebooleanSet the value of data-ouia-safe. Only set to true when the component is in a static state, i.e. no animations are occurring. At all other times, this value must be false.
size'default' | 'sm' | 'lg'Adds styling which affects the size of the button
spinnerAriaLabelstringAccessible label for the spinner to describe what is loading
spinnerAriaLabelledBystringId of element which describes what is being loaded
spinnerAriaValueTextstringText describing that current loading status or progress
tabIndexnumberSets the button tabindex.
type'button' | 'submit' | 'reset'Sets button type
variant'primary' | 'secondary' | 'tertiary' | 'danger' | 'warning' | 'link' | 'plain' | 'control'Adds button variant styles

Popover

The main popover component. The following properties can also be passed into another component that has a property specifically for passing in popover properties.
*required
NameTypeDefaultDescription
bodyContentrequiredReact.ReactNode | ((hide: () => void) => React.ReactNode)Body content of the popover. If you want to close the popover after an action within the body content, 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>}
alertSeverityScreenReaderTextstringText announced by screen reader when alert severity variant is set to indicate severity level.
alertSeverityVariant'custom' | 'info' | 'warning' | 'success' | 'danger'Severity variants for an alert popover. This modifies the color of the header to match the severity.
animationDurationnumber300The duration of the CSS fade transition animation.
appendToHTMLElement | ((ref?: HTMLElement) => HTMLElement) | 'inline'() => document.bodyThe element to append the popover to. Defaults to "inline".
aria-labelstring''Accessible label for the popover, required when header is not present.
childrenReactElement<any>The trigger reference element to which the popover is relatively placed to. If you cannot wrap the element with the Popover, you can use the triggerRef prop instead. Usage: <Popover><Button>Reference</Button></Popover>
classNamestring''Additional classes added to the popover.
closeBtnAriaLabelstring'Close'Accessible label for the close button.
distancenumber25Distance of the popover to its target. Defaults to 25.
elementToFocusHTMLElement | SVGElement | stringThe element to focus when the popover becomes visible. By default the first focusable element will receive focus.
enableFlipbooleantrueIf 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', 'bottom', 'left', 'right', 'top-start', 'top-end', 'bottom-start', 'bottom-end', 'left-start', 'left-end', 'right-start', 'right-end' ]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.
footerContentReact.ReactNode | ((hide: () => void) => React.ReactNode)nullFooter content of the popover. If you want to close the popover after an action within the footer content, 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>}
hasAutoWidthbooleanfalseRemoves fixed-width and allows width to be defined by contents.
hasNoPaddingbooleanfalseAllows 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. Defaults to h6.
headerContentReact.ReactNode | ((hide: () => void) => React.ReactNode)nullSimple header content to be placed within a title. If you want to close the popover after an action within the header content, 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>}
headerIconReact.ReactNodenullIcon to be displayed in the popover header. *
hideOnOutsideClickbooleantrueHides the popover when a click occurs outside (only works if isVisible is not controlled by the user).
idstringId used as part of the various popover elements (popover-${id}-header/body/footer).
isVisiblebooleannullTrue 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, the escape 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.
maxWidthstringpopoverMaxWidth && popoverMaxWidth.valueMaximum width of the popover (default 18.75rem).
minWidthstringpopoverMinWidth && popoverMinWidth.valueMinimum width of the popover (default 6.25rem).
onHidden() => void(): void => nullLifecycle function invoked when the popover has fully transitioned out.
onHide(event: MouseEvent | KeyboardEvent) => void(): void => nullLifecycle function invoked when the popover begins to transition out.
onMount() => void(): void => nullLifecycle function invoked when the popover has been mounted to the DOM.
onShow(event: MouseEvent | KeyboardEvent) => void(): void => nullLifecycle function invoked when the popover begins to transition in.
onShown() => void(): void => nullLifecycle function invoked when the popover has fully transitioned in.
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 the enableFlip property 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 property.
shouldClose(event: MouseEvent | KeyboardEvent, hideFunction?: () => void) => void(): void => nullCallback function that is only invoked when isVisible is also controlled. Called when the popover close button is clicked, the enter key was used on it, or the escape key is used.
shouldOpen(event: MouseEvent | KeyboardEvent, showFunction?: () => void) => void(): void => nullCallback function that is only invoked when isVisible is also controlled. Called when the enter key is used on the focused trigger.
showClosebooleantrueFlag indicating whether the close button should be shown.
triggerAction'click' | 'hover''click'Sets an interaction to open popover, defaults to "click"
triggerRefHTMLElement | (() => HTMLElement) | React.RefObject<any>The trigger reference element to which the popover is relatively placed to. If you can wrap the element with the popover, you can use the children prop instead, or both props together. When passed along with the trigger prop, the div element that wraps the trigger will be removed. Usage: <Popover triggerRef={() => document.getElementById('reference-element')} />
withFocusTrapbooleanWhether to trap focus in the popover.
zIndexnumber9999The z-index of the popover.

CSS variables

Expand or collapse columnSelectorVariableValue
.pf-v5-c-form--pf-v5-c-form--GridGap
1.5rem
.pf-v5-c-form--pf-v5-c-form__group--m-action--MarginTop
2rem
.pf-v5-c-form--pf-v5-c-form--m-horizontal__group-label--md--GridColumnWidth
9.375rem
.pf-v5-c-form--pf-v5-c-form--m-horizontal__group-label--md--GridColumnGap
1rem
.pf-v5-c-form--pf-v5-c-form--m-horizontal__group-control--md--GridColumnWidth
1fr
.pf-v5-c-form--pf-v5-c-form--m-limit-width--MaxWidth
55rem
.pf-v5-c-form--pf-v5-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-v5-c-form--pf-v5-c-form__group-label--PaddingBottom
0.5rem
.pf-v5-c-form--pf-v5-c-form--m-horizontal__group-label--m-no-padding--md--PaddingTop
0
.pf-v5-c-form--pf-v5-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-v5-c-form--pf-v5-c-form__label--FontSize
0.875rem
.pf-v5-c-form--pf-v5-c-form__label--LineHeight
1.3
.pf-v5-c-form--pf-v5-c-form__label--m-disabled--Color
#6a6e73
.pf-v5-c-form--pf-v5-c-form__label--hover--Cursor
pointer
.pf-v5-c-form--pf-v5-c-form__label--m-disabled--hover--Cursor
not-allowed
.pf-v5-c-form--pf-v5-c-form__label-text--FontWeight
700
.pf-v5-c-form--pf-v5-c-form__label-required--MarginLeft
0.25rem
.pf-v5-c-form--pf-v5-c-form__label-required--FontSize
0.875rem
.pf-v5-c-form--pf-v5-c-form__label-required--Color
#c9190b
.pf-v5-c-form--pf-v5-c-form__group-label-help--BackgroundColor
transparent
.pf-v5-c-form--pf-v5-c-form__group-label-help--PaddingTop
0.25rem
.pf-v5-c-form--pf-v5-c-form__group-label-help--PaddingRight
0.25rem
.pf-v5-c-form--pf-v5-c-form__group-label-help--PaddingBottom
0.25rem
.pf-v5-c-form--pf-v5-c-form__group-label-help--PaddingLeft
0.25rem
.pf-v5-c-form--pf-v5-c-form__group-label-help--MarginTop
calc(0.25rem * -1)
.pf-v5-c-form--pf-v5-c-form__group-label-help--MarginRight
calc(0.25rem * -1)
.pf-v5-c-form--pf-v5-c-form__group-label-help--MarginBottom
calc(0.25rem * -1)
.pf-v5-c-form--pf-v5-c-form__group-label-help--MarginLeft
calc(0.25rem * -1 + 0.25rem)
.pf-v5-c-form--pf-v5-c-form__group-label-help--FontSize
0.875rem
.pf-v5-c-form--pf-v5-c-form__group-label-help--TranslateY
0.125rem
.pf-v5-c-form--pf-v5-c-form__group-label-help--Color
#6a6e73
.pf-v5-c-form--pf-v5-c-form__group-label-help--hover--Color
#151515
.pf-v5-c-form--pf-v5-c-form__group-label-help--focus--Color
#151515
.pf-v5-c-form--pf-v5-c-form__group-label--m-info--Gap
0.5rem
.pf-v5-c-form--pf-v5-c-form__group-label-info--FontSize
0.875rem
.pf-v5-c-form--pf-v5-c-form--m-horizontal__group-label--m-info--Gap
0.5rem
.pf-v5-c-form--pf-v5-c-form__group-control--m-inline--child--MarginRight
1.5rem
.pf-v5-c-form--pf-v5-c-form__group-control__helper-text--MarginBottom
0.25rem
.pf-v5-c-form--pf-v5-c-form__group-control--m-stack--Gap
0.5rem
.pf-v5-c-form--pf-v5-c-form__group-control--m-stack__helper-text--MarginTop
calc(0.5rem * -1 + 0.25rem)
.pf-v5-c-form--pf-v5-c-form__actions--child--MarginTop
0.5rem
.pf-v5-c-form--pf-v5-c-form__actions--child--MarginRight
0.5rem
.pf-v5-c-form--pf-v5-c-form__actions--child--MarginBottom
0.5rem
.pf-v5-c-form--pf-v5-c-form__actions--child--MarginLeft
0.5rem
.pf-v5-c-form--pf-v5-c-form__actions--MarginTop
calc(0.5rem * -1)
.pf-v5-c-form--pf-v5-c-form__actions--MarginRight
calc(0.5rem * -1)
.pf-v5-c-form--pf-v5-c-form__actions--MarginBottom
calc(0.5rem * -1)
.pf-v5-c-form--pf-v5-c-form__actions--MarginLeft
calc(0.5rem * -1)
.pf-v5-c-form--pf-v5-c-form__helper-text--MarginTop--base
0.25rem
.pf-v5-c-form--pf-v5-c-form__helper-text--MarginTop
0.25rem
.pf-v5-c-form--pf-v5-c-form__helper-text--FontSize
0.875rem
.pf-v5-c-form--pf-v5-c-form__helper-text--Color
#151515
.pf-v5-c-form--pf-v5-c-form__helper-text-icon--FontSize
1rem
.pf-v5-c-form--pf-v5-c-form__helper-text-icon--MarginRight
0.25rem
.pf-v5-c-form--pf-v5-c-form__helper-text--m-success--Color
#1e4f18
.pf-v5-c-form--pf-v5-c-form__helper-text--m-warning--Color
#795600
.pf-v5-c-form--pf-v5-c-form__helper-text--m-error--Color
#c9190b
.pf-v5-c-form--pf-v5-c-form__section--MarginTop
2rem
.pf-v5-c-form--pf-v5-c-form__section--Gap
1.5rem
.pf-v5-c-form--pf-v5-c-form__section-title--FontSize
1.125rem
.pf-v5-c-form--pf-v5-c-form__section-title--FontWeight
700
.pf-v5-c-form--pf-v5-c-form__section-title--MarginBottom
calc(0.5rem * -1)
.pf-v5-c-form--pf-v5-c-form__field-group--border-width-base
1px
.pf-v5-c-form--pf-v5-c-form__field-group--BorderTopWidth
1px
.pf-v5-c-form--pf-v5-c-form__field-group--BorderTopColor
#d2d2d2
.pf-v5-c-form--pf-v5-c-form__field-group--BorderBottomWidth
1px
.pf-v5-c-form--pf-v5-c-form__field-group--BorderBottomColor
#d2d2d2
.pf-v5-c-form--pf-v5-c-form__field-group--field-group--MarginTop
calc(1.5rem * -1)
.pf-v5-c-form--pf-v5-c-form__field-group--GridTemplateColumns--toggle
calc(1rem * 2 + 1rem + 0.25rem)
.pf-v5-c-form--pf-v5-c-form__field-group-toggle--PaddingTop
1rem
.pf-v5-c-form--pf-v5-c-form__field-group-toggle--PaddingRight
0.25rem
.pf-v5-c-form--pf-v5-c-form__field-group__field-group__field-group-toggle--PaddingTop
1.5rem
.pf-v5-c-form--pf-v5-c-form__field-group-header-toggle--BorderWidth--base
1px
.pf-v5-c-form--pf-v5-c-form__field-group__field-group--field-group__field-group-toggle--after--BorderTopWidth
1px
.pf-v5-c-form--pf-v5-c-form__field-group-toggle-button--MarginTop
calc(0.375rem * -1)
.pf-v5-c-form--pf-v5-c-form__field-group-toggle-button--MarginBottom
calc(0.375rem * -1)
.pf-v5-c-form--pf-v5-c-form__field-group-toggle-icon--Transition
all 250ms cubic-bezier(.42, 0, .58, 1)
.pf-v5-c-form--pf-v5-c-form__field-group-toggle-icon--MinWidth
1rem
.pf-v5-c-form--pf-v5-c-form__field-group-toggle-icon--Rotate
0
.pf-v5-c-form--pf-v5-c-form__field-group--m-expanded__toggle-icon--Rotate
90deg
.pf-v5-c-form--pf-v5-c-form__field-group-header--PaddingTop
1rem
.pf-v5-c-form--pf-v5-c-form__field-group-header--PaddingBottom
1rem
.pf-v5-c-form--pf-v5-c-form__field-group-header--GridColumn
1 / 3
.pf-v5-c-form--pf-v5-c-form__field-group__field-group__field-group-header--PaddingTop
1.5rem
.pf-v5-c-form--pf-v5-c-form__field-group__field-group__field-group-header--PaddingBottom
1.5rem
.pf-v5-c-form--pf-v5-c-form__field-group-toggle--field-group-header--GridColumn
2 / 3
.pf-v5-c-form--pf-v5-c-form__field-group__field-group--field-group__field-group-header--after--BorderTopWidth
1px
.pf-v5-c-form--pf-v5-c-form__field-group-header-description--MarginTop
0.25rem
.pf-v5-c-form--pf-v5-c-form__field-group-header-description--Color
#6a6e73
.pf-v5-c-form--pf-v5-c-form__field-group-header-actions--MarginTop
calc(0.375rem * -1)
.pf-v5-c-form--pf-v5-c-form__field-group-header-actions--MarginBottom
calc(0.375rem * -1)
.pf-v5-c-form--pf-v5-c-form__field-group-header-actions--MarginLeft
0.5rem
.pf-v5-c-form--pf-v5-c-form__field-group-body--PaddingTop
1.5rem
.pf-v5-c-form--pf-v5-c-form__field-group-body--PaddingBottom
1.5rem
.pf-v5-c-form--pf-v5-c-form__field-group-body--Gap
1.5rem
.pf-v5-c-form--pf-v5-c-form__field-group-body--GridColumn
2 / 3
.pf-v5-c-form--pf-v5-c-form__field-group__field-group__field-group-body--GridColumn
1 / 3
.pf-v5-c-form--pf-v5-c-form__field-group__field-group__field-group-toggle--field-group-body--GridColumn
2 / 3
.pf-v5-c-form--pf-v5-c-form__field-group-body__field-group--last-child--MarginBottom
calc(1.5rem * -1)
.pf-v5-c-form__group-label--pf-v5-c-form__helper-text--MarginTop
0
.pf-v5-c-form__group-label-help:hover--pf-v5-c-form__group-label-help--Color
#151515
.pf-v5-c-form__group-label-help:focus-within--pf-v5-c-form__group-label-help--Color
#151515
.pf-v5-c-form__group-control.pf-m-inline > :last-child--pf-v5-c-form__group-control--m-inline--child--MarginRight
0
.pf-v5-c-form__group-control.pf-m-stack--pf-v5-c-form__helper-text--MarginTop
calc(0.5rem * -1 + 0.25rem)
.pf-v5-c-form__group-control .pf-v5-c-form__helper-text:first-child--pf-v5-c-form__helper-text--MarginTop
0
.pf-v5-c-form__helper-text.pf-m-error--pf-v5-c-form__helper-text--Color
#c9190b
.pf-v5-c-form__helper-text.pf-m-success--pf-v5-c-form__helper-text--Color
#1e4f18
.pf-v5-c-form__helper-text.pf-m-warning--pf-v5-c-form__helper-text--Color
#795600
.pf-v5-c-form__field-group--pf-v5-c-form__field-group--BorderTopWidth
1px
.pf-v5-c-form__field-group:last-child--pf-v5-c-form__field-group--BorderBottomWidth
0
.pf-v5-c-form__field-group + .pf-v5-c-form__field-group--pf-v5-c-form__field-group--BorderTopWidth
0
.pf-v5-c-form__field-group .pf-v5-c-form__field-group--pf-v5-c-form__field-group-body--GridColumn
1 / 3
.pf-v5-c-form__field-group .pf-v5-c-form__field-group--pf-v5-c-form__field-group-toggle--PaddingTop
1.5rem
.pf-v5-c-form__field-group .pf-v5-c-form__field-group--pf-v5-c-form__field-group-header--PaddingTop
1.5rem
.pf-v5-c-form__field-group .pf-v5-c-form__field-group--pf-v5-c-form__field-group-header--PaddingBottom
1.5rem
.pf-v5-c-form__field-group .pf-v5-c-form__field-group--pf-v5-c-form__field-group-body--PaddingTop
0
.pf-v5-c-form__field-group .pf-v5-c-form__field-group .pf-v5-c-form__field-group-toggle ~ .pf-v5-c-form__field-group-body--pf-v5-c-form__field-group-body--GridColumn
2 / 3
.pf-v5-c-form__field-group.pf-m-expanded > .pf-v5-c-form__field-group-toggle--pf-v5-c-form__field-group-toggle-icon--Rotate
90deg
.pf-v5-c-form__field-group-toggle + .pf-v5-c-form__field-group-header--pf-v5-c-form__field-group-header--GridColumn
2 / 3
.pf-v5-c-form__field-group-body > .pf-v5-c-form__field-group:first-child--pf-v5-c-form__field-group-toggle--PaddingTop
0
.pf-v5-c-form__field-group-body > .pf-v5-c-form__field-group:first-child--pf-v5-c-form__field-group-header--PaddingTop
0

View source on GitHub
Red Hat
Copyright © 2014-2024 Red Hat, Inc.
Privacy statementTerms of useAll policies and guidelines