Skip to content
Patternfly Logo

Form

Examples

Basic

Please provide your full name

Horizontal

Please provide your full name

Limit width

Please provide your full name

Invalid

Age has to be a number

Invalid with form alert

Danger alert:You must fill out all required fields before you can proceed.

Age has to be a number

Validated

Enter your age to continue

Horizontal no padding top

Horizontal helper text on top

Select all that apply

Form Sections

Grid form

Please provide your full name

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.

Props

ActionGroup

NameTypeRequiredDefaultDescription
childrenReact.ReactNodeNonullAnything that can be rendered as ActionGroup content.
classNamestringNo''Additional classes added to the ActionGroup.

Form

NameTypeRequiredDefaultDescription
childrenReact.ReactNodeNonullAnything that can be rendered as Form content.
classNamestringNo''Additional classes added to the Form.
isHorizontalbooleanNofalseSets the Form to horizontal.
isWidthLimitedbooleanNofalseFlag to limit the max-width to 500px.

FormGroup

NameTypeRequiredDefaultDescription
childrenReact.ReactNodeNonullAnything that can be rendered as FormGroup content.
classNamestringNo''Additional classes added to the FormGroup.
fieldIdstringYesID of the included field. It has to be the same for proper working.
hasNoPaddingTopbooleanNofalseRemoves top spacer from label.
helperTextReact.ReactNodeNoHelper text regarding the field. It can be a simple text or an object.
helperTextIconReact.ReactNodeNoIcon displayed to the left of the helper text.
helperTextInvalidReact.ReactNodeNoHelper text after the field when the field is invalid. It can be a simple text or an object.
helperTextInvalidIconReact.ReactNodeNoIcon displayed to the left of the helper text when the field is invalid.
isHelperTextBeforeFieldbooleanNofalseFlag to position the helper text before the field. False by default
isInlinebooleanNofalseSets the FormGroup isInline.
isRequiredbooleanNofalseSets the FormGroup required.
labelReact.ReactNodeNoLabel text before the field.
labelIconReact.ReactElementNoSets an icon for the label. For providing additional context. Host element for Popover
validated'success' | 'warning' | 'error' | 'default'No'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.

FormHelperText

NameTypeRequiredDefaultDescription
childrenReact.ReactNodeNonullContent rendered inside the Helper Text Item
classNamestringNo''Additional classes added to the Helper Text Item
iconReact.ReactNodeNonullIcon displayed to the left of the helper text.
isErrorbooleanNofalseAdds error styling to the Helper Text *
isHiddenbooleanNotrueHides the helper text *

FormFieldGroup

NameTypeRequiredDefaultDescription
childrenReact.ReactNodeNoAnything that can be rendered as form field group content.
classNamestringNoAdditional classes added to the form field group.
headerReact.ReactNodeNoForm filed group header

FormFieldGroupExpandable

NameTypeRequiredDefaultDescription
childrenReact.ReactNodeNoAnything that can be rendered as form field group content.
classNamestringNoAdditional classes added to the form field group.
headerReact.ReactNodeNoForm filed group header
isExpandedbooleanNofalseFlag indicating if the form field group is initially expanded
toggleAriaLabelstringNoAria-label to use on the form filed group toggle button

FormFieldGroupHeader

NameTypeRequiredDefaultDescription
actionsReact.ReactNodeNoField group header actions
classNamestringNoAdditional classes added to the section
titleDescriptionReact.ReactNodeNoField group header title description
titleTextFormFiledGroupHeaderTitleTextObjectNoField group header title text

FormFiledGroupHeaderTitleTextObject

NameTypeRequiredDefaultDescription
idNo type infoYesThe applied to the title div for accessibility
textNo type infoYesTitle text.

Button

NameTypeRequiredDefaultDescription
aria-labelstringNonullAdds accessible text to the button.
childrenReact.ReactNodeNonullContent rendered inside the button
classNamestringNo''Additional classes added to the button
componentReact.ElementType<any>No'button'Sets the base component to render. defaults to button
iconReact.ReactNode | nullNonullIcon for the button. Usable by all variants except for plain.
iconPosition'left' | 'right'No'left'Sets position of the link icon
inoperableEventsBetastring[]No['onClick', 'onKeyPress']Events to prevent when the button is in an aria-disabled state
isActivebooleanNofalseAdds active styling to button.
isAriaDisabledBetabooleanNofalseAdds disabled styling and communicates that the button is disabled using the aria-disabled html attribute
isBlockbooleanNofalseAdds block styling to button
isDisabledbooleanNofalseAdds disabled styling and disables the button using the disabled html attribute
isInlinebooleanNofalseAdds inline styling to a link button
isLargebooleanNofalseAdds large styling to the button
isLoadingbooleanNonullAdds progress styling to button
isSmallbooleanNofalseAdds small styling to the button
ouiaSafeNo type infoNotrue
spinnerAriaValueTextstringNoAria-valuetext for the loading spinner
tabIndexnumberNonullSets the button tabindex.
type'button' | 'submit' | 'reset'NoButtonType.buttonSets button type
variant'primary' | 'secondary' | 'tertiary' | 'danger' | 'warning' | 'link' | 'plain' | 'control'NoButtonVariant.primaryAdds button variant styles

Popover

NameTypeRequiredDefaultDescription
animationDurationnumberNo300CSS fade transition animation duration
appendToHTMLElement | ((ref?: HTMLElement) => HTMLElement)No() => document.bodyThe element to append the popover to, defaults to body
aria-labelstringNo''Accessible label, required when header is not present
bodyContentReact.ReactNode | ((hide: () => void) => React.ReactNode)YesBody 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>}
Deprecated: boundary'scrollParent' | 'window' | 'viewport' | HTMLElementNo- no longer used. if you want to constrain the popper to a specific element use the appendTo prop instead
childrenReactElement<any>NoThe 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>
classNamestringNo''Popover additional class
closeBtnAriaLabelstringNo'Close'Aria label for the Close button
distancenumberNo25Distance of the popover to its target, defaults to 25
enableFlipbooleanNotrueIf 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')[]No['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.
footerContentReact.ReactNode | ((hide: () => void) => React.ReactNode)NonullFooter 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>}
hasAutoWidthbooleanNofalseRemoves fixed-width and allows width to be defined by contents
hasNoPaddingbooleanNofalseAllows content to touch edges of popover container
headerContentReact.ReactNode | ((hide: () => void) => React.ReactNode)NonullHeader 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. headerContent={hide => <Button onClick={() => hide()}>Close</Button>}
hideOnOutsideClickbooleanNotrueHides the popover when a click occurs outside (only works if isVisible is not controlled by the user)
idstringNoid used as part of the various popover elements (popover-${id}-header/body/footer)
isVisiblebooleanNonullTrue 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.
maxWidthstringNopopoverMaxWidth && popoverMaxWidth.valueMaximum width of the popover (default 18.75rem)
minWidthstringNopopoverMinWidth && popoverMinWidth.valueMinimum width of the popover (default 6.25rem)
onHidden(tip?: TippyInstance) => voidNo(): void => nullLifecycle function invoked when the popover has fully transitioned out. Note: The tip argument is no longer passed and has been deprecated.
onHide(tip?: TippyInstance) => voidNo(): void => nullLifecycle function invoked when the popover begins to transition out. Note: The tip argument is no longer passed and has been deprecated.
onMount(tip?: TippyInstance) => voidNo(): void => nullLifecycle 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) => voidNo(): void => nullLifecycle function invoked when the popover begins to transition in. Note: The tip argument is no longer passed and has been deprecated.
onShown(tip?: TippyInstance) => voidNo(): void => nullLifecycle function invoked when the popover has fully transitioned in. Note: The tip argument is no longer passed and has been deprecated.
position'auto' | 'top' | 'bottom' | 'left' | 'right'No'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.
referenceHTMLElement | (() => HTMLElement) | React.RefObject<any>NoThe 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) => voidNo(): void => nullCallback 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) => voidNo(): void => nullCallback function that is only invoked when isVisible is also controlled. Called when the Enter key is used on the focused trigger
showClosebooleanNotrueWhether to show the close button
Deprecated: tippyPropsPartial<TippyProps>No- no longer used
withFocusTrapbooleanNoWhether to trap focus in the popover
zIndexnumberNo9999z-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
31.25rem
.pf-c-form--pf-c-form--m-horizontal__group-label--md--PaddingTop
0.5rem
.pf-c-form--pf-c-form__group-label--PaddingBottom
0.5rem
.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-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-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.pf-m-horizontal--pf-c-form__group-label--PaddingBottom
0
.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