Skip to content
Patternfly Logo

Form

Examples

Vertically aligned labels

Horizontally aligned labels

Form sections

Section 2 title (optional)

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.

Action group

Field groups

Field group 1
Field group 1 description text.
Nested field group 1
Nested field group 1 description text.
Nested field group 2
Nested field group 3
Nested field group 3 description text.
Field group 2
Field group 1 description text.
Field group 3
Field group 1 description text.
Nested field group 1 (non-expandable)
Nested field group 2 (non-expandable)
Field group 1 description text.
Field group 4 (non-expandable)
Field group 1 description text.

Documentation

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.
id="{helper_text_id}"
.pf-c-form__helper-text
Form fields with related .pf-c-form__helper-text require this attribute. Usage <p class="pf-c-form__helper-text" id="{helper_text_id}">.
aria-describedby="{helper_text_id}"
<input>, <select>, <textarea>
Form fields with related .pf-c-form__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-c-form__label-required
Hides the required indicator from assistive technologies.
id
.pf-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-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-label
.pf-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-c-form__field-group-toggle-button > button
Provides an accessible label for the field group toggle button.
aria-expanded="true/false"
.pf-c-form__field-group-toggle-button > button
Indicates whether the field group body is visible or hidden.

Usage

Class
Applied to
Outcome
.pf-c-form
<form>
Initiates a standard form. Required
.pf-c-form__section
<div>, <section>
Initiates a form section.
.pf-c-form__section-title
<h1>,<h2>,<h3>,<h4>,<h5>,<h6>, <div>
Initiates a form section title.
.pf-c-form__group
<div>
Initiates a form group.
.pf-c-form__group-label
<div>
Initiates a form group label.
.pf-c-form__label
<label>
Initiates a form label. Required
.pf-c-form__label-text
<span>
Initiates a form label text. Required
.pf-c-form__label-required
<span>
Initiates a form label required indicator.
.pf-c-form__group-label-help
<button>
Initiates a field level help button.
.pf-c-form__group-control
<div>
Initiates a form group control section.
.pf-c-form__actions
<div>
Iniates a row of actions.
.pf-c-form__helper-text
<p>
Initiates a form helper text block.
.pf-c-form__helper-text-icon
<span>
Initiates a form helper text icon.
.pf-c-form__alert
<div>
Initiates the form alert container for inline alerts.
.pf-c-form__field-group
<div>
Initiates a form field group.
.pf-c-form__field-group-toggle
<div>
Initiates the form field group toggle.
.pf-c-form__field-group-toggle-button
<div>
Initiates the form field group toggle button.
.pf-c-form__field-group-toggle-icon
<span>
Initiates the form field group toggle icon.
.pf-c-form__field-group-header
<div>
Initiates the form field group header.
.pf-c-form__field-group-header-main
<div>
Initiates the form field group main section.
.pf-c-form__field-group-header-title
<div>
Initiates the form field group title.
.pf-c-form__field-group-header-title-text
<div>
Initiates the form field group title text.
.pf-c-form__field-group-header-description
<div>
Initiates the form field group description.
.pf-c-form__field-group-header-actions
<div>
Initiates the form field group actions container.
.pf-c-form__field-group-body
<div>
Initiates the form field group body.
.pf-m-horizontal
.pf-c-form
Modifies form for a horizontal layout.
.pf-m-action
.pf-c-form__group
Modifies form group margin-top.
.pf-m-success
.pf-c-form__helper-text
Modifies text color of helper text for success state.
.pf-m-warning
.pf-c-form__helper-text
Modifies text color of helper text for warning state.
.pf-m-error
.pf-c-form__helper-text
Modifies text color of helper text for error state.
.pf-m-inactive
.pf-c-form__helper-text
Modifies display of helper text to none.
.pf-m-disabled
.pf-c-form__label
Modifies form label to show disabled state.
.pf-m-no-padding-top
.pf-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-c-form__group-control
Modifies form group children to be inline (this is primarily for radio buttons and checkboxes).
.pf-m-stack
.pf-c-form__group-control
Modifies form group children to be stacked with space between children.
.pf-m-expanded
.pf-c-form__field-group
Modifies an expandable field group for the expanded state.

CSS variables

.pf-c-form--pf-c-form--GridGap
1.5rem
.pf-c-form--pf-c-form__group--m-action--MarginTop
2rem
.pf-c-form--pf-c-form--m-horizontal__group-label--md--GridColumnWidth
9.375rem
.pf-c-form--pf-c-form--m-horizontal__group-label--md--GridColumnGap
1rem
.pf-c-form--pf-c-form--m-horizontal__group-control--md--GridColumnWidth
1fr
.pf-c-form--pf-c-form--m-limit-width--MaxWidth
31.25rem
.pf-c-form--pf-c-form--m-horizontal__group-label--md--PaddingTop
0.5rem
.pf-c-form--pf-c-form__group-label--PaddingBottom
0.5rem
.pf-c-form--pf-c-form__label--FontSize
0.875rem
.pf-c-form--pf-c-form__label--LineHeight
1.3
.pf-c-form--pf-c-form__label--m-disabled--Color
#6a6e73
.pf-c-form--pf-c-form__label-text--FontWeight
700
.pf-c-form--pf-c-form__label-required--MarginLeft
0.25rem
.pf-c-form--pf-c-form__label-required--FontSize
0.875rem
.pf-c-form--pf-c-form__label-required--Color
#c9190b
.pf-c-form--pf-c-form__group-label-help--PaddingTop
0.25rem
.pf-c-form--pf-c-form__group-label-help--PaddingRight
0.25rem
.pf-c-form--pf-c-form__group-label-help--PaddingBottom
0.25rem
.pf-c-form--pf-c-form__group-label-help--PaddingLeft
0.25rem
.pf-c-form--pf-c-form__group-label-help--MarginTop
calc(0.25rem * -1)
.pf-c-form--pf-c-form__group-label-help--MarginRight
calc(0.25rem * -1)
.pf-c-form--pf-c-form__group-label-help--MarginBottom
calc(0.25rem * -1)
.pf-c-form--pf-c-form__group-label-help--MarginLeft
calc(0.25rem * -1 + 0.25rem)
.pf-c-form--pf-c-form__group-label-help--FontSize
0.875rem
.pf-c-form--pf-c-form__group-label-help--TranslateY
0.125rem
.pf-c-form--pf-c-form__group-label-help--Color
#6a6e73
.pf-c-form--pf-c-form__group-label-help--hover--Color
#151515
.pf-c-form--pf-c-form__group-label-help--focus--Color
#151515
.pf-c-form--pf-c-form__group-control--m-inline--child--MarginRight
1.5rem
.pf-c-form--pf-c-form__group-control__helper-text--MarginBottom
0.25rem
.pf-c-form--pf-c-grid__group-control--m-stack--Gap
0.5rem
.pf-c-form--pf-c-grid__group-control--m-stack__helper-text--MarginTop
calc(0.5rem * -1 + 0.25rem)
.pf-c-form--pf-c-form__actions--child--MarginTop
0.5rem
.pf-c-form--pf-c-form__actions--child--MarginRight
0.5rem
.pf-c-form--pf-c-form__actions--child--MarginBottom
0.5rem
.pf-c-form--pf-c-form__actions--child--MarginLeft
0.5rem
.pf-c-form--pf-c-form__actions--MarginTop
calc(0.5rem * -1)
.pf-c-form--pf-c-form__actions--MarginRight
calc(0.5rem * -1)
.pf-c-form--pf-c-form__actions--MarginBottom
calc(0.5rem * -1)
.pf-c-form--pf-c-form__actions--MarginLeft
calc(0.5rem * -1)
.pf-c-form--pf-c-form__helper-text--MarginTop--base
0.25rem
.pf-c-form--pf-c-form__helper-text--MarginTop
0.25rem
.pf-c-form--pf-c-form__helper-text--FontSize
0.875rem
.pf-c-form--pf-c-form__helper-text--Color
#151515
.pf-c-form--pf-c-form__helper-text-icon--FontSize
1rem
.pf-c-form--pf-c-form__helper-text-icon--MarginRight
0.25rem
.pf-c-form--pf-c-form__helper-text--m-success--Color
#1e4f18
.pf-c-form--pf-c-form__helper-text--m-warning--Color
#795600
.pf-c-form--pf-c-form__helper-text--m-error--Color
#c9190b
.pf-c-form--pf-c-form__section--MarginTop
2rem
.pf-c-form--pf-c-form__section--Gap
1.5rem
.pf-c-form--pf-c-form__section-title--FontSize
1.125rem
.pf-c-form--pf-c-form__section-title--FontWeight
700
.pf-c-form--pf-c-form__section-title--MarginBottom
calc(0.5rem * -1)
.pf-c-form--pf-c-form__field-group--border-width-base
1px
.pf-c-form--pf-c-form__field-group--BorderTopWidth
1px
.pf-c-form--pf-c-form__field-group--BorderTopColor
#d2d2d2
.pf-c-form--pf-c-form__field-group--BorderBottomWidth
1px
.pf-c-form--pf-c-form__field-group--BorderBottomColor
#d2d2d2
.pf-c-form--pf-c-form__field-group--field-group--MarginTop
calc(1.5rem * -1)
.pf-c-form--pf-c-form__field-group--GridTemplateColumns--toggle
calc(1rem * 2 + 1rem + 0.25rem)
.pf-c-form--pf-c-form__field-group-toggle--PaddingTop
1rem
.pf-c-form--pf-c-form__field-group-toggle--PaddingRight
0.25rem
.pf-c-form--pf-c-form__field-group__field-group__field-group-toggle--PaddingTop
1.5rem
.pf-c-form--pf-c-form__field-group-header-toggle--BorderWidth--base
1px
.pf-c-form--pf-c-form__field-group__field-group--field-group__field-group-toggle--after--BorderTopWidth
1px
.pf-c-form--pf-c-form__field-group-toggle-button--MarginTop
calc(0.375rem * -1)
.pf-c-form--pf-c-form__field-group-toggle-button--MarginBottom
calc(0.375rem * -1)
.pf-c-form--pf-c-form__field-group-toggle-icon--Transition
all 250ms cubic-bezier(.42, 0, .58, 1)
.pf-c-form--pf-c-form__field-group-toggle-icon--MinWidth
1rem
.pf-c-form--pf-c-form__field-group-toggle-icon--Rotate
0
.pf-c-form--pf-c-form__field-group--m-expanded__toggle-icon--Rotate
90deg
.pf-c-form--pf-c-form__field-group-header--PaddingTop
1rem
.pf-c-form--pf-c-form__field-group-header--PaddingBottom
1rem
.pf-c-form--pf-c-form__field-group-header--GridColumn
1 / 3
.pf-c-form--pf-c-form__field-group__field-group__field-group-header--PaddingTop
1.5rem
.pf-c-form--pf-c-form__field-group__field-group__field-group-header--PaddingBottom
1.5rem
.pf-c-form--pf-c-form__field-group-toggle--field-group-header--GridColumn
2 / 3
.pf-c-form--pf-c-form__field-group__field-group--field-group__field-group-header--after--BorderTopWidth
1px
.pf-c-form--pf-c-form__field-group-header-description--MarginTop
0.25rem
.pf-c-form--pf-c-form__field-group-header-description--Color
#6a6e73
.pf-c-form--pf-c-form__field-group-header-actions--MarginTop
calc(0.375rem * -1)
.pf-c-form--pf-c-form__field-group-header-actions--MarginBottom
calc(0.375rem * -1)
.pf-c-form--pf-c-form__field-group-header-actions--MarginLeft
0.5rem
.pf-c-form--pf-c-form__field-group-body--PaddingTop
1.5rem
.pf-c-form--pf-c-form__field-group-body--PaddingBottom
1.5rem
.pf-c-form--pf-c-form__field-group-body--Gap
1.5rem
.pf-c-form--pf-c-form__field-group-body--GridColumn
2 / 3
.pf-c-form--pf-c-form__field-group__field-group__field-group-body--GridColumn
1 / 3
.pf-c-form--pf-c-form__field-group__field-group__field-group-toggle--field-group-body--GridColumn
2 / 3
.pf-c-form--pf-c-form__field-group-body__field-group--last-child--MarginBottom
calc(1.5rem * -1)
.pf-c-form.pf-m-horizontal--pf-c-form__group-label--PaddingBottom
0
.pf-c-form__group-label--pf-c-form__helper-text--MarginTop
0
.pf-c-form__group-label-help:hover--pf-c-form__group-label-help--Color
#151515
.pf-c-form__group-label-help:focus-within--pf-c-form__group-label-help--Color
#151515
.pf-c-form__group-control.pf-m-inline > :last-child--pf-c-form__group-control--m-inline--child--MarginRight
0
.pf-c-form__group-control.pf-m-stack--pf-c-form__helper-text--MarginTop
calc(0.5rem * -1 + 0.25rem)
.pf-c-form__group-control .pf-c-form__helper-text:first-child--pf-c-form__helper-text--MarginTop
0
.pf-c-form__helper-text.pf-m-error--pf-c-form__helper-text--Color
#c9190b
.pf-c-form__helper-text.pf-m-success--pf-c-form__helper-text--Color
#1e4f18
.pf-c-form__helper-text.pf-m-warning--pf-c-form__helper-text--Color
#795600
.pf-c-form__field-group--pf-c-form__field-group--BorderTopWidth
1px
.pf-c-form__field-group:last-child--pf-c-form__field-group--BorderBottomWidth
0
.pf-c-form__field-group + .pf-c-form__field-group--pf-c-form__field-group--BorderTopWidth
0
.pf-c-form__field-group .pf-c-form__field-group--pf-c-form__field-group-body--GridColumn
1 / 3
.pf-c-form__field-group .pf-c-form__field-group--pf-c-form__field-group-toggle--PaddingTop
1.5rem
.pf-c-form__field-group .pf-c-form__field-group--pf-c-form__field-group-header--PaddingTop
1.5rem
.pf-c-form__field-group .pf-c-form__field-group--pf-c-form__field-group-header--PaddingBottom
1.5rem
.pf-c-form__field-group .pf-c-form__field-group--pf-c-form__field-group-body--PaddingTop
0
.pf-c-form__field-group .pf-c-form__field-group .pf-c-form__field-group-toggle ~ .pf-c-form__field-group-body--pf-c-form__field-group-body--GridColumn
2 / 3
.pf-c-form__field-group.pf-m-expanded > .pf-c-form__field-group-toggle--pf-c-form__field-group-toggle-icon--Rotate
90deg
.pf-c-form__field-group-toggle + .pf-c-form__field-group-header--pf-c-form__field-group-header--GridColumn
2 / 3
.pf-c-form__field-group-body > .pf-c-form__field-group:first-child--pf-c-form__field-group-toggle--PaddingTop
0
.pf-c-form__field-group-body > .pf-c-form__field-group:first-child--pf-c-form__field-group-header--PaddingTop
0

View source on GitHub