Patternfly Logo

Examples

Vertically aligned labels

Horizontally aligned labels



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.

Action group

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.

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__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-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).

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

View source on GitHub