Examples
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. |
role="group" | .pf-c-form__group, .pf-c-form__section, .pf-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-c-form__group | Provides group role for radio input groups. Required for radio input groups |
id | .pf-c-form__group-label | Generates an id for use in the aria-labelledby attribute in a checkbox or radio form group. |
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-labelledby="{label id}" | .pf-c-form__group, .pf-c-form__section, .pf-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-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. |
id="{form_label_id}" | .pf-c-form__label | Generates an id for use in the aria-describedby attribute in a .pf-c-form__group-label-help. |
aria-label="{descriptive text}" aria-describedby="{form_label_id}" | .pf-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-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>, <span> | 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-main | <div> | Initiates a form group label main container. |
.pf-c-form__group-label-info | <div> | Initiates a form group info label. |
.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>, <div> | 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{-on-[xs, sm, md, lg, xl, 2xl]} | .pf-c-form | Modifies the form for a horizontal layout at an optional breakpoint. The default breakpoint is -md. |
.pf-m-info | .pf-c-form__group-label | Modifies the form group label to contain form group label info. |
.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 | 55rem | |
| .pf-c-form | --pf-c-form--m-horizontal__group-label--md--PaddingTop | calc((((((1rem * 1.5) + (2 * 1px)) - 1rem) / 2) + 1rem) - ((((0.875rem * 1.3) - 0.875rem) / 2) + 0.875rem) + 1px) | |
| .pf-c-form | --pf-c-form__group-label--PaddingBottom | 0.5rem | |
| .pf-c-form | --pf-c-form--m-horizontal__group-label--m-no-padding--md--PaddingTop | 0 | |
| .pf-c-form | --pf-c-form--m-horizontal__group-label--m-no-padding--md--TranslateY | calc(((((0.875rem * 1.3) - 0.875rem) / 2) + 0.875rem) - ((((1rem * 1.3) - 1rem) / 2) + 1rem)) | |
| .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--hover--Cursor | pointer | |
| .pf-c-form | --pf-c-form__label--m-disabled--hover--Cursor | not-allowed | |
| .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-label-info--MarginLeft | 0.5rem | |
| .pf-c-form | --pf-c-form__group-label-info--FontSize | 0.875rem | |
| .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__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
