Skip to content

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

 
Label (no top padding) 

Horizontal layout at a custom breakpoint

 

Form sections

Help text

This is helper text.
This is helper text for a warning input.
This is helper text for an invalid input.
This is helper text for success input.
This is helper text with an icon.

Label with additional info

 
More info about the name field

Label with additional info (horizontal form)

 
More info about the name field

Action group

Field group (non-expandable)

Field group Title
Field group description text

Expandable and nested field groups

Field group 1
Field group 1 description text
Field group 2
Field group 2 description text
 
 
Nested field group 3
 
 

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 &nbsp; 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 columnSelectorVariableValue
:where(:root, .pf-v6-c-form)--pf-v6-c-form--GridGap
1.5rem
:where(:root, .pf-v6-c-form)--pf-v6-c-form__group--Gap
0.5rem
:where(:root, .pf-v6-c-form)--pf-v6-c-form__group--m-action--MarginBlockStart
2rem
:where(:root, .pf-v6-c-form)--pf-v6-c-form--m-horizontal__group-label--md--GridColumnWidth
9.375rem
:where(:root, .pf-v6-c-form)--pf-v6-c-form--m-horizontal__group-label--md--GridColumnGap
1rem
:where(:root, .pf-v6-c-form)--pf-v6-c-form--m-horizontal__group-control--md--GridColumnWidth
1fr
:where(:root, .pf-v6-c-form)--pf-v6-c-form--m-limit-width--MaxWidth
55rem
:where(:root, .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)
:where(:root, .pf-v6-c-form)--pf-v6-c-form__group-label--PaddingBlockEnd
0.5rem
:where(:root, .pf-v6-c-form)--pf-v6-c-form--m-horizontal__group-label--m-no-padding--md--PaddingBlockStart
0
:where(:root, .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))
:where(:root, .pf-v6-c-form)--pf-v6-c-form__label--FontSize
0.75rem
:where(:root, .pf-v6-c-form)--pf-v6-c-form__label--LineHeight
1.5
:where(:root, .pf-v6-c-form)--pf-v6-c-form__label--m-disabled--Color
(In light theme) #a3a3a3
:where(:root, .pf-v6-c-form)--pf-v6-c-form__label--hover--Cursor
pointer
:where(:root, .pf-v6-c-form)--pf-v6-c-form__label--m-disabled--hover--Cursor
not-allowed
:where(:root, .pf-v6-c-form)--pf-v6-c-form__label-text--FontWeight
500
:where(:root, .pf-v6-c-form)--pf-v6-c-form__label-required--MarginInlineStart
0.25rem
:where(:root, .pf-v6-c-form)--pf-v6-c-form__label-required--FontSize
0.75rem
:where(:root, .pf-v6-c-form)--pf-v6-c-form__label-required--Color
(In light theme) #b1380b
:where(:root, .pf-v6-c-form)--pf-v6-c-form__group-label-help--FontSize
0.75rem
:where(:root, .pf-v6-c-form)--pf-v6-c-form__group-label--m-info--Gap
0.5rem
:where(:root, .pf-v6-c-form)--pf-v6-c-form__group-label-info--FontSize
0.75rem
:where(:root, .pf-v6-c-form)--pf-v6-c-form--m-horizontal__group-label--m-info--Gap
0.5rem
:where(:root, .pf-v6-c-form)--pf-v6-c-form__group-control--m-inline--child--MarginInlineEnd
1.5rem
:where(:root, .pf-v6-c-form)--pf-v6-c-form__group-control__helper-text--MarginBlockEnd
0.25rem
:where(:root, .pf-v6-c-form)--pf-v6-c-form__group-control--Gap
0.5rem
:where(:root, .pf-v6-c-form)--pf-v6-c-form__group-control--m-stack--Gap
0.5rem
:where(:root, .pf-v6-c-form)--pf-v6-c-form__group-control--m-stack__helper-text--MarginBlockStart
calc(0.5rem * -1 + 0.25rem)
:where(:root, .pf-v6-c-form)--pf-v6-c-form__actions--child--MarginBlockStart
0.5rem
:where(:root, .pf-v6-c-form)--pf-v6-c-form__actions--child--MarginInlineEnd
0.5rem
:where(:root, .pf-v6-c-form)--pf-v6-c-form__actions--child--MarginBlockEnd
0.5rem
:where(:root, .pf-v6-c-form)--pf-v6-c-form__actions--child--MarginInlineStart
0.5rem
:where(:root, .pf-v6-c-form)--pf-v6-c-form__actions--MarginBlockStart
calc(0.5rem * -1)
:where(:root, .pf-v6-c-form)--pf-v6-c-form__actions--MarginInlineEnd
calc(0.5rem * -1)
:where(:root, .pf-v6-c-form)--pf-v6-c-form__actions--MarginBlockEnd
calc(0.5rem * -1)
:where(:root, .pf-v6-c-form)--pf-v6-c-form__actions--MarginInlineStart
calc(0.5rem * -1)
:where(:root, .pf-v6-c-form)--pf-v6-c-form__helper-text--MarginBlockStart--base
0.25rem
:where(:root, .pf-v6-c-form)--pf-v6-c-form__helper-text--MarginBlockStart
0.25rem
:where(:root, .pf-v6-c-form)--pf-v6-c-form__section--MarginBlockStart
2rem
:where(:root, .pf-v6-c-form)--pf-v6-c-form__section--Gap
1rem
:where(:root, .pf-v6-c-form)--pf-v6-c-form__section-title--FontSize
1rem
:where(:root, .pf-v6-c-form)--pf-v6-c-form__section-title--FontWeight
700
:where(:root, .pf-v6-c-form)--pf-v6-c-form__section-title--MarginBlockEnd
calc(0.5rem * -1)
:where(:root, .pf-v6-c-form)--pf-v6-c-form__field-group--border-width-base
1px
:where(:root, .pf-v6-c-form)--pf-v6-c-form__field-group--BorderBlockStartWidth
1px
:where(:root, .pf-v6-c-form)--pf-v6-c-form__field-group--BorderBlockStartColor
(In light theme) #c7c7c7
:where(:root, .pf-v6-c-form)--pf-v6-c-form__field-group--BorderBlockEndWidth
1px
:where(:root, .pf-v6-c-form)--pf-v6-c-form__field-group--BorderBlockEndColor
(In light theme) #c7c7c7
:where(:root, .pf-v6-c-form)--pf-v6-c-form__field-group--field-group--MarginBlockStart
calc(1.5rem * -1)
:where(:root, .pf-v6-c-form)--pf-v6-c-form__field-group--GridTemplateColumns--toggle
calc(1rem * 2 + 0.875rem + 0.25rem)
:where(:root, .pf-v6-c-form)--pf-v6-c-form__field-group-toggle--PaddingBlockStart
1rem
:where(:root, .pf-v6-c-form)--pf-v6-c-form__field-group-toggle--PaddingInlineEnd
0.25rem
:where(:root, .pf-v6-c-form)--pf-v6-c-form__field-group__field-group__field-group-toggle--PaddingBlockStart
1rem
:where(:root, .pf-v6-c-form)--pf-v6-c-form__field-group-header-toggle--BorderWidth--base
1px
:where(:root, .pf-v6-c-form)--pf-v6-c-form__field-group__field-group--field-group__field-group-toggle--after--BorderBlockStartWidth
1px
:where(:root, .pf-v6-c-form)--pf-v6-c-form__field-group-toggle-button--MarginBlockStart
calc(0.5rem * -1)
:where(:root, .pf-v6-c-form)--pf-v6-c-form__field-group-toggle-button--MarginBlockEnd
calc(0.5rem * -1)
:where(:root, .pf-v6-c-form)--pf-v6-c-form__field-group-toggle-icon--Transition
all 250ms cubic-bezier(.42, 0, .58, 1)
:where(:root, .pf-v6-c-form)--pf-v6-c-form__field-group-toggle-icon--MinWidth
0.875rem
:where(:root, .pf-v6-c-form)--pf-v6-c-form__field-group-toggle-icon--Rotate
0
:where(:root, .pf-v6-c-form)--pf-v6-c-form__field-group--m-expanded__toggle-icon--Rotate
90deg
:where(:root, .pf-v6-c-form)--pf-v6-c-form__field-group-header--PaddingBlockStart
1rem
:where(:root, .pf-v6-c-form)--pf-v6-c-form__field-group-header--PaddingBlockEnd
1rem
:where(:root, .pf-v6-c-form)--pf-v6-c-form__field-group-header--GridColumn
1 / 3
:where(:root, .pf-v6-c-form)--pf-v6-c-form__field-group__field-group__field-group-header--PaddingBlockStart
1.5rem
:where(:root, .pf-v6-c-form)--pf-v6-c-form__field-group__field-group__field-group-header--PaddingBlockEnd
1.5rem
:where(:root, .pf-v6-c-form)--pf-v6-c-form__field-group-toggle--field-group-header--GridColumn
2 / 3
:where(:root, .pf-v6-c-form)--pf-v6-c-form__field-group__field-group--field-group__field-group-header--after--BorderBlockStartWidth
1px
:where(:root, .pf-v6-c-form)--pf-v6-c-form__field-group-header-description--MarginBlockStart
0.25rem
:where(:root, .pf-v6-c-form)--pf-v6-c-form__field-group-header-description--Color
(In light theme) #4d4d4d
:where(:root, .pf-v6-c-form)--pf-v6-c-form__field-group-header-actions--MarginInlineStart
0.5rem
:where(:root, .pf-v6-c-form)--pf-v6-c-form__field-group-body--PaddingBlockStart
1.5rem
:where(:root, .pf-v6-c-form)--pf-v6-c-form__field-group-body--PaddingBlockEnd
1.5rem
:where(:root, .pf-v6-c-form)--pf-v6-c-form__field-group-body--Gap
1.5rem
:where(:root, .pf-v6-c-form)--pf-v6-c-form__field-group-body--GridColumn
2 / 3
:where(:root, .pf-v6-c-form)--pf-v6-c-form__field-group__field-group__field-group-body--GridColumn
1 / 3
:where(:root, .pf-v6-c-form)--pf-v6-c-form__field-group__field-group__field-group-toggle--field-group-body--GridColumn
2 / 3
:where(:root, .pf-v6-c-form)--pf-v6-c-form__field-group-body__field-group--last-child--MarginBlockEnd
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-form__group-control.pf-m-inline > :last-child--pf-v6-c-form__group-control--m-inline--child--MarginInlineEnd
0
.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
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 .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
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-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

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