@patternfly/patternfly 5.0.0-alpha.4 → 5.0.0-alpha.41

package/docs/components/Form/examples/Form.md

@@ -1,6 +1,7 @@
 ---
 id: Form
 section: components
+subsection: forms
 cssPrefix: pf-c-form
 ---## Examples
 
@@ -75,11 +76,11 @@ cssPrefix: pf-c-form
   <div
     class="pf-c-form__group"
     role="group"
-    aria-labelledby="form-horizontal-checkbox-legend"
+    aria-labelledby="form-horizontalform-horizontal-checkbox-legend"
   >
     <div
       class="pf-c-form__group-label pf-m-no-padding-top"
-      id="form-horizontal-checkbox-legend"
+      id="form-horizontalform-horizontal-checkbox-legend"
     ><span class="pf-c-form__label">
         <span class="pf-c-form__label-text">Label (no top padding)</span></span>&nbsp;<span
         class="pf-c-form__group-label-help"
@@ -160,7 +161,7 @@ cssPrefix: pf-c-form
     <div class="pf-c-form__group">
       <div class="pf-c-form__group-label"><label
           class="pf-c-form__label"
-          for="form-section-example-form-section-1-input"
+          for="form-section-example-section-1-input"
         >
           <span class="pf-c-form__label-text">Form section 1 inputs</span></label>
       </div>
@@ -168,8 +169,8 @@ cssPrefix: pf-c-form
         <input
           class="pf-c-form-control"
           type="text"
-          id="form-section-example-form-section-1-input"
-          name="form-section-example-form-section-1-input"
+          id="form-section-example-section-1-input"
+          name="form-section-example-section-1-input"
           required
         />
       </div>
@@ -177,7 +178,7 @@ cssPrefix: pf-c-form
     <div class="pf-c-form__group">
       <div class="pf-c-form__group-label"><label
           class="pf-c-form__label"
-          for="form-section-example-form-section-1-input-2"
+          for="form-section-example-section-1-input-2"
         >
           <span class="pf-c-form__label-text">Form section 1 inputs</span></label>
       </div>
@@ -185,8 +186,8 @@ cssPrefix: pf-c-form
         <input
           class="pf-c-form-control"
           type="text"
-          id="form-section-example-form-section-1-input-2"
-          name="form-section-example-form-section-1-input-2"
+          id="form-section-example-section-1-input-2"
+          name="form-section-example-section-1-input-2"
           required
         />
       </div>
@@ -195,17 +196,17 @@ cssPrefix: pf-c-form
   <section
     class="pf-c-form__section"
     role="group"
-    aria-labelledby="form-section-example-section2-title"
+    aria-labelledby="form-section-example-section-2-title"
   >
     <div
       class="pf-c-form__section-title"
-      id="form-section-example-section2-title"
+      id="form-section-example-section-2-title"
       aria-hidden="true"
     >Section 2 title (optional)</div>
     <div class="pf-c-form__group">
       <div class="pf-c-form__group-label"><label
           class="pf-c-form__label"
-          for="form-section-example-form-section-2-input"
+          for="form-section-example-section-2-input"
         >
           <span class="pf-c-form__label-text">Form section 2 inputs</span></label>
       </div>
@@ -213,8 +214,8 @@ cssPrefix: pf-c-form
         <input
           class="pf-c-form-control"
           type="text"
-          id="form-section-example-form-section-2-input"
-          name="form-section-example-form-section-2-input"
+          id="form-section-example-section-2-input"
+          name="form-section-example-section-2-input"
           required
         />
       </div>
@@ -222,7 +223,7 @@ cssPrefix: pf-c-form
     <div class="pf-c-form__group">
       <div class="pf-c-form__group-label"><label
           class="pf-c-form__label"
-          for="form-section-example-form-section-2-input-2"
+          for="form-section-example-section-2-input-2"
         >
           <span class="pf-c-form__label-text">Form section 2 inputs</span></label>
       </div>
@@ -230,8 +231,8 @@ cssPrefix: pf-c-form
         <input
           class="pf-c-form-control"
           type="text"
-          id="form-section-example-form-section-2-input-2"
-          name="form-section-example-form-section-2-input-2"
+          id="form-section-example-section-2-input-2"
+          name="form-section-example-section-2-input-2"
           required
         />
       </div>
@@ -258,11 +259,13 @@ cssPrefix: pf-c-form
         name="form-help-text-name"
         aria-describedby="form-help-text-name-helper"
       />
-      <p
-        class="pf-c-form__helper-text"
-        id="form-help-text-name-helper"
-        aria-live="polite"
-      >This is helper text.</p>
+      <div class="pf-c-form__helper-text" aria-live="polite">
+        <div class="pf-c-helper-text">
+          <div class="pf-c-helper-text__item" id="form-help-text-name-helper">
+            <span class="pf-c-helper-text__item-text">This is helper text.</span>
+          </div>
+        </div>
+      </div>
     </div>
   </div>
   <div class="pf-c-form__group">
@@ -278,15 +281,22 @@ cssPrefix: pf-c-form
         name="form-help-text-email"
         aria-describedby="form-help-text-email-helper"
       />
-      <p
-        class="pf-c-form__helper-text pf-m-warning"
-        id="form-help-text-email-helper"
-        aria-live="polite"
-      >This is helper text for a warning input.</p>
+      <div class="pf-c-form__helper-text" aria-live="polite">
+        <div class="pf-c-helper-text">
+          <div
+            class="pf-c-helper-text__item pf-m-warning"
+            id="form-help-text-email-helper"
+          >
+            <span
+              class="pf-c-helper-text__item-text"
+            >This is helper text for a warning input.</span>
+          </div>
+        </div>
+      </div>
     </div>
   </div>
   <div class="pf-c-form__group">
-    <div class="pf-c-form__group-label"><label class="pf-c-form__label" for="form-help-text-address">
+    <div class="pf-c-form__group-label"><label class="pf-c-form__label" for="-address">
         <span class="pf-c-form__label-text">Address</span>&nbsp;<span class="pf-c-form__label-required" aria-hidden="true">&#42;</span></label>
     </div>
     <div class="pf-c-form__group-control">
@@ -294,16 +304,20 @@ cssPrefix: pf-c-form
         class="pf-c-form-control"
         required
         type="text"
-        id="form-help-text-address"
-        name="form-help-text-address"
+        id="-address"
+        name="-address"
         aria-invalid="true"
-        aria-describedby="form-help-text-address-helper"
+        aria-describedby="-address-helper"
       />
-      <p
-        class="pf-c-form__helper-text pf-m-error"
-        id="form-help-text-address-helper"
-        aria-live="polite"
-      >This is helper text for an invalid input.</p>
+      <div class="pf-c-form__helper-text" aria-live="polite">
+        <div class="pf-c-helper-text">
+          <div class="pf-c-helper-text__item pf-m-error" id="-address-helper">
+            <span
+              class="pf-c-helper-text__item-text"
+            >This is helper text for an invalid input.</span>
+          </div>
+        </div>
+      </div>
     </div>
   </div>
   <div class="pf-c-form__group">
@@ -319,34 +333,48 @@ cssPrefix: pf-c-form
         name="form-help-text-comment"
         aria-describedby="form-help-text-comment-helper"
       />
-      <p
-        class="pf-c-form__helper-text pf-m-success"
-        id="form-help-text-comment-helper"
-        aria-live="polite"
-      >This is helper text for success input.</p>
+      <div class="pf-c-form__helper-text" aria-live="polite">
+        <div class="pf-c-helper-text">
+          <div
+            class="pf-c-helper-text__item pf-m-success"
+            id="form-help-text-comment-helper"
+          >
+            <span
+              class="pf-c-helper-text__item-text"
+            >This is helper text for success input.</span>
+          </div>
+        </div>
+      </div>
     </div>
   </div>
   <div class="pf-c-form__group">
     <div class="pf-c-form__group-label"><label class="pf-c-form__label" for="form-help-text-info">
         <span class="pf-c-form__label-text">Information</span></label>
     </div>
-    <textarea
-      class="pf-c-form-control"
-      id="form-help-text-info"
-      name="form-help-text-info"
-      aria-invalid="true"
-      aria-describedby="form-help-text-info-helper"
-    ></textarea>
-    <p
-      class="pf-c-form__helper-text pf-m-error"
-      id="form-help-text-info-helper"
-      aria-live="polite"
-    >
-      <span class="pf-c-form__helper-text-icon">
-        <i class="fas fa-exclamation-circle" aria-hidden="true"></i>
-      </span>
-      This is helper text with an icon.
-    </p>
+    <div class="pf-c-form__group-control">
+      <textarea
+        class="pf-c-form-control"
+        id="form-help-text-info"
+        name="form-help-text-info"
+        aria-invalid="true"
+        aria-describedby="form-help-text-info-helper"
+      ></textarea>
+      <div class="pf-c-form__helper-text" aria-live="polite">
+        <div class="pf-c-helper-text">
+          <div
+            class="pf-c-helper-text__item pf-m-error"
+            id="form-help-text-info-helper"
+          >
+            <span class="pf-c-helper-text__item-icon">
+              <i class="fas fa-fw fa-exclamation-circle" aria-hidden="true"></i>
+            </span>
+            <span
+              class="pf-c-helper-text__item-text"
+            >This is helper text with an icon.</span>
+          </div>
+        </div>
+      </div>
+    </div>
   </div>
 </form>
 
@@ -362,7 +390,7 @@ cssPrefix: pf-c-form
           <span class="pf-c-form__label-text">Name</span>&nbsp;<span class="pf-c-form__label-required" aria-hidden="true">&#42;</span></label>&nbsp;<span
           class="pf-c-form__group-label-help"
           aria-label="More information for name field"
-          aria-describedby="form-additional-info-name"
+          aria-describedby="form-additional-infoform-additional-info-name"
           role="button"
           type="button"
           tabindex="0"
@@ -427,12 +455,12 @@ cssPrefix: pf-c-form
       <div class="pf-c-form__group">
         <div class="pf-c-form__group-label"><label
             class="pf-c-form__label"
-            for="form-field-groupform-field-group-field-group-label1"
+            for="form-field-group-field-group-label1"
           >
             <span class="pf-c-form__label-text">Label 1</span>&nbsp;<span class="pf-c-form__label-required" aria-hidden="true">&#42;</span></label>&nbsp;<span
             class="pf-c-form__group-label-help"
             aria-label="More information for label 1 field"
-            aria-describedby="form-field-groupform-field-group-field-group-label1"
+            aria-describedby="form-field-group-field-group-label1"
             role="button"
             type="button"
             tabindex="0"
@@ -442,8 +470,8 @@ cssPrefix: pf-c-form
           <input
             class="pf-c-form-control"
             type="text"
-            id="form-field-groupform-field-group-field-group-label1"
-            name="form-field-groupform-field-group-field-group-label1"
+            id="form-field-group-field-group-label1"
+            name="form-field-group-field-group-label1"
             required
           />
         </div>
@@ -451,12 +479,12 @@ cssPrefix: pf-c-form
       <div class="pf-c-form__group">
         <div class="pf-c-form__group-label"><label
             class="pf-c-form__label"
-            for="form-field-groupform-field-group-field-group-label2"
+            for="form-field-group-field-group-label2"
           >
             <span class="pf-c-form__label-text">Label 2</span>&nbsp;<span class="pf-c-form__label-required" aria-hidden="true">&#42;</span></label>&nbsp;<span
             class="pf-c-form__group-label-help"
             aria-label="More information for label 2 field"
-            aria-describedby="form-field-groupform-field-group-field-group-label2"
+            aria-describedby="form-field-group-field-group-label2"
             role="button"
             type="button"
             tabindex="0"
@@ -466,8 +494,8 @@ cssPrefix: pf-c-form
           <input
             class="pf-c-form-control"
             type="text"
-            id="form-field-groupform-field-group-field-group-label2"
-            name="form-field-groupform-field-group-field-group-label2"
+            id="form-field-group-field-group-label2"
+            name="form-field-group-field-group-label2"
             required
           />
         </div>
@@ -681,70 +709,64 @@ To avoid the form label's required indicator or help tooltip icon from wrapping
 
 ### 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**                                                                                                                                                                                                                                                                                        |
-| `role="button"`                                                      | `.pf-c-form__group-label-help`                                        | Provides button role for group label help spans. **Required for group label help.**                                                                                                                                                                                                                                                                                    |
-| `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.                                                                                                                                                                                                                                                                      |
+| 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-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-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** |
+| `role="button"` | `.pf-c-form__group-label-help` | Provides button role for group label help spans. **Required for group label help.** |
+| `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>`, `<span>`                               | Initiates a field level help span/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-limit-width`                               | `.pf-c-form`                                       | Limits the overall max-width of the form. Configurable by defining `--pf-c-form--m-limit-width--MaxWidth`. |
-| `.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.                                                 |
-| `--pf-c-form--m-limit-width--MaxWidth`            | `.pf-c-form.pf-m-limit-width`                      | Sets a custom `max-width` for a width limited form.                                                        |
+| 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>`, `<span>` | Initiates a field level help span/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__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-limit-width` | `.pf-c-form` | Limits the overall max-width of the form. Configurable by defining `--pf-c-form--m-limit-width--MaxWidth`. |
+| `.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-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. |
+| `--pf-c-form--m-limit-width--MaxWidth` | `.pf-c-form.pf-m-limit-width` | Sets a custom `max-width` for a width limited form. |

package/docs/components/FormControl/examples/FormControl.md

@@ -1,6 +1,7 @@
 ---
 id: Form control
 section: components
+subsection: forms
 cssPrefix: pf-c-form-control
 ---import './FormControl.css'
 
@@ -498,26 +499,26 @@ cssPrefix: pf-c-form-control
 
 ### Accessibility
 
-| Attribute                       | Applied to                         | Outcome                                                                                                                                                          |
-| ------------------------------- | ---------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `id`                            | `.pf-c-form-control`               | Provides an `id` value that can be used with the `for` attribute on an associated `<label>` element to provide an accessible label for the form control element. |
-| `aria-invalid="true"`           | `.pf-c-form-control`               | Indicates that the form control is in the error state and applies error state styling.                                                                           |
-| `aria-label="descriptive text"` | `.pf-c-form-control`               | Provides an accessible label for assistive technology.                                                                                                           |
-| `aria-expanded="true"`          | `.pf-c-form-control.pf-m-expanded` | Indicates that clicking in the form control has toggled something else to be expanded.                                                                           |
+| Attribute | Applied to | Outcome |
+| -- | -- | -- |
+| `id` | `.pf-c-form-control` | Provides an `id` value that can be used with the `for` attribute on an associated `<label>` element to provide an accessible label for the form control element.
+| `aria-invalid="true"` | `.pf-c-form-control` | Indicates that the form control is in the error state and applies error state styling. |
+| `aria-label="descriptive text"` | `.pf-c-form-control` | Provides an accessible label for assistive technology. |
+| `aria-expanded="true"` | `.pf-c-form-control.pf-m-expanded` | Indicates that clicking in the form control has toggled something else to be expanded. |
 
 ### Usage
 
-| Class                     | Applied to                                                                  | Outcome                                                                                                                                                                                     |
-| ------------------------- | --------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `.pf-c-form-control`      | `<input>`,`<textarea>`, `<select>`                                          | Initiates an input, textarea or select. For styling of checkboxes or radios see the [checkbox component](/components/checkbox) or [radio component](/components/radio). **Required**        |
-| `.pf-m-resize-vertical`   | `textarea.pf-m-form-control`                                                | Modifies a `textarea.pf-c-form-control` element so it can only be resized vertically along the y-axis.                                                                                      |
-| `.pf-m-resize-horizontal` | `textarea.pf-m-form-control`                                                | Modifies a `textarea.pf-c-form-control` element so it can only be resized horizontally along the x-axis.                                                                                    |
-| `.pf-m-success`           | `.pf-c-form-control`                                                        | Modifies a form control for the success state.                                                                                                                                              |
-| `.pf-m-warning`           | `.pf-c-form-control`                                                        | Modifies a form control for the warning state.                                                                                                                                              |
-| `.pf-m-icon-sprite`       | `.pf-c-form-control`                                                        | Modifies form control element to use an external SVG sprite instead of embedded data URIs for icons. For use with apps whose content security policies disallow the use of data URIs.       |
-| `.pf-m-icon`              | `input.pf-c-form-control`                                                   | Modifies a form control text input to be able to specify a custom SVG background via `--pf-c-form-control--m-icon--BackgroundUrl`, and other optional vars for other background properties. |
-| `.pf-m-calendar`          | `.pf-c-form-control.pf-m-icon`                                              | Modifies a form control to support the calendar icon.                                                                                                                                       |
-| `.pf-m-clock`             | `.pf-c-form-control.pf-m-icon`                                              | Modifies a form control to support the clock icon.                                                                                                                                          |
-| `.pf-m-expanded`          | `input.pf-c-form-control`                                                   | Modifies a form control for the expanded state. This is used when clicking in the text input toggles something open/closed.                                                                 |
-| `.pf-m-placeholder`       | `select.pf-c-form-control`                                                  | Modifies a form select for placeholder styles. This modifier is set programatically based on the chosen option.                                                                             |
-| `.pf-m-plain`             | `input[readonly].pf-c-form-control`, `textarea[readonly].pf-c-form-control` | Modifies an `<input>` or `<textarea>` with a `readonly` attribute to be presented as normal text.                                                                                           |
+| Class | Applied to | Outcome |
+| -- | -- | -- |
+| `.pf-c-form-control` | `<input>`,`<textarea>`, `<select>` |  Initiates an input, textarea or select. For styling of checkboxes or radios see the [checkbox component](/components/checkbox) or [radio component](/components/radio). **Required**  |
+| `.pf-m-resize-vertical` | `textarea.pf-m-form-control` | Modifies a `textarea.pf-c-form-control` element so it can only be resized vertically along the y-axis. |
+| `.pf-m-resize-horizontal` | `textarea.pf-m-form-control` | Modifies a `textarea.pf-c-form-control` element so it can only be resized horizontally along the x-axis. |
+| `.pf-m-success` | `.pf-c-form-control` | Modifies a form control for the success state. |
+| `.pf-m-warning` | `.pf-c-form-control` | Modifies a form control for the warning state. |
+| `.pf-m-icon-sprite` | `.pf-c-form-control` | Modifies form control element to use an external SVG sprite instead of embedded data URIs for icons. For use with apps whose content security policies disallow the use of data URIs. |
+| `.pf-m-icon` | `input.pf-c-form-control` | Modifies a form control text input to be able to specify a custom SVG background via `--pf-c-form-control--m-icon--BackgroundUrl`, and other optional vars for other background properties.
+| `.pf-m-calendar` | `.pf-c-form-control.pf-m-icon` | Modifies a form control to support the calendar icon. |
+| `.pf-m-clock` | `.pf-c-form-control.pf-m-icon` | Modifies a form control to support the clock icon. |
+| `.pf-m-expanded` | `input.pf-c-form-control` | Modifies a form control for the expanded state. This is used when clicking in the text input toggles something open/closed. |
+| `.pf-m-placeholder` | `select.pf-c-form-control` | Modifies a form select for placeholder styles. This modifier is set programatically based on the chosen option. |
+| `.pf-m-plain` | `input[readonly].pf-c-form-control`, `textarea[readonly].pf-c-form-control` | Modifies an `<input>` or `<textarea>` with a `readonly` attribute to be presented as normal text. |