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

Vertically aligned labels

Horizontally aligned labels

Horizontal layout at a custom breakpoint

Form sections

Help text

Name

This is helper text.

E-mail

This is helper text for a warning input.

Address

This is helper text for an invalid input.

Comment

This is helper text for success input.

Information

This is helper text with an icon.

Label with additional info

Label with additional info (horizontal form)

Action group

Field group (non-expandable)

Expandable and nested field groups

Field group 1

Field group 1 description text

Field group 2

Field group 2 description text

Label 1

Label 2

Nested field group 3

Label 1

Label 2

Documentation

To avoid the form label's required indicator or help tooltip icon from wrapping separately from the form label text, all whitespace characters between the last word of the label text, the required indicator (.pf-v6-c-form__label-required), and help tooltip icon (.pf-v6-c-form__label-help) must be removed, and   characters added in between to maintain spacing. Also the help tooltip icon's .pf-v6-c-form__label-required element must be a <span> instead of a <button> due to layout limitations of the <button> element imposed by user agent styles.

Accessibility

Attribute	Applied to	Outcome
`for`	`<label>`	Each `<label>` must have a `for` attribute that matches its form field id. Required
`id`	`<input type="radio/checkbox/text">`, `<select>`, `<textarea>`	Each `<form>` field must have an `id` attribute that matches its label's `for` value. Required
`required`	`<input>`, `<select>`, `<textarea>`	Required fields must include these attributes.
`aria-describedby="{helper_text_id}"`	`<input>`, `<select>`, `<textarea>`	Form fields with related `.pf-v6-c-helper-text` require this attribute. Usage `<input aria-describedby="{helper_text_id}">`.
`aria-invalid="true" aria-describedby="{helper_text_id}"`	`<input>`, `<select>`, `<textarea>`	When form validation fails `aria-describedby` is used to communicate the error to the user. These attributes need to be handled with Javascript so that `aria-describedby` only references help text that explains the error, and so that `aria-invalid="true"` is only present when validation fails. For proper styling of errors `aria-invalid="true"` is required.
`aria-hidden="true"`	`.pf-v6-c-form__label-required`	Hides the required indicator from assistive technologies.
`role="group"`	`.pf-v6-c-form__group`, `.pf-v6-c-form__section`, `.pf-v6-c-form__field-group`	Provides group role for form groups, form sections, and form field groups. Required for checkbox groups, form groups, form sections, and form field groups.
`role="radiogroup"`	`.pf-v6-c-form__group`	Provides group role for radio input groups. Required for radio input groups
`role="button"`	`.pf-v6-c-form__group-label-help`	Provides button role for group label help spans. Required for group label help.
`id`	`.pf-v6-c-form__group-label`	Generates an `id` for use in the `aria-labelledby` attribute in a checkbox or radio form group.
`id`	`.pf-v6-c-form__field-group-title-text`	Generates an `id` for use in the `aria-labelledby` attribute in an expandable field group's toggle button.
`id`	`.pf-v6-c-form__field-group-toggle-button > button`	Generates an `id` for use in the `aria-labelledby` attribute in an expandable field group's toggle button.
`aria-labelledby="{label id}"`	`.pf-v6-c-form__group`, `.pf-v6-c-form__section`, `.pf-v6-c-form__field-group`	Provides an accessible label for form groups, form sections, and form field groups. Required for form groups, form sections, and form field groups that contain labels.
`aria-label`	`.pf-v6-c-form__field-group-toggle-button > button`	Provides an accessible label for the field group toggle button.
`aria-labelledby="{title id} {toggle button id}"`	`.pf-v6-c-form__field-group-toggle-button > button`	Provides an accessible label for the field group toggle button.
`aria-expanded="true/false"`	`.pf-v6-c-form__field-group-toggle-button > button`	Indicates whether the field group body is visible or hidden.
`id="{form_label_id}"`	`.pf-v6-c-form__label`	Generates an `id` for use in the `aria-describedby` attribute in a `.pf-v6-c-form__group-label-help`.
`aria-label="{descriptive text}" aria-describedby="{form_label_id}"`	`.pf-v6-c-form__group-label-help`	Provides an accessible label on a button that provides additional information for a form element.

Usage

Class	Applied to	Outcome
`.pf-v6-c-form`	`<form>`	Initiates a standard form. Required
`.pf-v6-c-form__section`	`<div>, <section>`	Initiates a form section.
`.pf-v6-c-form__section-title`	`<h1>`,`<h2>`,`<h3>`,`<h4>`,`<h5>`,`<h6>`, `<div>`	Initiates a form section title.
`.pf-v6-c-form__group`	`<div>`	Initiates a form group.
`.pf-v6-c-form__group-label`	`<div>`	Initiates a form group label.
`.pf-v6-c-form__label`	`<label>`, `<span>`	Initiates a form label. Required
`.pf-v6-c-form__label-text`	`<span>`	Initiates a form label text. Required
`.pf-v6-c-form__label-required`	`<span>`	Initiates a form label required indicator.
`.pf-v6-c-form__group-label-main`	`<div>`	Initiates a form group label main container.
`.pf-v6-c-form__group-label-info`	`<div>`	Initiates a form group info label.
`.pf-v6-c-form__group-label-help`	`<span>`	Initiates field level help.
`.pf-v6-c-form__group-control`	`<div>`	Initiates a form group control section.
`.pf-v6-c-form__actions`	`<div>`	Iniates a row of actions.
`.pf-v6-c-form__helper-text`	`<p>`, `<div>`	Initiates a form helper text block.
`.pf-v6-c-form__alert`	`<div>`	Initiates the form alert container for inline alerts.
`.pf-v6-c-form__field-group`	`<div>`	Initiates a form field group.
`.pf-v6-c-form__field-group-toggle`	`<div>`	Initiates the form field group toggle.
`.pf-v6-c-form__field-group-toggle-button`	`<div>`	Initiates the form field group toggle button.
`.pf-v6-c-form__field-group-toggle-icon`	`<span>`	Initiates the form field group toggle icon.
`.pf-v6-c-form__field-group-header`	`<div>`	Initiates the form field group header.
`.pf-v6-c-form__field-group-header-main`	`<div>`	Initiates the form field group main section.
`.pf-v6-c-form__field-group-header-title`	`<div>`	Initiates the form field group title.
`.pf-v6-c-form__field-group-header-title-text`	`<div>`	Initiates the form field group title text.
`.pf-v6-c-form__field-group-header-description`	`<div>`	Initiates the form field group description.
`.pf-v6-c-form__field-group-header-actions`	`<div>`	Initiates the form field group actions container.
`.pf-v6-c-form__field-group-body`	`<div>`	Initiates the form field group body.
`.pf-m-horizontal{-on-[xs, sm, md, lg, xl, 2xl]}`	`.pf-v6-c-form`	Modifies the form for a horizontal layout at an optional breakpoint. The default breakpoint is `-md`.
`.pf-m-limit-width`	`.pf-v6-c-form`	Limits the overall max-width of the form. Configurable by defining `--pf-v6-c-form--m-limit-width--MaxWidth`.
`.pf-m-info`	`.pf-v6-c-form__group-label`	Modifies the form group label to contain form group label info.
`.pf-m-action`	`.pf-v6-c-form__group`	Modifies form group margin-top.
`.pf-m-disabled`	`.pf-v6-c-form__label`	Modifies form label to show disabled state.
`.pf-m-no-padding-top`	`.pf-v6-c-form__group-label`	Removes top padding from the label element for labels adjacent to an element that isn't a form control.
`.pf-m-inline`	`.pf-v6-c-form__group-control`	Modifies form group children to be inline (this is primarily for radio buttons and checkboxes).
`.pf-m-stack`	`.pf-v6-c-form__group-control`	Modifies form group children to be stacked with space between children.
`.pf-m-expanded`	`.pf-v6-c-form__field-group`	Modifies an expandable field group for the expanded state.
`--pf-v6-c-form--m-limit-width--MaxWidth`	`.pf-v6-c-form.pf-m-limit-width`	Sets a custom `max-width` for a width limited form.

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