@patternfly/react-docs 7.6.0-prerelease.6 → 7.6.0-prerelease.8

package/patternfly-docs/generated/components/forms/form/react.js

@@ -0,0 +1,1106 @@
+import React from 'react';
+import { AutoLinkHeader, Example, Link as PatternflyThemeLink } from '@patternfly/documentation-framework/components';
+import { useRef, useEffect, useState } from 'react';
+import RhUiErrorFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-error-fill-icon';
+import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
+import TrashIcon from '@patternfly/react-icons/dist/esm/icons/trash-icon';
+import styles from '@patternfly/react-styles/css/components/Form/form';
+const pageData = {
+  "id": "Form",
+  "section": "components",
+  "subsection": "forms",
+  "deprecated": false,
+  "template": false,
+  "beta": false,
+  "demo": false,
+  "newImplementationLink": false,
+  "source": "react",
+  "tabName": null,
+  "slug": "/components/forms/form/react",
+  "sourceLink": "https://github.com/patternfly/patternfly-react/blob/main/packages/react-core/src/components/Form/examples/Form.md",
+  "relPath": "packages/react-core/src/components/Form/examples/Form.md",
+  "propComponents": [
+    {
+      "name": "ActionGroup",
+      "description": "",
+      "props": [
+        {
+          "name": "children",
+          "type": "React.ReactNode",
+          "description": "Anything that can be rendered as ActionGroup content.",
+          "defaultValue": "null"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "description": "Additional classes added to the ActionGroup.",
+          "defaultValue": "''"
+        }
+      ]
+    },
+    {
+      "name": "Form",
+      "description": "",
+      "props": [
+        {
+          "name": "children",
+          "type": "React.ReactNode",
+          "description": "Anything that can be rendered as Form content."
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "description": "Additional classes added to the Form."
+        },
+        {
+          "name": "isHorizontal",
+          "type": "boolean",
+          "description": "Sets the Form to horizontal."
+        },
+        {
+          "name": "isWidthLimited",
+          "type": "boolean",
+          "description": "Limits the max-width of the form."
+        },
+        {
+          "name": "maxWidth",
+          "type": "string",
+          "description": "Sets a custom max-width for the form."
+        }
+      ]
+    },
+    {
+      "name": "FormGroup",
+      "description": "",
+      "props": [
+        {
+          "name": "children",
+          "type": "React.ReactNode",
+          "description": "Anything that can be rendered as FormGroup content.",
+          "defaultValue": "null"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "description": "Additional classes added to the FormGroup.",
+          "defaultValue": "''"
+        },
+        {
+          "name": "fieldId",
+          "type": "string",
+          "description": "ID of an individual field or a group of multiple fields. Required when a role of \"group\" or \"radiogroup\" is passed in.\nIf only one field is included, its ID attribute and this prop must be the same."
+        },
+        {
+          "name": "hasNoPaddingTop",
+          "type": "boolean",
+          "description": "Removes top spacer from label.",
+          "defaultValue": "false"
+        },
+        {
+          "name": "isInline",
+          "type": "boolean",
+          "description": "Sets the FormGroup isInline.",
+          "defaultValue": "false"
+        },
+        {
+          "name": "isRequired",
+          "type": "boolean",
+          "description": "Sets the FormGroup required.",
+          "defaultValue": "false"
+        },
+        {
+          "name": "isStack",
+          "type": "boolean",
+          "description": "Sets the FormGroupControl to be stacked",
+          "defaultValue": "false"
+        },
+        {
+          "name": "label",
+          "type": "React.ReactNode",
+          "description": "Label text before the field."
+        },
+        {
+          "name": "labelHelp",
+          "type": "React.ReactElement<any>",
+          "description": "A help button for the label. We recommend using FormGroupLabelHelp element as a help icon button. The help button should be wrapped or linked to our popover component."
+        },
+        {
+          "name": "labelInfo",
+          "type": "React.ReactNode",
+          "description": "Additional label information displayed after the label."
+        },
+        {
+          "name": "role",
+          "type": "string",
+          "description": "Sets the role of the form group. Pass in \"radiogroup\" when the form group contains multiple\nradio inputs, or pass in \"group\" when the form group contains multiple of any other input type."
+        }
+      ]
+    },
+    {
+      "name": "FormGroupLabelHelp",
+      "description": "A help button to be passed to the FormGroup's labelHelp property. This should be wrapped or linked\nto our Popover component.",
+      "props": [
+        {
+          "name": "aria-label",
+          "type": "string",
+          "description": "Adds accessible text to the button.",
+          "required": true
+        },
+        {
+          "name": "children",
+          "type": "React.ReactNode",
+          "description": "Content rendered inside the button"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "description": "Additional classes added to the button"
+        },
+        {
+          "name": "component",
+          "type": "React.ElementType<any> | React.ComponentType<any>",
+          "description": "Sets the base component to render. defaults to button"
+        },
+        {
+          "name": "countOptions",
+          "type": "BadgeCountObject",
+          "description": "Adds count number to button"
+        },
+        {
+          "name": "hamburgerVariant",
+          "type": "'expand' | 'collapse'",
+          "description": "Adjusts and animates the hamburger icon to indicate what will happen upon clicking the button."
+        },
+        {
+          "name": "hasNoPadding",
+          "type": "boolean",
+          "description": "Applies no padding on a plain button variant. Use when plain button is placed inline with text"
+        },
+        {
+          "name": "icon",
+          "type": "React.ReactNode | null",
+          "description": "Icon for the button."
+        },
+        {
+          "name": "iconPosition",
+          "type": "'start' | 'end' | 'left' | 'right'",
+          "description": "Sets position of the icon. Note: \"left\" and \"right\" are deprecated. Use \"start\" and \"end\" instead"
+        },
+        {
+          "name": "inoperableEvents",
+          "type": "string[]",
+          "description": "Events to prevent when the button is in an aria-disabled state"
+        },
+        {
+          "name": "isAriaDisabled",
+          "type": "boolean",
+          "description": "Adds disabled styling and communicates that the button is disabled using the aria-disabled html attribute"
+        },
+        {
+          "name": "isBlock",
+          "type": "boolean",
+          "description": "Adds block styling to button"
+        },
+        {
+          "name": "isCircle",
+          "type": "boolean",
+          "description": "Flag indicating the button is a circle button. Intended for buttons that only contain an icon..",
+          "beta": true
+        },
+        {
+          "name": "isClicked",
+          "type": "boolean",
+          "description": "Adds clicked styling to button."
+        },
+        {
+          "name": "isDanger",
+          "type": "boolean",
+          "description": "Adds danger styling to secondary or link button variants"
+        },
+        {
+          "name": "isDisabled",
+          "type": "boolean",
+          "description": "Adds disabled styling and disables the button using the disabled html attribute"
+        },
+        {
+          "name": "isDocked",
+          "type": "boolean",
+          "description": "Flag indicating the button is a docked variant button. For use in docked navigation.",
+          "beta": true
+        },
+        {
+          "name": "isExpanded",
+          "type": "boolean",
+          "description": "Flag indicating whether content the button controls is expanded or not. Required when isHamburger is true."
+        },
+        {
+          "name": "isFavorite",
+          "type": "boolean",
+          "description": "Adds favorite styling to a button"
+        },
+        {
+          "name": "isFavorited",
+          "type": "boolean",
+          "description": "Flag indicating whether the button is favorited or not, only when isFavorite is true."
+        },
+        {
+          "name": "isHamburger",
+          "type": "boolean",
+          "description": "Flag indicating the button is a hamburger button. This will override the icon property."
+        },
+        {
+          "name": "isInline",
+          "type": "boolean",
+          "description": "Adds inline styling to a link button"
+        },
+        {
+          "name": "isLoading",
+          "type": "boolean",
+          "description": "Adds progress styling to button"
+        },
+        {
+          "name": "isSettings",
+          "type": "boolean",
+          "description": "Flag indicating the button is a settings button. This will override the icon property."
+        },
+        {
+          "name": "isTextExpanded",
+          "type": "boolean",
+          "description": "Flag indicating the docked button should display text. Only applies when isDocked is true.",
+          "beta": true
+        },
+        {
+          "name": "ouiaId",
+          "type": "number | string",
+          "description": "Value to overwrite the randomly generated data-ouia-component-id."
+        },
+        {
+          "name": "ouiaSafe",
+          "type": "boolean",
+          "description": "Set the value of data-ouia-safe. Only set to true when the component is in a static state, i.e. no animations are occurring. At all other times, this value must be false."
+        },
+        {
+          "name": "size",
+          "type": "'default' | 'sm' | 'lg'",
+          "description": "Adds styling which affects the size of the button"
+        },
+        {
+          "name": "spinnerAriaLabel",
+          "type": "string",
+          "description": "Accessible label for the spinner to describe what is loading"
+        },
+        {
+          "name": "spinnerAriaLabelledBy",
+          "type": "string",
+          "description": "Id of element which describes what is being loaded"
+        },
+        {
+          "name": "spinnerAriaValueText",
+          "type": "string",
+          "description": "Text describing that current loading status or progress"
+        },
+        {
+          "name": "state",
+          "type": "'read' | 'unread' | 'attention'",
+          "description": "Sets state of the stateful button variant. Default is \"unread\""
+        },
+        {
+          "name": "tabIndex",
+          "type": "number",
+          "description": "Sets the button tabindex."
+        },
+        {
+          "name": "type",
+          "type": "'button' | 'submit' | 'reset'",
+          "description": "Sets button type"
+        },
+        {
+          "name": "variant",
+          "type": "'primary' | 'secondary' | 'tertiary' | 'danger' | 'warning' | 'link' | 'plain' | 'control' | 'stateful'",
+          "description": "Adds button variant styles"
+        }
+      ]
+    },
+    {
+      "name": "FormSection",
+      "description": "",
+      "props": [
+        {
+          "name": "children",
+          "type": "React.ReactNode",
+          "description": "Content rendered inside the section"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "description": "Additional classes added to the section",
+          "defaultValue": "''"
+        },
+        {
+          "name": "title",
+          "type": "React.ReactNode",
+          "description": "Title for the section",
+          "defaultValue": "''"
+        },
+        {
+          "name": "titleElement",
+          "type": "'div' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'",
+          "description": "Element to wrap the section title",
+          "defaultValue": "'div'"
+        }
+      ]
+    },
+    {
+      "name": "FormHelperText",
+      "description": "",
+      "props": [
+        {
+          "name": "children",
+          "type": "React.ReactNode",
+          "description": "Content rendered inside the helper text wrapper",
+          "defaultValue": "null"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "description": "Additional classes added to the helper text wrapper",
+          "defaultValue": "''"
+        }
+      ]
+    },
+    {
+      "name": "FormFieldGroup",
+      "description": "",
+      "props": [
+        {
+          "name": "children",
+          "type": "React.ReactNode",
+          "description": "Anything that can be rendered as form field group content."
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "description": "Additional classes added to the form field group."
+        },
+        {
+          "name": "header",
+          "type": "React.ReactNode",
+          "description": "Form field group header"
+        }
+      ]
+    },
+    {
+      "name": "FormFieldGroupExpandable",
+      "description": "",
+      "props": [
+        {
+          "name": "children",
+          "type": "React.ReactNode",
+          "description": "Anything that can be rendered as form field group content."
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "description": "Additional classes added to the form field group."
+        },
+        {
+          "name": "hasAnimations",
+          "type": "boolean",
+          "description": "Flag indicating whether an expandable form field group has animations. This will always render\nnested field group content rather than dynamically rendering them. This prop will be removed in\nthe next breaking change release in favor of defaulting to always-rendered items."
+        },
+        {
+          "name": "header",
+          "type": "React.ReactNode",
+          "description": "Form field group header"
+        },
+        {
+          "name": "isExpanded",
+          "type": "boolean",
+          "description": "Flag indicating if the form field group is initially expanded",
+          "defaultValue": "false"
+        },
+        {
+          "name": "toggleAriaLabel",
+          "type": "string",
+          "description": "Aria-label to use on the form field group toggle button"
+        }
+      ]
+    },
+    {
+      "name": "FormFieldGroupHeader",
+      "description": "",
+      "props": [
+        {
+          "name": "actions",
+          "type": "React.ReactNode",
+          "description": "Field group header actions"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "description": "Additional classes added to the section"
+        },
+        {
+          "name": "titleDescription",
+          "type": "React.ReactNode",
+          "description": "Field group header title description"
+        },
+        {
+          "name": "titleText",
+          "type": "FormFieldGroupHeaderTitleTextObject",
+          "description": "Field group header title text"
+        }
+      ]
+    },
+    {
+      "name": "FormFieldGroupHeaderTitleTextObject",
+      "description": "",
+      "props": [
+        {
+          "name": "id",
+          "type": "string",
+          "description": "The id applied to the title div for accessibility",
+          "required": true
+        },
+        {
+          "name": "text",
+          "type": "React.ReactNode",
+          "description": "Title text.",
+          "required": true
+        }
+      ]
+    },
+    {
+      "name": "FormContextProps",
+      "description": "",
+      "props": [
+        {
+          "name": "errors",
+          "type": "Record<string, string>",
+          "description": "Record of errors for all fieldIds",
+          "required": true
+        },
+        {
+          "name": "getError",
+          "type": "string",
+          "description": "Get the error message for a given fieldId",
+          "required": true
+        },
+        {
+          "name": "getValue",
+          "type": "string",
+          "description": "Get the value for a given fieldId",
+          "required": true
+        },
+        {
+          "name": "isTouched",
+          "type": "boolean",
+          "description": "Used to determine touched state for a given fieldId",
+          "required": true
+        },
+        {
+          "name": "isValid",
+          "type": "boolean",
+          "description": "Flag to determine the overall validity. True if the record of errors is empty.",
+          "required": true
+        },
+        {
+          "name": "setError",
+          "type": "void",
+          "description": "Set the error message for a given fieldId",
+          "required": true
+        },
+        {
+          "name": "setErrors",
+          "type": "Dispatch<SetStateAction<Record<string, string>>>",
+          "description": "Set multiple errors within the managed record of errors",
+          "required": true
+        },
+        {
+          "name": "setTouched",
+          "type": "void",
+          "description": "Used to update the touched state for a given fieldId",
+          "required": true
+        },
+        {
+          "name": "setValidator",
+          "type": "void",
+          "description": "Set a validator for a specific fieldId",
+          "required": true
+        },
+        {
+          "name": "setValue",
+          "type": "void",
+          "description": "Set the value for a given fieldId",
+          "required": true
+        },
+        {
+          "name": "setValues",
+          "type": "Dispatch<SetStateAction<Record<string, string>>>",
+          "description": "Set multiple values within the managed record of values",
+          "required": true
+        },
+        {
+          "name": "touched",
+          "type": "Record<string, boolean>",
+          "description": "Record of touched state for all fieldIds",
+          "required": true
+        },
+        {
+          "name": "validate",
+          "type": "Record<string, string | null>",
+          "description": "Triggers all fieldId-specific validators",
+          "required": true
+        },
+        {
+          "name": "values",
+          "type": "Record<string, string>",
+          "description": "Record of values for all fieldIds",
+          "required": true
+        }
+      ]
+    },
+    {
+      "name": "FormContextProviderProps",
+      "description": "",
+      "props": [
+        {
+          "name": "children",
+          "type": "React.ReactNode | ((props: FormContextProps) => React.ReactNode)",
+          "description": "Any react node. Can optionally use render function to return context props."
+        },
+        {
+          "name": "initialValues",
+          "type": "Record<string, string>",
+          "description": "Record of initial values"
+        }
+      ]
+    },
+    {
+      "name": "Button",
+      "description": "",
+      "props": [
+        {
+          "name": "aria-label",
+          "type": "string",
+          "description": "Adds accessible text to the button."
+        },
+        {
+          "name": "children",
+          "type": "React.ReactNode",
+          "description": "Content rendered inside the button"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "description": "Additional classes added to the button"
+        },
+        {
+          "name": "component",
+          "type": "React.ElementType<any> | React.ComponentType<any>",
+          "description": "Sets the base component to render. defaults to button"
+        },
+        {
+          "name": "countOptions",
+          "type": "BadgeCountObject",
+          "description": "Adds count number to button"
+        },
+        {
+          "name": "hamburgerVariant",
+          "type": "'expand' | 'collapse'",
+          "description": "Adjusts and animates the hamburger icon to indicate what will happen upon clicking the button."
+        },
+        {
+          "name": "hasNoPadding",
+          "type": "boolean",
+          "description": "Applies no padding on a plain button variant. Use when plain button is placed inline with text"
+        },
+        {
+          "name": "icon",
+          "type": "React.ReactNode | null",
+          "description": "Icon for the button."
+        },
+        {
+          "name": "iconPosition",
+          "type": "'start' | 'end' | 'left' | 'right'",
+          "description": "Sets position of the icon. Note: \"left\" and \"right\" are deprecated. Use \"start\" and \"end\" instead"
+        },
+        {
+          "name": "inoperableEvents",
+          "type": "string[]",
+          "description": "Events to prevent when the button is in an aria-disabled state"
+        },
+        {
+          "name": "isAriaDisabled",
+          "type": "boolean",
+          "description": "Adds disabled styling and communicates that the button is disabled using the aria-disabled html attribute"
+        },
+        {
+          "name": "isBlock",
+          "type": "boolean",
+          "description": "Adds block styling to button"
+        },
+        {
+          "name": "isCircle",
+          "type": "boolean",
+          "description": "Flag indicating the button is a circle button. Intended for buttons that only contain an icon..",
+          "beta": true
+        },
+        {
+          "name": "isClicked",
+          "type": "boolean",
+          "description": "Adds clicked styling to button."
+        },
+        {
+          "name": "isDanger",
+          "type": "boolean",
+          "description": "Adds danger styling to secondary or link button variants"
+        },
+        {
+          "name": "isDisabled",
+          "type": "boolean",
+          "description": "Adds disabled styling and disables the button using the disabled html attribute"
+        },
+        {
+          "name": "isDocked",
+          "type": "boolean",
+          "description": "Flag indicating the button is a docked variant button. For use in docked navigation.",
+          "beta": true
+        },
+        {
+          "name": "isExpanded",
+          "type": "boolean",
+          "description": "Flag indicating whether content the button controls is expanded or not. Required when isHamburger is true."
+        },
+        {
+          "name": "isFavorite",
+          "type": "boolean",
+          "description": "Adds favorite styling to a button"
+        },
+        {
+          "name": "isFavorited",
+          "type": "boolean",
+          "description": "Flag indicating whether the button is favorited or not, only when isFavorite is true."
+        },
+        {
+          "name": "isHamburger",
+          "type": "boolean",
+          "description": "Flag indicating the button is a hamburger button. This will override the icon property."
+        },
+        {
+          "name": "isInline",
+          "type": "boolean",
+          "description": "Adds inline styling to a link button"
+        },
+        {
+          "name": "isLoading",
+          "type": "boolean",
+          "description": "Adds progress styling to button"
+        },
+        {
+          "name": "isSettings",
+          "type": "boolean",
+          "description": "Flag indicating the button is a settings button. This will override the icon property."
+        },
+        {
+          "name": "isTextExpanded",
+          "type": "boolean",
+          "description": "Flag indicating the docked button should display text. Only applies when isDocked is true.",
+          "beta": true
+        },
+        {
+          "name": "ouiaId",
+          "type": "number | string",
+          "description": "Value to overwrite the randomly generated data-ouia-component-id."
+        },
+        {
+          "name": "ouiaSafe",
+          "type": "boolean",
+          "description": "Set the value of data-ouia-safe. Only set to true when the component is in a static state, i.e. no animations are occurring. At all other times, this value must be false."
+        },
+        {
+          "name": "size",
+          "type": "'default' | 'sm' | 'lg'",
+          "description": "Adds styling which affects the size of the button"
+        },
+        {
+          "name": "spinnerAriaLabel",
+          "type": "string",
+          "description": "Accessible label for the spinner to describe what is loading"
+        },
+        {
+          "name": "spinnerAriaLabelledBy",
+          "type": "string",
+          "description": "Id of element which describes what is being loaded"
+        },
+        {
+          "name": "spinnerAriaValueText",
+          "type": "string",
+          "description": "Text describing that current loading status or progress"
+        },
+        {
+          "name": "state",
+          "type": "'read' | 'unread' | 'attention'",
+          "description": "Sets state of the stateful button variant. Default is \"unread\""
+        },
+        {
+          "name": "tabIndex",
+          "type": "number",
+          "description": "Sets the button tabindex."
+        },
+        {
+          "name": "type",
+          "type": "'button' | 'submit' | 'reset'",
+          "description": "Sets button type"
+        },
+        {
+          "name": "variant",
+          "type": "'primary' | 'secondary' | 'tertiary' | 'danger' | 'warning' | 'link' | 'plain' | 'control' | 'stateful'",
+          "description": "Adds button variant styles"
+        }
+      ]
+    },
+    {
+      "name": "Popover",
+      "description": "The main popover component. The following properties can also be passed into another component\nthat has a property specifically for passing in popover properties.",
+      "props": [
+        {
+          "name": "alertSeverityScreenReaderText",
+          "type": "string",
+          "description": "Text announced by screen reader when alert severity variant is set to indicate\nseverity level."
+        },
+        {
+          "name": "alertSeverityVariant",
+          "type": "'custom' | 'info' | 'warning' | 'success' | 'danger'",
+          "description": "Severity variants for an alert popover. This modifies the color of the header to\nmatch the severity."
+        },
+        {
+          "name": "animationDuration",
+          "type": "number",
+          "description": "The duration of the CSS fade transition animation.",
+          "defaultValue": "300"
+        },
+        {
+          "name": "appendTo",
+          "type": "HTMLElement | ((ref?: HTMLElement) => HTMLElement) | 'inline'",
+          "description": "The element to append the popover to. Defaults to \"inline\".",
+          "defaultValue": "() => document.body"
+        },
+        {
+          "name": "aria-label",
+          "type": "string",
+          "description": "Accessible label for the popover, required when header is not present.",
+          "defaultValue": "''"
+        },
+        {
+          "name": "bodyContent",
+          "type": "React.ReactNode | ((hide: () => void) => React.ReactNode)",
+          "description": "Body content of the popover. If you want to close the popover after an action within the\nbody content, you can use the isVisible prop for manual control, or you can provide a\nfunction which will receive a callback as an argument to hide the popover, i.e.\nbodyContent={hide => <Button onClick={() => hide()}>Close</Button>}",
+          "required": true
+        },
+        {
+          "name": "children",
+          "type": "ReactElement<any>",
+          "description": "The trigger reference element to which the popover is relatively placed to. If you cannot wrap\nthe element with the Popover, you can use the triggerRef prop instead.\nUsage: <Popover><Button>Reference</Button></Popover>"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "description": "Additional classes added to the popover.",
+          "defaultValue": "''"
+        },
+        {
+          "name": "closeBtnAriaLabel",
+          "type": "string",
+          "description": "Accessible label for the close button.",
+          "defaultValue": "'Close'"
+        },
+        {
+          "name": "distance",
+          "type": "number",
+          "description": "Distance of the popover to its target. Defaults to 25.",
+          "defaultValue": "25"
+        },
+        {
+          "name": "elementToFocus",
+          "type": "HTMLElement | SVGElement | string",
+          "description": "The element to focus when the popover becomes visible. By default the first\nfocusable element will receive focus."
+        },
+        {
+          "name": "enableFlip",
+          "type": "boolean",
+          "description": "If true, tries to keep the popover in view by flipping it if necessary.\nIf the position is set to 'auto', this prop is ignored.",
+          "defaultValue": "true"
+        },
+        {
+          "name": "flipBehavior",
+          "type": "| 'flip'\n| (\n    | 'top'\n    | 'bottom'\n    | 'left'\n    | 'right'\n    | 'top-start'\n    | 'top-end'\n    | 'bottom-start'\n    | 'bottom-end'\n    | 'left-start'\n    | 'left-end'\n    | 'right-start'\n    | 'right-end'\n  )[]",
+          "description": "The desired position to flip the popover to if the initial position is not possible.\nBy setting this prop to 'flip' it attempts to flip the popover to the opposite side if\nthere is no space.\nYou can also pass an array of positions that determines the flip order. It should contain\nthe initial position followed by alternative positions if that position is unavailable.\nExample: Initial position is 'top'. Button with popover is in the top right corner.\n'flipBehavior' is set to ['top', 'right', 'left']. Since there is no space to the top, it\nchecks if right is available. There's also no space to the right, so it finally shows the\npopover on the left.",
+          "defaultValue": "[\n  'top',\n  'bottom',\n  'left',\n  'right',\n  'top-start',\n  'top-end',\n  'bottom-start',\n  'bottom-end',\n  'left-start',\n  'left-end',\n  'right-start',\n  'right-end'\n]"
+        },
+        {
+          "name": "footerContent",
+          "type": "React.ReactNode | ((hide: () => void) => React.ReactNode)",
+          "description": "Footer content of the popover. If you want to close the popover after an action within the\nfooter content, you can use the isVisible prop for manual control, or you can provide a\nfunction which will receive a callback as an argument to hide the popover, i.e.\nfooterContent={hide => <Button onClick={() => hide()}>Close</Button>}",
+          "defaultValue": "null"
+        },
+        {
+          "name": "hasAutoWidth",
+          "type": "boolean",
+          "description": "Removes fixed-width and allows width to be defined by contents.",
+          "defaultValue": "false"
+        },
+        {
+          "name": "hasNoPadding",
+          "type": "boolean",
+          "description": "Allows content to touch edges of popover container.",
+          "defaultValue": "false"
+        },
+        {
+          "name": "headerComponent",
+          "type": "'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'",
+          "description": "Sets the heading level to use for the popover header. Defaults to h6.",
+          "defaultValue": "'h6'"
+        },
+        {
+          "name": "headerContent",
+          "type": "React.ReactNode | ((hide: () => void) => React.ReactNode)",
+          "description": "Simple header content to be placed within a title. If you want to close the popover after\nan action within the header content, you can use the isVisible prop for manual control,\nor you can provide a function which will receive a callback as an argument to hide the\npopover, i.e. headerContent={hide => <Button onClick={() => hide()}>Close</Button>}",
+          "defaultValue": "null"
+        },
+        {
+          "name": "headerIcon",
+          "type": "React.ReactNode",
+          "description": "Icon to be displayed in the popover header. *",
+          "defaultValue": "null"
+        },
+        {
+          "name": "hideOnOutsideClick",
+          "type": "boolean",
+          "description": "Hides the popover when a click occurs outside (only works if isVisible is not controlled\nby the user).",
+          "defaultValue": "true"
+        },
+        {
+          "name": "id",
+          "type": "string",
+          "description": "Id used as part of the various popover elements (popover-${id}-header/body/footer)."
+        },
+        {
+          "name": "isVisible",
+          "type": "boolean",
+          "description": "True to show the popover programmatically. Used in conjunction with the shouldClose prop.\nBy default, the popover child element handles click events automatically. If you want to\ncontrol this programmatically, the popover will not auto-close if the close button is\nclicked, the escape key is used, or if a click occurs outside the popover. Instead, the\nconsumer is responsible for closing the popover themselves by adding a callback listener\nfor the shouldClose prop.",
+          "defaultValue": "null"
+        },
+        {
+          "name": "maxWidth",
+          "type": "string",
+          "description": "Maximum width of the popover (default 18.75rem).",
+          "defaultValue": "popoverMaxWidth && popoverMaxWidth.value"
+        },
+        {
+          "name": "minWidth",
+          "type": "string",
+          "description": "Minimum width of the popover (default 6.25rem).",
+          "defaultValue": "popoverMinWidth && popoverMinWidth.value"
+        },
+        {
+          "name": "onHidden",
+          "type": "() => void",
+          "description": "Lifecycle function invoked when the popover has fully transitioned out.",
+          "defaultValue": "(): void => null"
+        },
+        {
+          "name": "onHide",
+          "type": "(event: MouseEvent | KeyboardEvent) => void",
+          "description": "Lifecycle function invoked when the popover begins to transition out.",
+          "defaultValue": "(): void => null"
+        },
+        {
+          "name": "onMount",
+          "type": "() => void",
+          "description": "Lifecycle function invoked when the popover has been mounted to the DOM.",
+          "defaultValue": "(): void => null"
+        },
+        {
+          "name": "onShow",
+          "type": "(event: MouseEvent | KeyboardEvent) => void",
+          "description": "Lifecycle function invoked when the popover begins to transition in.",
+          "defaultValue": "(): void => null"
+        },
+        {
+          "name": "onShown",
+          "type": "() => void",
+          "description": "Lifecycle function invoked when the popover has fully transitioned in.",
+          "defaultValue": "(): void => null"
+        },
+        {
+          "name": "position",
+          "type": "| PopoverPosition\n| 'auto'\n| 'top'\n| 'bottom'\n| 'left'\n| 'right'\n| 'top-start'\n| 'top-end'\n| 'bottom-start'\n| 'bottom-end'\n| 'left-start'\n| 'left-end'\n| 'right-start'\n| 'right-end'",
+          "description": "Popover position. Note: With the enableFlip property set to true, it will change the\nposition if there is not enough space for the starting position. The behavior of where it\nflips to can be controlled through the flipBehavior property.",
+          "defaultValue": "'top'"
+        },
+        {
+          "name": "shouldClose",
+          "type": "(event: MouseEvent | KeyboardEvent, hideFunction?: () => void) => void",
+          "description": "Callback function that is only invoked when isVisible is also controlled. Called when the\npopover close button is clicked, the enter key was used on it, or the escape key is used.",
+          "defaultValue": "(): void => null"
+        },
+        {
+          "name": "shouldOpen",
+          "type": "(event: MouseEvent | KeyboardEvent, showFunction?: () => void) => void",
+          "description": "Callback function that is only invoked when isVisible is also controlled. Called when the\nenter key is used on the focused trigger.",
+          "defaultValue": "(): void => null"
+        },
+        {
+          "name": "showClose",
+          "type": "boolean",
+          "description": "Flag indicating whether the close button should be shown.",
+          "defaultValue": "true"
+        },
+        {
+          "name": "triggerAction",
+          "type": "'click' | 'hover'",
+          "description": "Sets an interaction to open popover, defaults to \"click\"",
+          "defaultValue": "'click'"
+        },
+        {
+          "name": "triggerRef",
+          "type": "HTMLElement | (() => HTMLElement) | React.RefObject<any>",
+          "description": "The trigger reference element to which the popover is relatively placed to. If you can wrap the\nelement with the popover, you can use the children prop instead, or both props together.\nWhen passed along with the trigger prop, the div element that wraps the trigger will be removed.\nUsage: <Popover triggerRef={() => document.getElementById('reference-element')} />"
+        },
+        {
+          "name": "withFocusTrap",
+          "type": "boolean",
+          "description": "Whether to trap focus in the popover."
+        },
+        {
+          "name": "zIndex",
+          "type": "number",
+          "description": "The z-index of the popover.",
+          "defaultValue": "9999"
+        }
+      ]
+    }
+  ],
+  "cssPrefix": [
+    "pf-v6-c-form"
+  ],
+  "examples": [
+    "Basic",
+    "Horizontal",
+    "Limit width",
+    "Invalid",
+    "Invalid with form alert",
+    "Validated",
+    "Horizontal stacked no padding top",
+    "Horizontal stacked helper text on top",
+    "Form group with additional label info",
+    "Form Sections",
+    "Grid form",
+    "Field Groups",
+    "Form state"
+  ]
+};
+pageData.liveContext = {
+  useRef,
+  useEffect,
+  useState,
+  RhUiErrorFillIcon,
+  HelpIcon,
+  TrashIcon,
+  styles
+};
+pageData.examples = {
+  'Basic': props => 
+    <Example {...pageData} {...props} {...{"code":"import { useRef, useState } from 'react';\nimport {\n  Form,\n  FormGroup,\n  TextInput,\n  Checkbox,\n  Popover,\n  ActionGroup,\n  Button,\n  Radio,\n  HelperText,\n  HelperTextItem,\n  FormHelperText,\n  FormGroupLabelHelp\n} from '@patternfly/react-core';\n\nexport const FormBasic: React.FunctionComponent = () => {\n  const [name, setName] = useState('');\n  const [email, setEmail] = useState('');\n  const [phone, setPhone] = useState('');\n  const labelHelpRef = useRef(null);\n\n  const handleNameChange = (_event, name: string) => {\n    setName(name);\n  };\n\n  const handleEmailChange = (_event, email: string) => {\n    setEmail(email);\n  };\n\n  const handlePhoneChange = (_event, phone: string) => {\n    setPhone(phone);\n  };\n\n  return (\n    <Form>\n      <FormGroup\n        label=\"Full name\"\n        labelHelp={\n          <Popover\n            triggerRef={labelHelpRef}\n            headerContent={\n              <div>\n                The{' '}\n                <a href=\"https://schema.org/name\" target=\"_blank\" rel=\"noreferrer\">\n                  name\n                </a>{' '}\n                of a{' '}\n                <a href=\"https://schema.org/Person\" target=\"_blank\" rel=\"noreferrer\">\n                  Person\n                </a>\n              </div>\n            }\n            bodyContent={\n              <div>\n                Often composed of{' '}\n                <a href=\"https://schema.org/givenName\" target=\"_blank\" rel=\"noreferrer\">\n                  givenName\n                </a>{' '}\n                and{' '}\n                <a href=\"https://schema.org/familyName\" target=\"_blank\" rel=\"noreferrer\">\n                  familyName\n                </a>\n                .\n              </div>\n            }\n          >\n            <FormGroupLabelHelp ref={labelHelpRef} aria-label=\"More info for name field\" />\n          </Popover>\n        }\n        isRequired\n        fieldId=\"simple-form-name-01\"\n      >\n        <TextInput\n          isRequired\n          type=\"text\"\n          id=\"simple-form-name-01\"\n          name=\"simple-form-name-01\"\n          aria-describedby=\"simple-form-name-01-helper\"\n          value={name}\n          onChange={handleNameChange}\n        />\n        <FormHelperText>\n          <HelperText>\n            <HelperTextItem>Include your middle name if you have one.</HelperTextItem>\n          </HelperText>\n        </FormHelperText>\n      </FormGroup>\n      <FormGroup label=\"Email\" isRequired fieldId=\"simple-form-email-01\">\n        <TextInput\n          isRequired\n          type=\"email\"\n          id=\"simple-form-email-01\"\n          name=\"simple-form-email-01\"\n          value={email}\n          onChange={handleEmailChange}\n        />\n      </FormGroup>\n      <FormGroup label=\"Phone number\" isRequired fieldId=\"simple-form-phone-01\">\n        <TextInput\n          isRequired\n          type=\"tel\"\n          id=\"simple-form-phone-01\"\n          name=\"simple-form-phone-01\"\n          placeholder=\"555-555-5555\"\n          value={phone}\n          onChange={handlePhoneChange}\n        />\n      </FormGroup>\n      <FormGroup role=\"group\" isInline fieldId=\"basic-form-checkbox-group\" label=\"How can we contact you?\">\n        <Checkbox label=\"Email\" aria-label=\"Email\" id=\"inlinecheck01\" />\n        <Checkbox label=\"Phone\" aria-label=\"Phone\" id=\"inlinecheck02\" />\n        <Checkbox label=\"Mail\" aria-label=\"Mail\" id=\"inlinecheck03\" />\n      </FormGroup>\n      <FormGroup role=\"radiogroup\" isInline fieldId=\"basic-form-radio-group\" label=\"Time zone\">\n        <Radio name=\"basic-inline-radio\" label=\"Eastern\" id=\"basic-inline-radio-01\" />\n        <Radio name=\"basic-inline-radio\" label=\"Central\" id=\"basic-inline-radio-02\" />\n        <Radio name=\"basic-inline-radio\" label=\"Pacific\" id=\"basic-inline-radio-03\" />\n      </FormGroup>\n      <FormGroup label=\"Additional note\" fieldId=\"simple-form-note-01\">\n        <TextInput isDisabled type=\"text\" id=\"simple-form-note-01\" name=\"simple-form-number\" value=\"disabled\" />\n      </FormGroup>\n      <FormGroup fieldId=\"checkbox01\">\n        <Checkbox label=\"I'd like updates via email.\" id=\"checkbox01\" name=\"checkbox01\" aria-label=\"Update via email\" />\n      </FormGroup>\n      <ActionGroup>\n        <Button variant=\"primary\">Submit</Button>\n        <Button variant=\"link\">Cancel</Button>\n      </ActionGroup>\n    </Form>\n  );\n};\n","title":"Basic","lang":"ts","className":""}}>
+      
+    </Example>,
+  'Horizontal': props => 
+    <Example {...pageData} {...props} {...{"code":"import { useState } from 'react';\nimport {\n  Form,\n  FormGroup,\n  TextInput,\n  TextArea,\n  FormSelect,\n  FormSelectOption,\n  Checkbox,\n  ActionGroup,\n  Button,\n  Radio,\n  HelperText,\n  HelperTextItem,\n  FormHelperText\n} from '@patternfly/react-core';\n\nexport const FormHorizontal: React.FunctionComponent = () => {\n  const [name, setName] = useState('');\n  const [email, setEmail] = useState('');\n  const [experience, setExperience] = useState('');\n  const [option, setOption] = useState('please choose');\n\n  const handleNameChange = (_event, name: string) => {\n    setName(name);\n  };\n\n  const handleEmailChange = (_event, email: string) => {\n    setEmail(email);\n  };\n\n  const handleExperienceChange = (_event, experience: string) => {\n    setExperience(experience);\n  };\n\n  const handleOptionChange = (_event: React.FormEvent<HTMLSelectElement>, value: string) => {\n    setOption(value);\n  };\n\n  const options = [\n    { value: 'select one', label: 'Select one', disabled: false },\n    { value: 'mr', label: 'Mr', disabled: false },\n    { value: 'miss', label: 'Miss', disabled: false },\n    { value: 'mrs', label: 'Mrs', disabled: false },\n    { value: 'ms', label: 'Ms', disabled: false },\n    { value: 'dr', label: 'Dr', disabled: false },\n    { value: 'other', label: 'Other', disabled: false }\n  ];\n\n  return (\n    <Form isHorizontal>\n      <FormGroup label=\"Full name\" isRequired fieldId=\"horizontal-form-name\">\n        <TextInput\n          value={name}\n          isRequired\n          type=\"text\"\n          id=\"horizontal-form-name\"\n          aria-describedby=\"horizontal-form-name-helper\"\n          name=\"horizontal-form-name\"\n          onChange={handleNameChange}\n        />\n        <FormHelperText>\n          <HelperText>\n            <HelperTextItem>Include your middle name if you have one.</HelperTextItem>\n          </HelperText>\n        </FormHelperText>\n      </FormGroup>\n      <FormGroup label=\"Email\" isRequired fieldId=\"horizontal-form-email\">\n        <TextInput\n          value={email}\n          isRequired\n          type=\"email\"\n          id=\"horizontal-form-email\"\n          name=\"horizontal-form-email\"\n          onChange={handleEmailChange}\n        />\n      </FormGroup>\n      <FormGroup label=\"Your title\" fieldId=\"horizontal-form-title\">\n        <FormSelect\n          value={option}\n          onChange={handleOptionChange}\n          id=\"horizontal-form-title\"\n          name=\"horizontal-form-title\"\n          aria-label=\"Your title\"\n        >\n          {options.map((option, index) => (\n            <FormSelectOption isDisabled={option.disabled} key={index} value={option.value} label={option.label} />\n          ))}\n        </FormSelect>\n      </FormGroup>\n      <FormGroup label=\"Your experience\" fieldId=\"horizontal-form-exp\">\n        <TextArea\n          value={experience}\n          onChange={handleExperienceChange}\n          id=\"horizontal-form-exp\"\n          name=\"horizontal-form-exp\"\n        />\n      </FormGroup>\n      <FormGroup\n        label=\"How can we contact you?\"\n        isStack\n        fieldId=\"horizontal-form-checkbox-group\"\n        hasNoPaddingTop\n        role=\"group\"\n      >\n        <Checkbox label=\"Email\" id=\"alt-form-checkbox-1\" name=\"alt-form-checkbox-1\" />\n        <Checkbox label=\"Phone\" id=\"alt-form-checkbox-2\" name=\"alt-form-checkbox-2\" />\n        <Checkbox label=\"Mail\" id=\"alt-form-checkbox-3\" name=\"alt-form-checkbox-3\" />\n      </FormGroup>\n      <FormGroup role=\"radiogroup\" isStack fieldId=\"horizontal-form-radio-group\" hasNoPaddingTop label=\"Time zone\">\n        <Radio name=\"horizontal-inline-radio\" label=\"Eastern\" id=\"horizontal-inline-radio-01\" />\n        <Radio name=\"horizontal-inline-radio\" label=\"Central\" id=\"horizontal-inline-radio-02\" />\n        <Radio name=\"horizontal-inline-radio\" label=\"Pacific\" id=\"horizontal-inline-radio-03\" />\n      </FormGroup>\n      <ActionGroup>\n        <Button variant=\"primary\">Submit</Button>\n        <Button variant=\"link\">Cancel</Button>\n      </ActionGroup>\n    </Form>\n  );\n};\n","title":"Horizontal","lang":"ts","className":""}}>
+      
+    </Example>,
+  'Limit width': props => 
+    <Example {...pageData} {...props} {...{"code":"import { useRef, useState } from 'react';\nimport {\n  Form,\n  FormGroup,\n  TextInput,\n  Checkbox,\n  Popover,\n  ActionGroup,\n  Button,\n  Radio,\n  HelperText,\n  HelperTextItem,\n  FormHelperText,\n  FormGroupLabelHelp\n} from '@patternfly/react-core';\n\nexport const FormLimitWidth: React.FunctionComponent = () => {\n  const [name, setName] = useState('');\n  const [email, setEmail] = useState('');\n  const [phone, setPhone] = useState('');\n  const labelHelpRef = useRef(null);\n\n  const handleNameChange = (_event, name: string) => {\n    setName(name);\n  };\n\n  const handleEmailChange = (_event, email: string) => {\n    setEmail(email);\n  };\n\n  const handlePhoneChange = (_event, phone: string) => {\n    setPhone(phone);\n  };\n\n  return (\n    <Form isWidthLimited>\n      <FormGroup\n        label=\"Full name\"\n        labelHelp={\n          <Popover\n            triggerRef={labelHelpRef}\n            headerContent={\n              <div>\n                The{' '}\n                <a href=\"https://schema.org/name\" target=\"_blank\" rel=\"noreferrer\">\n                  name\n                </a>{' '}\n                of a{' '}\n                <a href=\"https://schema.org/Person\" target=\"_blank\" rel=\"noreferrer\">\n                  Person\n                </a>\n              </div>\n            }\n            bodyContent={\n              <div>\n                Often composed of{' '}\n                <a href=\"https://schema.org/givenName\" target=\"_blank\" rel=\"noreferrer\">\n                  givenName\n                </a>{' '}\n                and{' '}\n                <a href=\"https://schema.org/familyName\" target=\"_blank\" rel=\"noreferrer\">\n                  familyName\n                </a>\n                .\n              </div>\n            }\n          >\n            <FormGroupLabelHelp ref={labelHelpRef} aria-label=\"More info for name field\" />\n          </Popover>\n        }\n        isRequired\n        fieldId=\"simple-form-name-02\"\n      >\n        <TextInput\n          isRequired\n          type=\"text\"\n          id=\"simple-form-name-02\"\n          name=\"simple-form-name-02\"\n          aria-describedby=\"simple-form-name-02-helper\"\n          value={name}\n          onChange={handleNameChange}\n        />\n        <FormHelperText>\n          <HelperText>\n            <HelperTextItem>Include your middle name if you have one.</HelperTextItem>\n          </HelperText>\n        </FormHelperText>\n      </FormGroup>\n      <FormGroup label=\"Email\" isRequired fieldId=\"simple-form-email-02\">\n        <TextInput\n          isRequired\n          type=\"email\"\n          id=\"simple-form-email-02\"\n          name=\"simple-form-email-02\"\n          value={email}\n          onChange={handleEmailChange}\n        />\n      </FormGroup>\n      <FormGroup label=\"Phone number\" isRequired fieldId=\"simple-form-number\">\n        <TextInput\n          isRequired\n          type=\"tel\"\n          placeholder=\"555-555-5555\"\n          id=\"simple-form-number\"\n          name=\"simple-form-number\"\n          value={phone}\n          onChange={handlePhoneChange}\n        />\n      </FormGroup>\n      <FormGroup role=\"group\" isInline fieldId=\"limit-width-form-checkbox-group\" label=\"How can we contact you?\">\n        <Checkbox label=\"Email\" aria-label=\"Email\" id=\"inlinecheck04\" />\n        <Checkbox label=\"Phone\" aria-label=\"Phone\" id=\"inlinecheck05\" />\n        <Checkbox label=\"Mail\" aria-label=\"Mail\" id=\"inlinecheck06\" />\n      </FormGroup>\n      <FormGroup role=\"radiogroup\" isInline fieldId=\"limit-width-form-radio-group\" label=\"Time zone\">\n        <Radio name=\"limit-width-radio\" label=\"Eastern\" id=\"limit-width-inline-radio-01\" />\n        <Radio name=\"limit-width-radio\" label=\"Central\" id=\"limit-width-inline-radio-02\" />\n        <Radio name=\"limit-width-radio\" label=\"Pacific\" id=\"limit-width-inline-radio-03\" />\n      </FormGroup>\n      <FormGroup label=\"Additional note\" fieldId=\"simple-form-note-02\">\n        <TextInput isDisabled type=\"text\" id=\"simple-form-note-02\" name=\"simple-form-number\" value=\"disabled\" />\n      </FormGroup>\n      <FormGroup fieldId=\"checkbox02\">\n        <Checkbox label=\"I'd like updates via email.\" id=\"checkbox02\" name=\"checkbox02\" aria-label=\"Update via email\" />\n      </FormGroup>\n      <ActionGroup>\n        <Button variant=\"primary\">Submit</Button>\n        <Button variant=\"link\">Cancel</Button>\n      </ActionGroup>\n    </Form>\n  );\n};\n","title":"Limit width","lang":"ts","className":""}}>
+      
+    </Example>,
+  'Invalid': props => 
+    <Example {...pageData} {...props} {...{"code":"import { useState } from 'react';\nimport { Form, FormGroup, TextInput, HelperText, HelperTextItem, FormHelperText } from '@patternfly/react-core';\nimport RhUiErrorFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-error-fill-icon';\n\nexport const FormInvalid: React.FunctionComponent = () => {\n  type validate = 'success' | 'warning' | 'error' | 'default';\n\n  const [age, setAge] = useState('Five');\n  const [validated, setValidated] = useState<validate>('error');\n\n  const handleAgeChange = (_event, age: string) => {\n    setAge(age);\n    if (age === '') {\n      setValidated('default');\n    } else if (/^\\d+$/.test(age)) {\n      setValidated('success');\n    } else {\n      setValidated('error');\n    }\n  };\n\n  return (\n    <Form>\n      <FormGroup label=\"Age\" type=\"number\" fieldId=\"age-1\">\n        <TextInput\n          validated={validated}\n          value={age}\n          id=\"age-1\"\n          aria-describedby=\"age-1-helper\"\n          onChange={handleAgeChange}\n        />\n        {validated !== 'success' && (\n          <FormHelperText>\n            <HelperText>\n              <HelperTextItem icon={<RhUiErrorFillIcon />} variant={validated}>\n                {validated === 'error' ? 'Must be a number' : 'Please enter your age'}\n              </HelperTextItem>\n            </HelperText>\n          </FormHelperText>\n        )}\n      </FormGroup>\n    </Form>\n  );\n};\n","title":"Invalid","lang":"ts","className":""}}>
+      
+    </Example>,
+  'Invalid with form alert': props => 
+    <Example {...pageData} {...props} {...{"code":"import { useState } from 'react';\nimport {\n  Alert,\n  Form,\n  FormAlert,\n  FormGroup,\n  TextInput,\n  HelperText,\n  HelperTextItem,\n  FormHelperText\n} from '@patternfly/react-core';\nimport RhUiErrorFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-error-fill-icon';\n\nexport const FormInvalidWithAlert: React.FunctionComponent = () => {\n  type validate = 'success' | 'warning' | 'error' | 'default';\n\n  const [age, setAge] = useState('Five');\n  const [validated, setValidated] = useState<validate>('error');\n\n  const handleAgeChange = (_event, age: string) => {\n    setAge(age);\n    if (age === '') {\n      setValidated('default');\n    } else if (/^\\d+$/.test(age)) {\n      setValidated('success');\n    } else {\n      setValidated('error');\n    }\n  };\n\n  return (\n    <Form>\n      {validated === 'error' && (\n        <FormAlert>\n          <Alert variant=\"danger\" title=\"Fill out all required fields before continuing.\" aria-live=\"polite\" isInline />\n        </FormAlert>\n      )}\n      <FormGroup label=\"Age\" type=\"number\" fieldId=\"age-2\">\n        <TextInput\n          validated={validated}\n          value={age}\n          id=\"age-2\"\n          aria-describedby=\"age-2-helper\"\n          onChange={handleAgeChange}\n        />\n        {validated !== 'success' && (\n          <FormHelperText>\n            <HelperText>\n              <HelperTextItem icon={<RhUiErrorFillIcon />} variant={validated}>\n                {validated === 'error' ? 'Must be a number' : 'Please enter your age'}\n              </HelperTextItem>\n            </HelperText>\n          </FormHelperText>\n        )}\n      </FormGroup>\n    </Form>\n  );\n};\n","title":"Invalid with form alert","lang":"ts","className":""}}>
+      
+    </Example>,
+  'Validated': props => 
+    <Example {...pageData} {...props} {...{"code":"import { useEffect, useState } from 'react';\nimport { Form, FormGroup, FormHelperText, HelperText, HelperTextItem, TextInput } from '@patternfly/react-core';\nimport RhUiErrorFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-error-fill-icon';\n\nexport const FormValidated: React.FunctionComponent = () => {\n  type validate = 'success' | 'warning' | 'error' | 'default';\n\n  const [age, setAge] = useState('Five');\n  const [validated, setValidated] = useState<validate>('default');\n  const [helperText, setHelperText] = useState('Enter your age to continue');\n\n  const handleAgeChange = (_event, age: string) => {\n    setAge(age);\n    setValidated('default');\n    setHelperText('Validating...');\n  };\n\n  // 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\n  useEffect(() => {\n    const timer = setTimeout(() => {\n      if (/^\\d+$/.test(age)) {\n        if (parseInt(age) >= 21) {\n          setValidated('success');\n          setHelperText('Enjoy your stay');\n        } else {\n          setValidated('warning');\n          setHelperText('You must be at least 21 years old to continue');\n        }\n      } else {\n        setValidated('error');\n        setHelperText('Must be a number');\n      }\n    }, 2000);\n\n    return () => clearTimeout(timer);\n  }, [age]);\n\n  return (\n    <Form>\n      <FormGroup label=\"Age\" type=\"number\" fieldId=\"age-3\">\n        <TextInput\n          validated={validated}\n          value={age}\n          id=\"age-3\"\n          aria-describedby=\"age-3-helper\"\n          onChange={handleAgeChange}\n        />\n        <FormHelperText>\n          <HelperText>\n            <HelperTextItem variant={validated} {...(validated === 'error' && { icon: <RhUiErrorFillIcon /> })}>\n              {helperText}\n            </HelperTextItem>\n          </HelperText>\n        </FormHelperText>\n      </FormGroup>\n    </Form>\n  );\n};\n","title":"Validated","lang":"ts","className":""}}>
+      
+    </Example>,
+  'Horizontal stacked no padding top': props => 
+    <Example {...pageData} {...props} {...{"code":"import { Form, FormGroup, Checkbox } from '@patternfly/react-core';\n\nexport const FormHorizontalStacked: React.FunctionComponent = () => (\n  <Form isHorizontal>\n    <FormGroup role=\"group\" label=\"Label\" hasNoPaddingTop fieldId=\"horizontal-form-stacked-options\" isStack>\n      <Checkbox label=\"option 1\" id=\"option-01\" />\n      <Checkbox label=\"option 2\" id=\"option-02\" />\n    </FormGroup>\n  </Form>\n);\n","title":"Horizontal stacked no padding top","lang":"ts","className":""}}>
+      
+    </Example>,
+  'Horizontal stacked helper text on top': props => 
+    <Example {...pageData} {...props} {...{"code":"import { Form, FormGroup, Checkbox, HelperText, HelperTextItem, FormHelperText } from '@patternfly/react-core';\n\nexport const FormHorizontalFormHelperText: React.FunctionComponent = () => (\n  <Form isHorizontal>\n    <FormGroup label=\"Label\" hasNoPaddingTop isStack fieldId=\"horizontal-form-helper-options\" role=\"group\">\n      <FormHelperText>\n        <HelperText>\n          <HelperTextItem>Select all that apply:</HelperTextItem>\n        </HelperText>\n      </FormHelperText>\n      <Checkbox label=\"Option 1\" id=\"option-03\" />\n      <Checkbox label=\"Option 2\" id=\"option-04\" />\n    </FormGroup>\n  </Form>\n);\n","title":"Horizontal stacked helper text on top","lang":"ts","className":""}}>
+      
+    </Example>,
+  'Form group with additional label info': props => 
+    <Example {...pageData} {...props} {...{"code":"import { useRef, useState } from 'react';\nimport {\n  Form,\n  FormGroup,\n  TextInput,\n  Popover,\n  HelperText,\n  HelperTextItem,\n  FormHelperText,\n  FormGroupLabelHelp\n} from '@patternfly/react-core';\n\nexport const FormGroupLabelInfo: React.FunctionComponent = () => {\n  const [name, setName] = useState('');\n  const labelHelpRef = useRef(null);\n\n  const handleNameChange = (_event, name: string) => {\n    setName(name);\n  };\n\n  return (\n    <Form>\n      <FormGroup\n        label=\"Full name\"\n        labelInfo=\"Additional label info\"\n        labelHelp={\n          <Popover\n            triggerRef={labelHelpRef}\n            headerContent={\n              <div>\n                The{' '}\n                <a href=\"https://schema.org/name\" target=\"_blank\" rel=\"noreferrer\">\n                  name\n                </a>{' '}\n                of a{' '}\n                <a href=\"https://schema.org/Person\" target=\"_blank\" rel=\"noreferrer\">\n                  Person\n                </a>\n              </div>\n            }\n            bodyContent={\n              <div>\n                Often composed of{' '}\n                <a href=\"https://schema.org/givenName\" target=\"_blank\" rel=\"noreferrer\">\n                  givenName\n                </a>{' '}\n                and{' '}\n                <a href=\"https://schema.org/familyName\" target=\"_blank\" rel=\"noreferrer\">\n                  familyName\n                </a>\n                .\n              </div>\n            }\n          >\n            <FormGroupLabelHelp ref={labelHelpRef} aria-label=\"More info for name field\" />\n          </Popover>\n        }\n        isRequired\n        fieldId=\"form-group-label-info\"\n      >\n        <TextInput\n          isRequired\n          type=\"text\"\n          id=\"form-group-label-info\"\n          name=\"form-group-label-info\"\n          aria-describedby=\"form-group-label-info-helper\"\n          value={name}\n          onChange={handleNameChange}\n        />\n        <FormHelperText>\n          <HelperText>\n            <HelperTextItem>Include your middle name if you have one.</HelperTextItem>\n          </HelperText>\n        </FormHelperText>\n      </FormGroup>\n    </Form>\n  );\n};\n","title":"Form group with additional label info","lang":"ts","className":""}}>
+      
+    </Example>,
+  'Form Sections': props => 
+    <Example {...pageData} {...props} {...{"code":"import { useState } from 'react';\nimport { Form, FormGroup, FormSection, TextInput } from '@patternfly/react-core';\n\nexport const FormSections: React.FunctionComponent = () => {\n  const [input1, setInput1] = useState('');\n  const [input2, setInput2] = useState('');\n\n  const handleInputChange1 = (_event, input1: string) => {\n    setInput1(input1);\n  };\n\n  const handleInputChange2 = (_event, input2: string) => {\n    setInput2(input2);\n  };\n\n  return (\n    <Form>\n      <FormSection>\n        <FormGroup label=\"Form section 1 input\" isRequired fieldId=\"simple-form-section-1-input\">\n          <TextInput\n            isRequired\n            type=\"text\"\n            id=\"simple-form-section-1-input\"\n            name=\"simple-form-section-1-input\"\n            value={input1}\n            onChange={handleInputChange1}\n          />\n        </FormGroup>\n      </FormSection>\n      <FormSection title=\"Form section 2 (optional title)\" titleElement=\"h2\">\n        <FormGroup label=\"Form section 2 input\" isRequired fieldId=\"simple-form-section-2-input\">\n          <TextInput\n            isRequired\n            type=\"text\"\n            id=\"simple-form-section-2-input\"\n            name=\"simple-form-section-2-input\"\n            value={input2}\n            onChange={handleInputChange2}\n          />\n        </FormGroup>\n      </FormSection>\n    </Form>\n  );\n};\n","title":"Form Sections","lang":"ts","className":""}}>
+      
+    </Example>,
+  'Grid form': props => 
+    <Example {...pageData} {...props} {...{"code":"import { useState } from 'react';\nimport {\n  Form,\n  FormGroup,\n  TextInput,\n  Grid,\n  GridItem,\n  HelperText,\n  HelperTextItem,\n  FormHelperText\n} from '@patternfly/react-core';\n\nexport const FormGrid: React.FunctionComponent = () => {\n  const [name, setName] = useState('');\n  const [email, setEmail] = useState('');\n  const [phone, setPhone] = useState('');\n\n  const handleNameChange = (_event, name: string) => {\n    setName(name);\n  };\n\n  const handleEmailChange = (_event, email: string) => {\n    setEmail(email);\n  };\n\n  const handlePhoneChange = (_event, phone: string) => {\n    setPhone(phone);\n  };\n\n  return (\n    <Form>\n      <Grid hasGutter md={6}>\n        <GridItem span={12}>\n          <FormGroup label=\"Full name\" isRequired fieldId=\"grid-form-name-01\">\n            <TextInput\n              isRequired\n              type=\"text\"\n              id=\"grid-form-name-01\"\n              name=\"grid-form-name-01\"\n              aria-describedby=\"grid-form-name-01-helper\"\n              value={name}\n              onChange={handleNameChange}\n            />\n            <FormHelperText>\n              <HelperText>\n                <HelperTextItem>Include your middle name if you have one.</HelperTextItem>\n              </HelperText>\n            </FormHelperText>\n          </FormGroup>\n        </GridItem>\n        <FormGroup label=\"Email\" isRequired fieldId=\"grid-form-email-01\">\n          <TextInput\n            isRequired\n            type=\"email\"\n            id=\"grid-form-email-01\"\n            name=\"grid-form-email-01\"\n            value={email}\n            onChange={handleEmailChange}\n          />\n        </FormGroup>\n        <FormGroup label=\"Phone number\" isRequired fieldId=\"grid-form-number-01\">\n          <TextInput\n            isRequired\n            type=\"tel\"\n            id=\"grid-form-number-01\"\n            placeholder=\"555-555-5555\"\n            name=\"grid-form-number-01\"\n            value={phone}\n            onChange={handlePhoneChange}\n          />\n        </FormGroup>\n      </Grid>\n    </Form>\n  );\n};\n","title":"Grid form","lang":"ts","className":""}}>
+      
+    </Example>,
+  'Field Groups': props => 
+    <Example {...pageData} {...props} {...{"code":"import { useState } from 'react';\nimport {\n  Form,\n  FormGroup,\n  FormFieldGroup,\n  FormFieldGroupExpandable,\n  FormFieldGroupHeader,\n  TextInput,\n  Button\n} from '@patternfly/react-core';\nimport TrashIcon from '@patternfly/react-icons/dist/esm/icons/trash-icon';\n\nexport const FormFieldGroups: React.FunctionComponent = () => {\n  const initialValues = {\n    '0-label1': '',\n    '0-label2': '',\n    '1-expanded-group1-label1': '',\n    '1-expanded-group1-label2': '',\n    '1-expanded-group2-label1': '',\n    '1-expanded-group2-label2': '',\n    '1-expanded-group3-label1': '',\n    '1-expanded-group3-label2': '',\n    '1-group1-label1': '',\n    '1-group1-label2': '',\n    '2-label1': '',\n    '2-label2': '',\n    '3-label1': '',\n    '3-label2': '',\n    '3-nonexpand-group1-label1': '',\n    '3-nonexpand-group1-label2': '',\n    '3-nonexpand-group2-label1': '',\n    '3-nonexpand-group2-label2': '',\n    '4-nonexpand-label1': '',\n    '4-nonexpand-label2': '',\n    '0-label3': '',\n    '0-label4': ''\n  };\n\n  const [inputValues, setInputValues] = useState(initialValues);\n\n  const handleChange = (event, value: string) => {\n    const { name } = event.currentTarget;\n    setInputValues({ ...inputValues, [name]: value });\n  };\n\n  return (\n    <Form>\n      <FormGroup label=\"Label 1\" isRequired fieldId=\"0-label1\">\n        <TextInput isRequired id=\"0-label1\" name=\"0-label1\" value={inputValues['0-label1']} onChange={handleChange} />\n      </FormGroup>\n      <FormGroup label=\"Label 2\" isRequired fieldId=\"0-label2\">\n        <TextInput isRequired id=\"0-label2\" name=\"0-label2\" value={inputValues['0-label2']} onChange={handleChange} />\n      </FormGroup>\n      <FormFieldGroupExpandable\n        hasAnimations\n        isExpanded\n        toggleAriaLabel=\"Details\"\n        header={\n          <FormFieldGroupHeader\n            titleText={{ text: 'Field group 1', id: 'field-group1-titleText-id' }}\n            titleDescription=\"Field group 1 description text.\"\n            actions={\n              <>\n                <Button variant=\"link\">Delete all</Button> <Button variant=\"secondary\">Add parameter</Button>\n              </>\n            }\n          />\n        }\n      >\n        <FormFieldGroupExpandable\n          hasAnimations\n          isExpanded\n          toggleAriaLabel=\"Details\"\n          header={\n            <FormFieldGroupHeader\n              titleText={{ text: 'Nested field group 1', id: 'nested-field-group1-titleText-id' }}\n              titleDescription=\"Nested field group 1 description text.\"\n              actions={<Button variant=\"plain\" aria-label=\"Remove\" icon={<TrashIcon />} />}\n            />\n          }\n        >\n          <FormGroup label=\"Label 1\" isRequired fieldId=\"1-expanded-group1-label1\">\n            <TextInput\n              isRequired\n              id=\"1-expanded-group1-label1\"\n              name=\"1-expanded-group1-label1\"\n              value={inputValues['1-expanded-group1-label1']}\n              onChange={handleChange}\n            />\n          </FormGroup>\n          <FormGroup label=\"Label 2\" isRequired fieldId=\"1-expanded-group1-label2\">\n            <TextInput\n              isRequired\n              id=\"1-expanded-group1-label2\"\n              name=\"1-expanded-group1-label2\"\n              value={inputValues['1-expanded-group1-label2']}\n              onChange={handleChange}\n            />\n          </FormGroup>\n        </FormFieldGroupExpandable>\n        <FormFieldGroupExpandable\n          hasAnimations\n          toggleAriaLabel=\"Details\"\n          header={\n            <FormFieldGroupHeader\n              titleText={{ text: 'Nested field group 2', id: 'nested-field-group2-titleText-id' }}\n              actions={<Button variant=\"plain\" aria-label=\"Remove\" icon={<TrashIcon />} />}\n            />\n          }\n        >\n          <FormGroup label=\"Label 1\" isRequired fieldId=\"1-expanded-group2-label1\">\n            <TextInput\n              isRequired\n              id=\"1-expanded-group2-label1\"\n              name=\"1-expanded-group2-label1\"\n              value={inputValues['1-expanded-group2-label1']}\n              onChange={handleChange}\n            />\n          </FormGroup>\n          <FormGroup label=\"Label 2\" isRequired fieldId=\"1-expanded-group2-label2\">\n            <TextInput\n              isRequired\n              id=\"1-expanded-group2-label2\"\n              name=\"1-expanded-group2-label2\"\n              value={inputValues['1-expanded-group2-label2']}\n              onChange={handleChange}\n            />\n          </FormGroup>\n        </FormFieldGroupExpandable>\n        <FormFieldGroupExpandable\n          hasAnimations\n          toggleAriaLabel=\"Details\"\n          header={\n            <FormFieldGroupHeader\n              titleText={{ text: 'Nested field group 3', id: 'nested-field-group3-titleText-id' }}\n              titleDescription=\"Field group 3 description text.\"\n              actions={<Button variant=\"plain\" aria-label=\"Remove\" icon={<TrashIcon />} />}\n            />\n          }\n        >\n          <FormGroup label=\"Label 1\" isRequired fieldId=\"1-expanded-group3-label1\">\n            <TextInput\n              isRequired\n              id=\"1-expanded-group3-label1\"\n              name=\"1-expanded-group3-label1\"\n              value={inputValues['1-expanded-group3-label1']}\n              onChange={handleChange}\n            />\n          </FormGroup>\n          <FormGroup label=\"Label 2\" isRequired fieldId=\"1-expanded-group3-label2\">\n            <TextInput\n              isRequired\n              id=\"1-expanded-group3-label2\"\n              name=\"1-expanded-group3-label2\"\n              value={inputValues['1-expanded-group3-label2']}\n              onChange={handleChange}\n            />\n          </FormGroup>\n        </FormFieldGroupExpandable>\n        <FormGroup label=\"Label 1\" isRequired fieldId=\"1-group1-label1\">\n          <TextInput\n            isRequired\n            id=\"1-group1-label1\"\n            name=\"1-group1-label1\"\n            value={inputValues['1-group1-label1']}\n            onChange={handleChange}\n          />\n        </FormGroup>\n        <FormGroup label=\"Label 2\" isRequired fieldId=\"1-group1-label2\">\n          <TextInput\n            isRequired\n            id=\"1-group1-label2\"\n            name=\"1-group1-label2\"\n            value={inputValues['1-group1-label2']}\n            onChange={handleChange}\n          />\n        </FormGroup>\n      </FormFieldGroupExpandable>\n      <FormFieldGroupExpandable\n        hasAnimations\n        toggleAriaLabel=\"Details\"\n        header={\n          <FormFieldGroupHeader\n            titleText={{ text: 'Field group 2', id: 'field-group2-titleText-id' }}\n            titleDescription=\"Field group 2 description text.\"\n            actions={\n              <>\n                <Button variant=\"link\">Delete all</Button> <Button variant=\"secondary\">Add parameter</Button>\n              </>\n            }\n          />\n        }\n      >\n        <FormGroup label=\"Label 1\" isRequired fieldId=\"2-label1\">\n          <TextInput isRequired id=\"2-label1\" name=\"2-label1\" value={inputValues['2-label1']} onChange={handleChange} />\n        </FormGroup>\n        <FormGroup label=\"Label 2\" isRequired fieldId=\"2-label2\">\n          <TextInput isRequired id=\"2-label2\" name=\"2-label2\" value={inputValues['2-label2']} onChange={handleChange} />\n        </FormGroup>\n      </FormFieldGroupExpandable>\n      <FormFieldGroupExpandable\n        hasAnimations\n        isExpanded\n        toggleAriaLabel=\"Details\"\n        header={\n          <FormFieldGroupHeader\n            titleText={{ text: 'Field group 3', id: 'field-group3-titleText-id' }}\n            titleDescription=\"Field group 3 description text.\"\n          />\n        }\n      >\n        <FormGroup label=\"Label 1\" isRequired fieldId=\"3-label1\">\n          <TextInput isRequired id=\"3-label1\" name=\"3-label1\" value={inputValues['3-label1']} onChange={handleChange} />\n        </FormGroup>\n        <FormGroup label=\"Label 2\" isRequired fieldId=\"3-label2\">\n          <TextInput isRequired id=\"3-label2\" name=\"3-label2\" value={inputValues['3-label2']} onChange={handleChange} />\n        </FormGroup>\n        <FormFieldGroup\n          header={\n            <FormFieldGroupHeader\n              titleText={{\n                text: 'Nested field group 1 (non-expandable)',\n                id: 'nested-field-group1-non-expandable-titleText-id'\n              }}\n            />\n          }\n        >\n          <FormGroup label=\"Label 1\" isRequired fieldId=\"3-nonexpand-group1-label1\">\n            <TextInput\n              isRequired\n              id=\"3-nonexpand-group1-label1\"\n              name=\"3-nonexpand-group1-label1\"\n              value={inputValues['3-nonexpand-group1-label1']}\n              onChange={handleChange}\n            />\n          </FormGroup>\n          <FormGroup label=\"Label 2\" isRequired fieldId=\"3-nonexpand-group1-label2\">\n            <TextInput\n              isRequired\n              id=\"3-nonexpand-group1-label2\"\n              name=\"3-nonexpand-group1-label2\"\n              value={inputValues['3-nonexpand-group1-label2']}\n              onChange={handleChange}\n            />\n          </FormGroup>\n        </FormFieldGroup>\n        <FormFieldGroup\n          header={\n            <FormFieldGroupHeader\n              titleText={{\n                text: 'Nested field group 2 (non-expandable)',\n                id: 'nested-field-group2-non-expandable-titleText-id'\n              }}\n              titleDescription=\"Field group 2 description text.\"\n            />\n          }\n        >\n          <FormGroup label=\"Label 1\" isRequired fieldId=\"3-nonexpand-group2-label1\">\n            <TextInput\n              isRequired\n              id=\"3-nonexpand-group2-label1\"\n              name=\"3-nonexpand-group2-label1\"\n              value={inputValues['3-nonexpand-group2-label1']}\n              onChange={handleChange}\n            />\n          </FormGroup>\n          <FormGroup label=\"Label 2\" isRequired fieldId=\"3-nonexpand-group2-label2\">\n            <TextInput\n              isRequired\n              id=\"3-nonexpand-group2-label2\"\n              name=\"3-nonexpand-group2-label2\"\n              value={inputValues['3-nonexpand-group2-label2']}\n              onChange={handleChange}\n            />\n          </FormGroup>\n        </FormFieldGroup>\n      </FormFieldGroupExpandable>\n      <FormFieldGroup\n        header={\n          <FormFieldGroupHeader\n            titleText={{ text: 'Field group 4 (non-expandable)', id: 'field-group4-non-expandable-titleText-id' }}\n            titleDescription=\"Field group 4 description text fdgsdg.\"\n            actions={\n              <>\n                <Button variant=\"link\">Delete all</Button> <Button variant=\"secondary\">Add parameter</Button>\n              </>\n            }\n          />\n        }\n      >\n        <FormGroup label=\"Label 1\" isRequired fieldId=\"4-nonexpand-label1\">\n          <TextInput\n            isRequired\n            id=\"4-nonexpand-label1\"\n            name=\"4-nonexpand-label1\"\n            value={inputValues['4-nonexpand-label1']}\n            onChange={handleChange}\n          />\n        </FormGroup>\n        <FormGroup label=\"Label 2\" isRequired fieldId=\"4-nonexpand-label2\">\n          <TextInput\n            isRequired\n            id=\"4-nonexpand-label2\"\n            name=\"4-nonexpand-label2\"\n            value={inputValues['4-nonexpand-label2']}\n            onChange={handleChange}\n          />\n        </FormGroup>\n      </FormFieldGroup>\n      <FormGroup label=\"Label 3\" isRequired fieldId=\"0-label3\">\n        <TextInput isRequired id=\"0-label3\" name=\"0-label3\" value={inputValues['0-label3']} onChange={handleChange} />\n      </FormGroup>\n      <FormGroup label=\"Label 4\" isRequired fieldId=\"0-label4\">\n        <TextInput isRequired id=\"0-label4\" name=\"0-label4\" value={inputValues['0-label4']} onChange={handleChange} />\n      </FormGroup>\n    </Form>\n  );\n};\n","title":"Field Groups","lang":"ts","className":""}}>
+      
+    </Example>,
+  'Form state': props => 
+    <Example {...pageData} {...props} {...{"code":"import { useState } from 'react';\nimport {\n  ActionGroup,\n  Button,\n  ButtonType,\n  ButtonVariant,\n  Divider,\n  Form,\n  FormContextProvider,\n  FormGroup,\n  FormHelperText,\n  HelperText,\n  HelperTextItem,\n  MenuToggle,\n  Select,\n  SelectList,\n  SelectOption,\n  TextArea,\n  TextInput\n} from '@patternfly/react-core';\nimport RhUiErrorFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-error-fill-icon';\n\nexport const FormState = () => {\n  const [isSelectOpen, setIsSelectOpen] = useState(false);\n  const [formStateExpanded, setFormStateExpanded] = useState(false);\n\n  return (\n    <FormContextProvider initialValues={{ 'select-id': 'Option 1' }}>\n      {({ setValue, getValue, setError, values, errors }) => (\n        <Form>\n          <FormGroup label=\"Input value\" fieldId=\"input-id\" isRequired>\n            <TextInput\n              id=\"input-id\"\n              onChange={(_event, value) => {\n                setValue('input-id', value);\n                setError('input-id', undefined);\n              }}\n              value={getValue('input-id')}\n              validated={errors['input-id'] ? 'error' : 'default'}\n            />\n            <FormHelperText>\n              <HelperText>\n                <HelperTextItem\n                  variant={errors['input-id'] ? 'error' : 'default'}\n                  {...(errors['input-id'] && { icon: <RhUiErrorFillIcon /> })}\n                >\n                  {errors['input-id']}\n                </HelperTextItem>\n              </HelperText>\n            </FormHelperText>\n          </FormGroup>\n\n          <TextArea\n            id=\"textarea-id\"\n            aria-label=\"Form state TextArea\"\n            onChange={(_event, value) => setValue('textarea-id', value)}\n            value={getValue('textarea-id')}\n          />\n\n          <Select\n            id=\"select-id\"\n            selected={getValue('select-id')}\n            isOpen={isSelectOpen}\n            toggle={(toggleRef) => (\n              <MenuToggle\n                ref={toggleRef}\n                onClick={(isOpen) => setIsSelectOpen(isOpen)}\n                isExpanded={isSelectOpen}\n                style={\n                  {\n                    width: '200px'\n                  } as React.CSSProperties\n                }\n              >\n                {getValue('select-id')}\n              </MenuToggle>\n            )}\n            onOpenChange={(isOpen) => setIsSelectOpen(isOpen)}\n            onSelect={(_, value) => {\n              setValue('select-id', value as string);\n              setIsSelectOpen(false);\n            }}\n          >\n            <SelectList>\n              <SelectOption value=\"Option 1\">Option 1</SelectOption>\n              <SelectOption value=\"Option 2\">Option 2</SelectOption>\n              <SelectOption value=\"Option 3\">Option 3</SelectOption>\n            </SelectList>\n          </Select>\n\n          <ActionGroup>\n            <Button\n              type={ButtonType.submit}\n              onClick={(e) => {\n                e.preventDefault();\n\n                if (!values['input-id']) {\n                  setError('input-id', 'Input value is required.');\n                } else {\n                  alert(`Form submitted with: \\n ${JSON.stringify(values)}`);\n                }\n              }}\n            >\n              Submit\n            </Button>\n            <Button variant={ButtonVariant.link} onClick={() => setFormStateExpanded((prevExpanded) => !prevExpanded)}>\n              {`${formStateExpanded ? 'Hide' : 'Show'} form state`}\n            </Button>\n          </ActionGroup>\n          {formStateExpanded && (\n            <>\n              <Divider />\n              <pre>{JSON.stringify({ values, errors }, null, 2)}</pre>\n            </>\n          )}\n        </Form>\n      )}\n    </FormContextProvider>\n  );\n};\n","title":"Form state","lang":"ts","className":""}}>
+      
+    </Example>
+};
+
+const Component = () => (
+  <React.Fragment>
+    <AutoLinkHeader {...{"id":"examples","headingLevel":"h2","className":"ws-title ws-h2"}}>
+      {`Examples`}
+    </AutoLinkHeader>
+    <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+      {`When using helper text inside a `}
+      <code {...{"className":"ws-code "}}>
+        {`FormGroup`}
+      </code>
+      {`, the `}
+      <code {...{"className":"ws-code "}}>
+        {`HelperText`}
+      </code>
+      {` component should be wrapped with the `}
+      <code {...{"className":"ws-code "}}>
+        {`FormHelperText`}
+      </code>
+      {` component to provide additional spacing.`}
+    </p>
+    {React.createElement(pageData.examples["Basic"])}
+    {React.createElement(pageData.examples["Horizontal"])}
+    {React.createElement(pageData.examples["Limit width"])}
+    {React.createElement(pageData.examples["Invalid"])}
+    {React.createElement(pageData.examples["Invalid with form alert"])}
+    {React.createElement(pageData.examples["Validated"])}
+    {React.createElement(pageData.examples["Horizontal stacked no padding top"])}
+    {React.createElement(pageData.examples["Horizontal stacked helper text on top"])}
+    {React.createElement(pageData.examples["Form group with additional label info"])}
+    {React.createElement(pageData.examples["Form Sections"])}
+    {React.createElement(pageData.examples["Grid form"])}
+    {React.createElement(pageData.examples["Field Groups"])}
+    {React.createElement(pageData.examples["Form state"])}
+  </React.Fragment>
+);
+Component.displayName = 'ComponentsFormsFormReactDocs';
+Component.pageData = pageData;
+
+export default Component;