Form

A form is a group of related elements that allow users to provide data and configure options in a variety of contexts, such as within modals, wizards, and pages.

Examples

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

Basic

Horizontal

Limit width

Invalid

Invalid with form alert

Validated

Horizontal stacked no padding top

Horizontal stacked helper text on top

Form group with additional label info

Form Sections

Grid form

Field Groups

Form state

Props

ActionGroup

*required
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

*required
Name	Type	Description
children	React.ReactNode	Anything that can be rendered as Form content.
className	string	Additional classes added to the Form.
isHorizontal	boolean	Sets the Form to horizontal.
isWidthLimited	boolean	Limits the max-width of the form.
maxWidth	string	Sets a custom max-width for the form.

FormGroup

*required
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.
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.
labelHelp	React.ReactElement		A help button for the label. We recommend using FormGroupLabelHelp element as a help icon button. The help button should be wrapped or linked to our popover component.
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.

FormGroupLabelHelp

A help button to be passed to the FormGroup's labelHelp property. This should be wrapped or linked to our Popover component.
*required
Name	Type	Default	Description
aria-labelrequired	string		Adds an accessible name for the help button.
className	string		Additional classes added to the help button.

FormSection

*required
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

*required
Name	Type	Default	Description
children	React.ReactNode	null	Content rendered inside the helper text wrapper
className	string	''	Additional classes added to the helper text wrapper

FormFieldGroup

*required
Name	Type	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

*required
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

*required
Name	Type	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

*required
Name	Type	Default	Description
idrequired	string		The id applied to the title div for accessibility
textrequired	React.ReactNode		Title text.

FormContextProps

*required
Name	Type	Description
errorsrequired	Record<string, string>	Record of errors for all fieldIds
getErrorrequired	string	Get the error message for a given fieldId
getValuerequired	string	Get the value for a given fieldId
isTouchedrequired	boolean	Used to determine touched state for a given fieldId
isValidrequired	boolean	Flag to determine the overall validity. True if the record of errors is empty.
setErrorrequired	void	Set the error message for a given fieldId
setErrorsrequired	Dispatch<SetStateAction<Record<string, string>>>	Set multiple errors within the managed record of errors
setTouchedrequired	void	Used to update the touched state for a given fieldId
setValidatorrequired	void	Set a validator for a specific fieldId
setValuerequired	void	Set the value for a given fieldId
setValuesrequired	Dispatch<SetStateAction<Record<string, string>>>	Set multiple values within the managed record of values
touchedrequired	Record<string, boolean>	Record of touched state for all fieldIds
validaterequired	Record<string, string \| null>	Triggers all fieldId-specific validators
valuesrequired	Record<string, string>	Record of values for all fieldIds

FormContextProviderProps

*required
Name	Type	Default	Description
children	React.ReactNode \| ((props: FormContextProps) => React.ReactNode)		Any react node. Can optionally use render function to return context props.
initialValues	Record<string, string>		Record of initial values

Button

*required
Name	Type	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
countOptions	BadgeCountObject	Adds count number to button
hasNoPadding	boolean	Applies no padding on a plain button variant. Use when plain button is placed inline with text
icon	React.ReactNode \| null	Icon for the button.
iconPosition	'start' \| 'end' \| 'left' \| 'right'	Sets position of the icon. Note: "left" and "right" are deprecated. Use "start" and "end" instead
inoperableEvents	string[]	Events to prevent when the button is in an aria-disabled state
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
isClicked	boolean	Adds clicked 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
isLoading	boolean	Adds progress styling to button
ouiaId	number \| string	Value to overwrite the randomly generated data-ouia-component-id.
ouiaSafe	boolean	Set 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
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
state	'read' \| 'unread' \| 'attention'	Sets state of the stateful button variant. Default is "unread"
tabIndex	number	Sets the button tabindex.
type	'button' \| 'submit' \| 'reset'	Sets button type
variant	'primary' \| 'secondary' \| 'tertiary' \| 'danger' \| 'warning' \| 'link' \| 'plain' \| 'control' \| 'stateful'	Adds button variant styles

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
Name	Type	Default	Description
bodyContentrequired	React.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>}
alertSeverityScreenReaderText	string		Text 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.
animationDuration	number	300	The duration of the CSS fade transition animation.
appendTo	HTMLElement \| ((ref?: HTMLElement) => HTMLElement) \| 'inline'	() => document.body	The element to append the popover to. Defaults to "inline".
aria-label	string	''	Accessible label for the popover, required when header is not present.
children	ReactElement<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>
className	string	''	Additional classes added to the popover.
closeBtnAriaLabel	string	'Close'	Accessible label for the close button.
distance	number	25	Distance of the popover to its target. Defaults to 25.
elementToFocus	HTMLElement \| SVGElement \| string		The element to focus when the popover becomes visible. By default the first focusable element will receive focus.
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', '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.
footerContent	React.ReactNode \| ((hide: () => void) => React.ReactNode)	null	Footer 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>}
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. Defaults to 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 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>}
headerIcon	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, 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.
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	() => void	(): void => null	Lifecycle function invoked when the popover has fully transitioned out.
onHide	(event: MouseEvent \| KeyboardEvent) => void	(): void => null	Lifecycle function invoked when the popover begins to transition out.
onMount	() => void	(): void => null	Lifecycle function invoked when the popover has been mounted to the DOM.
onShow	(event: MouseEvent \| KeyboardEvent) => void	(): void => null	Lifecycle function invoked when the popover begins to transition in.
onShown	() => void	(): void => null	Lifecycle 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 => null	Callback 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 => 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	Flag indicating whether the close button should be shown.
triggerAction	'click' \| 'hover'	'click'	Sets an interaction to open popover, defaults to "click"
triggerRef	HTMLElement \| (() => 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')} />
withFocusTrap	boolean		Whether to trap focus in the popover.
zIndex	number	9999	The z-index of the popover.

CSS variables

Expand or collapse column	Selector	Variable	Value
	.pf-v6-c-form	--pf-v6-c-form--GridGap	1.5rem
--pf-v6-c-form--GridGap --pf-t--global--spacer--gap--group-to-group--vertical--default --pf-t--global--spacer--lg --pf-t--global--spacer--400 1.5rem
	.pf-v6-c-form	--pf-v6-c-form__group--Gap	0.5rem
--pf-v6-c-form__group--Gap --pf-t--global--spacer--gap--group--vertical --pf-t--global--spacer--sm --pf-t--global--spacer--200 0.5rem
	.pf-v6-c-form	--pf-v6-c-form__group--m-action--MarginBlockStart	2rem
--pf-v6-c-form__group--m-action--MarginBlockStart --pf-t--global--spacer--xl --pf-t--global--spacer--500 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--m-horizontal__group-label--md--GridColumnGap --pf-t--global--spacer--gap--group--horizontal --pf-t--global--spacer--md --pf-t--global--spacer--300 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--m-horizontal__group-label--md--PaddingBlockStart calc((((((--pf-t--global--font--size--body--default * --pf-t--global--font--line-height--body) + (2 * --pf-t--global--border--width--control--default)) - --pf-t--global--font--size--body--default) / 2) + --pf-t--global--font--size--body--default) - ((((--pf-t--global--font--size--body--sm * --pf-t--global--font--line-height--body) - --pf-t--global--font--size--body--sm) / 2) + --pf-t--global--font--size--body--sm) + --pf-t--global--border--width--control--default) calc((((((--pf-t--global--font--size--sm * --pf-t--global--font--line-height--200) + (2 * --pf-t--global--border--width--100)) - --pf-t--global--font--size--sm) / 2) + --pf-t--global--font--size--sm) - ((((--pf-t--global--font--size--xs * --pf-t--global--font--line-height--200) - --pf-t--global--font--size--xs) / 2) + --pf-t--global--font--size--xs) + --pf-t--global--border--width--100) calc((((((--pf-t--global--font--size--200 * 1.5) + (2 * 1px)) - --pf-t--global--font--size--200) / 2) + --pf-t--global--font--size--200) - ((((--pf-t--global--font--size--100 * 1.5) - --pf-t--global--font--size--100) / 2) + --pf-t--global--font--size--100) + 1px) 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__group-label--PaddingBlockEnd --pf-t--global--spacer--sm --pf-t--global--spacer--200 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--m-horizontal__group-label--m-no-padding--md--TranslateY calc(((((--pf-t--global--font--size--body--sm * --pf-t--global--font--line-height--body) - --pf-t--global--font--size--body--sm) / 2) + --pf-t--global--font--size--body--sm) - ((((--pf-t--global--font--size--body--default * --pf-t--global--font--line-height--body) - --pf-t--global--font--size--body--default) / 2) + --pf-t--global--font--size--body--default)) calc(((((--pf-t--global--font--size--xs * --pf-t--global--font--line-height--200) - --pf-t--global--font--size--xs) / 2) + --pf-t--global--font--size--xs) - ((((--pf-t--global--font--size--sm * --pf-t--global--font--line-height--200) - --pf-t--global--font--size--sm) / 2) + --pf-t--global--font--size--sm)) calc(((((--pf-t--global--font--size--100 * 1.5) - --pf-t--global--font--size--100) / 2) + --pf-t--global--font--size--100) - ((((--pf-t--global--font--size--200 * 1.5) - --pf-t--global--font--size--200) / 2) + --pf-t--global--font--size--200)) 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.75rem
--pf-v6-c-form__label--FontSize --pf-t--global--font--size--body--sm --pf-t--global--font--size--xs --pf-t--global--font--size--100 0.75rem
	.pf-v6-c-form	--pf-v6-c-form__label--LineHeight	1.5
--pf-v6-c-form__label--LineHeight --pf-t--global--font--line-height--body --pf-t--global--font--line-height--200 1.5
	.pf-v6-c-form	--pf-v6-c-form__label--m-disabled--Color	(In light theme) #a3a3a3
--pf-v6-c-form__label--m-disabled--Color --pf-t--global--text--color--disabled --pf-t--global--color--disabled--200 --pf-t--color--gray--40 #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	500
--pf-v6-c-form__label-text--FontWeight --pf-t--global--font--weight--body--bold --pf-t--global--font--weight--200 500
	.pf-v6-c-form	--pf-v6-c-form__label-required--MarginInlineStart	0.25rem
--pf-v6-c-form__label-required--MarginInlineStart --pf-t--global--spacer--xs --pf-t--global--spacer--100 0.25rem
	.pf-v6-c-form	--pf-v6-c-form__label-required--FontSize	0.75rem
--pf-v6-c-form__label-required--FontSize --pf-t--global--font--size--body--sm --pf-t--global--font--size--xs --pf-t--global--font--size--100 0.75rem
	.pf-v6-c-form	--pf-v6-c-form__label-required--Color	(In light theme) #b1380b
--pf-v6-c-form__label-required--Color --pf-t--global--color--status--danger--default --pf-t--global--color--status--danger--100 --pf-t--color--red-orange--60 #b1380b
	.pf-v6-c-form	--pf-v6-c-form__group-label-help--FontSize	0.75rem
--pf-v6-c-form__group-label-help--FontSize --pf-t--global--font--size--body--sm --pf-t--global--font--size--xs --pf-t--global--font--size--100 0.75rem
	.pf-v6-c-form	--pf-v6-c-form__group-label--m-info--Gap	undefined
--pf-v6-c-form__group-label--m-info--Gap --pf-t--global--spacer--gap--horizontal undefined
	.pf-v6-c-form	--pf-v6-c-form__group-label-info--FontSize	0.75rem
--pf-v6-c-form__group-label-info--FontSize --pf-t--global--font--size--body--sm --pf-t--global--font--size--xs --pf-t--global--font--size--100 0.75rem
	.pf-v6-c-form	--pf-v6-c-form--m-horizontal__group-label--m-info--Gap	0.5rem
--pf-v6-c-form--m-horizontal__group-label--m-info--Gap --pf-t--global--spacer--gap--group--vertical --pf-t--global--spacer--sm --pf-t--global--spacer--200 0.5rem
	.pf-v6-c-form	--pf-v6-c-form__group-control--m-inline--Gap	1rem
--pf-v6-c-form__group-control--m-inline--Gap --pf-t--global--spacer--gap--group--horizontal --pf-t--global--spacer--md --pf-t--global--spacer--300 1rem
	.pf-v6-c-form	--pf-v6-c-form__group-control__helper-text--MarginBlockEnd	0.25rem
--pf-v6-c-form__group-control__helper-text--MarginBlockEnd --pf-t--global--spacer--xs --pf-t--global--spacer--100 0.25rem
	.pf-v6-c-form	--pf-v6-c-form__group-control--m-stack--Gap	0.5rem
--pf-v6-c-form__group-control--m-stack--Gap --pf-t--global--spacer--gap--group--vertical --pf-t--global--spacer--sm --pf-t--global--spacer--200 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__group-control--m-stack__helper-text--MarginBlockStart calc(--pf-v6-c-form__group-control--m-stack--Gap * -1 + --pf-v6-c-form__helper-text--MarginBlockStart--base) calc(--pf-t--global--spacer--gap--group--vertical * -1 + --pf-t--global--spacer--xs) calc(--pf-t--global--spacer--sm * -1 + --pf-t--global--spacer--100) calc(--pf-t--global--spacer--200 * -1 + 0.25rem) calc(0.5rem * -1 + 0.25rem)
	.pf-v6-c-form	--pf-v6-c-form__actions--child--MarginBlockStart	0.5rem
--pf-v6-c-form__actions--child--MarginBlockStart --pf-t--global--spacer--sm --pf-t--global--spacer--200 0.5rem
	.pf-v6-c-form	--pf-v6-c-form__actions--child--MarginInlineEnd	0.5rem
--pf-v6-c-form__actions--child--MarginInlineEnd --pf-t--global--spacer--sm --pf-t--global--spacer--200 0.5rem
	.pf-v6-c-form	--pf-v6-c-form__actions--child--MarginBlockEnd	0.5rem
--pf-v6-c-form__actions--child--MarginBlockEnd --pf-t--global--spacer--sm --pf-t--global--spacer--200 0.5rem
	.pf-v6-c-form	--pf-v6-c-form__actions--child--MarginInlineStart	0.5rem
--pf-v6-c-form__actions--child--MarginInlineStart --pf-t--global--spacer--sm --pf-t--global--spacer--200 0.5rem
	.pf-v6-c-form	--pf-v6-c-form__actions--MarginBlockStart	calc(0.5rem * -1)
--pf-v6-c-form__actions--MarginBlockStart calc(--pf-v6-c-form__actions--child--MarginBlockStart * -1) calc(--pf-t--global--spacer--sm * -1) calc(--pf-t--global--spacer--200 * -1) calc(0.5rem * -1)
	.pf-v6-c-form	--pf-v6-c-form__actions--MarginInlineEnd	calc(0.5rem * -1)
--pf-v6-c-form__actions--MarginInlineEnd calc(--pf-v6-c-form__actions--child--MarginInlineEnd * -1) calc(--pf-t--global--spacer--sm * -1) calc(--pf-t--global--spacer--200 * -1) calc(0.5rem * -1)
	.pf-v6-c-form	--pf-v6-c-form__actions--MarginBlockEnd	calc(0.5rem * -1)
--pf-v6-c-form__actions--MarginBlockEnd calc(--pf-v6-c-form__actions--child--MarginBlockEnd * -1) calc(--pf-t--global--spacer--sm * -1) calc(--pf-t--global--spacer--200 * -1) calc(0.5rem * -1)
	.pf-v6-c-form	--pf-v6-c-form__actions--MarginInlineStart	calc(0.5rem * -1)
--pf-v6-c-form__actions--MarginInlineStart calc(--pf-v6-c-form__actions--child--MarginInlineStart * -1) calc(--pf-t--global--spacer--sm * -1) calc(--pf-t--global--spacer--200 * -1) calc(0.5rem * -1)
	.pf-v6-c-form	--pf-v6-c-form__helper-text--MarginBlockStart--base	0.25rem
--pf-v6-c-form__helper-text--MarginBlockStart--base --pf-t--global--spacer--xs --pf-t--global--spacer--100 0.25rem
	.pf-v6-c-form	--pf-v6-c-form__helper-text--MarginBlockStart	0.25rem
--pf-v6-c-form__helper-text--MarginBlockStart --pf-v6-c-form__helper-text--MarginBlockStart--base --pf-t--global--spacer--xs --pf-t--global--spacer--100 0.25rem
	.pf-v6-c-form	--pf-v6-c-form__section--MarginBlockStart	2rem
--pf-v6-c-form__section--MarginBlockStart --pf-t--global--spacer--xl --pf-t--global--spacer--500 2rem
	.pf-v6-c-form	--pf-v6-c-form__section--Gap	1.5rem
--pf-v6-c-form__section--Gap --pf-v6-c-form--GridGap --pf-t--global--spacer--gap--group-to-group--vertical--default --pf-t--global--spacer--lg --pf-t--global--spacer--400 1.5rem
	.pf-v6-c-form	--pf-v6-c-form__section-title--FontSize	1rem
--pf-v6-c-form__section-title--FontSize --pf-t--global--font--size--heading--xs --pf-t--global--font--size--md --pf-t--global--font--size--300 1rem
	.pf-v6-c-form	--pf-v6-c-form__section-title--FontWeight	500
--pf-v6-c-form__section-title--FontWeight --pf-t--global--font--weight--heading--default --pf-t--global--font--weight--300 500
	.pf-v6-c-form	--pf-v6-c-form__section-title--MarginBlockEnd	calc(0.5rem * -1)
--pf-v6-c-form__section-title--MarginBlockEnd calc(--pf-t--global--spacer--sm * -1) calc(--pf-t--global--spacer--200 * -1) calc(0.5rem * -1)
	.pf-v6-c-form	--pf-v6-c-form__field-group--border-width-base	1px
--pf-v6-c-form__field-group--border-width-base --pf-t--global--border--width--divider--default --pf-t--global--border--width--100 1px
	.pf-v6-c-form	--pf-v6-c-form__field-group--BorderBlockStartWidth	1px
--pf-v6-c-form__field-group--BorderBlockStartWidth --pf-v6-c-form__field-group--border-width-base --pf-t--global--border--width--divider--default --pf-t--global--border--width--100 1px
	.pf-v6-c-form	--pf-v6-c-form__field-group--BorderBlockStartColor	(In light theme) #c7c7c7
--pf-v6-c-form__field-group--BorderBlockStartColor --pf-t--global--border--color--default --pf-t--global--border--color--100 --pf-t--color--gray--30 #c7c7c7
	.pf-v6-c-form	--pf-v6-c-form__field-group--BorderBlockEndWidth	1px
--pf-v6-c-form__field-group--BorderBlockEndWidth --pf-v6-c-form__field-group--border-width-base --pf-t--global--border--width--divider--default --pf-t--global--border--width--100 1px
	.pf-v6-c-form	--pf-v6-c-form__field-group--BorderBlockEndColor	(In light theme) #c7c7c7
--pf-v6-c-form__field-group--BorderBlockEndColor --pf-t--global--border--color--default --pf-t--global--border--color--100 --pf-t--color--gray--30 #c7c7c7
	.pf-v6-c-form	--pf-v6-c-form__field-group--field-group--MarginBlockStart	calc(1.5rem * -1)
--pf-v6-c-form__field-group--field-group--MarginBlockStart calc(--pf-v6-c-form--GridGap * -1) calc(--pf-t--global--spacer--gap--group-to-group--vertical--default * -1) calc(--pf-t--global--spacer--lg * -1) calc(--pf-t--global--spacer--400 * -1) 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__field-group--GridTemplateColumns--toggle calc(--pf-t--global--spacer--md * 2 + --pf-v6-c-form__field-group-toggle-icon--MinWidth + --pf-t--global--spacer--xs) calc(--pf-t--global--spacer--300 * 2 + --pf-t--global--font--size--body--default + --pf-t--global--spacer--100) calc(1rem * 2 + --pf-t--global--font--size--sm + 0.25rem) calc(1rem * 2 + --pf-t--global--font--size--200 + 0.25rem) calc(1rem * 2 + 0.875rem + 0.25rem)
	.pf-v6-c-form	--pf-v6-c-form__field-group-toggle--PaddingBlockStart	1rem
--pf-v6-c-form__field-group-toggle--PaddingBlockStart --pf-v6-c-form__field-group-header--PaddingBlockStart --pf-t--global--spacer--md --pf-t--global--spacer--300 1rem
	.pf-v6-c-form	--pf-v6-c-form__field-group-toggle--PaddingInlineEnd	0.25rem
--pf-v6-c-form__field-group-toggle--PaddingInlineEnd --pf-t--global--spacer--xs --pf-t--global--spacer--100 0.25rem
	.pf-v6-c-form	--pf-v6-c-form__field-group__field-group__field-group-toggle--PaddingBlockStart	1rem
--pf-v6-c-form__field-group__field-group__field-group-toggle--PaddingBlockStart --pf-t--global--spacer--md --pf-t--global--spacer--300 1rem
	.pf-v6-c-form	--pf-v6-c-form__field-group-header-toggle--BorderWidth--base	1px
--pf-v6-c-form__field-group-header-toggle--BorderWidth--base --pf-t--global--border--width--divider--default --pf-t--global--border--width--100 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__field-group__field-group--field-group__field-group-toggle--after--BorderBlockStartWidth --pf-v6-c-form__field-group-header-toggle--BorderWidth--base --pf-t--global--border--width--divider--default --pf-t--global--border--width--100 1px
	.pf-v6-c-form	--pf-v6-c-form__field-group-toggle-button--MarginBlockStart	calc(0.5rem * -1)
--pf-v6-c-form__field-group-toggle-button--MarginBlockStart calc(--pf-t--global--spacer--control--vertical--plain * -1) calc(--pf-t--global--spacer--sm * -1) calc(--pf-t--global--spacer--200 * -1) 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__field-group-toggle-button--MarginBlockEnd calc(--pf-t--global--spacer--control--vertical--plain * -1) calc(--pf-t--global--spacer--sm * -1) calc(--pf-t--global--spacer--200 * -1) calc(0.5rem * -1)
	.pf-v6-c-form	--pf-v6-c-form__field-group-toggle-icon--TransitionDuration	200ms
--pf-v6-c-form__field-group-toggle-icon--TransitionDuration --pf-t--global--motion--duration--icon--long --pf-t--global--motion--duration--md --pf-t--global--duration--200 200ms
	.pf-v6-c-form	--pf-v6-c-form__field-group-toggle-icon--TransitionTimingFunction	cubic-bezier(.4, 0, .2, 1)
--pf-v6-c-form__field-group-toggle-icon--TransitionTimingFunction --pf-t--global--motion--timing-function--default --pf-t--global--timing-function--200 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__field-group-toggle-icon--MinWidth --pf-t--global--font--size--body--default --pf-t--global--font--size--sm --pf-t--global--font--size--200 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	90deg
	.pf-v6-c-form	--pf-v6-c-form__field-group-header--PaddingBlockStart	1rem
--pf-v6-c-form__field-group-header--PaddingBlockStart --pf-t--global--spacer--md --pf-t--global--spacer--300 1rem
	.pf-v6-c-form	--pf-v6-c-form__field-group-header--PaddingBlockEnd	1rem
--pf-v6-c-form__field-group-header--PaddingBlockEnd --pf-t--global--spacer--md --pf-t--global--spacer--300 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__field-group__field-group__field-group-header--PaddingBlockStart --pf-t--global--spacer--lg --pf-t--global--spacer--400 1.5rem
	.pf-v6-c-form	--pf-v6-c-form__field-group__field-group__field-group-header--PaddingBlockEnd	1.5rem
--pf-v6-c-form__field-group__field-group__field-group-header--PaddingBlockEnd --pf-t--global--spacer--lg --pf-t--global--spacer--400 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__field-group__field-group--field-group__field-group-header--after--BorderBlockStartWidth --pf-v6-c-form__field-group-header-toggle--BorderWidth--base --pf-t--global--border--width--divider--default --pf-t--global--border--width--100 1px
	.pf-v6-c-form	--pf-v6-c-form__field-group-header-description--MarginBlockStart	0.25rem
--pf-v6-c-form__field-group-header-description--MarginBlockStart --pf-t--global--spacer--xs --pf-t--global--spacer--100 0.25rem
	.pf-v6-c-form	--pf-v6-c-form__field-group-header-description--Color	(In light theme) #4d4d4d
--pf-v6-c-form__field-group-header-description--Color --pf-t--global--text--color--subtle --pf-t--global--text--color--200 --pf-t--color--gray--60 #4d4d4d
	.pf-v6-c-form	--pf-v6-c-form__field-group-header-actions--MarginInlineStart	0.5rem
--pf-v6-c-form__field-group-header-actions--MarginInlineStart --pf-t--global--spacer--sm --pf-t--global--spacer--200 0.5rem
	.pf-v6-c-form	--pf-v6-c-form__field-group-body--PaddingBlockStart	1.5rem
--pf-v6-c-form__field-group-body--PaddingBlockStart --pf-t--global--spacer--lg --pf-t--global--spacer--400 1.5rem
	.pf-v6-c-form	--pf-v6-c-form__field-group-body--PaddingBlockEnd	1.5rem
--pf-v6-c-form__field-group-body--PaddingBlockEnd --pf-t--global--spacer--lg --pf-t--global--spacer--400 1.5rem
	.pf-v6-c-form	--pf-v6-c-form__field-group-body--Gap	1.5rem
--pf-v6-c-form__field-group-body--Gap --pf-v6-c-form--GridGap --pf-t--global--spacer--gap--group-to-group--vertical--default --pf-t--global--spacer--lg --pf-t--global--spacer--400 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__field-group-body__field-group--last-child--MarginBlockEnd calc(--pf-v6-c-form__field-group-body--PaddingBlockEnd * -1) calc(--pf-t--global--spacer--lg * -1) calc(--pf-t--global--spacer--400 * -1) calc(1.5rem * -1)
	.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.75rem
--pf-v6-c-button--FontSize --pf-v6-c-form__group-label-help--FontSize --pf-t--global--font--size--body--sm --pf-t--global--font--size--xs --pf-t--global--font--size--100 0.75rem
	.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__helper-text--MarginBlockStart --pf-v6-c-form__group-control--m-stack__helper-text--MarginBlockStart calc(--pf-v6-c-form__group-control--m-stack--Gap * -1 + --pf-v6-c-form__helper-text--MarginBlockStart--base) calc(--pf-t--global--spacer--gap--group--vertical * -1 + --pf-t--global--spacer--xs) calc(--pf-t--global--spacer--sm * -1 + --pf-t--global--spacer--100) calc(--pf-t--global--spacer--200 * -1 + 0.25rem) 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--BorderBlockStartWidth --pf-v6-c-form__field-group--border-width-base --pf-t--global--border--width--divider--default --pf-t--global--border--width--100 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-body--GridColumn --pf-v6-c-form__field-group__field-group__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	1rem
--pf-v6-c-form__field-group-toggle--PaddingBlockStart --pf-v6-c-form__field-group__field-group__field-group-toggle--PaddingBlockStart --pf-t--global--spacer--md --pf-t--global--spacer--300 1rem
	.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-header--PaddingBlockStart --pf-v6-c-form__field-group__field-group__field-group-header--PaddingBlockStart --pf-t--global--spacer--lg --pf-t--global--spacer--400 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-header--PaddingBlockEnd --pf-v6-c-form__field-group__field-group__field-group-header--PaddingBlockEnd --pf-t--global--spacer--lg --pf-t--global--spacer--400 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-body--GridColumn --pf-v6-c-form__field-group__field-group__field-group-toggle--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	90deg
--pf-v6-c-form__field-group-toggle-icon--Rotate --pf-v6-c-form__field-group--m-expanded__toggle-icon--Rotate 90deg
	.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-header--GridColumn --pf-v6-c-form__field-group-toggle--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

Edit this page on GitHub

Form

Examples

Basic

Horizontal

Limit width

Invalid

Invalid with form alert

Danger alert:Fill out all required fields before continuing.

Validated

Horizontal stacked no padding top

Horizontal stacked helper text on top

Form group with additional label info

Form Sections

Form section 2 (optional title)

Grid form

Field Groups

Form state

Props

ActionGroup

Form

FormGroup

FormGroupLabelHelp

FormSection

FormHelperText

FormFieldGroup

FormFieldGroupExpandable

FormFieldGroupHeader

FormFieldGroupHeaderTitleTextObject

FormContextProps

FormContextProviderProps

Button

Popover

CSS variables