Form
A form is a group of elements used to collect information from a user. Related design guidelines: Forms
ExamplesDocumentationCSS VariablesExamples
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__group | <div> | Initiates a form group section. |
.pf-c-form__group-label | <div> | Initiates a form group label section. |
.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-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-error | .pf-c-form__helper-text | Modifies text color of helper text for error state. |
.pf-m-success | .pf-c-form__helper-text | Modifies text color of helper text for success 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-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 | 600 | ||
| .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__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-error--Color | #c9190b | ||
| .pf-c-form | --pf-c-form__helper-text--m-success--Color | #0f280d | ||
| .pf-c-form.pf-m-horizontal | --pf-c-form__group-label--PaddingBottom | 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 | #0f280d | ||
