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.

CSS variables

Expand or collapse columnSelectorVariableValue
.pf-v6-c-form--pf-v6-c-form--GridGap
1.5rem
.pf-v6-c-form--pf-v6-c-form__group--Gap
0.5rem
.pf-v6-c-form--pf-v6-c-form__group--m-action--MarginBlockStart
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--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--pf-v6-c-form__group-label--PaddingBlockEnd
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--pf-v6-c-form__label--FontSize
0.875rem
.pf-v6-c-form--pf-v6-c-form__label--LineHeight
1.5
.pf-v6-c-form--pf-v6-c-form__label--m-disabled--Color
(In light theme) #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
600
.pf-v6-c-form--pf-v6-c-form__label-required--MarginInlineStart
0.25rem
.pf-v6-c-form--pf-v6-c-form__label-required--FontSize
0.875rem
.pf-v6-c-form--pf-v6-c-form__label-required--Color
(In light theme) #b1380b
.pf-v6-c-form--pf-v6-c-form__group-label-help--FontSize
0.875rem
.pf-v6-c-form--pf-v6-c-form__group-label--m-info--Gap
undefined
.pf-v6-c-form--pf-v6-c-form__group-label-info--FontSize
0.75rem
.pf-v6-c-form--pf-v6-c-form--m-horizontal__group-label--m-info--Gap
0.5rem
.pf-v6-c-form--pf-v6-c-form__group-control--m-inline--Gap
1rem
.pf-v6-c-form--pf-v6-c-form__group-control__helper-text--MarginBlockEnd
0.25rem
.pf-v6-c-form--pf-v6-c-form__group-control--m-stack--Gap
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--pf-v6-c-form__actions--child--MarginBlockStart
0.5rem
.pf-v6-c-form--pf-v6-c-form__actions--child--MarginInlineEnd
0.5rem
.pf-v6-c-form--pf-v6-c-form__actions--child--MarginBlockEnd
0.5rem
.pf-v6-c-form--pf-v6-c-form__actions--child--MarginInlineStart
0.5rem
.pf-v6-c-form--pf-v6-c-form__actions--MarginBlockStart
calc(0.5rem * -1)
.pf-v6-c-form--pf-v6-c-form__actions--MarginInlineEnd
calc(0.5rem * -1)
.pf-v6-c-form--pf-v6-c-form__actions--MarginBlockEnd
calc(0.5rem * -1)
.pf-v6-c-form--pf-v6-c-form__actions--MarginInlineStart
calc(0.5rem * -1)
.pf-v6-c-form--pf-v6-c-form__helper-text--MarginBlockStart--base
0.25rem
.pf-v6-c-form--pf-v6-c-form__helper-text--MarginBlockStart
0.25rem
.pf-v6-c-form--pf-v6-c-form__section--MarginBlockStart
2rem
.pf-v6-c-form--pf-v6-c-form__section--Gap
1.5rem
.pf-v6-c-form--pf-v6-c-form__section-title--FontSize
1rem
.pf-v6-c-form--pf-v6-c-form__section-title--FontWeight
600
.pf-v6-c-form--pf-v6-c-form__section-title--MarginBlockEnd
calc(0.5rem * -1)
.pf-v6-c-form--pf-v6-c-form__field-group--border-width-base
1px
.pf-v6-c-form--pf-v6-c-form__field-group--BorderBlockStartWidth
1px
.pf-v6-c-form--pf-v6-c-form__field-group--BorderBlockStartColor
(In light theme) #e0e0e0
.pf-v6-c-form--pf-v6-c-form__field-group--BorderBlockEndWidth
1px
.pf-v6-c-form--pf-v6-c-form__field-group--BorderBlockEndColor
(In light theme) #e0e0e0
.pf-v6-c-form--pf-v6-c-form__field-group--field-group--MarginBlockStart
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--pf-v6-c-form__field-group-toggle--PaddingBlockStart
1rem
.pf-v6-c-form--pf-v6-c-form__field-group-toggle--PaddingInlineEnd
0.25rem
.pf-v6-c-form--pf-v6-c-form__field-group__field-group__field-group-toggle--PaddingBlockStart
1.5rem
.pf-v6-c-form--pf-v6-c-form__field-group-header-toggle--BorderWidth--base
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--pf-v6-c-form__field-group-toggle-button--MarginBlockStart
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--pf-v6-c-form__field-group-toggle-icon--TransitionDuration
100ms
.pf-v6-c-form--pf-v6-c-form__field-group-toggle-icon--TransitionTimingFunction
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--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
-180deg
.pf-v6-c-form--pf-v6-c-form__field-group-header--PaddingBlockStart
1rem
.pf-v6-c-form--pf-v6-c-form__field-group-header--PaddingBlockEnd
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--pf-v6-c-form__field-group__field-group__field-group-header--PaddingBlockEnd
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--pf-v6-c-form__field-group-header-description--MarginBlockStart
0.25rem
.pf-v6-c-form--pf-v6-c-form__field-group-header-description--Color
(In light theme) #4d4d4d
.pf-v6-c-form--pf-v6-c-form__field-group-header-actions--MarginInlineStart
0.5rem
.pf-v6-c-form--pf-v6-c-form__field-group-header-actions--MarginBlockStart
calc(0.5rem * -1)
.pf-v6-c-form--pf-v6-c-form__field-group-header-actions--MarginBlockEnd
calc(0.5rem * -1)
.pf-v6-c-form--pf-v6-c-form__field-group-body--PaddingBlockStart
1.5rem
.pf-v6-c-form--pf-v6-c-form__field-group-body--PaddingBlockEnd
1.5rem
.pf-v6-c-form--pf-v6-c-form__field-group-body--Gap
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--pf-v6-c-form__field-group-body--TranslateY
0
.pf-v6-c-form--pf-v6-c-form__field-group--m-expanded__field-group-body--TranslateY
0
.pf-v6-c-form--pf-v6-c-form__field-group-body--TransitionDuration--expand--slide
0s
.pf-v6-c-form--pf-v6-c-form__field-group-body--TransitionDuration--expand--fade
200ms
.pf-v6-c-form--pf-v6-c-form__field-group-body--TransitionDuration--collapse--slide
0s
.pf-v6-c-form--pf-v6-c-form__field-group-body--TransitionDuration--collapse--fade
100ms
.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.875rem
.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__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: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 .pf-v6-c-form__field-group--pf-v6-c-form__field-group-toggle--PaddingBlockStart
1.5rem
.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 .pf-v6-c-form__field-group--pf-v6-c-form__field-group-header--PaddingBlockEnd
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.pf-m-expanded > .pf-v6-c-form__field-group-toggle--pf-v6-c-form__field-group-toggle-icon--Rotate
-180deg
.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-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