From ea61a1949c24b5d3b2f0caee0b1d58660e96ecc5 Mon Sep 17 00:00:00 2001
From: Andy Vo <andyvo@bu.edu>
Date: Mon, 6 Jun 2022 21:47:46 -0400
Subject: [PATCH 1/4] chore(Form): completed conversion of form examples to ts

---
 .../src/components/Form/FormGroup.tsx         |    2 +-
 .../src/components/Form/examples/Form.md      | 1283 +----------------
 .../components/Form/examples/FormBasic.tsx    |  122 ++
 .../Form/examples/FormFieldGroups.tsx         |  324 +++++
 .../src/components/Form/examples/FormGrid.tsx |   66 +
 .../Form/examples/FormGroupLabelInfo.tsx      |   72 +
 .../Form/examples/FormHorizontal.tsx          |  112 ++
 .../Form/examples/FormHorizontalHelper.tsx    |   15 +
 .../Form/examples/FormHorizontalStacked.tsx   |   11 +
 .../components/Form/examples/FormInvalid.tsx  |   47 +
 .../examples/FormInvalidWithFormAlert.tsx     |   52 +
 .../Form/examples/FormLimitWidth.tsx          |  122 ++
 .../components/Form/examples/FormSections.tsx |   44 +
 .../Form/examples/FormValidated.tsx           |   60 +
 14 files changed, 1060 insertions(+), 1272 deletions(-)
 create mode 100644 packages/react-core/src/components/Form/examples/FormBasic.tsx
 create mode 100644 packages/react-core/src/components/Form/examples/FormFieldGroups.tsx
 create mode 100644 packages/react-core/src/components/Form/examples/FormGrid.tsx
 create mode 100644 packages/react-core/src/components/Form/examples/FormGroupLabelInfo.tsx
 create mode 100644 packages/react-core/src/components/Form/examples/FormHorizontal.tsx
 create mode 100644 packages/react-core/src/components/Form/examples/FormHorizontalHelper.tsx
 create mode 100644 packages/react-core/src/components/Form/examples/FormHorizontalStacked.tsx
 create mode 100644 packages/react-core/src/components/Form/examples/FormInvalid.tsx
 create mode 100644 packages/react-core/src/components/Form/examples/FormInvalidWithFormAlert.tsx
 create mode 100644 packages/react-core/src/components/Form/examples/FormLimitWidth.tsx
 create mode 100644 packages/react-core/src/components/Form/examples/FormSections.tsx
 create mode 100644 packages/react-core/src/components/Form/examples/FormValidated.tsx

diff --git a/packages/react-core/src/components/Form/FormGroup.tsx b/packages/react-core/src/components/Form/FormGroup.tsx
index 77139da4011..0bf029f3c75 100644
--- a/packages/react-core/src/components/Form/FormGroup.tsx
+++ b/packages/react-core/src/components/Form/FormGroup.tsx
@@ -40,7 +40,7 @@ export interface FormGroupProps extends Omit<React.HTMLProps<HTMLDivElement>, 'l
   /** Icon displayed to the left of the helper text when the field is invalid. */
   helperTextInvalidIcon?: React.ReactNode;
   /** ID of the included field. It has to be the same for proper working. */
-  fieldId: string;
+  fieldId?: string;
   /** Sets the role of the form group. Pass in "radiogroup" when the form group contains multiple
    * radio inputs, or pass in "group" when the form group contains multiple of any other input type.
    */
diff --git a/packages/react-core/src/components/Form/examples/Form.md b/packages/react-core/src/components/Form/examples/Form.md
index 3f70a41d01d..5a2edfe76d9 100644
--- a/packages/react-core/src/components/Form/examples/Form.md
+++ b/packages/react-core/src/components/Form/examples/Form.md
@@ -42,1319 +42,60 @@ import TrashIcon from '@patternfly/react-icons/dist/esm/icons/trash-icon';
 
 ### Basic
 
-```js
-import React from 'react';
-import { Form, FormGroup, TextInput, Checkbox, Popover, ActionGroup, Button, Radio } from '@patternfly/react-core';
-import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
-
-class SimpleForm extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      value1: '',
-      value2: '',
-      value3: ''
-    };
-    this.handleTextInputChange1 = value1 => {
-      this.setState({ value1 });
-    };
-    this.handleTextInputChange2 = value2 => {
-      this.setState({ value2 });
-    };
-    this.handleTextInputChange3 = value3 => {
-      this.setState({ value3 });
-    };
-  }
-
-  render() {
-    const { value1, value2, value3 } = this.state;
-
-    return (
-      <Form>
-        <FormGroup
-          label="Full name"
-          labelIcon={
-            <Popover
-              headerContent={
-                <div>
-                  The{' '}
-                  <a href="https://schema.org/name" target="_blank">
-                    name
-                  </a>{' '}
-                  of a{' '}
-                  <a href="https://schema.org/Person" target="_blank">
-                    Person
-                  </a>
-                </div>
-              }
-              bodyContent={
-                <div>
-                  Often composed of{' '}
-                  <a href="https://schema.org/givenName" target="_blank">
-                    givenName
-                  </a>{' '}
-                  and{' '}
-                  <a href="https://schema.org/familyName" target="_blank">
-                    familyName
-                  </a>
-                  .
-                </div>
-              }
-            >
-              <button
-                type="button"
-                aria-label="More info for name field"
-                onClick={e => e.preventDefault()}
-                aria-describedby="simple-form-name-01"
-                className="pf-c-form__group-label-help"
-              >
-                <HelpIcon noVerticalAlign />
-              </button>
-            </Popover>
-          }
-          isRequired
-          fieldId="simple-form-name-01"
-          helperText="Include your middle name if you have one."
-        >
-          <TextInput
-            isRequired
-            type="text"
-            id="simple-form-name-01"
-            name="simple-form-name-01"
-            aria-describedby="simple-form-name-01-helper"
-            value={value1}
-            onChange={this.handleTextInputChange1}
-          />
-        </FormGroup>
-        <FormGroup label="Email" isRequired fieldId="simple-form-email-01">
-          <TextInput
-            isRequired
-            type="email"
-            id="simple-form-email-01"
-            name="simple-form-email-01"
-            value={value2}
-            onChange={this.handleTextInputChange2}
-          />
-        </FormGroup>
-        <FormGroup label="Phone number" isRequired fieldId="simple-form-number-01">
-          <TextInput
-            isRequired
-            type="tel"
-            id="simple-form-number-01"
-            placeholder="555-555-5555"
-            name="simple-form-number-01"
-            value={value3}
-            onChange={this.handleTextInputChange3}
-          />
-        </FormGroup>
-        <FormGroup role="group" isInline fieldId="basic-form-checkbox-group" label="How can we contact you?">
-          <Checkbox label="Email" aria-label="Email" id="inlinecheck01" />
-          <Checkbox label="Phone" aria-label="Phone" id="inlinecheck02" />
-          <Checkbox label="Mail" aria-label="Mail" id="inlinecheck03" />
-        </FormGroup>
-        <FormGroup role="radiogroup" isInline fieldId="simple-form-radio-group" label="Time zone">
-          <Radio name="basic-inline-radio" label="Eastern" id="basic-inline-radio-01" />
-          <Radio name="basic-inline-radio" label="Central" id="basic-inline-radio-02" />
-          <Radio name="basic-inline-radio" label="Pacific" id="basic-inline-radio-03" />
-        </FormGroup>
-        <FormGroup label="Additional note" fieldId="simple-form-note-01">
-          <TextInput isDisabled type="text" id="simple-form-note-01" name="simple-form-number" value="disabled" />
-        </FormGroup>
-        <FormGroup fieldId="checkbox01">
-          <Checkbox
-            label="I'd like updates via email."
-            id="checkbox01"
-            name="checkbox01"
-            aria-label="Update via email"
-          />
-        </FormGroup>
-        <ActionGroup>
-          <Button variant="primary">Submit</Button>
-          <Button variant="link">Cancel</Button>
-        </ActionGroup>
-      </Form>
-    );
-  }
-}
+```ts file="./FormBasic.tsx"
 ```
 
 ### Horizontal
 
-```js
-import React from 'react';
-import {
-  Form,
-  FormGroup,
-  TextInput,
-  TextArea,
-  FormSelect,
-  FormSelectOption,
-  Checkbox,
-  ActionGroup,
-  Button,
-  Radio
-} from '@patternfly/react-core';
-
-class HorizontalForm extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      value: 'please choose',
-      value1: '',
-      value2: '',
-      value3: ''
-    };
-    this.onChange = (value, event) => {
-      this.setState({ value });
-    };
-    this.handleTextInputChange1 = value1 => {
-      this.setState({ value1 });
-    };
-    this.handleTextInputChange2 = value2 => {
-      this.setState({ value2 });
-    };
-    this.handleTextInputChange3 = value3 => {
-      this.setState({ value3 });
-    };
-    this.options = [
-      { value: 'select one', label: 'Select one', disabled: false },
-      { value: 'mr', label: 'Mr', disabled: false },
-      { value: 'miss', label: 'Miss', disabled: false },
-      { value: 'mrs', label: 'Mrs', disabled: false },
-      { value: 'ms', label: 'Ms', disabled: false },
-      { value: 'dr', label: 'Dr', disabled: false },
-      { value: 'other', label: 'Other', disabled: false }
-    ];
-  }
-
-  render() {
-    const { value1, value2, value3 } = this.state;
-
-    return (
-      <Form isHorizontal>
-        <FormGroup
-          label="Full name"
-          isRequired
-          fieldId="horizontal-form-name"
-          helperText="Include your middle name if you have one."
-        >
-          <TextInput
-            value={value1}
-            isRequired
-            type="text"
-            id="horizontal-form-name"
-            aria-describedby="horizontal-form-name-helper"
-            name="horizontal-form-name"
-            onChange={this.handleTextInputChange1}
-          />
-        </FormGroup>
-        <FormGroup label="Email" isRequired fieldId="horizontal-form-email">
-          <TextInput
-            value={value2}
-            onChange={this.handleTextInputChange2}
-            isRequired
-            type="email"
-            id="horizontal-form-email"
-            name="horizontal-form-email"
-          />
-        </FormGroup>
-        <FormGroup label="Your title" fieldId="horizontal-form-title">
-          <FormSelect
-            value={this.state.value}
-            onChange={this.onChange}
-            id="horzontal-form-title"
-            name="horizontal-form-title"
-            aria-label="Your title"
-          >
-            {this.options.map((option, index) => (
-              <FormSelectOption isDisabled={option.disabled} key={index} value={option.value} label={option.label} />
-            ))}
-          </FormSelect>
-        </FormGroup>
-        <FormGroup label="Your experience" fieldId="horizontal-form-exp">
-          <TextArea
-            value={value3}
-            onChange={this.handleTextInputChange3}
-            name="horizontal-form-exp"
-            id="horizontal-form-exp"
-          />
-        </FormGroup>
-        <FormGroup
-          label="How can we contact you?"
-          isStack
-          hasNoPaddingTop
-          role="group"
-          fieldId="horizontal-form-checkbox-group"
-        >
-          <Checkbox label="Email" id="alt-form-checkbox-1" name="alt-form-checkbox-1" />
-          <Checkbox label="Phone" id="alt-form-checkbox-2" name="alt-form-checkbox-2" />
-          <Checkbox label="Mail" id="alt-form-checkbox-3" name="alt-form-checkbox-3" />
-        </FormGroup>
-        <FormGroup role="radiogroup" isStack hasNoPaddingTop fieldId="horizontal-form-radio-group" label="Time zone">
-          <Radio name="horizontal-inline-radio" label="Eastern" id="horizontal-inline-radio-01" />
-          <Radio name="horizontal-inline-radio" label="Central" id="horizontal-inline-radio-02" />
-          <Radio name="horizontal-inline-radio" label="Pacific" id="horizontal-inline-radio-03" />
-        </FormGroup>
-        <ActionGroup>
-          <Button variant="primary">Submit</Button>
-          <Button variant="link">Cancel</Button>
-        </ActionGroup>
-      </Form>
-    );
-  }
-}
+```ts file="./FormHorizontal.tsx"
 ```
 
 ### Limit width
 
-```js
-import React from 'react';
-import { Form, FormGroup, TextInput, Checkbox, Popover, ActionGroup, Button, Radio } from '@patternfly/react-core';
-import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
-
-class SimpleForm extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      value1: '',
-      value2: '',
-      value3: ''
-    };
-    this.handleTextInputChange1 = value1 => {
-      this.setState({ value1 });
-    };
-    this.handleTextInputChange2 = value2 => {
-      this.setState({ value2 });
-    };
-    this.handleTextInputChange3 = value3 => {
-      this.setState({ value3 });
-    };
-  }
-
-  render() {
-    const { value1, value2, value3 } = this.state;
-
-    return (
-      <Form isWidthLimited>
-        <FormGroup
-          label="Full name"
-          labelIcon={
-            <Popover
-              headerContent={
-                <div>
-                  The{' '}
-                  <a href="https://schema.org/name" target="_blank">
-                    name
-                  </a>{' '}
-                  of a{' '}
-                  <a href="https://schema.org/Person" target="_blank">
-                    Person
-                  </a>
-                </div>
-              }
-              bodyContent={
-                <div>
-                  Often composed of{' '}
-                  <a href="https://schema.org/givenName" target="_blank">
-                    givenName
-                  </a>{' '}
-                  and{' '}
-                  <a href="https://schema.org/familyName" target="_blank">
-                    familyName
-                  </a>
-                  .
-                </div>
-              }
-            >
-              <button
-                type="button"
-                aria-label="More info for name field"
-                onClick={e => e.preventDefault()}
-                aria-describedby="simple-form-name-02"
-                className="pf-c-form__group-label-help"
-              >
-                <HelpIcon noVerticalAlign />
-              </button>
-            </Popover>
-          }
-          isRequired
-          fieldId="simple-form-name-02"
-          helperText="Include your middle name if you have one."
-        >
-          <TextInput
-            isRequired
-            type="text"
-            id="simple-form-name-02"
-            name="simple-form-name-02"
-            aria-describedby="simple-form-name-02-helper"
-            value={value1}
-            onChange={this.handleTextInputChange1}
-          />
-        </FormGroup>
-        <FormGroup label="Email" isRequired fieldId="simple-form-email-02">
-          <TextInput
-            isRequired
-            type="email"
-            id="simple-form-email-02"
-            name="simple-form-email-02"
-            value={value2}
-            onChange={this.handleTextInputChange2}
-          />
-        </FormGroup>
-        <FormGroup label="Phone number" isRequired fieldId="simple-form-number">
-          <TextInput
-            isRequired
-            type="tel"
-            id="simple-form-number"
-            placeholder="555-555-5555"
-            name="simple-form-number"
-            value={value3}
-            onChange={this.handleTextInputChange3}
-          />
-        </FormGroup>
-        <FormGroup fieldId="limit-width-form-checkbox-group" role="group" isInline label="How can we contact you?">
-          <Checkbox label="Email" aria-label="Email" id="inlinecheck04" />
-          <Checkbox label="Phone" aria-label="Phone" id="inlinecheck05" />
-          <Checkbox label="Mail" aria-label="Mail" id="inlinecheck06" />
-        </FormGroup>
-        <FormGroup role="radiogroup" isInline fieldId="limit-width-form-radio-group" label="Time zone">
-          <Radio name="limit-width-radio" label="Eastern" id="limit-width-inline-radio-01" />
-          <Radio name="limit-width-radio" label="Central" id="limit-width-inline-radio-02" />
-          <Radio name="limit-width-radio" label="Pacific" id="limit-width-inline-radio-03" />
-        </FormGroup>
-        <FormGroup label="Additional note" fieldId="simple-form-note-02">
-          <TextInput isDisabled type="text" id="simple-form-note-02" name="simple-form-number" value="disabled" />
-        </FormGroup>
-        <FormGroup fieldId="checkbox02">
-          <Checkbox
-            label="I'd like updates via email."
-            id="checkbox02"
-            name="checkbox02"
-            aria-label="Update via email"
-          />
-        </FormGroup>
-        <ActionGroup>
-          <Button variant="primary">Submit</Button>
-          <Button variant="link">Cancel</Button>
-        </ActionGroup>
-      </Form>
-    );
-  }
-}
+```ts file="./FormLimitWidth.tsx"
 ```
 
 ### Invalid
 
-```js
-import React from 'react';
-import { Form, FormGroup, TextInput, FormHelperText } from '@patternfly/react-core';
-import ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon';
-
-class InvalidForm extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      value: 'Five',
-      validated: 'error'
-    };
-    this.handleTextInputChange = value => {
-      this.setState({ value, validated: value === '' ? 'noval' : /^\d+$/.test(value) ? 'success' : 'error' });
-    };
-  }
-
-  render() {
-    const { value, validated } = this.state;
-
-    return (
-      <Form>
-        <FormGroup
-          label="Age"
-          type="number"
-          helperText={
-            <FormHelperText icon={<ExclamationCircleIcon />} isHidden={validated !== 'noval'}>
-              Please enter your age
-            </FormHelperText>
-          }
-          helperTextInvalid="Must be a number"
-          helperTextInvalidIcon={<ExclamationCircleIcon />}
-          fieldId="age-1"
-          validated={validated}
-        >
-          <TextInput
-            validated={validated}
-            value={value}
-            id="age-1"
-            aria-describedby="age-1-helper"
-            onChange={this.handleTextInputChange}
-          />
-        </FormGroup>
-      </Form>
-    );
-  }
-}
+```ts file="./FormInvalid.tsx"
 ```
 
 ### Invalid with form alert
 
-```js
-import React from 'react';
-import { Alert, Form, FormAlert, FormGroup, TextInput, FormHelperText } from '@patternfly/react-core';
-import ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon';
-
-class InvalidFormWithFormAlert extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      value: 'Five',
-      validated: 'error'
-    };
-    this.handleTextInputChange = value => {
-      this.setState({ value, validated: value === '' ? 'noval' : /^\d+$/.test(value) ? 'success' : 'error' });
-    };
-  }
-
-  render() {
-    const { value, validated } = this.state;
-
-    return (
-      <Form>
-        {validated === 'error' && (
-          <FormAlert>
-            <Alert
-              variant="danger"
-              title="Fill out all required fields before continuing."
-              aria-live="polite"
-              isInline
-            />
-          </FormAlert>
-        )}
-        <FormGroup
-          label="Age"
-          type="number"
-          helperText={
-            <FormHelperText icon={<ExclamationCircleIcon />} isHidden={validated !== 'noval'}>
-              Please enter your age
-            </FormHelperText>
-          }
-          helperTextInvalid="Must be a number"
-          helperTextInvalidIcon={<ExclamationCircleIcon />}
-          fieldId="age-2"
-          validated={validated}
-        >
-          <TextInput
-            validated={validated}
-            value={value}
-            id="age-2"
-            aria-describedby="age-2-helper"
-            onChange={this.handleTextInputChange}
-          />
-        </FormGroup>
-      </Form>
-    );
-  }
-}
+```ts file="./FormInvalidWithFormAlert.tsx"
 ```
 
 ### Validated
 
-```js
-import React from 'react';
-import { Form, FormGroup, TextInput } from '@patternfly/react-core';
-import ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon';
-
-class InvalidForm extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      value: '',
-      invalidText: 'Must be a number',
-      validated: 'default',
-      helperText: 'Enter your age to continue'
-    };
-
-    this.simulateNetworkCall = callback => {
-      setTimeout(callback, 2000);
-    };
-
-    this.handleTextInputChange = value => {
-      this.setState(
-        { value, validated: 'default', helperText: 'Validating...' },
-        this.simulateNetworkCall(() => {
-          if (/^\d+$/.test(value)) {
-            if (parseInt(value, 10) >= 21) {
-              this.setState({ validated: 'success', helperText: 'Enjoy your stay' });
-            } else {
-              this.setState({ validated: 'warning', helperText: 'You must be at least 21 to continue' });
-            }
-          } else {
-            this.setState({ validated: 'error', invalidText: 'Must be a number' });
-          }
-        })
-      );
-    };
-  }
-
-  render() {
-    const { value, validated, helperText, invalidText } = this.state;
-
-    return (
-      <Form>
-        <FormGroup
-          label="Age"
-          type="number"
-          helperText={helperText}
-          helperTextInvalid={invalidText}
-          helperTextInvalidIcon={<ExclamationCircleIcon />}
-          fieldId="age-3"
-          validated={validated}
-        >
-          <TextInput
-            validated={validated}
-            value={value}
-            id="age-3"
-            aria-describedby="age-3-helper"
-            onChange={this.handleTextInputChange}
-          />
-        </FormGroup>
-      </Form>
-    );
-  }
-}
+```ts file="./FormValidated.tsx"
 ```
 
 ### Horizontal stacked no padding top
 
-```js
-import React from 'react';
-import { Form, FormGroup, Checkbox } from '@patternfly/react-core';
-
-class HorizontalForm extends React.Component {
-  render() {
-    return (
-      <Form isHorizontal>
-        <FormGroup role="group" label="Label" hasNoPaddingTop fieldId="options" isStack>
-          <Checkbox label="option 1" id="option-01" />
-          <Checkbox label="option 2" id="option-02" />
-        </FormGroup>
-      </Form>
-    );
-  }
-}
+```ts file="./FormHorizontalStacked.tsx"
 ```
 
 ### Horizontal stacked helper text on top
 
-```js
-import React from 'react';
-import { Form, FormGroup, Checkbox } from '@patternfly/react-core';
-
-class HorizontalFormHelperTextOnTop extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      helperText: 'Select all that apply:'
-    };
-  }
-
-  render() {
-    return (
-      <Form isHorizontal>
-        <FormGroup
-          label="Label"
-          helperText={this.state.helperText}
-          isHelperTextBeforeField
-          hasNoPaddingTop
-          fieldId="options"
-          isStack
-          role="group"
-        >
-          <Checkbox label="Option 1" id="option-03" />
-          <Checkbox label="Option 2" id="option-04" />
-        </FormGroup>
-      </Form>
-    );
-  }
-}
+```ts file="./FormHorizontalHelper.tsx"
 ```
 
 ### Form group with additional label info
 
-```js
-import React from 'react';
-import { Form, FormGroup, TextInput, Popover } from '@patternfly/react-core';
-import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
-
-class FormGroupLabelInfo extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      value1: ''
-    };
-    this.handleTextInputChange1 = value1 => {
-      this.setState({ value1 });
-    };
-  }
-
-  render() {
-    const { value1 } = this.state;
-
-    return (
-      <Form>
-        <FormGroup
-          label="Full name"
-          labelInfo="Additional label info"
-          labelIcon={
-            <Popover
-              headerContent={
-                <div>
-                  The{' '}
-                  <a href="https://schema.org/name" target="_blank">
-                    name
-                  </a>{' '}
-                  of a{' '}
-                  <a href="https://schema.org/Person" target="_blank">
-                    Person
-                  </a>
-                </div>
-              }
-              bodyContent={
-                <div>
-                  Often composed of{' '}
-                  <a href="https://schema.org/givenName" target="_blank">
-                    givenName
-                  </a>{' '}
-                  and{' '}
-                  <a href="https://schema.org/familyName" target="_blank">
-                    familyName
-                  </a>
-                  .
-                </div>
-              }
-            >
-              <button
-                type="button"
-                aria-label="More info for name field"
-                onClick={e => e.preventDefault()}
-                aria-describedby="form-group-label-info"
-                className="pf-c-form__group-label-help"
-              >
-                <HelpIcon noVerticalAlign />
-              </button>
-            </Popover>
-          }
-          isRequired
-          fieldId="form-group-label-info"
-          helperText="Include your middle name if you have one."
-        >
-          <TextInput
-            isRequired
-            type="text"
-            id="form-group-label-info"
-            name="form-group-label-info"
-            aria-describedby="form-group-label-info-helper"
-            value={value1}
-            onChange={this.handleTextInputChange1}
-          />
-        </FormGroup>
-      </Form>
-    );
-  }
-}
+```ts file="./FormGroupLabelInfo.tsx"
 ```
 
 ### Form Sections
 
-```js
-import React from 'react';
-import { Form, FormGroup, FormSection, TextInput } from '@patternfly/react-core';
-
-class FormSections extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      value1: '',
-      value2: ''
-    };
-    this.handleTextInputChange1 = value1 => {
-      this.setState({ value1 });
-    };
-    this.handleTextInputChange2 = value2 => {
-      this.setState({ value2 });
-    };
-  }
-
-  render() {
-    const { value1, value2 } = this.state;
-
-    return (
-      <Form>
-        <FormSection>
-          <FormGroup label="Form section 1 input" isRequired fieldId="simple-form-section-1-input">
-            <TextInput
-              isRequired
-              type="section-1-input"
-              id="simple-form-section-1-input"
-              name="simple-form-section-1-input"
-              value={value1}
-              onChange={this.handleTextInputChange1}
-            />
-          </FormGroup>
-        </FormSection>
-        <FormSection title="Form section 2 (optional title)" titleElement="h2">
-          <FormGroup label="Form section 2 input" isRequired fieldId="simple-form-section-2-input">
-            <TextInput
-              isRequired
-              type="section-2-input"
-              id="simple-form-section-2-input"
-              name="simple-form-section-2-input"
-              value={value2}
-              onChange={this.handleTextInputChange2}
-            />
-          </FormGroup>
-        </FormSection>
-      </Form>
-    );
-  }
-}
+```ts file="./FormSections.tsx"
 ```
 
 ### Grid form
 
-```js
-import React from 'react';
-import { Form, FormGroup, TextInput, Button, Grid, GridItem } from '@patternfly/react-core';
-import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
-
-class SimpleForm extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      value1: '',
-      value2: '',
-      value3: ''
-    };
-    this.handleTextInputChange1 = value1 => {
-      this.setState({ value1 });
-    };
-    this.handleTextInputChange2 = value2 => {
-      this.setState({ value2 });
-    };
-    this.handleTextInputChange3 = value3 => {
-      this.setState({ value3 });
-    };
-  }
-
-  render() {
-    const { value1, value2, value3 } = this.state;
-
-    return (
-      <Form>
-        <Grid hasGutter md={6}>
-          <GridItem span={12}>
-            <FormGroup
-              label="Full name"
-              isRequired
-              fieldId="grid-form-name-01"
-              helperText="Include your middle name if you have one."
-            >
-              <TextInput
-                isRequired
-                type="text"
-                id="grid-form-name-01"
-                name="grid-form-name-01"
-                aria-describedby="grid-form-name-01-helper"
-                value={value1}
-                onChange={this.handleTextInputChange1}
-              />
-            </FormGroup>
-          </GridItem>
-          <FormGroup label="Email" isRequired fieldId="grid-form-email-01">
-            <TextInput
-              isRequired
-              type="email"
-              id="grid-form-email-01"
-              name="grid-form-email-01"
-              value={value2}
-              onChange={this.handleTextInputChange2}
-            />
-          </FormGroup>
-          <FormGroup label="Phone number" isRequired fieldId="grid-form-number-01">
-            <TextInput
-              isRequired
-              type="tel"
-              id="grid-form-number-01"
-              placeholder="555-555-5555"
-              name="grid-form-number-01"
-              value={value3}
-              onChange={this.handleTextInputChange3}
-            />
-          </FormGroup>
-        </Grid>
-      </Form>
-    );
-  }
-}
+```ts file="./FormGrid.tsx"
 ```
 
 ### Field Groups
 
-```js
-import React from 'react';
-import {
-  Form,
-  FormGroup,
-  FormFieldGroup,
-  FormFieldGroupExpandable,
-  FormFieldGroupHeader,
-  TextInput,
-  Button
-} from '@patternfly/react-core';
-import TrashIcon from '@patternfly/react-icons/dist/esm/icons/trash-icon';
-
-class FieldGroups extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      value1: '',
-      value2: '',
-      value3: '',
-      value4: '',
-      value5: '',
-      value6: '',
-      value7: '',
-      value8: '',
-      value9: '',
-      value10: '',
-      value11: '',
-      value12: '',
-      value13: '',
-      value14: '',
-      value15: '',
-      value16: '',
-      value17: '',
-      value18: '',
-      value19: '',
-      value20: '',
-      value21: '',
-      value22: ''
-    };
-    this.handleTextInputChange = value => {
-      this.setState(value);
-    };
-  }
-
-  render() {
-    const {
-      value1,
-      value2,
-      value3,
-      value4,
-      value5,
-      value6,
-      value7,
-      value8,
-      value9,
-      value10,
-      value11,
-      value12,
-      value13,
-      value14,
-      value15,
-      value16,
-      value17,
-      value18,
-      value19,
-      value20,
-      value21,
-      value22
-    } = this.state;
-
-    return (
-      <Form>
-        <FormGroup label="Label 1" isRequired fieldId="form-expandable-field-groups-label1">
-          <TextInput
-            isRequired
-            id="form-expandable-field-groups-label1"
-            name="form-expandable-field-groups-label1"
-            value={value1}
-            onChange={value => {
-              this.handleTextInputChange({ value1: value });
-            }}
-          />
-        </FormGroup>
-        <FormGroup label="Label 2" isRequired fieldId="form-expandable-field-groups-label2">
-          <TextInput
-            isRequired
-            id="form-expandable-field-groups-label2"
-            name="form-expandable-field-groups-label2"
-            value={value2}
-            onChange={value => {
-              this.handleTextInputChange({ value2: value });
-            }}
-          />
-        </FormGroup>
-        <FormFieldGroupExpandable
-          isExpanded
-          toggleAriaLabel="Details"
-          header={
-            <FormFieldGroupHeader
-              titleText={{ text: 'Field group 1', id: 'field-group1-titleText-id' }}
-              titleDescription="Field group 1 description text."
-              actions={
-                <>
-                  <Button variant="link">Delete all</Button> <Button variant="secondary">Add parameter</Button>
-                </>
-              }
-            />
-          }
-        >
-          <FormFieldGroupExpandable
-            isExpanded
-            toggleAriaLabel="Details"
-            header={
-              <FormFieldGroupHeader
-                titleText={{ text: 'Nested field group 1', id: 'nested-field-group1-titleText-id' }}
-                titleDescription="Nested field group 1 description text."
-                actions={
-                  <Button variant="plain" aria-label="Remove">
-                    <TrashIcon />
-                  </Button>
-                }
-              />
-            }
-          >
-            <FormGroup label="Label 1" isRequired fieldId="form-expandable-field-groups-field-group1-label1">
-              <TextInput
-                isRequired
-                id="form-expandable-field-groups-field-group1-label1"
-                name="form-expandable-field-groups-field-group1-label1"
-                value={value3}
-                onChange={value => {
-                  this.handleTextInputChange({ value3: value });
-                }}
-              />
-            </FormGroup>
-            <FormGroup label="Label 2" isRequired fieldId="form-expandable-field-groups-field-group1-label2">
-              <TextInput
-                isRequired
-                id="form-expandable-field-groups-field-group1-label2"
-                name="form-expandable-field-groups-field-group1-label2"
-                value={value4}
-                onChange={value => {
-                  this.handleTextInputChange({ value4: value });
-                }}
-              />
-            </FormGroup>
-          </FormFieldGroupExpandable>
-          <FormFieldGroupExpandable
-            toggleAriaLabel="Details"
-            header={
-              <FormFieldGroupHeader
-                titleText={{ text: 'Nested field group 2', id: 'nested-field-group2-titleText-id' }}
-                actions={
-                  <Button variant="plain" aria-label="Remove">
-                    <TrashIcon />
-                  </Button>
-                }
-              />
-            }
-          >
-            <FormGroup label="Label 1" isRequired fieldId="form-expandable-field-groups-field-group2-label1">
-              <TextInput
-                isRequired
-                id="form-expandable-field-groups-field-group2-label1"
-                name="form-expandable-field-groups-field-group2-label1"
-                value={value5}
-                onChange={value => {
-                  this.handleTextInputChange({ value5: value });
-                }}
-              />
-            </FormGroup>
-            <FormGroup label="Label 2" isRequired fieldId="form-expandable-field-groups-field-group2-label2">
-              <TextInput
-                isRequired
-                id="form-expandable-field-groups-field-group2-label2"
-                name="form-expandable-field-groups-field-group2-label2"
-                value={value6}
-                onChange={value => {
-                  this.handleTextInputChange({ value6: value });
-                }}
-              />
-            </FormGroup>
-          </FormFieldGroupExpandable>
-          <FormFieldGroupExpandable
-            toggleAriaLabel="Details"
-            header={
-              <FormFieldGroupHeader
-                titleText={{ text: 'Nested field group 3', id: 'nested-field-group3-titleText-id' }}
-                titleDescription="Field group 3 description text."
-                actions={
-                  <Button variant="plain" aria-label="Remove">
-                    <TrashIcon />
-                  </Button>
-                }
-              />
-            }
-          >
-            <FormGroup label="Label 1" isRequired fieldId="form-expandable-field-groups-field-group3-label1">
-              <TextInput
-                isRequired
-                id="form-expandable-field-groups-field-group3-label1"
-                name="form-expandable-field-groups-field-group3-label1"
-                value={value7}
-                onChange={value => {
-                  this.handleTextInputChange({ value7: value });
-                }}
-              />
-            </FormGroup>
-            <FormGroup label="Label 2" isRequired fieldId="form-expandable-field-groups-field-group3-label2">
-              <TextInput
-                isRequired
-                id="form-expandable-field-groups-field-group3-label2"
-                name="form-expandable-field-groups-field-group3-label2"
-                value={value8}
-                onChange={value => {
-                  this.handleTextInputChange({ value8: value });
-                }}
-              />
-            </FormGroup>
-          </FormFieldGroupExpandable>
-          <FormGroup
-            label="Label 1"
-            isRequired
-            fieldId="form-expandable-field-groupsform-expandable-field-groups-field-group1-label1"
-          >
-            <TextInput
-              isRequired
-              id="form-expandable-field-groupsform-expandable-field-groups-field-group1-label1"
-              name="form-expandable-field-groupsform-expandable-field-groups-field-group1-label1"
-              value={value9}
-              onChange={value => {
-                this.handleTextInputChange({ value9: value });
-              }}
-            />
-          </FormGroup>
-          <FormGroup
-            label="Label 2"
-            isRequired
-            fieldId="form-expandable-field-groupsform-expandable-field-groups-field-group1-label2"
-          >
-            <TextInput
-              isRequired
-              id="form-expandable-field-groupsform-expandable-field-groups-field-group1-label2"
-              name="form-expandable-field-groupsform-expandable-field-groups-field-group1-label2"
-              value={value10}
-              onChange={value => {
-                this.handleTextInputChange({ value10: value });
-              }}
-            />
-          </FormGroup>
-        </FormFieldGroupExpandable>
-        <FormFieldGroupExpandable
-          toggleAriaLabel="Details"
-          header={
-            <FormFieldGroupHeader
-              titleText={{ text: 'Field group 2', id: 'field-group2-titleText-id' }}
-              titleDescription="Field group 2 description text."
-              actions={
-                <>
-                  <Button variant="link">Delete all</Button> <Button variant="secondary">Add parameter</Button>
-                </>
-              }
-            />
-          }
-        >
-          <FormGroup label="Label 1" isRequired fieldId="form-expandable-field-group2-label1">
-            <TextInput
-              isRequired
-              id="form-expandable-field-group2-label1"
-              name="form-expandable-field-group2-label1"
-              value={value11}
-              onChange={value => {
-                this.handleTextInputChange({ value11: value });
-              }}
-            />
-          </FormGroup>
-          <FormGroup label="Label 2" isRequired fieldId="form-expandable-field-group2-label2">
-            <TextInput
-              isRequired
-              id="form-expandable-field-group2-label2"
-              name="form-expandable-field-group2-label2"
-              value={value12}
-              onChange={value => {
-                this.handleTextInputChange({ value12: value });
-              }}
-            />
-          </FormGroup>
-        </FormFieldGroupExpandable>
-        <FormFieldGroupExpandable
-          isExpanded
-          toggleAriaLabel="Details"
-          header={
-            <FormFieldGroupHeader
-              titleText={{ text: 'Field group 3', id: 'field-group3-titleText-id' }}
-              titleDescription="Field group 3 description text."
-            />
-          }
-        >
-          <FormGroup label="Label 1" isRequired fieldId="form-expandable-field-group3-label1">
-            <TextInput
-              isRequired
-              id="form-expandable-field-group3-label1"
-              name="form-expandable-field-group3-label1"
-              value={value13}
-              onChange={value => {
-                this.handleTextInputChange({ value13: value });
-              }}
-            />
-          </FormGroup>
-          <FormGroup label="Label 2" isRequired fieldId="form-expandable-field-group3-label2">
-            <TextInput
-              isRequired
-              id="form-expandable-field-group3-label2"
-              name="form-expandable-field-group3-label2"
-              value={value14}
-              onChange={value => {
-                this.handleTextInputChange({ value14: value });
-              }}
-            />
-          </FormGroup>
-          <FormFieldGroup
-            header={
-              <FormFieldGroupHeader
-                titleText={{
-                  text: 'Nested field group 1 (non-expandable)',
-                  id: 'nested-field-group1-non-expandable-titleText-id'
-                }}
-              />
-            }
-          >
-            <FormGroup label="Label 1" isRequired fieldId="form-expandable-field-groups-field-group7-label1">
-              <TextInput
-                isRequired
-                id="form-expandable-field-groups-field-group7-label1"
-                name="form-expandable-field-groups-field-group7-label1"
-                value={value15}
-                onChange={value => {
-                  this.handleTextInputChange({ value15: value });
-                }}
-              />
-            </FormGroup>
-            <FormGroup label="Label 2" isRequired fieldId="form-expandable-field-groups-field-group7-label2">
-              <TextInput
-                isRequired
-                id="form-expandable-field-groups-field-group7-label2"
-                name="form-expandable-field-groups-field-group7-label2"
-                value={value16}
-                onChange={value => {
-                  this.handleTextInputChange({ value16: value });
-                }}
-              />
-            </FormGroup>
-          </FormFieldGroup>
-          <FormFieldGroup
-            header={
-              <FormFieldGroupHeader
-                titleText={{
-                  text: 'Nested field group 2 (non-expandable)',
-                  id: 'nested-field-group2-non-expandable-titleText-id'
-                }}
-                titleDescription="Field group 2 description text."
-              />
-            }
-          >
-            <FormGroup label="Label 1" isRequired fieldId="form-expandable-field-groups-field-group8-label1">
-              <TextInput
-                isRequired
-                id="form-expandable-field-groups-field-group8-label1"
-                name="form-expandable-field-groups-field-group8-label1"
-                value={value17}
-                onChange={value => {
-                  this.handleTextInputChange({ value17: value });
-                }}
-              />
-            </FormGroup>
-            <FormGroup label="Label 2" isRequired fieldId="form-expandable-field-groups-field-group8-label2">
-              <TextInput
-                isRequired
-                id="form-expandable-field-groups-field-group8-label2"
-                name="form-expandable-field-groups-field-group8-label2"
-                value={value18}
-                onChange={value => {
-                  this.handleTextInputChange({ value18: value });
-                }}
-              />
-            </FormGroup>
-          </FormFieldGroup>
-        </FormFieldGroupExpandable>
-        <FormFieldGroup
-          header={
-            <FormFieldGroupHeader
-              titleText={{ text: 'Field group 4 (non-expandable)', id: 'field-group4-non-expandable-titleText-id' }}
-              titleDescription="Field group 4 description text."
-              actions={
-                <>
-                  <Button variant="link">Delete all</Button> <Button variant="secondary">Add parameter</Button>
-                </>
-              }
-            />
-          }
-        >
-          <FormGroup
-            label="Label 1"
-            isRequired
-            fieldId="form-expandable-field-groupsform-expandable-field-groups-field-group10-label1"
-          >
-            <TextInput
-              isRequired
-              id="form-expandable-field-groupsform-expandable-field-groups-field-group10-label1"
-              name="form-expandable-field-groupsform-expandable-field-groups-field-group10-label1"
-              value={value19}
-              onChange={value => {
-                this.handleTextInputChange({ value19: value });
-              }}
-            />
-          </FormGroup>
-          <FormGroup
-            label="Label 2"
-            isRequired
-            fieldId="form-expandable-field-groupsform-expandable-field-groups-field-group10-label2"
-          >
-            <TextInput
-              isRequired
-              id="form-expandable-field-groupsform-expandable-field-groups-field-group10-label2"
-              name="form-expandable-field-groupsform-expandable-field-groups-field-group10-label2"
-              value={value20}
-              onChange={value => {
-                this.handleTextInputChange({ value20: value });
-              }}
-            />
-          </FormGroup>
-        </FormFieldGroup>
-        <FormGroup label="Label 3" isRequired fieldId="form-expandable-field-groups-label3">
-          <TextInput
-            isRequired
-            id="form-expandable-field-groups-label3"
-            name="form-expandable-field-groups-label3"
-            value={value21}
-            onChange={value => {
-              this.handleTextInputChange({ value21: value });
-            }}
-          />
-        </FormGroup>
-        <FormGroup label="Label 4" isRequired fieldId="form-expandable-field-groups-label4">
-          <TextInput
-            isRequired
-            id="form-expandable-field-groups-label4"
-            name="form-expandable-field-groups-label4"
-            value={value22}
-            onChange={value => {
-              this.handleTextInputChange({ value22: value });
-            }}
-          />
-        </FormGroup>
-      </Form>
-    );
-  }
-}
+```ts file="./FormFieldGroups.tsx"
 ```
diff --git a/packages/react-core/src/components/Form/examples/FormBasic.tsx b/packages/react-core/src/components/Form/examples/FormBasic.tsx
new file mode 100644
index 00000000000..a60f1372b32
--- /dev/null
+++ b/packages/react-core/src/components/Form/examples/FormBasic.tsx
@@ -0,0 +1,122 @@
+import React from 'react';
+import { Form, FormGroup, TextInput, Checkbox, Popover, ActionGroup, Button, Radio } from '@patternfly/react-core';
+import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
+
+export const SimpleForm: React.FunctionComponent = () => {
+  const [name, setName] = React.useState('');
+  const [email, setEmail] = React.useState('');
+  const [phone, setPhone] = React.useState('');
+
+  const handleNameChange = (name: string) => {
+    setName(name);
+  };
+
+  const handleEmailChange = (email: string) => {
+    setEmail(email);
+  };
+
+  const handlePhoneChange = (phone: string) => {
+    setPhone(phone);
+  };
+
+  return (
+    <Form>
+      <FormGroup
+        label="Full name"
+        labelIcon={
+          <Popover
+            headerContent={
+              <div>
+                The{' '}
+                <a href="https://schema.org/name" target="_blank" rel="noreferrer">
+                  name
+                </a>{' '}
+                of a{' '}
+                <a href="https://schema.org/Person" target="_blank" rel="noreferrer">
+                  Person
+                </a>
+              </div>
+            }
+            bodyContent={
+              <div>
+                Often composed of{' '}
+                <a href="https://schema.org/givenName" target="_blank" rel="noreferrer">
+                  givenName
+                </a>{' '}
+                and{' '}
+                <a href="https://schema.org/familyName" target="_blank" rel="noreferrer">
+                  familyName
+                </a>
+                .
+              </div>
+            }
+          >
+            <button
+              type="button"
+              aria-label="More info for name field"
+              onClick={e => e.preventDefault()}
+              aria-describedby="simple-form-name-01"
+              className="pf-c-form__group-label-help"
+            >
+              <HelpIcon noVerticalAlign />
+            </button>
+          </Popover>
+        }
+        isRequired
+        fieldId="simple-form-name-01"
+        helperText="Include your middle name if you have one."
+      >
+        <TextInput
+          isRequired
+          type="text"
+          id="simple-form-name-01"
+          name="simple-form-name-01"
+          aria-describedby="simple-form-name-01-helper"
+          value={name}
+          onChange={handleNameChange}
+        />
+      </FormGroup>
+      <FormGroup label="Email" isRequired fieldId="simple-form-email-01">
+        <TextInput
+          isRequired
+          type="email"
+          id="simple-form-email-01"
+          name="simple-form-email-01"
+          value={email}
+          onChange={handleEmailChange}
+        />
+      </FormGroup>
+      <FormGroup label="Phone number" isRequired fieldId="simple-form-phone-01">
+        <TextInput
+          isRequired
+          type="tel"
+          id="simple-form-phone-01"
+          name="simple-form-phone-01"
+          placeholder="555-555-5555"
+          value={phone}
+          onChange={handlePhoneChange}
+        />
+      </FormGroup>
+      <FormGroup role="group" isInline label="How can we contact you?">
+        <Checkbox label="Email" aria-label="Email" id="inlinecheck01" />
+        <Checkbox label="Phone" aria-label="Phone" id="inlinecheck02" />
+        <Checkbox label="Mail" aria-label="Mail" id="inlinecheck03" />
+      </FormGroup>
+      <FormGroup role="radiogroup" isInline label="Time zone">
+        <Radio name="basic-inline-radio" label="Eastern" id="basic-inline-radio-01" />
+        <Radio name="basic-inline-radio" label="Central" id="basic-inline-radio-02" />
+        <Radio name="basic-inline-radio" label="Pacific" id="basic-inline-radio-03" />
+      </FormGroup>
+      <FormGroup label="Additional note" fieldId="simple-form-note-01">
+        <TextInput isDisabled type="text" id="simple-form-note-01" name="simple-form-number" value="disabled" />
+      </FormGroup>
+      <FormGroup fieldId="checkbox01">
+        <Checkbox label="I'd like updates via email." id="checkbox01" name="checkbox01" aria-label="Update via email" />
+      </FormGroup>
+      <ActionGroup>
+        <Button variant="primary">Submit</Button>
+        <Button variant="link">Cancel</Button>
+      </ActionGroup>
+    </Form>
+  );
+};
diff --git a/packages/react-core/src/components/Form/examples/FormFieldGroups.tsx b/packages/react-core/src/components/Form/examples/FormFieldGroups.tsx
new file mode 100644
index 00000000000..5b9afbf45ff
--- /dev/null
+++ b/packages/react-core/src/components/Form/examples/FormFieldGroups.tsx
@@ -0,0 +1,324 @@
+import React from 'react';
+import {
+  Form,
+  FormGroup,
+  FormFieldGroup,
+  FormFieldGroupExpandable,
+  FormFieldGroupHeader,
+  TextInput,
+  Button
+} from '@patternfly/react-core';
+import TrashIcon from '@patternfly/react-icons/dist/esm/icons/trash-icon';
+
+export const FieldGroups: React.FunctionComponent = () => {
+  const initialValues = {
+    '0-label1': '',
+    '0-label2': '',
+    '1-expanded-group1-label1': '',
+    '1-expanded-group1-label2': '',
+    '1-expanded-group2-label1': '',
+    '1-expanded-group2-label2': '',
+    '1-expanded-group3-label1': '',
+    '1-expanded-group3-label2': '',
+    '1-group1-label1': '',
+    '1-group1-label2': '',
+    '2-label1': '',
+    '2-label2': '',
+    '3-label1': '',
+    '3-label2': '',
+    '3-nonexpand-group1-label1': '',
+    '3-nonexpand-group1-label2': '',
+    '3-nonexpand-group2-label1': '',
+    '3-nonexpand-group2-label2': '',
+    '4-nonexpand-label1': '',
+    '4-nonexpand-label2': '',
+    '0-label3': '',
+    '0-label4': ''
+  };
+
+  const [inputValues, setInputValues] = React.useState(initialValues);
+
+  const handleChange = (value: string, event: React.FormEvent<HTMLInputElement>) => {
+    const { name } = event.currentTarget;
+    setInputValues({ ...inputValues, [name]: value });
+  };
+
+  return (
+    <Form>
+      <FormGroup label="Label 1" isRequired fieldId="0-label1">
+        <TextInput isRequired id="0-label1" name="0-label1" value={inputValues['0-label1']} onChange={handleChange} />
+      </FormGroup>
+      <FormGroup label="Label 2" isRequired fieldId="0-label2">
+        <TextInput isRequired id="0-label2" name="0-label2" value={inputValues['0-label2']} onChange={handleChange} />
+      </FormGroup>
+      <FormFieldGroupExpandable
+        isExpanded
+        toggleAriaLabel="Details"
+        header={
+          <FormFieldGroupHeader
+            titleText={{ text: 'Field group 1', id: 'field-group1-titleText-id' }}
+            titleDescription="Field group 1 description text."
+            actions={
+              <>
+                <Button variant="link">Delete all</Button> <Button variant="secondary">Add parameter</Button>
+              </>
+            }
+          />
+        }
+      >
+        <FormFieldGroupExpandable
+          isExpanded
+          toggleAriaLabel="Details"
+          header={
+            <FormFieldGroupHeader
+              titleText={{ text: 'Nested field group 1', id: 'nested-field-group1-titleText-id' }}
+              titleDescription="Nested field group 1 description text."
+              actions={
+                <Button variant="plain" aria-label="Remove">
+                  <TrashIcon />
+                </Button>
+              }
+            />
+          }
+        >
+          <FormGroup label="Label 1" isRequired fieldId="1-expanded-group1-label1">
+            <TextInput
+              isRequired
+              id="1-expanded-group1-label1"
+              name="1-expanded-group1-label1"
+              value={inputValues['1-expanded-group1-label1']}
+              onChange={handleChange}
+            />
+          </FormGroup>
+          <FormGroup label="Label 2" isRequired fieldId="1-expanded-group1-label2">
+            <TextInput
+              isRequired
+              id="1-expanded-group1-label2"
+              name="1-expanded-group1-label2"
+              value={inputValues['1-expanded-group1-label2']}
+              onChange={handleChange}
+            />
+          </FormGroup>
+        </FormFieldGroupExpandable>
+        <FormFieldGroupExpandable
+          toggleAriaLabel="Details"
+          header={
+            <FormFieldGroupHeader
+              titleText={{ text: 'Nested field group 2', id: 'nested-field-group2-titleText-id' }}
+              actions={
+                <Button variant="plain" aria-label="Remove">
+                  <TrashIcon />
+                </Button>
+              }
+            />
+          }
+        >
+          <FormGroup label="Label 1" isRequired fieldId="1-expanded-group2-label1">
+            <TextInput
+              isRequired
+              id="1-expanded-group2-label1"
+              name="1-expanded-group2-label1"
+              value={inputValues['1-expanded-group2-label1']}
+              onChange={handleChange}
+            />
+          </FormGroup>
+          <FormGroup label="Label 2" isRequired fieldId="1-expanded-group2-label2">
+            <TextInput
+              isRequired
+              id="1-expanded-group2-label2"
+              name="1-expanded-group2-label2"
+              value={inputValues['1-expanded-group2-label2']}
+              onChange={handleChange}
+            />
+          </FormGroup>
+        </FormFieldGroupExpandable>
+        <FormFieldGroupExpandable
+          toggleAriaLabel="Details"
+          header={
+            <FormFieldGroupHeader
+              titleText={{ text: 'Nested field group 3', id: 'nested-field-group3-titleText-id' }}
+              titleDescription="Field group 3 description text."
+              actions={
+                <Button variant="plain" aria-label="Remove">
+                  <TrashIcon />
+                </Button>
+              }
+            />
+          }
+        >
+          <FormGroup label="Label 1" isRequired fieldId="1-expanded-group3-label1">
+            <TextInput
+              isRequired
+              id="1-expanded-group3-label1"
+              name="1-expanded-group3-label1"
+              value={inputValues['1-expanded-group3-label1']}
+              onChange={handleChange}
+            />
+          </FormGroup>
+          <FormGroup label="Label 2" isRequired fieldId="1-expanded-group3-label2">
+            <TextInput
+              isRequired
+              id="1-expanded-group3-label2"
+              name="1-expanded-group3-label2"
+              value={inputValues['1-expanded-group3-label2']}
+              onChange={handleChange}
+            />
+          </FormGroup>
+        </FormFieldGroupExpandable>
+        <FormGroup label="Label 1" isRequired fieldId="1-group1-label1">
+          <TextInput
+            isRequired
+            id="1-group1-label1"
+            name="1-group1-label1"
+            value={inputValues['1-group1-label1']}
+            onChange={handleChange}
+          />
+        </FormGroup>
+        <FormGroup label="Label 2" isRequired fieldId="1-group1-label2">
+          <TextInput
+            isRequired
+            id="1-group1-label2"
+            name="1-group1-label2"
+            value={inputValues['1-group1-label2']}
+            onChange={handleChange}
+          />
+        </FormGroup>
+      </FormFieldGroupExpandable>
+      <FormFieldGroupExpandable
+        toggleAriaLabel="Details"
+        header={
+          <FormFieldGroupHeader
+            titleText={{ text: 'Field group 2', id: 'field-group2-titleText-id' }}
+            titleDescription="Field group 2 description text."
+            actions={
+              <>
+                <Button variant="link">Delete all</Button> <Button variant="secondary">Add parameter</Button>
+              </>
+            }
+          />
+        }
+      >
+        <FormGroup label="Label 1" isRequired fieldId="2-label1">
+          <TextInput isRequired id="2-label1" name="2-label1" value={inputValues['2-label1']} onChange={handleChange} />
+        </FormGroup>
+        <FormGroup label="Label 2" isRequired fieldId="2-label2">
+          <TextInput isRequired id="2-label2" name="2-label2" value={inputValues['2-label2']} onChange={handleChange} />
+        </FormGroup>
+      </FormFieldGroupExpandable>
+      <FormFieldGroupExpandable
+        isExpanded
+        toggleAriaLabel="Details"
+        header={
+          <FormFieldGroupHeader
+            titleText={{ text: 'Field group 3', id: 'field-group3-titleText-id' }}
+            titleDescription="Field group 3 description text."
+          />
+        }
+      >
+        <FormGroup label="Label 1" isRequired fieldId="3-label1">
+          <TextInput isRequired id="3-label1" name="3-label1" value={inputValues['3-label1']} onChange={handleChange} />
+        </FormGroup>
+        <FormGroup label="Label 2" isRequired fieldId="3-label2">
+          <TextInput isRequired id="3-label2" name="3-label2" value={inputValues['3-label2']} onChange={handleChange} />
+        </FormGroup>
+        <FormFieldGroup
+          header={
+            <FormFieldGroupHeader
+              titleText={{
+                text: 'Nested field group 1 (non-expandable)',
+                id: 'nested-field-group1-non-expandable-titleText-id'
+              }}
+            />
+          }
+        >
+          <FormGroup label="Label 1" isRequired fieldId="3-nonexpand-group1-label1">
+            <TextInput
+              isRequired
+              id="3-nonexpand-group1-label1"
+              name="3-nonexpand-group1-label1"
+              value={inputValues['3-nonexpand-group1-label1']}
+              onChange={handleChange}
+            />
+          </FormGroup>
+          <FormGroup label="Label 2" isRequired fieldId="3-nonexpand-group1-label2">
+            <TextInput
+              isRequired
+              id="3-nonexpand-group1-label2"
+              name="3-nonexpand-group1-label2"
+              value={inputValues['3-nonexpand-group1-label2']}
+              onChange={handleChange}
+            />
+          </FormGroup>
+        </FormFieldGroup>
+        <FormFieldGroup
+          header={
+            <FormFieldGroupHeader
+              titleText={{
+                text: 'Nested field group 2 (non-expandable)',
+                id: 'nested-field-group2-non-expandable-titleText-id'
+              }}
+              titleDescription="Field group 2 description text."
+            />
+          }
+        >
+          <FormGroup label="Label 1" isRequired fieldId="3-nonexpand-group2-label1">
+            <TextInput
+              isRequired
+              id="3-nonexpand-group2-label1"
+              name="3-nonexpand-group2-label1"
+              value={inputValues['3-nonexpand-group2-label1']}
+              onChange={handleChange}
+            />
+          </FormGroup>
+          <FormGroup label="Label 2" isRequired fieldId="3-nonexpand-group2-label2">
+            <TextInput
+              isRequired
+              id="3-nonexpand-group2-label2"
+              name="3-nonexpand-group2-label2"
+              value={inputValues['3-nonexpand-group2-label2']}
+              onChange={handleChange}
+            />
+          </FormGroup>
+        </FormFieldGroup>
+      </FormFieldGroupExpandable>
+      <FormFieldGroup
+        header={
+          <FormFieldGroupHeader
+            titleText={{ text: 'Field group 4 (non-expandable)', id: 'field-group4-non-expandable-titleText-id' }}
+            titleDescription="Field group 4 description text."
+            actions={
+              <>
+                <Button variant="link">Delete all</Button> <Button variant="secondary">Add parameter</Button>
+              </>
+            }
+          />
+        }
+      >
+        <FormGroup label="Label 1" isRequired fieldId="4-nonexpand-label1">
+          <TextInput
+            isRequired
+            id="4-nonexpand-label1"
+            name="4-nonexpand-label1"
+            value={inputValues['4-nonexpand-label1']}
+            onChange={handleChange}
+          />
+        </FormGroup>
+        <FormGroup label="Label 2" isRequired fieldId="4-nonexpand-label2">
+          <TextInput
+            isRequired
+            id="4-nonexpand-label2"
+            name="4-nonexpand-label2"
+            value={inputValues['4-nonexpand-label2']}
+            onChange={handleChange}
+          />
+        </FormGroup>
+      </FormFieldGroup>
+      <FormGroup label="Label 3" isRequired fieldId="0-label3">
+        <TextInput isRequired id="0-label3" name="0-label3" value={inputValues['0-label3']} onChange={handleChange} />
+      </FormGroup>
+      <FormGroup label="Label 4" isRequired fieldId="0-label4">
+        <TextInput isRequired id="0-label4" name="0-label4" value={inputValues['0-label4']} onChange={handleChange} />
+      </FormGroup>
+    </Form>
+  );
+};
diff --git a/packages/react-core/src/components/Form/examples/FormGrid.tsx b/packages/react-core/src/components/Form/examples/FormGrid.tsx
new file mode 100644
index 00000000000..0346b3668c6
--- /dev/null
+++ b/packages/react-core/src/components/Form/examples/FormGrid.tsx
@@ -0,0 +1,66 @@
+import React from 'react';
+import { Form, FormGroup, TextInput, Grid, GridItem } from '@patternfly/react-core';
+
+export const SimpleForm: React.FunctionComponent = () => {
+  const [name, setName] = React.useState('');
+  const [email, setEmail] = React.useState('');
+  const [phone, setPhone] = React.useState('');
+
+  const handleNameChange = (name: string) => {
+    setName(name);
+  };
+
+  const handleEmailChange = (email: string) => {
+    setEmail(email);
+  };
+
+  const handlePhoneChange = (phone: string) => {
+    setPhone(phone);
+  };
+
+  return (
+    <Form>
+      <Grid hasGutter md={6}>
+        <GridItem span={12}>
+          <FormGroup
+            label="Full name"
+            isRequired
+            fieldId="grid-form-name-01"
+            helperText="Include your middle name if you have one."
+          >
+            <TextInput
+              isRequired
+              type="text"
+              id="grid-form-name-01"
+              name="grid-form-name-01"
+              aria-describedby="grid-form-name-01-helper"
+              value={name}
+              onChange={handleNameChange}
+            />
+          </FormGroup>
+        </GridItem>
+        <FormGroup label="Email" isRequired fieldId="grid-form-email-01">
+          <TextInput
+            isRequired
+            type="email"
+            id="grid-form-email-01"
+            name="grid-form-email-01"
+            value={email}
+            onChange={handleEmailChange}
+          />
+        </FormGroup>
+        <FormGroup label="Phone number" isRequired fieldId="grid-form-number-01">
+          <TextInput
+            isRequired
+            type="tel"
+            id="grid-form-number-01"
+            placeholder="555-555-5555"
+            name="grid-form-number-01"
+            value={phone}
+            onChange={handlePhoneChange}
+          />
+        </FormGroup>
+      </Grid>
+    </Form>
+  );
+};
diff --git a/packages/react-core/src/components/Form/examples/FormGroupLabelInfo.tsx b/packages/react-core/src/components/Form/examples/FormGroupLabelInfo.tsx
new file mode 100644
index 00000000000..cdbca250654
--- /dev/null
+++ b/packages/react-core/src/components/Form/examples/FormGroupLabelInfo.tsx
@@ -0,0 +1,72 @@
+import React from 'react';
+import { Form, FormGroup, TextInput, Popover } from '@patternfly/react-core';
+import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
+
+export const FormGroupLabelInfo: React.FunctionComponent = () => {
+  const [name, setName] = React.useState('');
+
+  const handleNameChange = (name: string, _event: React.FormEvent<HTMLInputElement>) => {
+    setName(name);
+  };
+
+  return (
+    <Form>
+      <FormGroup
+        label="Full name"
+        labelInfo="Additional label info"
+        labelIcon={
+          <Popover
+            headerContent={
+              <div>
+                The{' '}
+                <a href="https://schema.org/name" target="_blank" rel="noreferrer">
+                  name
+                </a>{' '}
+                of a{' '}
+                <a href="https://schema.org/Person" target="_blank" rel="noreferrer">
+                  Person
+                </a>
+              </div>
+            }
+            bodyContent={
+              <div>
+                Often composed of{' '}
+                <a href="https://schema.org/givenName" target="_blank" rel="noreferrer">
+                  givenName
+                </a>{' '}
+                and{' '}
+                <a href="https://schema.org/familyName" target="_blank" rel="noreferrer">
+                  familyName
+                </a>
+                .
+              </div>
+            }
+          >
+            <button
+              type="button"
+              aria-label="More info for name field"
+              onClick={e => e.preventDefault()}
+              aria-describedby="form-group-label-info"
+              className="pf-c-form__group-label-help"
+            >
+              <HelpIcon noVerticalAlign />
+            </button>
+          </Popover>
+        }
+        isRequired
+        fieldId="form-group-label-info"
+        helperText="Include your middle name if you have one."
+      >
+        <TextInput
+          isRequired
+          type="text"
+          id="form-group-label-info"
+          name="form-group-label-info"
+          aria-describedby="form-group-label-info-helper"
+          value={name}
+          onChange={handleNameChange}
+        />
+      </FormGroup>
+    </Form>
+  );
+};
diff --git a/packages/react-core/src/components/Form/examples/FormHorizontal.tsx b/packages/react-core/src/components/Form/examples/FormHorizontal.tsx
new file mode 100644
index 00000000000..519b15301e5
--- /dev/null
+++ b/packages/react-core/src/components/Form/examples/FormHorizontal.tsx
@@ -0,0 +1,112 @@
+import React from 'react';
+import {
+  Form,
+  FormGroup,
+  TextInput,
+  TextArea,
+  FormSelect,
+  FormSelectOption,
+  Checkbox,
+  ActionGroup,
+  Button,
+  Radio
+} from '@patternfly/react-core';
+
+export const HorizontalForm: React.FunctionComponent = () => {
+  const [name, setName] = React.useState('');
+  const [email, setEmail] = React.useState('');
+  const [experience, setExperience] = React.useState('');
+  const [option, setOption] = React.useState('please choose');
+
+  const handleNameChange = (name: string) => {
+    setName(name);
+  };
+
+  const handleEmailChange = (email: string) => {
+    setEmail(email);
+  };
+
+  const handleExperienceChange = (experience: string) => {
+    setExperience(experience);
+  };
+
+  const handleOptionChange = (value: string, _event: React.FormEvent<HTMLSelectElement>) => {
+    setOption(value);
+  };
+
+  const options = [
+    { value: 'select one', label: 'Select one', disabled: false },
+    { value: 'mr', label: 'Mr', disabled: false },
+    { value: 'miss', label: 'Miss', disabled: false },
+    { value: 'mrs', label: 'Mrs', disabled: false },
+    { value: 'ms', label: 'Ms', disabled: false },
+    { value: 'dr', label: 'Dr', disabled: false },
+    { value: 'other', label: 'Other', disabled: false }
+  ];
+
+  return (
+    <Form isHorizontal>
+      <FormGroup
+        label="Full name"
+        isRequired
+        fieldId="horizontal-form-name"
+        helperText="Include your middle name if you have one."
+      >
+        <TextInput
+          value={name}
+          isRequired
+          type="text"
+          id="horizontal-form-name"
+          aria-describedby="horizontal-form-name-helper"
+          name="horizontal-form-name"
+          onChange={handleNameChange}
+        />
+      </FormGroup>
+      <FormGroup label="Email" isRequired fieldId="horizontal-form-email">
+        <TextInput
+          value={email}
+          isRequired
+          type="email"
+          id="horizontal-form-email"
+          name="horizontal-form-email"
+          onChange={handleEmailChange}
+        />
+      </FormGroup>
+      <FormGroup label="Your title" fieldId="horizontal-form-title">
+        <FormSelect
+          value={option}
+          onChange={handleOptionChange}
+          id="horizontal-form-title"
+          name="horizontal-form-title"
+          aria-label="Your title"
+        >
+          {options.map((option, index) => (
+            <FormSelectOption isDisabled={option.disabled} key={index} value={option.value} label={option.label} />
+          ))}
+        </FormSelect>
+      </FormGroup>
+      <FormGroup label="Your experience" fieldId="horizontal-form-exp">
+        <TextArea
+          value={experience}
+          onChange={handleExperienceChange}
+          id="horizontal-form-exp"
+          name="horizontal-form-exp"
+        />
+      </FormGroup>
+      <FormGroup label="How can we contact you?" isStack hasNoPaddingTop role="group">
+        <Checkbox label="Email" id="alt-form-checkbox-1" name="alt-form-checkbox-1" />
+        <Checkbox label="Phone" id="alt-form-checkbox-2" name="alt-form-checkbox-2" />
+        <Checkbox label="Mail" id="alt-form-checkbox-3" name="alt-form-checkbox-3" />
+      </FormGroup>
+      <FormGroup role="radiogroup" isStack hasNoPaddingTop label="Time zone">
+        <Radio name="horizontal-inline-radio" label="Eastern" id="horizontal-inline-radio-01" />
+        <Radio name="horizontal-inline-radio" label="Central" id="horizontal-inline-radio-02" />
+        <Radio name="horizontal-inline-radio" label="Pacific" id="horizontal-inline-radio-03" />
+      </FormGroup>
+      <ActionGroup>
+        <Button variant="primary">Submit</Button>
+        <Button variant="link">Cancel</Button>
+      </ActionGroup>
+    </Form>
+  );
+};
diff --git a/packages/react-core/src/components/Form/examples/FormHorizontalHelper.tsx b/packages/react-core/src/components/Form/examples/FormHorizontalHelper.tsx
new file mode 100644
index 00000000000..7c6ee84e517
--- /dev/null
+++ b/packages/react-core/src/components/Form/examples/FormHorizontalHelper.tsx
@@ -0,0 +1,15 @@
+import React from 'react';
+import { Form, FormGroup, Checkbox } from '@patternfly/react-core';
+
+export const HorizontalFormHelperTextOnTop: React.FunctionComponent = () => {
+  const [helperText] = React.useState('Select all that apply:');
+
+  return (
+    <Form isHorizontal>
+      <FormGroup label="Label" helperText={helperText} isHelperTextBeforeField hasNoPaddingTop isStack role="group">
+        <Checkbox label="Option 1" id="option-03" />
+        <Checkbox label="Option 2" id="option-04" />
+      </FormGroup>
+    </Form>
+  );
+};
diff --git a/packages/react-core/src/components/Form/examples/FormHorizontalStacked.tsx b/packages/react-core/src/components/Form/examples/FormHorizontalStacked.tsx
new file mode 100644
index 00000000000..94b816b4960
--- /dev/null
+++ b/packages/react-core/src/components/Form/examples/FormHorizontalStacked.tsx
@@ -0,0 +1,11 @@
+import React from 'react';
+import { Form, FormGroup, Checkbox } from '@patternfly/react-core';
+
+export const HorizontalForm: React.FunctionComponent = () => (
+  <Form isHorizontal>
+    <FormGroup role="group" label="Label" hasNoPaddingTop isStack>
+      <Checkbox label="option 1" id="option-01" />
+      <Checkbox label="option 2" id="option-02" />
+    </FormGroup>
+  </Form>
+);
diff --git a/packages/react-core/src/components/Form/examples/FormInvalid.tsx b/packages/react-core/src/components/Form/examples/FormInvalid.tsx
new file mode 100644
index 00000000000..a6934112861
--- /dev/null
+++ b/packages/react-core/src/components/Form/examples/FormInvalid.tsx
@@ -0,0 +1,47 @@
+import React from 'react';
+import { Form, FormGroup, TextInput, FormHelperText } from '@patternfly/react-core';
+import ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon';
+
+export const InvalidForm: React.FunctionComponent = () => {
+  type validate = 'success' | 'warning' | 'error' | 'default';
+
+  const [age, setAge] = React.useState('Five');
+  const [validated, setValidated] = React.useState<validate>('error');
+
+  const handleAgeChange = (age: string, _event: React.FormEvent<HTMLInputElement>) => {
+    setAge(age);
+    if (age === '') {
+      setValidated('default');
+    } else if (/^\d+$/.test(age)) {
+      setValidated('success');
+    } else {
+      setValidated('error');
+    }
+  };
+
+  return (
+    <Form>
+      <FormGroup
+        label="Age"
+        type="number"
+        helperText={
+          <FormHelperText icon={<ExclamationCircleIcon />} isHidden={validated !== 'default'}>
+            Please enter your age
+          </FormHelperText>
+        }
+        helperTextInvalid="Must be a number"
+        helperTextInvalidIcon={<ExclamationCircleIcon />}
+        fieldId="age-1"
+        validated={validated}
+      >
+        <TextInput
+          validated={validated}
+          value={age}
+          id="age-1"
+          aria-describedby="age-1-helper"
+          onChange={handleAgeChange}
+        />
+      </FormGroup>
+    </Form>
+  );
+};
diff --git a/packages/react-core/src/components/Form/examples/FormInvalidWithFormAlert.tsx b/packages/react-core/src/components/Form/examples/FormInvalidWithFormAlert.tsx
new file mode 100644
index 00000000000..ea1a189c528
--- /dev/null
+++ b/packages/react-core/src/components/Form/examples/FormInvalidWithFormAlert.tsx
@@ -0,0 +1,52 @@
+import React from 'react';
+import { Alert, Form, FormAlert, FormGroup, TextInput, FormHelperText } from '@patternfly/react-core';
+import ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon';
+
+export const InvalidFormWithAlert: React.FunctionComponent = () => {
+  type validate = 'success' | 'warning' | 'error' | 'default';
+
+  const [age, setAge] = React.useState('Five');
+  const [validated, setValidated] = React.useState<validate>('error');
+
+  const handleAgeChange = (age: string, _event: React.FormEvent<HTMLInputElement>) => {
+    setAge(age);
+    if (age === '') {
+      setValidated('default');
+    } else if (/^\d+$/.test(age)) {
+      setValidated('success');
+    } else {
+      setValidated('error');
+    }
+  };
+
+  return (
+    <Form>
+      {validated === 'error' && (
+        <FormAlert>
+          <Alert variant="danger" title="Fill out all required fields before continuing." aria-live="polite" isInline />
+        </FormAlert>
+      )}
+      <FormGroup
+        label="Age"
+        type="number"
+        helperText={
+          <FormHelperText icon={<ExclamationCircleIcon />} isHidden={validated !== 'default'}>
+            Please enter your age
+          </FormHelperText>
+        }
+        helperTextInvalid="Must be a number"
+        helperTextInvalidIcon={<ExclamationCircleIcon />}
+        fieldId="age-2"
+        validated={validated}
+      >
+        <TextInput
+          validated={validated}
+          value={age}
+          id="age-2"
+          aria-describedby="age-2-helper"
+          onChange={handleAgeChange}
+        />
+      </FormGroup>
+    </Form>
+  );
+};
diff --git a/packages/react-core/src/components/Form/examples/FormLimitWidth.tsx b/packages/react-core/src/components/Form/examples/FormLimitWidth.tsx
new file mode 100644
index 00000000000..030b3115045
--- /dev/null
+++ b/packages/react-core/src/components/Form/examples/FormLimitWidth.tsx
@@ -0,0 +1,122 @@
+import React from 'react';
+import { Form, FormGroup, TextInput, Checkbox, Popover, ActionGroup, Button, Radio } from '@patternfly/react-core';
+import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
+
+export const SimpleForm: React.FunctionComponent = () => {
+  const [name, setName] = React.useState('');
+  const [email, setEmail] = React.useState('');
+  const [phone, setPhone] = React.useState('');
+
+  const handleNameChange = (name: string) => {
+    setName(name);
+  };
+
+  const handleEmailChange = (email: string) => {
+    setEmail(email);
+  };
+
+  const handlePhoneChange = (phone: string) => {
+    setPhone(phone);
+  };
+
+  return (
+    <Form isWidthLimited>
+      <FormGroup
+        label="Full name"
+        labelIcon={
+          <Popover
+            headerContent={
+              <div>
+                The{' '}
+                <a href="https://schema.org/name" target="_blank" rel="noreferrer">
+                  name
+                </a>{' '}
+                of a{' '}
+                <a href="https://schema.org/Person" target="_blank" rel="noreferrer">
+                  Person
+                </a>
+              </div>
+            }
+            bodyContent={
+              <div>
+                Often composed of{' '}
+                <a href="https://schema.org/givenName" target="_blank" rel="noreferrer">
+                  givenName
+                </a>{' '}
+                and{' '}
+                <a href="https://schema.org/familyName" target="_blank" rel="noreferrer">
+                  familyName
+                </a>
+                .
+              </div>
+            }
+          >
+            <button
+              type="button"
+              aria-label="More info for name field"
+              onClick={e => e.preventDefault()}
+              aria-describedby="simple-form-name-02"
+              className="pf-c-form__group-label-help"
+            >
+              <HelpIcon noVerticalAlign />
+            </button>
+          </Popover>
+        }
+        isRequired
+        fieldId="simple-form-name-02"
+        helperText="Include your middle name if you have one."
+      >
+        <TextInput
+          isRequired
+          type="text"
+          id="simple-form-name-02"
+          name="simple-form-name-02"
+          aria-describedby="simple-form-name-02-helper"
+          value={name}
+          onChange={handleNameChange}
+        />
+      </FormGroup>
+      <FormGroup label="Email" isRequired fieldId="simple-form-email-02">
+        <TextInput
+          isRequired
+          type="email"
+          id="simple-form-email-02"
+          name="simple-form-email-02"
+          value={email}
+          onChange={handleEmailChange}
+        />
+      </FormGroup>
+      <FormGroup label="Phone number" isRequired fieldId="simple-form-number">
+        <TextInput
+          isRequired
+          type="tel"
+          placeholder="555-555-5555"
+          id="simple-form-number"
+          name="simple-form-number"
+          value={phone}
+          onChange={handlePhoneChange}
+        />
+      </FormGroup>
+      <FormGroup role="group" isInline label="How can we contact you?">
+        <Checkbox label="Email" aria-label="Email" id="inlinecheck04" />
+        <Checkbox label="Phone" aria-label="Phone" id="inlinecheck05" />
+        <Checkbox label="Mail" aria-label="Mail" id="inlinecheck06" />
+      </FormGroup>
+      <FormGroup role="radiogroup" isInline label="Time zone">
+        <Radio name="limit-width-radio" label="Eastern" id="limit-width-inline-radio-01" />
+        <Radio name="limit-width-radio" label="Central" id="limit-width-inline-radio-02" />
+        <Radio name="limit-width-radio" label="Pacific" id="limit-width-inline-radio-03" />
+      </FormGroup>
+      <FormGroup label="Additional note" fieldId="simple-form-note-02">
+        <TextInput isDisabled type="text" id="simple-form-note-02" name="simple-form-number" value="disabled" />
+      </FormGroup>
+      <FormGroup fieldId="checkbox02">
+        <Checkbox label="I'd like updates via email." id="checkbox02" name="checkbox02" aria-label="Update via email" />
+      </FormGroup>
+      <ActionGroup>
+        <Button variant="primary">Submit</Button>
+        <Button variant="link">Cancel</Button>
+      </ActionGroup>
+    </Form>
+  );
+};
diff --git a/packages/react-core/src/components/Form/examples/FormSections.tsx b/packages/react-core/src/components/Form/examples/FormSections.tsx
new file mode 100644
index 00000000000..f780e43ceee
--- /dev/null
+++ b/packages/react-core/src/components/Form/examples/FormSections.tsx
@@ -0,0 +1,44 @@
+import React from 'react';
+import { Form, FormGroup, FormSection, TextInput } from '@patternfly/react-core';
+
+export const FormSections: React.FunctionComponent = () => {
+  const [input1, setInput1] = React.useState('');
+  const [input2, setInput2] = React.useState('');
+
+  const handleInputChange1 = (input1: string, _event: React.FormEvent<HTMLInputElement>) => {
+    setInput1(input1);
+  };
+
+  const handleInputChange2 = (input2: string, _event: React.FormEvent<HTMLInputElement>) => {
+    setInput2(input2);
+  };
+
+  return (
+    <Form>
+      <FormSection>
+        <FormGroup label="Form section 1 input" isRequired fieldId="simple-form-section-1-input">
+          <TextInput
+            isRequired
+            type="text"
+            id="simple-form-section-1-input"
+            name="simple-form-section-1-input"
+            value={input1}
+            onChange={handleInputChange1}
+          />
+        </FormGroup>
+      </FormSection>
+      <FormSection title="Form section 2 (optional title)" titleElement="h2">
+        <FormGroup label="Form section 2 input" isRequired fieldId="simple-form-section-2-input">
+          <TextInput
+            isRequired
+            type="text"
+            id="simple-form-section-2-input"
+            name="simple-form-section-2-input"
+            value={input2}
+            onChange={handleInputChange2}
+          />
+        </FormGroup>
+      </FormSection>
+    </Form>
+  );
+};
diff --git a/packages/react-core/src/components/Form/examples/FormValidated.tsx b/packages/react-core/src/components/Form/examples/FormValidated.tsx
new file mode 100644
index 00000000000..7981f580f02
--- /dev/null
+++ b/packages/react-core/src/components/Form/examples/FormValidated.tsx
@@ -0,0 +1,60 @@
+import React from 'react';
+import { Form, FormGroup, TextInput } from '@patternfly/react-core';
+import ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon';
+
+export const InvalidForm: React.FunctionComponent = () => {
+  type validate = 'success' | 'warning' | 'error' | 'default';
+
+  const [age, setAge] = React.useState('Five');
+  const [invalidText, setInvalidText] = React.useState('Must be a number');
+  const [validated, setValidated] = React.useState<validate>('default');
+  const [helperText, setHelperText] = React.useState('Enter your age to continue');
+
+  const handleAgeChange = (age: string, _event: React.FormEvent<HTMLInputElement>) => {
+    setAge(age);
+    setValidated('default');
+    setHelperText('Validating...');
+  };
+
+  // useEffect is used to simulate a server call to validate the age 2000ms after the user has entered a value, preventing calling the server on every keystroke
+  React.useEffect(() => {
+    const timer = setTimeout(() => {
+      if (/^\d+$/.test(age)) {
+        if (parseInt(age) >= 21) {
+          setValidated('success');
+          setHelperText('Enjoy your stay');
+        } else {
+          setValidated('warning');
+          setHelperText('You must be at least 21 years old to continue');
+        }
+      } else {
+        setValidated('error');
+        setInvalidText('Must be a number');
+      }
+    }, 2000);
+
+    return () => clearTimeout(timer);
+  }, [age]);
+
+  return (
+    <Form>
+      <FormGroup
+        label="Age"
+        type="number"
+        helperText={helperText}
+        helperTextInvalid={invalidText}
+        helperTextInvalidIcon={<ExclamationCircleIcon />}
+        fieldId="age-3"
+        validated={validated}
+      >
+        <TextInput
+          validated={validated}
+          value={age}
+          id="age-3"
+          aria-describedby="age-3-helper"
+          onChange={handleAgeChange}
+        />
+      </FormGroup>
+    </Form>
+  );
+};

From a89f0836dd7789bfcc7b800aa55fbc7e79054291 Mon Sep 17 00:00:00 2001
From: Andy Vo <andyvo@bu.edu>
Date: Fri, 17 Jun 2022 20:35:18 -0400
Subject: [PATCH 2/4] chore(Form): added fieldId back to roles to define id and
 aria-labelledby

---
 .../src/components/Form/examples/FormBasic.tsx         |  4 ++--
 .../src/components/Form/examples/FormHorizontal.tsx    | 10 ++++++++--
 .../src/components/Form/examples/FormLimitWidth.tsx    |  4 ++--
 3 files changed, 12 insertions(+), 6 deletions(-)

diff --git a/packages/react-core/src/components/Form/examples/FormBasic.tsx b/packages/react-core/src/components/Form/examples/FormBasic.tsx
index a60f1372b32..63e768bc711 100644
--- a/packages/react-core/src/components/Form/examples/FormBasic.tsx
+++ b/packages/react-core/src/components/Form/examples/FormBasic.tsx
@@ -97,12 +97,12 @@ export const SimpleForm: React.FunctionComponent = () => {
           onChange={handlePhoneChange}
         />
       </FormGroup>
-      <FormGroup role="group" isInline label="How can we contact you?">
+      <FormGroup role="group" isInline fieldId="basic-form-checkbox-group" label="How can we contact you?">
         <Checkbox label="Email" aria-label="Email" id="inlinecheck01" />
         <Checkbox label="Phone" aria-label="Phone" id="inlinecheck02" />
         <Checkbox label="Mail" aria-label="Mail" id="inlinecheck03" />
       </FormGroup>
-      <FormGroup role="radiogroup" isInline label="Time zone">
+      <FormGroup role="radiogroup" isInline fieldId="basic-form-radio-group" label="Time zone">
         <Radio name="basic-inline-radio" label="Eastern" id="basic-inline-radio-01" />
         <Radio name="basic-inline-radio" label="Central" id="basic-inline-radio-02" />
         <Radio name="basic-inline-radio" label="Pacific" id="basic-inline-radio-03" />
diff --git a/packages/react-core/src/components/Form/examples/FormHorizontal.tsx b/packages/react-core/src/components/Form/examples/FormHorizontal.tsx
index 519b15301e5..a42d65d29d7 100644
--- a/packages/react-core/src/components/Form/examples/FormHorizontal.tsx
+++ b/packages/react-core/src/components/Form/examples/FormHorizontal.tsx
@@ -93,12 +93,18 @@ export const HorizontalForm: React.FunctionComponent = () => {
           name="horizontal-form-exp"
         />
       </FormGroup>
-      <FormGroup label="How can we contact you?" isStack hasNoPaddingTop role="group">
+      <FormGroup
+        label="How can we contact you?"
+        isStack
+        fieldId="horizontal-form-checkbox-group"
+        hasNoPaddingTop
+        role="group"
+      >
         <Checkbox label="Email" id="alt-form-checkbox-1" name="alt-form-checkbox-1" />
         <Checkbox label="Phone" id="alt-form-checkbox-2" name="alt-form-checkbox-2" />
         <Checkbox label="Mail" id="alt-form-checkbox-3" name="alt-form-checkbox-3" />
       </FormGroup>
-      <FormGroup role="radiogroup" isStack hasNoPaddingTop label="Time zone">
+      <FormGroup role="radiogroup" isStack fieldId="horizontal-form-radio-group" hasNoPaddingTop label="Time zone">
         <Radio name="horizontal-inline-radio" label="Eastern" id="horizontal-inline-radio-01" />
         <Radio name="horizontal-inline-radio" label="Central" id="horizontal-inline-radio-02" />
         <Radio name="horizontal-inline-radio" label="Pacific" id="horizontal-inline-radio-03" />
diff --git a/packages/react-core/src/components/Form/examples/FormLimitWidth.tsx b/packages/react-core/src/components/Form/examples/FormLimitWidth.tsx
index 030b3115045..b117a922506 100644
--- a/packages/react-core/src/components/Form/examples/FormLimitWidth.tsx
+++ b/packages/react-core/src/components/Form/examples/FormLimitWidth.tsx
@@ -97,12 +97,12 @@ export const SimpleForm: React.FunctionComponent = () => {
           onChange={handlePhoneChange}
         />
       </FormGroup>
-      <FormGroup role="group" isInline label="How can we contact you?">
+      <FormGroup role="group" isInline fieldId="limit-width-form-checkbox-group" label="How can we contact you?">
         <Checkbox label="Email" aria-label="Email" id="inlinecheck04" />
         <Checkbox label="Phone" aria-label="Phone" id="inlinecheck05" />
         <Checkbox label="Mail" aria-label="Mail" id="inlinecheck06" />
       </FormGroup>
-      <FormGroup role="radiogroup" isInline label="Time zone">
+      <FormGroup role="radiogroup" isInline fieldId="limit-width-form-radio-group" label="Time zone">
         <Radio name="limit-width-radio" label="Eastern" id="limit-width-inline-radio-01" />
         <Radio name="limit-width-radio" label="Central" id="limit-width-inline-radio-02" />
         <Radio name="limit-width-radio" label="Pacific" id="limit-width-inline-radio-03" />

From 709aa345beaa3e289359e07a8e0b61595289c0ee Mon Sep 17 00:00:00 2001
From: Andy Vo <andyvo@bu.edu>
Date: Thu, 23 Jun 2022 10:59:40 -0400
Subject: [PATCH 3/4] chore(Form): renamed form functions, updated fieldId
 desc, and added generate id for forms

---
 .../src/components/Form/FormGroup.tsx         | 69 +++++++++++--------
 .../components/Form/examples/FormBasic.tsx    |  2 +-
 .../Form/examples/FormFieldGroups.tsx         |  2 +-
 .../src/components/Form/examples/FormGrid.tsx |  2 +-
 .../Form/examples/FormGroupLabelInfo.tsx      |  1 -
 .../Form/examples/FormHorizontal.tsx          |  2 +-
 .../Form/examples/FormHorizontalHelper.tsx    | 12 +++-
 .../Form/examples/FormHorizontalStacked.tsx   |  4 +-
 .../components/Form/examples/FormInvalid.tsx  |  2 +-
 .../examples/FormInvalidWithFormAlert.tsx     |  2 +-
 .../Form/examples/FormLimitWidth.tsx          |  2 +-
 .../Form/examples/FormValidated.tsx           |  2 +-
 12 files changed, 61 insertions(+), 41 deletions(-)

diff --git a/packages/react-core/src/components/Form/FormGroup.tsx b/packages/react-core/src/components/Form/FormGroup.tsx
index 0bf029f3c75..2e60985b03d 100644
--- a/packages/react-core/src/components/Form/FormGroup.tsx
+++ b/packages/react-core/src/components/Form/FormGroup.tsx
@@ -3,6 +3,7 @@ import styles from '@patternfly/react-styles/css/components/Form/form';
 import { ASTERISK } from '../../helpers/htmlConstants';
 import { css } from '@patternfly/react-styles';
 import { ValidatedOptions } from '../../helpers/constants';
+import { GenerateId } from '../../helpers/GenerateId/GenerateId';
 
 export interface FormGroupProps extends Omit<React.HTMLProps<HTMLDivElement>, 'label'> {
   /** Anything that can be rendered as FormGroup content. */
@@ -39,7 +40,9 @@ export interface FormGroupProps extends Omit<React.HTMLProps<HTMLDivElement>, 'l
   helperTextIcon?: React.ReactNode;
   /** Icon displayed to the left of the helper text when the field is invalid. */
   helperTextInvalidIcon?: React.ReactNode;
-  /** ID of the included field. It has to be the same for proper working. */
+  /** ID of an individual field or a group of multiple fields. Required when a role of "group" or "radiogroup" is passed in.
+   * If only one field is included, its ID attribute and this prop must be the same.
+   */
   fieldId?: string;
   /** Sets the role of the form group. Pass in "radiogroup" when the form group contains multiple
    * radio inputs, or pass in "group" when the form group contains multiple of any other input type.
@@ -120,38 +123,48 @@ export const FormGroup: React.FunctionComponent<FormGroupProps> = ({
   );
 
   return (
-    <div
-      className={css(styles.formGroup, className)}
-      {...(role && { role })}
-      {...(isGroupOrRadioGroup && { 'aria-labelledby': `${fieldId}-legend` })}
-      {...props}
-    >
-      {label && (
+    <GenerateId>
+      {randomId => (
         <div
-          className={css(
-            styles.formGroupLabel,
-            labelInfo && styles.modifiers.info,
-            hasNoPaddingTop && styles.modifiers.noPaddingTop
-          )}
-          {...(isGroupOrRadioGroup && { id: `${fieldId}-legend` })}
+          className={css(styles.formGroup, className)}
+          {...(role && { role })}
+          {...(isGroupOrRadioGroup && { 'aria-labelledby': `${fieldId}-legend` })}
+          {...(!fieldId && { 'aria-labelledby': `${randomId}-legend` })}
+          {...props}
         >
-          {labelInfo && (
-            <React.Fragment>
-              <div className={css(styles.formGroupLabelMain)}>{labelContent}</div>
-              <div className={css(styles.formGroupLabelInfo)}>{labelInfo}</div>
-            </React.Fragment>
+          {label && (
+            <div
+              className={css(
+                styles.formGroupLabel,
+                labelInfo && styles.modifiers.info,
+                hasNoPaddingTop && styles.modifiers.noPaddingTop
+              )}
+              {...(isGroupOrRadioGroup && { id: `${fieldId}-legend` })}
+              {...(!fieldId && { id: `${randomId}-legend` })}
+            >
+              {labelInfo && (
+                <React.Fragment>
+                  <div className={css(styles.formGroupLabelMain)}>{labelContent}</div>
+                  <div className={css(styles.formGroupLabelInfo)}>{labelInfo}</div>
+                </React.Fragment>
+              )}
+              {!labelInfo && labelContent}
+            </div>
           )}
-          {!labelInfo && labelContent}
+          <div
+            className={css(
+              styles.formGroupControl,
+              isInline && styles.modifiers.inline,
+              isStack && styles.modifiers.stack
+            )}
+          >
+            {isHelperTextBeforeField && helperTextToDisplay}
+            {children}
+            {!isHelperTextBeforeField && helperTextToDisplay}
+          </div>
         </div>
       )}
-      <div
-        className={css(styles.formGroupControl, isInline && styles.modifiers.inline, isStack && styles.modifiers.stack)}
-      >
-        {isHelperTextBeforeField && helperTextToDisplay}
-        {children}
-        {!isHelperTextBeforeField && helperTextToDisplay}
-      </div>
-    </div>
+    </GenerateId>
   );
 };
 FormGroup.displayName = 'FormGroup';
diff --git a/packages/react-core/src/components/Form/examples/FormBasic.tsx b/packages/react-core/src/components/Form/examples/FormBasic.tsx
index 63e768bc711..4fb293b2f40 100644
--- a/packages/react-core/src/components/Form/examples/FormBasic.tsx
+++ b/packages/react-core/src/components/Form/examples/FormBasic.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { Form, FormGroup, TextInput, Checkbox, Popover, ActionGroup, Button, Radio } from '@patternfly/react-core';
 import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
 
-export const SimpleForm: React.FunctionComponent = () => {
+export const FormBasic: React.FunctionComponent = () => {
   const [name, setName] = React.useState('');
   const [email, setEmail] = React.useState('');
   const [phone, setPhone] = React.useState('');
diff --git a/packages/react-core/src/components/Form/examples/FormFieldGroups.tsx b/packages/react-core/src/components/Form/examples/FormFieldGroups.tsx
index 5b9afbf45ff..535143537c7 100644
--- a/packages/react-core/src/components/Form/examples/FormFieldGroups.tsx
+++ b/packages/react-core/src/components/Form/examples/FormFieldGroups.tsx
@@ -10,7 +10,7 @@ import {
 } from '@patternfly/react-core';
 import TrashIcon from '@patternfly/react-icons/dist/esm/icons/trash-icon';
 
-export const FieldGroups: React.FunctionComponent = () => {
+export const FormFieldGroups: React.FunctionComponent = () => {
   const initialValues = {
     '0-label1': '',
     '0-label2': '',
diff --git a/packages/react-core/src/components/Form/examples/FormGrid.tsx b/packages/react-core/src/components/Form/examples/FormGrid.tsx
index 0346b3668c6..99a2711cff8 100644
--- a/packages/react-core/src/components/Form/examples/FormGrid.tsx
+++ b/packages/react-core/src/components/Form/examples/FormGrid.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { Form, FormGroup, TextInput, Grid, GridItem } from '@patternfly/react-core';
 
-export const SimpleForm: React.FunctionComponent = () => {
+export const FormGrid: React.FunctionComponent = () => {
   const [name, setName] = React.useState('');
   const [email, setEmail] = React.useState('');
   const [phone, setPhone] = React.useState('');
diff --git a/packages/react-core/src/components/Form/examples/FormGroupLabelInfo.tsx b/packages/react-core/src/components/Form/examples/FormGroupLabelInfo.tsx
index cdbca250654..a7b9c0aa01e 100644
--- a/packages/react-core/src/components/Form/examples/FormGroupLabelInfo.tsx
+++ b/packages/react-core/src/components/Form/examples/FormGroupLabelInfo.tsx
@@ -54,7 +54,6 @@ export const FormGroupLabelInfo: React.FunctionComponent = () => {
           </Popover>
         }
         isRequired
-        fieldId="form-group-label-info"
         helperText="Include your middle name if you have one."
       >
         <TextInput
diff --git a/packages/react-core/src/components/Form/examples/FormHorizontal.tsx b/packages/react-core/src/components/Form/examples/FormHorizontal.tsx
index a42d65d29d7..2d26f8f4e4a 100644
--- a/packages/react-core/src/components/Form/examples/FormHorizontal.tsx
+++ b/packages/react-core/src/components/Form/examples/FormHorizontal.tsx
@@ -12,7 +12,7 @@ import {
   Radio
 } from '@patternfly/react-core';
 
-export const HorizontalForm: React.FunctionComponent = () => {
+export const FormHorizontal: React.FunctionComponent = () => {
   const [name, setName] = React.useState('');
   const [email, setEmail] = React.useState('');
   const [experience, setExperience] = React.useState('');
diff --git a/packages/react-core/src/components/Form/examples/FormHorizontalHelper.tsx b/packages/react-core/src/components/Form/examples/FormHorizontalHelper.tsx
index 7c6ee84e517..f34d7b6854b 100644
--- a/packages/react-core/src/components/Form/examples/FormHorizontalHelper.tsx
+++ b/packages/react-core/src/components/Form/examples/FormHorizontalHelper.tsx
@@ -1,12 +1,20 @@
 import React from 'react';
 import { Form, FormGroup, Checkbox } from '@patternfly/react-core';
 
-export const HorizontalFormHelperTextOnTop: React.FunctionComponent = () => {
+export const FormHorizontalFormHelperText: React.FunctionComponent = () => {
   const [helperText] = React.useState('Select all that apply:');
 
   return (
     <Form isHorizontal>
-      <FormGroup label="Label" helperText={helperText} isHelperTextBeforeField hasNoPaddingTop isStack role="group">
+      <FormGroup
+        label="Label"
+        helperText={helperText}
+        isHelperTextBeforeField
+        hasNoPaddingTop
+        isStack
+        fieldId="horizontal-form-helper-options"
+        role="group"
+      >
         <Checkbox label="Option 1" id="option-03" />
         <Checkbox label="Option 2" id="option-04" />
       </FormGroup>
diff --git a/packages/react-core/src/components/Form/examples/FormHorizontalStacked.tsx b/packages/react-core/src/components/Form/examples/FormHorizontalStacked.tsx
index 94b816b4960..a9b5549b8d5 100644
--- a/packages/react-core/src/components/Form/examples/FormHorizontalStacked.tsx
+++ b/packages/react-core/src/components/Form/examples/FormHorizontalStacked.tsx
@@ -1,9 +1,9 @@
 import React from 'react';
 import { Form, FormGroup, Checkbox } from '@patternfly/react-core';
 
-export const HorizontalForm: React.FunctionComponent = () => (
+export const FormHorizontalStacked: React.FunctionComponent = () => (
   <Form isHorizontal>
-    <FormGroup role="group" label="Label" hasNoPaddingTop isStack>
+    <FormGroup role="group" label="Label" hasNoPaddingTop fieldId="horizontal-form-stacked-options" isStack>
       <Checkbox label="option 1" id="option-01" />
       <Checkbox label="option 2" id="option-02" />
     </FormGroup>
diff --git a/packages/react-core/src/components/Form/examples/FormInvalid.tsx b/packages/react-core/src/components/Form/examples/FormInvalid.tsx
index a6934112861..15a80dd53ca 100644
--- a/packages/react-core/src/components/Form/examples/FormInvalid.tsx
+++ b/packages/react-core/src/components/Form/examples/FormInvalid.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { Form, FormGroup, TextInput, FormHelperText } from '@patternfly/react-core';
 import ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon';
 
-export const InvalidForm: React.FunctionComponent = () => {
+export const FormInvalid: React.FunctionComponent = () => {
   type validate = 'success' | 'warning' | 'error' | 'default';
 
   const [age, setAge] = React.useState('Five');
diff --git a/packages/react-core/src/components/Form/examples/FormInvalidWithFormAlert.tsx b/packages/react-core/src/components/Form/examples/FormInvalidWithFormAlert.tsx
index ea1a189c528..9bd9da0ac30 100644
--- a/packages/react-core/src/components/Form/examples/FormInvalidWithFormAlert.tsx
+++ b/packages/react-core/src/components/Form/examples/FormInvalidWithFormAlert.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { Alert, Form, FormAlert, FormGroup, TextInput, FormHelperText } from '@patternfly/react-core';
 import ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon';
 
-export const InvalidFormWithAlert: React.FunctionComponent = () => {
+export const FormInvalidWithAlert: React.FunctionComponent = () => {
   type validate = 'success' | 'warning' | 'error' | 'default';
 
   const [age, setAge] = React.useState('Five');
diff --git a/packages/react-core/src/components/Form/examples/FormLimitWidth.tsx b/packages/react-core/src/components/Form/examples/FormLimitWidth.tsx
index b117a922506..087afac665b 100644
--- a/packages/react-core/src/components/Form/examples/FormLimitWidth.tsx
+++ b/packages/react-core/src/components/Form/examples/FormLimitWidth.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { Form, FormGroup, TextInput, Checkbox, Popover, ActionGroup, Button, Radio } from '@patternfly/react-core';
 import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
 
-export const SimpleForm: React.FunctionComponent = () => {
+export const FormLimitWidth: React.FunctionComponent = () => {
   const [name, setName] = React.useState('');
   const [email, setEmail] = React.useState('');
   const [phone, setPhone] = React.useState('');
diff --git a/packages/react-core/src/components/Form/examples/FormValidated.tsx b/packages/react-core/src/components/Form/examples/FormValidated.tsx
index 7981f580f02..744cb9238bd 100644
--- a/packages/react-core/src/components/Form/examples/FormValidated.tsx
+++ b/packages/react-core/src/components/Form/examples/FormValidated.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { Form, FormGroup, TextInput } from '@patternfly/react-core';
 import ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon';
 
-export const InvalidForm: React.FunctionComponent = () => {
+export const FormValidated: React.FunctionComponent = () => {
   type validate = 'success' | 'warning' | 'error' | 'default';
 
   const [age, setAge] = React.useState('Five');

From ff5558a7a81e7998c4f214c60a731d7e832d847a Mon Sep 17 00:00:00 2001
From: Andy Vo <andyvo@bu.edu>
Date: Thu, 23 Jun 2022 14:01:59 -0400
Subject: [PATCH 4/4] chore(Form): cleaned FormGroup logic and added fieldId to
 label info example

---
 packages/react-core/src/components/Form/FormGroup.tsx       | 6 ++----
 .../src/components/Form/examples/FormGroupLabelInfo.tsx     | 1 +
 2 files changed, 3 insertions(+), 4 deletions(-)

diff --git a/packages/react-core/src/components/Form/FormGroup.tsx b/packages/react-core/src/components/Form/FormGroup.tsx
index 2e60985b03d..6a63fa728b2 100644
--- a/packages/react-core/src/components/Form/FormGroup.tsx
+++ b/packages/react-core/src/components/Form/FormGroup.tsx
@@ -128,8 +128,7 @@ export const FormGroup: React.FunctionComponent<FormGroupProps> = ({
         <div
           className={css(styles.formGroup, className)}
           {...(role && { role })}
-          {...(isGroupOrRadioGroup && { 'aria-labelledby': `${fieldId}-legend` })}
-          {...(!fieldId && { 'aria-labelledby': `${randomId}-legend` })}
+          {...(isGroupOrRadioGroup && { 'aria-labelledby': `${fieldId || randomId}-legend` })}
           {...props}
         >
           {label && (
@@ -139,8 +138,7 @@ export const FormGroup: React.FunctionComponent<FormGroupProps> = ({
                 labelInfo && styles.modifiers.info,
                 hasNoPaddingTop && styles.modifiers.noPaddingTop
               )}
-              {...(isGroupOrRadioGroup && { id: `${fieldId}-legend` })}
-              {...(!fieldId && { id: `${randomId}-legend` })}
+              {...(isGroupOrRadioGroup && { id: `${fieldId || randomId}-legend` })}
             >
               {labelInfo && (
                 <React.Fragment>
diff --git a/packages/react-core/src/components/Form/examples/FormGroupLabelInfo.tsx b/packages/react-core/src/components/Form/examples/FormGroupLabelInfo.tsx
index a7b9c0aa01e..cdbca250654 100644
--- a/packages/react-core/src/components/Form/examples/FormGroupLabelInfo.tsx
+++ b/packages/react-core/src/components/Form/examples/FormGroupLabelInfo.tsx
@@ -54,6 +54,7 @@ export const FormGroupLabelInfo: React.FunctionComponent = () => {
           </Popover>
         }
         isRequired
+        fieldId="form-group-label-info"
         helperText="Include your middle name if you have one."
       >
         <TextInput