npm - @patternfly/patternfly-doc-core - Versions diffs - 1.12.3 → 1.13.0 - Mend

@patternfly/patternfly-doc-core 1.12.3 → 1.13.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (191) hide show

package/dist/docs/components/form/index.html CHANGED Viewed

@@ -1,8 +1,8 @@
 <!DOCTYPE html><html lang="en" data-astro-transition-scope="astro-iidcp2e2-1"> <head><script type="module">const n=e=>{requestAnimationFrame(()=>{document.documentElement.classList.toggle("pf-v6-theme-dark",e==="dark")})};document.addEventListener("astro:before-swap",()=>{const e=localStorage.getItem("theme-preference");n(e||"light")});const o=e=>{const t=document.querySelector(e);t&&t.scrollIntoView({behavior:"smooth"})};document.addEventListener("DOMContentLoaded",()=>{if(window.location.hash){const e=window.location.hash;history.replaceState(null,""," "),setTimeout(()=>{o(e),history.replaceState(null,"",e)},500)}});window.addEventListener("hashchange",()=>{window.location.hash&&o(window.location.hash)});</script><meta charset="utf-8"><link rel="icon" type="image/svg+xml" href="/favicon.svg"><meta name="viewport" content="width=device-width"><meta name="generator" content="Astro v5.9.3"><title>Astro</title><meta name="astro-view-transitions-enabled" content="true"><meta name="astro-view-transitions-fallback" content="animate"><script type="module" src="/_astro/ClientRouter.astro_astro_type_script_index_0_lang.CtSceO8m.js"></script><link rel="stylesheet" href="/_astro/_page_.BG_fQ4i5.css">
-<link rel="stylesheet" href="/_astro/AutoLinkHeader.Chv_bGyU.css">
-<link rel="stylesheet" href="/_astro/PropsTables.D6ZI3FGj.css">
+<link rel="stylesheet" href="/_astro/_page_.DxJDkZPc.css">
 <link rel="stylesheet" href="/_astro/LiveExample.CxJsMvEq.css">
-<link rel="stylesheet" href="/_astro/_page_.DxJDkZPc.css"><style>[data-astro-transition-scope="astro-iidcp2e2-1"] { view-transition-name: astro-iidcp2e2-1; }@layer astro { ::view-transition-old(astro-iidcp2e2-1) { animation: none; opacity: 0; mix-blend-mode: normal; }::view-transition-new(astro-iidcp2e2-1) { animation: none; mix-blend-mode: normal; }::view-transition-group(astro-iidcp2e2-1) { animation: none } }[data-astro-transition-fallback="old"] [data-astro-transition-scope="astro-iidcp2e2-1"],
+<link rel="stylesheet" href="/_astro/PropsTables.D6ZI3FGj.css">
+<link rel="stylesheet" href="/_astro/AutoLinkHeader.Chv_bGyU.css"><style>[data-astro-transition-scope="astro-iidcp2e2-1"] { view-transition-name: astro-iidcp2e2-1; }@layer astro { ::view-transition-old(astro-iidcp2e2-1) { animation: none; opacity: 0; mix-blend-mode: normal; }::view-transition-new(astro-iidcp2e2-1) { animation: none; mix-blend-mode: normal; }::view-transition-group(astro-iidcp2e2-1) { animation: none } }[data-astro-transition-fallback="old"] [data-astro-transition-scope="astro-iidcp2e2-1"],
 			[data-astro-transition-fallback="old"][data-astro-transition-scope="astro-iidcp2e2-1"] { animation: none; mix-blend-mode: normal; }[data-astro-transition-fallback="new"] [data-astro-transition-scope="astro-iidcp2e2-1"],
 			[data-astro-transition-fallback="new"][data-astro-transition-scope="astro-iidcp2e2-1"] { animation: none; mix-blend-mode: normal; }</style><style>[data-astro-transition-scope="astro-xikxfxwm-3"] { view-transition-name: astro-xikxfxwm-3; }@layer astro { ::view-transition-old(astro-xikxfxwm-3) {
 	animation-duration: 180ms;
@@ -42,46 +42,46 @@
 	animation-fill-mode: both;
 	animation-name: astroFadeIn; }</style><style>[data-astro-transition-scope="astro-2e6ke2uy-4"] { view-transition-name: astro-2e6ke2uy-4; }@layer astro { ::view-transition-old(astro-2e6ke2uy-4) { animation: none; opacity: 0; mix-blend-mode: normal; }::view-transition-new(astro-2e6ke2uy-4) { animation: none; mix-blend-mode: normal; }::view-transition-group(astro-2e6ke2uy-4) { animation: none } }[data-astro-transition-fallback="old"] [data-astro-transition-scope="astro-2e6ke2uy-4"],
 			[data-astro-transition-fallback="old"][data-astro-transition-scope="astro-2e6ke2uy-4"] { animation: none; mix-blend-mode: normal; }[data-astro-transition-fallback="new"] [data-astro-transition-scope="astro-2e6ke2uy-4"],
-			[data-astro-transition-fallback="new"][data-astro-transition-scope="astro-2e6ke2uy-4"] { animation: none; mix-blend-mode: normal; }</style></head> <body> <div class="pf-v6-c-page">  <script>(()=>{var l=(n,t)=>{let i=async()=>{await(await n())()},e=typeof t.value=="object"?t.value:void 0,s={timeout:e==null?void 0:e.timeout};"requestIdleCallback"in window?window.requestIdleCallback(i,s):setTimeout(i,s.timeout||200)};(self.Astro||(self.Astro={})).idle=l;window.dispatchEvent(new Event("astro:idle"));})();</script><header class="pf-v6-c-masthead pf-m-display-inline-on-md"> <div class="pf-v6-c-masthead__main"> <span class="pf-v6-c-masthead__toggle"> <astro-island uid="1rigPv" prefix="r5" component-url="/_astro/PageToggle.pXRgGXc2.js" component-export="PageToggle" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;data-astro-transition-persist&quot;:[0,&quot;astro-u5p5alki-2&quot;]}" ssr client="idle" opts="{&quot;name&quot;:&quot;PageToggle&quot;,&quot;value&quot;:true}" data-astro-transition-persist="astro-u5p5alki-2" await-children><button id="nav-toggle" aria-expanded="true" aria-label="Global navigation" class="pf-v6-c-button pf-m-plain" type="button" data-ouia-component-type="PF6/Button" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Button-plain-340"><span class="pf-v6-c-button__text"><svg class="pf-v6-svg" viewBox="0 0 448 512" fill="currentColor" aria-hidden="true" role="img" width="1em" height="1em"><path d="M16 132h416c8.837 0 16-7.163 16-16V76c0-8.837-7.163-16-16-16H16C7.163 60 0 67.163 0 76v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16z"></path></svg></span></button><!--astro:end--></astro-island> </span> <div class="pf-v6-c-masthead__brand"> <a class="pf-v6-c-masthead__logo" tabindex="0" href="/"> <img class="pf-v6-c-brand" style="--pf-v6-c-brand--Height:36px" src="/PF-HorizontalLogo-Color.svg" alt="PatternFly"/> </a> </div> </div> <div class="pf-v6-c-masthead__content"> <astro-island uid="1psyYL" prefix="r7" component-url="/_astro/Toolbar.BNjGRsAQ.js" component-export="Toolbar" renderer-url="/_astro/client.DN8ES6L5.js" props="{}" ssr client="idle" opts="{&quot;name&quot;:&quot;ReactToolbar&quot;,&quot;value&quot;:true}" await-children><div class="pf-v6-c-toolbar pf-m-static" id="toolbar" data-ouia-component-type="PF6/Toolbar" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Toolbar-114"><div class="pf-v6-c-toolbar__content"><div class="pf-v6-c-toolbar__content-section"><div class="pf-v6-c-toolbar__group pf-m-action-group-plain pf-m-align-end pf-m-gap-none pf-m-gap-md-on-md"><div class="pf-v6-c-toolbar__item"></div><div class="pf-v6-c-toolbar__item"><div class="pf-v6-c-input-group ws-global-search"><div class="pf-v6-c-input-group__item"><button aria-expanded="false" aria-label="Expandable search input toggle" class="pf-v6-c-button pf-m-plain" type="button" data-ouia-component-type="PF6/Button" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Button-plain-341"><span class="pf-v6-c-button__icon"><svg class="pf-v6-svg" viewBox="0 0 512 512" fill="currentColor" aria-hidden="true" role="img" width="1em" height="1em"><path d="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"></path></svg></span></button></div></div></div><div class="pf-v6-c-toolbar__item"><a href="//github.com/patternfly" target="top" aria-label="PatternFly GitHub page" class="pf-v6-c-button pf-m-plain" data-ouia-component-type="PF6/Button" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Button-plain-342"><span class="pf-v6-c-button__text"><svg class="pf-v6-svg" viewBox="0 0 496 512" fill="currentColor" aria-hidden="true" role="img" width="1em" height="1em"><path d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"></path></svg></span></a></div><div class="pf-v6-c-toolbar__item"><button class="pf-v6-c-menu-toggle" type="button" aria-expanded="false" data-ouia-component-type="PF6/MenuToggle" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-MenuToggle-114"><span class="pf-v6-c-menu-toggle__text">Release 6.1.0</span><span class="pf-v6-c-menu-toggle__controls"><span class="pf-v6-c-menu-toggle__toggle-icon"><svg class="pf-v6-svg" viewBox="0 0 320 512" fill="currentColor" aria-hidden="true" role="img" width="1em" height="1em"><path d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"></path></svg></span></span></button></div></div></div></div><div class="pf-v6-c-toolbar__content pf-m-hidden" hidden=""><div class="pf-v6-c-toolbar__group"></div></div></div><!--astro:end--></astro-island> </div> </header> <astro-island uid="193Wv7" component-url="/_astro/Navigation.B2RHZcqO.js" component-export="Navigation" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;navData&quot;:[1,[[1,[[0,{&quot;id&quot;:[0,&quot;src/components/aboutmodal/examples/aboutmodal&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;About modal&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/accordion/examples/accordion&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Accordion&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/actionlist/examples/actionlist&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Action list&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/alert/examples/alert&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Alert&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/avatar/examples/avatar&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Avatar&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/backtotop/examples/backtotop&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Back to top&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/backdrop/examples/backdrop&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Backdrop&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/backgroundimage/examples/backgroundimage&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Background image&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/badge/examples/badge&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Badge&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/banner/examples/banner&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Banner&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/brand/examples/brand&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Brand&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/breadcrumb/examples/breadcrumb&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Breadcrumb&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/button/examples/button&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Button&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/calendarmonth/examples/calendarmonth&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Calendar month&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/card/examples/card&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Card&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/checkbox/examples/checkbox&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Checkbox&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/deprecated/components/chip/examples/chip&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Chip&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/clipboardcopy/examples/clipboardcopy&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Clipboard copy&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/codeblock/examples/codeblock&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Code block&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/content/examples/content&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Content&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/datalist/examples/datalist&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Data list&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/datepicker/examples/datepicker&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Date picker&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/descriptionlist/examples/descriptionlist&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Description list&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/divider/examples/divider&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Divider&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/deprecated/components/dragdrop/examples/dragdrop&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Drag and drop&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/drawer/examples/drawer&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Drawer&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/dropdown/examples/dropdown&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Dropdown&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/duallistselector/examples/duallistselector&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Dual list selector&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/emptystate/examples/emptystate&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Empty state&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/expandablesection/examples/expandablesection&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Expandable section&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/form/examples/form&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Form&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/formselect/examples/formselect&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Form select&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/helpertext/examples/helpertext&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Helper text&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/hint/examples/hint&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Hint&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/icon/examples/icon&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Icon&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/inputgroup/examples/inputgroup&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Input group&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/jumplinks/examples/jumplinks&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Jump links&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/label/examples/label&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Label&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/list/examples/list&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;List&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/loginpage/examples/loginpage&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Login page&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/masthead/examples/masthead&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Masthead&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/menu/examples/menu&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Menu&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/menutoggle/examples/menutoggle&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Menu toggle&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/modal/examples/modal&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Modal&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/multiplefileupload/examples/multiplefileupload&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Multiple file upload&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/nav/examples/nav&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Navigation&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/notificationbadge/examples/notificationbadge&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Notification badge&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/notificationdrawer/examples/notificationdrawer&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Notification drawer&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/numberinput/examples/numberinput&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Number input&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/overflowmenu/examples/overflowmenu&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Overflow menu&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/page/examples/page&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Page&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/pagination/examples/pagination&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Pagination&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/panel/examples/panel&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Panel&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/popover/examples/popover&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Popover&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/progress/examples/progress&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Progress&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/progressstepper/examples/progressstepper&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Progress stepper&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/radio/examples/radio&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Radio&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/searchinput/examples/searchinput&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Search input&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/select/examples/select&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Select&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/sidebar/examples/sidebar&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Sidebar&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/fileupload/examples/fileupload&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Simple file upload&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/simplelist/examples/simplelist&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Simple list&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/skeleton/examples/skeleton&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Skeleton&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/skiptocontent/examples/skiptocontent&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Skip to content&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/slider/examples/slider&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Slider&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/spinner/examples/spinner&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Spinner&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/switch/examples/switch&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Switch&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/tabs/examples/tabs&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Tabs&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/textarea/examples/textarea&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Text area&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/textinput/examples/textinput&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Text input&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/textinputgroup/examples/textinputgroup&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Text input group&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/deprecated/components/tile/examples/tile&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Tile&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/timepicker/examples/timepicker&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Time picker&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/timestamp/examples/timestamp&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Timestamp&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/title/examples/title&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Title&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/togglegroup/examples/togglegroup&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Toggle group&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/toolbar/examples/toolbar&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Toolbar&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/tooltip/examples/tooltip&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Tooltip&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/treeview/examples/treeview&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Tree view&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/truncate/examples/truncate&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Truncate&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/wizard/examples/wizard&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Wizard&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}]]]]],&quot;data-astro-transition-scope&quot;:[0,&quot;astro-xikxfxwm-3&quot;]}" ssr client="only" opts="{&quot;name&quot;:&quot;ReactNav&quot;,&quot;value&quot;:&quot;react&quot;}" data-astro-transition-scope="astro-xikxfxwm-3"></astro-island> <div class="pf-v6-c-page__main-container"> <main class="pf-v6-c-page__main"> <section class="pf-v6-c-page__main-section"><div class="pf-v6-c-page__main-body">    <section id="ws-sticky-nav-tabs" class="pf-v6-c-page__main-tabs pf-m-sticky-top"><div class="pf-v6-c-page__main-body"> <div class="pf-v6-c-tabs pf-m-page-insets pf-m-no-border-bottom"> <ul class="pf-v6-c-tabs__list"> <li class="pf-v6-c-tabs__item pf-m-current"> <a class="pf-v6-c-tabs__link" href="/components/form/react"> React </a> </li> </ul> </div> </div></section><section id="main-content" class="pf-v6-c-page__main-section pf-m-fill"><div class="pf-v6-c-page__main-body"> <h2 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2098" data-pf-content="true" class="pf-v6-c-content--h2">Examples</h2>
-<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2112" data-pf-content="true" class="pf-v6-c-content--p">When using helper text inside a <code>FormGroup</code>, the <code>HelperText</code> component should be wrapped with the <code>FormHelperText</code> component to provide additional spacing.</p>
-<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2099" data-pf-content="true" class="pf-v6-c-content--h3">Basic</h3>
+			[data-astro-transition-fallback="new"][data-astro-transition-scope="astro-2e6ke2uy-4"] { animation: none; mix-blend-mode: normal; }</style></head> <body> <div class="pf-v6-c-page">  <script>(()=>{var l=(n,t)=>{let i=async()=>{await(await n())()},e=typeof t.value=="object"?t.value:void 0,s={timeout:e==null?void 0:e.timeout};"requestIdleCallback"in window?window.requestIdleCallback(i,s):setTimeout(i,s.timeout||200)};(self.Astro||(self.Astro={})).idle=l;window.dispatchEvent(new Event("astro:idle"));})();</script><header class="pf-v6-c-masthead pf-m-display-inline-on-md"> <div class="pf-v6-c-masthead__main"> <span class="pf-v6-c-masthead__toggle"> <astro-island uid="wrB0c" prefix="r5" component-url="/_astro/PageToggle.DBsLIFpI.js" component-export="PageToggle" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;data-astro-transition-persist&quot;:[0,&quot;astro-u5p5alki-2&quot;]}" ssr client="idle" opts="{&quot;name&quot;:&quot;PageToggle&quot;,&quot;value&quot;:true}" data-astro-transition-persist="astro-u5p5alki-2" await-children><button id="nav-toggle" aria-expanded="true" aria-label="Global navigation" class="pf-v6-c-button pf-m-plain" type="button" data-ouia-component-type="PF6/Button" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Button-plain-337"><span class="pf-v6-c-button__text"><svg class="pf-v6-svg" viewBox="0 0 448 512" fill="currentColor" aria-hidden="true" role="img" width="1em" height="1em"><path d="M16 132h416c8.837 0 16-7.163 16-16V76c0-8.837-7.163-16-16-16H16C7.163 60 0 67.163 0 76v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16z"></path></svg></span></button><!--astro:end--></astro-island> </span> <div class="pf-v6-c-masthead__brand"> <a class="pf-v6-c-masthead__logo" tabindex="0" href="/"> <img class="pf-v6-c-brand" style="--pf-v6-c-brand--Height:36px" src="/PF-HorizontalLogo-Color.svg" alt="PatternFly"/> </a> </div> </div> <div class="pf-v6-c-masthead__content"> <astro-island uid="Z2lNI52" prefix="r7" component-url="/_astro/Toolbar.BNjGRsAQ.js" component-export="Toolbar" renderer-url="/_astro/client.DN8ES6L5.js" props="{}" ssr client="idle" opts="{&quot;name&quot;:&quot;ReactToolbar&quot;,&quot;value&quot;:true}" await-children><div class="pf-v6-c-toolbar pf-m-static" id="toolbar" data-ouia-component-type="PF6/Toolbar" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Toolbar-113"><div class="pf-v6-c-toolbar__content"><div class="pf-v6-c-toolbar__content-section"><div class="pf-v6-c-toolbar__group pf-m-action-group-plain pf-m-align-end pf-m-gap-none pf-m-gap-md-on-md"><div class="pf-v6-c-toolbar__item"></div><div class="pf-v6-c-toolbar__item"><div class="pf-v6-c-input-group ws-global-search"><div class="pf-v6-c-input-group__item"><button aria-expanded="false" aria-label="Expandable search input toggle" class="pf-v6-c-button pf-m-plain" type="button" data-ouia-component-type="PF6/Button" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Button-plain-338"><span class="pf-v6-c-button__icon"><svg class="pf-v6-svg" viewBox="0 0 512 512" fill="currentColor" aria-hidden="true" role="img" width="1em" height="1em"><path d="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"></path></svg></span></button></div></div></div><div class="pf-v6-c-toolbar__item"><a href="//github.com/patternfly" target="top" aria-label="PatternFly GitHub page" class="pf-v6-c-button pf-m-plain" data-ouia-component-type="PF6/Button" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Button-plain-339"><span class="pf-v6-c-button__text"><svg class="pf-v6-svg" viewBox="0 0 496 512" fill="currentColor" aria-hidden="true" role="img" width="1em" height="1em"><path d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"></path></svg></span></a></div><div class="pf-v6-c-toolbar__item"><button class="pf-v6-c-menu-toggle" type="button" aria-expanded="false" data-ouia-component-type="PF6/MenuToggle" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-MenuToggle-113"><span class="pf-v6-c-menu-toggle__text">Release 6.1.0</span><span class="pf-v6-c-menu-toggle__controls"><span class="pf-v6-c-menu-toggle__toggle-icon"><svg class="pf-v6-svg" viewBox="0 0 320 512" fill="currentColor" aria-hidden="true" role="img" width="1em" height="1em"><path d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"></path></svg></span></span></button></div></div></div></div><div class="pf-v6-c-toolbar__content pf-m-hidden" hidden=""><div class="pf-v6-c-toolbar__group"></div></div></div><!--astro:end--></astro-island> </div> </header> <astro-island uid="193Wv7" component-url="/_astro/Navigation.B2RHZcqO.js" component-export="Navigation" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;navData&quot;:[1,[[1,[[0,{&quot;id&quot;:[0,&quot;src/components/aboutmodal/examples/aboutmodal&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;About modal&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/accordion/examples/accordion&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Accordion&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/actionlist/examples/actionlist&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Action list&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/alert/examples/alert&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Alert&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/avatar/examples/avatar&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Avatar&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/backtotop/examples/backtotop&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Back to top&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/backdrop/examples/backdrop&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Backdrop&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/backgroundimage/examples/backgroundimage&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Background image&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/badge/examples/badge&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Badge&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/banner/examples/banner&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Banner&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/brand/examples/brand&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Brand&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/breadcrumb/examples/breadcrumb&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Breadcrumb&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/button/examples/button&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Button&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/calendarmonth/examples/calendarmonth&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Calendar month&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/card/examples/card&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Card&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/checkbox/examples/checkbox&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Checkbox&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/deprecated/components/chip/examples/chip&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Chip&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/clipboardcopy/examples/clipboardcopy&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Clipboard copy&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/codeblock/examples/codeblock&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Code block&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/content/examples/content&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Content&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/datalist/examples/datalist&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Data list&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/datepicker/examples/datepicker&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Date picker&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/descriptionlist/examples/descriptionlist&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Description list&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/divider/examples/divider&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Divider&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/deprecated/components/dragdrop/examples/dragdrop&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Drag and drop&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/drawer/examples/drawer&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Drawer&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/dropdown/examples/dropdown&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Dropdown&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/duallistselector/examples/duallistselector&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Dual list selector&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/emptystate/examples/emptystate&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Empty state&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/expandablesection/examples/expandablesection&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Expandable section&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/form/examples/form&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Form&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/formselect/examples/formselect&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Form select&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/helpertext/examples/helpertext&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Helper text&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/hint/examples/hint&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Hint&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/icon/examples/icon&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Icon&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/inputgroup/examples/inputgroup&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Input group&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/jumplinks/examples/jumplinks&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Jump links&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/label/examples/label&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Label&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/list/examples/list&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;List&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/loginpage/examples/loginpage&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Login page&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/masthead/examples/masthead&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Masthead&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/menu/examples/menu&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Menu&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/menutoggle/examples/menutoggle&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Menu toggle&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/modal/examples/modal&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Modal&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/multiplefileupload/examples/multiplefileupload&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Multiple file upload&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/nav/examples/nav&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Navigation&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/notificationbadge/examples/notificationbadge&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Notification badge&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/notificationdrawer/examples/notificationdrawer&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Notification drawer&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/numberinput/examples/numberinput&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Number input&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/overflowmenu/examples/overflowmenu&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Overflow menu&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/page/examples/page&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Page&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/pagination/examples/pagination&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Pagination&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/panel/examples/panel&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Panel&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/popover/examples/popover&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Popover&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/progress/examples/progress&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Progress&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/progressstepper/examples/progressstepper&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Progress stepper&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/radio/examples/radio&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Radio&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/searchinput/examples/searchinput&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Search input&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/select/examples/select&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Select&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/sidebar/examples/sidebar&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Sidebar&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/fileupload/examples/fileupload&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Simple file upload&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/simplelist/examples/simplelist&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Simple list&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/skeleton/examples/skeleton&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Skeleton&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/skiptocontent/examples/skiptocontent&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Skip to content&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/slider/examples/slider&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Slider&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/spinner/examples/spinner&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Spinner&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/switch/examples/switch&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Switch&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/tabs/examples/tabs&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Tabs&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/textarea/examples/textarea&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Text area&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/textinput/examples/textinput&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Text input&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/textinputgroup/examples/textinputgroup&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Text input group&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/deprecated/components/tile/examples/tile&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Tile&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/timepicker/examples/timepicker&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Time picker&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/timestamp/examples/timestamp&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Timestamp&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/title/examples/title&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Title&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/togglegroup/examples/togglegroup&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Toggle group&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/toolbar/examples/toolbar&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Toolbar&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/tooltip/examples/tooltip&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Tooltip&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/treeview/examples/treeview&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Tree view&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/truncate/examples/truncate&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Truncate&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/wizard/examples/wizard&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Wizard&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}]]]]],&quot;data-astro-transition-scope&quot;:[0,&quot;astro-xikxfxwm-3&quot;]}" ssr client="only" opts="{&quot;name&quot;:&quot;ReactNav&quot;,&quot;value&quot;:&quot;react&quot;}" data-astro-transition-scope="astro-xikxfxwm-3"></astro-island> <div class="pf-v6-c-page__main-container"> <main class="pf-v6-c-page__main"> <section class="pf-v6-c-page__main-section"><div class="pf-v6-c-page__main-body">    <section id="ws-sticky-nav-tabs" class="pf-v6-c-page__main-tabs pf-m-sticky-top"><div class="pf-v6-c-page__main-body"> <div class="pf-v6-c-tabs pf-m-page-insets pf-m-no-border-bottom"> <ul class="pf-v6-c-tabs__list"> <li class="pf-v6-c-tabs__item pf-m-current"> <a class="pf-v6-c-tabs__link" href="/components/form/react"> React </a> </li> </ul> </div> </div></section><section id="main-content" class="pf-v6-c-page__main-section pf-m-fill"><div class="pf-v6-c-page__main-body"> <h2 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2064" data-pf-content="true" class="pf-v6-c-content--h2">Examples</h2>
+<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2078" data-pf-content="true" class="pf-v6-c-content--p">When using helper text inside a <code>FormGroup</code>, the <code>HelperText</code> component should be wrapped with the <code>FormHelperText</code> component to provide additional spacing.</p>
+<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2065" data-pf-content="true" class="pf-v6-c-content--h3">Basic</h3>
-<style>astro-island,astro-slot,astro-static-slot{display:contents}</style><script>(()=>{var e=async t=>{await(await t())()};(self.Astro||(self.Astro={})).only=e;window.dispatchEvent(new Event("astro:only"));})();</script><script>(()=>{var A=Object.defineProperty;var g=(i,o,a)=>o in i?A(i,o,{enumerable:!0,configurable:!0,writable:!0,value:a}):i[o]=a;var d=(i,o,a)=>g(i,typeof o!="symbol"?o+"":o,a);{let i={0:t=>m(t),1:t=>a(t),2:t=>new RegExp(t),3:t=>new Date(t),4:t=>new Map(a(t)),5:t=>new Set(a(t)),6:t=>BigInt(t),7:t=>new URL(t),8:t=>new Uint8Array(t),9:t=>new Uint16Array(t),10:t=>new Uint32Array(t),11:t=>1/0*t},o=t=>{let[l,e]=t;return l in i?i[l](e):void 0},a=t=>t.map(o),m=t=>typeof t!="object"||t===null?t:Object.fromEntries(Object.entries(t).map(([l,e])=>[l,o(e)]));class y extends HTMLElement{constructor(){super(...arguments);d(this,"Component");d(this,"hydrator");d(this,"hydrate",async()=>{var b;if(!this.hydrator||!this.isConnected)return;let e=(b=this.parentElement)==null?void 0:b.closest("astro-island[ssr]");if(e){e.addEventListener("astro:hydrate",this.hydrate,{once:!0});return}let c=this.querySelectorAll("astro-slot"),n={},h=this.querySelectorAll("template[data-astro-template]");for(let r of h){let s=r.closest(this.tagName);s!=null&&s.isSameNode(this)&&(n[r.getAttribute("data-astro-template")||"default"]=r.innerHTML,r.remove())}for(let r of c){let s=r.closest(this.tagName);s!=null&&s.isSameNode(this)&&(n[r.getAttribute("name")||"default"]=r.innerHTML)}let p;try{p=this.hasAttribute("props")?m(JSON.parse(this.getAttribute("props"))):{}}catch(r){let s=this.getAttribute("component-url")||"<unknown>",v=this.getAttribute("component-export");throw v&&(s+=` (export ${v})`),console.error(`[hydrate] Error parsing props for component ${s}`,this.getAttribute("props"),r),r}let u;await this.hydrator(this)(this.Component,p,n,{client:this.getAttribute("client")}),this.removeAttribute("ssr"),this.dispatchEvent(new CustomEvent("astro:hydrate"))});d(this,"unmount",()=>{this.isConnected||this.dispatchEvent(new CustomEvent("astro:unmount"))})}disconnectedCallback(){document.removeEventListener("astro:after-swap",this.unmount),document.addEventListener("astro:after-swap",this.unmount,{once:!0})}connectedCallback(){if(!this.hasAttribute("await-children")||document.readyState==="interactive"||document.readyState==="complete")this.childrenConnectedCallback();else{let e=()=>{document.removeEventListener("DOMContentLoaded",e),c.disconnect(),this.childrenConnectedCallback()},c=new MutationObserver(()=>{var n;((n=this.lastChild)==null?void 0:n.nodeType)===Node.COMMENT_NODE&&this.lastChild.nodeValue==="astro:end"&&(this.lastChild.remove(),e())});c.observe(this,{childList:!0}),document.addEventListener("DOMContentLoaded",e)}}async childrenConnectedCallback(){let e=this.getAttribute("before-hydration-url");e&&await import(e),this.start()}async start(){let e=JSON.parse(this.getAttribute("opts")),c=this.getAttribute("client");if(Astro[c]===void 0){window.addEventListener(`astro:${c}`,()=>this.start(),{once:!0});return}try{await Astro[c](async()=>{let n=this.getAttribute("renderer-url"),[h,{default:p}]=await Promise.all([import(this.getAttribute("component-url")),n?import(n):()=>()=>{}]),u=this.getAttribute("component-export")||"default";if(!u.includes("."))this.Component=h[u];else{this.Component=h;for(let f of u.split("."))this.Component=this.Component[f]}return this.hydrator=p,this.hydrate},e,this)}catch(n){console.error(`[astro-island] Error hydrating ${this.getAttribute("component-url")}`,n)}}attributeChangedCallback(){this.hydrate()}}d(y,"observedAttributes",["props"]),customElements.get("astro-island")||customElements.define("astro-island",y)}})();</script><astro-island uid="1q72d2" component-url="/_astro/LiveExample.BOl02361.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;src&quot;:[0,&quot;import { useRef, useState } from &#39;react&#39;;\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 &#39;@patternfly/react-core&#39;;\n\nexport const FormBasic: React.FunctionComponent = () =&gt; {\n  const [name, setName] = useState(&#39;&#39;);\n  const [email, setEmail] = useState(&#39;&#39;);\n  const [phone, setPhone] = useState(&#39;&#39;);\n  const labelHelpRef = useRef(null);\n\n  const handleNameChange = (_event, name: string) =&gt; {\n    setName(name);\n  };\n\n  const handleEmailChange = (_event, email: string) =&gt; {\n    setEmail(email);\n  };\n\n  const handlePhoneChange = (_event, phone: string) =&gt; {\n    setPhone(phone);\n  };\n\n  return (\n    &lt;Form&gt;\n      &lt;FormGroup\n        label=\&quot;Full name\&quot;\n        labelHelp={\n          &lt;Popover\n            triggerRef={labelHelpRef}\n            headerContent={\n              &lt;div&gt;\n                The{&#39; &#39;}\n                &lt;a href=\&quot;https://schema.org/name\&quot; target=\&quot;_blank\&quot; rel=\&quot;noreferrer\&quot;&gt;\n                  name\n                &lt;/a&gt;{&#39; &#39;}\n                of a{&#39; &#39;}\n                &lt;a href=\&quot;https://schema.org/Person\&quot; target=\&quot;_blank\&quot; rel=\&quot;noreferrer\&quot;&gt;\n                  Person\n                &lt;/a&gt;\n              &lt;/div&gt;\n            }\n            bodyContent={\n              &lt;div&gt;\n                Often composed of{&#39; &#39;}\n                &lt;a href=\&quot;https://schema.org/givenName\&quot; target=\&quot;_blank\&quot; rel=\&quot;noreferrer\&quot;&gt;\n                  givenName\n                &lt;/a&gt;{&#39; &#39;}\n                and{&#39; &#39;}\n                &lt;a href=\&quot;https://schema.org/familyName\&quot; target=\&quot;_blank\&quot; rel=\&quot;noreferrer\&quot;&gt;\n                  familyName\n                &lt;/a&gt;\n                .\n              &lt;/div&gt;\n            }\n          &gt;\n            &lt;FormGroupLabelHelp ref={labelHelpRef} aria-label=\&quot;More info for name field\&quot; /&gt;\n          &lt;/Popover&gt;\n        }\n        isRequired\n        fieldId=\&quot;simple-form-name-01\&quot;\n      &gt;\n        &lt;TextInput\n          isRequired\n          type=\&quot;text\&quot;\n          id=\&quot;simple-form-name-01\&quot;\n          name=\&quot;simple-form-name-01\&quot;\n          aria-describedby=\&quot;simple-form-name-01-helper\&quot;\n          value={name}\n          onChange={handleNameChange}\n        /&gt;\n        &lt;FormHelperText&gt;\n          &lt;HelperText&gt;\n            &lt;HelperTextItem&gt;Include your middle name if you have one.&lt;/HelperTextItem&gt;\n          &lt;/HelperText&gt;\n        &lt;/FormHelperText&gt;\n      &lt;/FormGroup&gt;\n      &lt;FormGroup label=\&quot;Email\&quot; isRequired fieldId=\&quot;simple-form-email-01\&quot;&gt;\n        &lt;TextInput\n          isRequired\n          type=\&quot;email\&quot;\n          id=\&quot;simple-form-email-01\&quot;\n          name=\&quot;simple-form-email-01\&quot;\n          value={email}\n          onChange={handleEmailChange}\n        /&gt;\n      &lt;/FormGroup&gt;\n      &lt;FormGroup label=\&quot;Phone number\&quot; isRequired fieldId=\&quot;simple-form-phone-01\&quot;&gt;\n        &lt;TextInput\n          isRequired\n          type=\&quot;tel\&quot;\n          id=\&quot;simple-form-phone-01\&quot;\n          name=\&quot;simple-form-phone-01\&quot;\n          placeholder=\&quot;555-555-5555\&quot;\n          value={phone}\n          onChange={handlePhoneChange}\n        /&gt;\n      &lt;/FormGroup&gt;\n      &lt;FormGroup role=\&quot;group\&quot; isInline fieldId=\&quot;basic-form-checkbox-group\&quot; label=\&quot;How can we contact you?\&quot;&gt;\n        &lt;Checkbox label=\&quot;Email\&quot; aria-label=\&quot;Email\&quot; id=\&quot;inlinecheck01\&quot; /&gt;\n        &lt;Checkbox label=\&quot;Phone\&quot; aria-label=\&quot;Phone\&quot; id=\&quot;inlinecheck02\&quot; /&gt;\n        &lt;Checkbox label=\&quot;Mail\&quot; aria-label=\&quot;Mail\&quot; id=\&quot;inlinecheck03\&quot; /&gt;\n      &lt;/FormGroup&gt;\n      &lt;FormGroup role=\&quot;radiogroup\&quot; isInline fieldId=\&quot;basic-form-radio-group\&quot; label=\&quot;Time zone\&quot;&gt;\n        &lt;Radio name=\&quot;basic-inline-radio\&quot; label=\&quot;Eastern\&quot; id=\&quot;basic-inline-radio-01\&quot; /&gt;\n        &lt;Radio name=\&quot;basic-inline-radio\&quot; label=\&quot;Central\&quot; id=\&quot;basic-inline-radio-02\&quot; /&gt;\n        &lt;Radio name=\&quot;basic-inline-radio\&quot; label=\&quot;Pacific\&quot; id=\&quot;basic-inline-radio-03\&quot; /&gt;\n      &lt;/FormGroup&gt;\n      &lt;FormGroup label=\&quot;Additional note\&quot; fieldId=\&quot;simple-form-note-01\&quot;&gt;\n        &lt;TextInput isDisabled type=\&quot;text\&quot; id=\&quot;simple-form-note-01\&quot; name=\&quot;simple-form-number\&quot; value=\&quot;disabled\&quot; /&gt;\n      &lt;/FormGroup&gt;\n      &lt;FormGroup fieldId=\&quot;checkbox01\&quot;&gt;\n        &lt;Checkbox label=\&quot;I&#39;d like updates via email.\&quot; id=\&quot;checkbox01\&quot; name=\&quot;checkbox01\&quot; aria-label=\&quot;Update via email\&quot; /&gt;\n      &lt;/FormGroup&gt;\n      &lt;ActionGroup&gt;\n        &lt;Button variant=\&quot;primary\&quot;&gt;Submit&lt;/Button&gt;\n        &lt;Button variant=\&quot;link\&quot;&gt;Cancel&lt;/Button&gt;\n      &lt;/ActionGroup&gt;\n    &lt;/Form&gt;\n  );\n};\n&quot;],&quot;html&quot;:[0]}" ssr client="only" opts="{&quot;name&quot;:&quot;LiveExampleBase&quot;,&quot;value&quot;:&quot;react&quot;}"></astro-island>
-<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2100" data-pf-content="true" class="pf-v6-c-content--h3">Horizontal</h3>
+<style>astro-island,astro-slot,astro-static-slot{display:contents}</style><script>(()=>{var e=async t=>{await(await t())()};(self.Astro||(self.Astro={})).only=e;window.dispatchEvent(new Event("astro:only"));})();</script><script>(()=>{var A=Object.defineProperty;var g=(i,o,a)=>o in i?A(i,o,{enumerable:!0,configurable:!0,writable:!0,value:a}):i[o]=a;var d=(i,o,a)=>g(i,typeof o!="symbol"?o+"":o,a);{let i={0:t=>m(t),1:t=>a(t),2:t=>new RegExp(t),3:t=>new Date(t),4:t=>new Map(a(t)),5:t=>new Set(a(t)),6:t=>BigInt(t),7:t=>new URL(t),8:t=>new Uint8Array(t),9:t=>new Uint16Array(t),10:t=>new Uint32Array(t),11:t=>1/0*t},o=t=>{let[l,e]=t;return l in i?i[l](e):void 0},a=t=>t.map(o),m=t=>typeof t!="object"||t===null?t:Object.fromEntries(Object.entries(t).map(([l,e])=>[l,o(e)]));class y extends HTMLElement{constructor(){super(...arguments);d(this,"Component");d(this,"hydrator");d(this,"hydrate",async()=>{var b;if(!this.hydrator||!this.isConnected)return;let e=(b=this.parentElement)==null?void 0:b.closest("astro-island[ssr]");if(e){e.addEventListener("astro:hydrate",this.hydrate,{once:!0});return}let c=this.querySelectorAll("astro-slot"),n={},h=this.querySelectorAll("template[data-astro-template]");for(let r of h){let s=r.closest(this.tagName);s!=null&&s.isSameNode(this)&&(n[r.getAttribute("data-astro-template")||"default"]=r.innerHTML,r.remove())}for(let r of c){let s=r.closest(this.tagName);s!=null&&s.isSameNode(this)&&(n[r.getAttribute("name")||"default"]=r.innerHTML)}let p;try{p=this.hasAttribute("props")?m(JSON.parse(this.getAttribute("props"))):{}}catch(r){let s=this.getAttribute("component-url")||"<unknown>",v=this.getAttribute("component-export");throw v&&(s+=` (export ${v})`),console.error(`[hydrate] Error parsing props for component ${s}`,this.getAttribute("props"),r),r}let u;await this.hydrator(this)(this.Component,p,n,{client:this.getAttribute("client")}),this.removeAttribute("ssr"),this.dispatchEvent(new CustomEvent("astro:hydrate"))});d(this,"unmount",()=>{this.isConnected||this.dispatchEvent(new CustomEvent("astro:unmount"))})}disconnectedCallback(){document.removeEventListener("astro:after-swap",this.unmount),document.addEventListener("astro:after-swap",this.unmount,{once:!0})}connectedCallback(){if(!this.hasAttribute("await-children")||document.readyState==="interactive"||document.readyState==="complete")this.childrenConnectedCallback();else{let e=()=>{document.removeEventListener("DOMContentLoaded",e),c.disconnect(),this.childrenConnectedCallback()},c=new MutationObserver(()=>{var n;((n=this.lastChild)==null?void 0:n.nodeType)===Node.COMMENT_NODE&&this.lastChild.nodeValue==="astro:end"&&(this.lastChild.remove(),e())});c.observe(this,{childList:!0}),document.addEventListener("DOMContentLoaded",e)}}async childrenConnectedCallback(){let e=this.getAttribute("before-hydration-url");e&&await import(e),this.start()}async start(){let e=JSON.parse(this.getAttribute("opts")),c=this.getAttribute("client");if(Astro[c]===void 0){window.addEventListener(`astro:${c}`,()=>this.start(),{once:!0});return}try{await Astro[c](async()=>{let n=this.getAttribute("renderer-url"),[h,{default:p}]=await Promise.all([import(this.getAttribute("component-url")),n?import(n):()=>()=>{}]),u=this.getAttribute("component-export")||"default";if(!u.includes("."))this.Component=h[u];else{this.Component=h;for(let f of u.split("."))this.Component=this.Component[f]}return this.hydrator=p,this.hydrate},e,this)}catch(n){console.error(`[astro-island] Error hydrating ${this.getAttribute("component-url")}`,n)}}attributeChangedCallback(){this.hydrate()}}d(y,"observedAttributes",["props"]),customElements.get("astro-island")||customElements.define("astro-island",y)}})();</script><astro-island uid="1q72d2" component-url="/_astro/LiveExample.B5R4Dzng.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;src&quot;:[0,&quot;import { useRef, useState } from &#39;react&#39;;\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 &#39;@patternfly/react-core&#39;;\n\nexport const FormBasic: React.FunctionComponent = () =&gt; {\n  const [name, setName] = useState(&#39;&#39;);\n  const [email, setEmail] = useState(&#39;&#39;);\n  const [phone, setPhone] = useState(&#39;&#39;);\n  const labelHelpRef = useRef(null);\n\n  const handleNameChange = (_event, name: string) =&gt; {\n    setName(name);\n  };\n\n  const handleEmailChange = (_event, email: string) =&gt; {\n    setEmail(email);\n  };\n\n  const handlePhoneChange = (_event, phone: string) =&gt; {\n    setPhone(phone);\n  };\n\n  return (\n    &lt;Form&gt;\n      &lt;FormGroup\n        label=\&quot;Full name\&quot;\n        labelHelp={\n          &lt;Popover\n            triggerRef={labelHelpRef}\n            headerContent={\n              &lt;div&gt;\n                The{&#39; &#39;}\n                &lt;a href=\&quot;https://schema.org/name\&quot; target=\&quot;_blank\&quot; rel=\&quot;noreferrer\&quot;&gt;\n                  name\n                &lt;/a&gt;{&#39; &#39;}\n                of a{&#39; &#39;}\n                &lt;a href=\&quot;https://schema.org/Person\&quot; target=\&quot;_blank\&quot; rel=\&quot;noreferrer\&quot;&gt;\n                  Person\n                &lt;/a&gt;\n              &lt;/div&gt;\n            }\n            bodyContent={\n              &lt;div&gt;\n                Often composed of{&#39; &#39;}\n                &lt;a href=\&quot;https://schema.org/givenName\&quot; target=\&quot;_blank\&quot; rel=\&quot;noreferrer\&quot;&gt;\n                  givenName\n                &lt;/a&gt;{&#39; &#39;}\n                and{&#39; &#39;}\n                &lt;a href=\&quot;https://schema.org/familyName\&quot; target=\&quot;_blank\&quot; rel=\&quot;noreferrer\&quot;&gt;\n                  familyName\n                &lt;/a&gt;\n                .\n              &lt;/div&gt;\n            }\n          &gt;\n            &lt;FormGroupLabelHelp ref={labelHelpRef} aria-label=\&quot;More info for name field\&quot; /&gt;\n          &lt;/Popover&gt;\n        }\n        isRequired\n        fieldId=\&quot;simple-form-name-01\&quot;\n      &gt;\n        &lt;TextInput\n          isRequired\n          type=\&quot;text\&quot;\n          id=\&quot;simple-form-name-01\&quot;\n          name=\&quot;simple-form-name-01\&quot;\n          aria-describedby=\&quot;simple-form-name-01-helper\&quot;\n          value={name}\n          onChange={handleNameChange}\n        /&gt;\n        &lt;FormHelperText&gt;\n          &lt;HelperText&gt;\n            &lt;HelperTextItem&gt;Include your middle name if you have one.&lt;/HelperTextItem&gt;\n          &lt;/HelperText&gt;\n        &lt;/FormHelperText&gt;\n      &lt;/FormGroup&gt;\n      &lt;FormGroup label=\&quot;Email\&quot; isRequired fieldId=\&quot;simple-form-email-01\&quot;&gt;\n        &lt;TextInput\n          isRequired\n          type=\&quot;email\&quot;\n          id=\&quot;simple-form-email-01\&quot;\n          name=\&quot;simple-form-email-01\&quot;\n          value={email}\n          onChange={handleEmailChange}\n        /&gt;\n      &lt;/FormGroup&gt;\n      &lt;FormGroup label=\&quot;Phone number\&quot; isRequired fieldId=\&quot;simple-form-phone-01\&quot;&gt;\n        &lt;TextInput\n          isRequired\n          type=\&quot;tel\&quot;\n          id=\&quot;simple-form-phone-01\&quot;\n          name=\&quot;simple-form-phone-01\&quot;\n          placeholder=\&quot;555-555-5555\&quot;\n          value={phone}\n          onChange={handlePhoneChange}\n        /&gt;\n      &lt;/FormGroup&gt;\n      &lt;FormGroup role=\&quot;group\&quot; isInline fieldId=\&quot;basic-form-checkbox-group\&quot; label=\&quot;How can we contact you?\&quot;&gt;\n        &lt;Checkbox label=\&quot;Email\&quot; aria-label=\&quot;Email\&quot; id=\&quot;inlinecheck01\&quot; /&gt;\n        &lt;Checkbox label=\&quot;Phone\&quot; aria-label=\&quot;Phone\&quot; id=\&quot;inlinecheck02\&quot; /&gt;\n        &lt;Checkbox label=\&quot;Mail\&quot; aria-label=\&quot;Mail\&quot; id=\&quot;inlinecheck03\&quot; /&gt;\n      &lt;/FormGroup&gt;\n      &lt;FormGroup role=\&quot;radiogroup\&quot; isInline fieldId=\&quot;basic-form-radio-group\&quot; label=\&quot;Time zone\&quot;&gt;\n        &lt;Radio name=\&quot;basic-inline-radio\&quot; label=\&quot;Eastern\&quot; id=\&quot;basic-inline-radio-01\&quot; /&gt;\n        &lt;Radio name=\&quot;basic-inline-radio\&quot; label=\&quot;Central\&quot; id=\&quot;basic-inline-radio-02\&quot; /&gt;\n        &lt;Radio name=\&quot;basic-inline-radio\&quot; label=\&quot;Pacific\&quot; id=\&quot;basic-inline-radio-03\&quot; /&gt;\n      &lt;/FormGroup&gt;\n      &lt;FormGroup label=\&quot;Additional note\&quot; fieldId=\&quot;simple-form-note-01\&quot;&gt;\n        &lt;TextInput isDisabled type=\&quot;text\&quot; id=\&quot;simple-form-note-01\&quot; name=\&quot;simple-form-number\&quot; value=\&quot;disabled\&quot; /&gt;\n      &lt;/FormGroup&gt;\n      &lt;FormGroup fieldId=\&quot;checkbox01\&quot;&gt;\n        &lt;Checkbox label=\&quot;I&#39;d like updates via email.\&quot; id=\&quot;checkbox01\&quot; name=\&quot;checkbox01\&quot; aria-label=\&quot;Update via email\&quot; /&gt;\n      &lt;/FormGroup&gt;\n      &lt;ActionGroup&gt;\n        &lt;Button variant=\&quot;primary\&quot;&gt;Submit&lt;/Button&gt;\n        &lt;Button variant=\&quot;link\&quot;&gt;Cancel&lt;/Button&gt;\n      &lt;/ActionGroup&gt;\n    &lt;/Form&gt;\n  );\n};\n&quot;],&quot;html&quot;:[0]}" ssr client="only" opts="{&quot;name&quot;:&quot;LiveExampleBase&quot;,&quot;value&quot;:&quot;react&quot;}"></astro-island>
+<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2066" data-pf-content="true" class="pf-v6-c-content--h3">Horizontal</h3>
-<astro-island uid="CeGOs" component-url="/_astro/LiveExample.BOl02361.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;src&quot;:[0,&quot;import { useState } from &#39;react&#39;;\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 &#39;@patternfly/react-core&#39;;\n\nexport const FormHorizontal: React.FunctionComponent = () =&gt; {\n  const [name, setName] = useState(&#39;&#39;);\n  const [email, setEmail] = useState(&#39;&#39;);\n  const [experience, setExperience] = useState(&#39;&#39;);\n  const [option, setOption] = useState(&#39;please choose&#39;);\n\n  const handleNameChange = (_event, name: string) =&gt; {\n    setName(name);\n  };\n\n  const handleEmailChange = (_event, email: string) =&gt; {\n    setEmail(email);\n  };\n\n  const handleExperienceChange = (_event, experience: string) =&gt; {\n    setExperience(experience);\n  };\n\n  const handleOptionChange = (_event: React.FormEvent&lt;HTMLSelectElement&gt;, value: string) =&gt; {\n    setOption(value);\n  };\n\n  const options = [\n    { value: &#39;select one&#39;, label: &#39;Select one&#39;, disabled: false },\n    { value: &#39;mr&#39;, label: &#39;Mr&#39;, disabled: false },\n    { value: &#39;miss&#39;, label: &#39;Miss&#39;, disabled: false },\n    { value: &#39;mrs&#39;, label: &#39;Mrs&#39;, disabled: false },\n    { value: &#39;ms&#39;, label: &#39;Ms&#39;, disabled: false },\n    { value: &#39;dr&#39;, label: &#39;Dr&#39;, disabled: false },\n    { value: &#39;other&#39;, label: &#39;Other&#39;, disabled: false }\n  ];\n\n  return (\n    &lt;Form isHorizontal&gt;\n      &lt;FormGroup label=\&quot;Full name\&quot; isRequired fieldId=\&quot;horizontal-form-name\&quot;&gt;\n        &lt;TextInput\n          value={name}\n          isRequired\n          type=\&quot;text\&quot;\n          id=\&quot;horizontal-form-name\&quot;\n          aria-describedby=\&quot;horizontal-form-name-helper\&quot;\n          name=\&quot;horizontal-form-name\&quot;\n          onChange={handleNameChange}\n        /&gt;\n        &lt;FormHelperText&gt;\n          &lt;HelperText&gt;\n            &lt;HelperTextItem&gt;Include your middle name if you have one.&lt;/HelperTextItem&gt;\n          &lt;/HelperText&gt;\n        &lt;/FormHelperText&gt;\n      &lt;/FormGroup&gt;\n      &lt;FormGroup label=\&quot;Email\&quot; isRequired fieldId=\&quot;horizontal-form-email\&quot;&gt;\n        &lt;TextInput\n          value={email}\n          isRequired\n          type=\&quot;email\&quot;\n          id=\&quot;horizontal-form-email\&quot;\n          name=\&quot;horizontal-form-email\&quot;\n          onChange={handleEmailChange}\n        /&gt;\n      &lt;/FormGroup&gt;\n      &lt;FormGroup label=\&quot;Your title\&quot; fieldId=\&quot;horizontal-form-title\&quot;&gt;\n        &lt;FormSelect\n          value={option}\n          onChange={handleOptionChange}\n          id=\&quot;horizontal-form-title\&quot;\n          name=\&quot;horizontal-form-title\&quot;\n          aria-label=\&quot;Your title\&quot;\n        &gt;\n          {options.map((option, index) =&gt; (\n            &lt;FormSelectOption isDisabled={option.disabled} key={index} value={option.value} label={option.label} /&gt;\n          ))}\n        &lt;/FormSelect&gt;\n      &lt;/FormGroup&gt;\n      &lt;FormGroup label=\&quot;Your experience\&quot; fieldId=\&quot;horizontal-form-exp\&quot;&gt;\n        &lt;TextArea\n          value={experience}\n          onChange={handleExperienceChange}\n          id=\&quot;horizontal-form-exp\&quot;\n          name=\&quot;horizontal-form-exp\&quot;\n        /&gt;\n      &lt;/FormGroup&gt;\n      &lt;FormGroup\n        label=\&quot;How can we contact you?\&quot;\n        isStack\n        fieldId=\&quot;horizontal-form-checkbox-group\&quot;\n        hasNoPaddingTop\n        role=\&quot;group\&quot;\n      &gt;\n        &lt;Checkbox label=\&quot;Email\&quot; id=\&quot;alt-form-checkbox-1\&quot; name=\&quot;alt-form-checkbox-1\&quot; /&gt;\n        &lt;Checkbox label=\&quot;Phone\&quot; id=\&quot;alt-form-checkbox-2\&quot; name=\&quot;alt-form-checkbox-2\&quot; /&gt;\n        &lt;Checkbox label=\&quot;Mail\&quot; id=\&quot;alt-form-checkbox-3\&quot; name=\&quot;alt-form-checkbox-3\&quot; /&gt;\n      &lt;/FormGroup&gt;\n      &lt;FormGroup role=\&quot;radiogroup\&quot; isStack fieldId=\&quot;horizontal-form-radio-group\&quot; hasNoPaddingTop label=\&quot;Time zone\&quot;&gt;\n        &lt;Radio name=\&quot;horizontal-inline-radio\&quot; label=\&quot;Eastern\&quot; id=\&quot;horizontal-inline-radio-01\&quot; /&gt;\n        &lt;Radio name=\&quot;horizontal-inline-radio\&quot; label=\&quot;Central\&quot; id=\&quot;horizontal-inline-radio-02\&quot; /&gt;\n        &lt;Radio name=\&quot;horizontal-inline-radio\&quot; label=\&quot;Pacific\&quot; id=\&quot;horizontal-inline-radio-03\&quot; /&gt;\n      &lt;/FormGroup&gt;\n      &lt;ActionGroup&gt;\n        &lt;Button variant=\&quot;primary\&quot;&gt;Submit&lt;/Button&gt;\n        &lt;Button variant=\&quot;link\&quot;&gt;Cancel&lt;/Button&gt;\n      &lt;/ActionGroup&gt;\n    &lt;/Form&gt;\n  );\n};\n&quot;],&quot;html&quot;:[0]}" ssr client="only" opts="{&quot;name&quot;:&quot;LiveExampleBase&quot;,&quot;value&quot;:&quot;react&quot;}"></astro-island>
-<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2101" data-pf-content="true" class="pf-v6-c-content--h3">Limit width</h3>
+<astro-island uid="CeGOs" component-url="/_astro/LiveExample.B5R4Dzng.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;src&quot;:[0,&quot;import { useState } from &#39;react&#39;;\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 &#39;@patternfly/react-core&#39;;\n\nexport const FormHorizontal: React.FunctionComponent = () =&gt; {\n  const [name, setName] = useState(&#39;&#39;);\n  const [email, setEmail] = useState(&#39;&#39;);\n  const [experience, setExperience] = useState(&#39;&#39;);\n  const [option, setOption] = useState(&#39;please choose&#39;);\n\n  const handleNameChange = (_event, name: string) =&gt; {\n    setName(name);\n  };\n\n  const handleEmailChange = (_event, email: string) =&gt; {\n    setEmail(email);\n  };\n\n  const handleExperienceChange = (_event, experience: string) =&gt; {\n    setExperience(experience);\n  };\n\n  const handleOptionChange = (_event: React.FormEvent&lt;HTMLSelectElement&gt;, value: string) =&gt; {\n    setOption(value);\n  };\n\n  const options = [\n    { value: &#39;select one&#39;, label: &#39;Select one&#39;, disabled: false },\n    { value: &#39;mr&#39;, label: &#39;Mr&#39;, disabled: false },\n    { value: &#39;miss&#39;, label: &#39;Miss&#39;, disabled: false },\n    { value: &#39;mrs&#39;, label: &#39;Mrs&#39;, disabled: false },\n    { value: &#39;ms&#39;, label: &#39;Ms&#39;, disabled: false },\n    { value: &#39;dr&#39;, label: &#39;Dr&#39;, disabled: false },\n    { value: &#39;other&#39;, label: &#39;Other&#39;, disabled: false }\n  ];\n\n  return (\n    &lt;Form isHorizontal&gt;\n      &lt;FormGroup label=\&quot;Full name\&quot; isRequired fieldId=\&quot;horizontal-form-name\&quot;&gt;\n        &lt;TextInput\n          value={name}\n          isRequired\n          type=\&quot;text\&quot;\n          id=\&quot;horizontal-form-name\&quot;\n          aria-describedby=\&quot;horizontal-form-name-helper\&quot;\n          name=\&quot;horizontal-form-name\&quot;\n          onChange={handleNameChange}\n        /&gt;\n        &lt;FormHelperText&gt;\n          &lt;HelperText&gt;\n            &lt;HelperTextItem&gt;Include your middle name if you have one.&lt;/HelperTextItem&gt;\n          &lt;/HelperText&gt;\n        &lt;/FormHelperText&gt;\n      &lt;/FormGroup&gt;\n      &lt;FormGroup label=\&quot;Email\&quot; isRequired fieldId=\&quot;horizontal-form-email\&quot;&gt;\n        &lt;TextInput\n          value={email}\n          isRequired\n          type=\&quot;email\&quot;\n          id=\&quot;horizontal-form-email\&quot;\n          name=\&quot;horizontal-form-email\&quot;\n          onChange={handleEmailChange}\n        /&gt;\n      &lt;/FormGroup&gt;\n      &lt;FormGroup label=\&quot;Your title\&quot; fieldId=\&quot;horizontal-form-title\&quot;&gt;\n        &lt;FormSelect\n          value={option}\n          onChange={handleOptionChange}\n          id=\&quot;horizontal-form-title\&quot;\n          name=\&quot;horizontal-form-title\&quot;\n          aria-label=\&quot;Your title\&quot;\n        &gt;\n          {options.map((option, index) =&gt; (\n            &lt;FormSelectOption isDisabled={option.disabled} key={index} value={option.value} label={option.label} /&gt;\n          ))}\n        &lt;/FormSelect&gt;\n      &lt;/FormGroup&gt;\n      &lt;FormGroup label=\&quot;Your experience\&quot; fieldId=\&quot;horizontal-form-exp\&quot;&gt;\n        &lt;TextArea\n          value={experience}\n          onChange={handleExperienceChange}\n          id=\&quot;horizontal-form-exp\&quot;\n          name=\&quot;horizontal-form-exp\&quot;\n        /&gt;\n      &lt;/FormGroup&gt;\n      &lt;FormGroup\n        label=\&quot;How can we contact you?\&quot;\n        isStack\n        fieldId=\&quot;horizontal-form-checkbox-group\&quot;\n        hasNoPaddingTop\n        role=\&quot;group\&quot;\n      &gt;\n        &lt;Checkbox label=\&quot;Email\&quot; id=\&quot;alt-form-checkbox-1\&quot; name=\&quot;alt-form-checkbox-1\&quot; /&gt;\n        &lt;Checkbox label=\&quot;Phone\&quot; id=\&quot;alt-form-checkbox-2\&quot; name=\&quot;alt-form-checkbox-2\&quot; /&gt;\n        &lt;Checkbox label=\&quot;Mail\&quot; id=\&quot;alt-form-checkbox-3\&quot; name=\&quot;alt-form-checkbox-3\&quot; /&gt;\n      &lt;/FormGroup&gt;\n      &lt;FormGroup role=\&quot;radiogroup\&quot; isStack fieldId=\&quot;horizontal-form-radio-group\&quot; hasNoPaddingTop label=\&quot;Time zone\&quot;&gt;\n        &lt;Radio name=\&quot;horizontal-inline-radio\&quot; label=\&quot;Eastern\&quot; id=\&quot;horizontal-inline-radio-01\&quot; /&gt;\n        &lt;Radio name=\&quot;horizontal-inline-radio\&quot; label=\&quot;Central\&quot; id=\&quot;horizontal-inline-radio-02\&quot; /&gt;\n        &lt;Radio name=\&quot;horizontal-inline-radio\&quot; label=\&quot;Pacific\&quot; id=\&quot;horizontal-inline-radio-03\&quot; /&gt;\n      &lt;/FormGroup&gt;\n      &lt;ActionGroup&gt;\n        &lt;Button variant=\&quot;primary\&quot;&gt;Submit&lt;/Button&gt;\n        &lt;Button variant=\&quot;link\&quot;&gt;Cancel&lt;/Button&gt;\n      &lt;/ActionGroup&gt;\n    &lt;/Form&gt;\n  );\n};\n&quot;],&quot;html&quot;:[0]}" ssr client="only" opts="{&quot;name&quot;:&quot;LiveExampleBase&quot;,&quot;value&quot;:&quot;react&quot;}"></astro-island>
+<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2067" data-pf-content="true" class="pf-v6-c-content--h3">Limit width</h3>
-<astro-island uid="ZBBfAv" component-url="/_astro/LiveExample.BOl02361.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;src&quot;:[0,&quot;import { useRef, useState } from &#39;react&#39;;\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 &#39;@patternfly/react-core&#39;;\n\nexport const FormLimitWidth: React.FunctionComponent = () =&gt; {\n  const [name, setName] = useState(&#39;&#39;);\n  const [email, setEmail] = useState(&#39;&#39;);\n  const [phone, setPhone] = useState(&#39;&#39;);\n  const labelHelpRef = useRef(null);\n\n  const handleNameChange = (_event, name: string) =&gt; {\n    setName(name);\n  };\n\n  const handleEmailChange = (_event, email: string) =&gt; {\n    setEmail(email);\n  };\n\n  const handlePhoneChange = (_event, phone: string) =&gt; {\n    setPhone(phone);\n  };\n\n  return (\n    &lt;Form isWidthLimited&gt;\n      &lt;FormGroup\n        label=\&quot;Full name\&quot;\n        labelHelp={\n          &lt;Popover\n            triggerRef={labelHelpRef}\n            headerContent={\n              &lt;div&gt;\n                The{&#39; &#39;}\n                &lt;a href=\&quot;https://schema.org/name\&quot; target=\&quot;_blank\&quot; rel=\&quot;noreferrer\&quot;&gt;\n                  name\n                &lt;/a&gt;{&#39; &#39;}\n                of a{&#39; &#39;}\n                &lt;a href=\&quot;https://schema.org/Person\&quot; target=\&quot;_blank\&quot; rel=\&quot;noreferrer\&quot;&gt;\n                  Person\n                &lt;/a&gt;\n              &lt;/div&gt;\n            }\n            bodyContent={\n              &lt;div&gt;\n                Often composed of{&#39; &#39;}\n                &lt;a href=\&quot;https://schema.org/givenName\&quot; target=\&quot;_blank\&quot; rel=\&quot;noreferrer\&quot;&gt;\n                  givenName\n                &lt;/a&gt;{&#39; &#39;}\n                and{&#39; &#39;}\n                &lt;a href=\&quot;https://schema.org/familyName\&quot; target=\&quot;_blank\&quot; rel=\&quot;noreferrer\&quot;&gt;\n                  familyName\n                &lt;/a&gt;\n                .\n              &lt;/div&gt;\n            }\n          &gt;\n            &lt;FormGroupLabelHelp ref={labelHelpRef} aria-label=\&quot;More info for name field\&quot; /&gt;\n          &lt;/Popover&gt;\n        }\n        isRequired\n        fieldId=\&quot;simple-form-name-02\&quot;\n      &gt;\n        &lt;TextInput\n          isRequired\n          type=\&quot;text\&quot;\n          id=\&quot;simple-form-name-02\&quot;\n          name=\&quot;simple-form-name-02\&quot;\n          aria-describedby=\&quot;simple-form-name-02-helper\&quot;\n          value={name}\n          onChange={handleNameChange}\n        /&gt;\n        &lt;FormHelperText&gt;\n          &lt;HelperText&gt;\n            &lt;HelperTextItem&gt;Include your middle name if you have one.&lt;/HelperTextItem&gt;\n          &lt;/HelperText&gt;\n        &lt;/FormHelperText&gt;\n      &lt;/FormGroup&gt;\n      &lt;FormGroup label=\&quot;Email\&quot; isRequired fieldId=\&quot;simple-form-email-02\&quot;&gt;\n        &lt;TextInput\n          isRequired\n          type=\&quot;email\&quot;\n          id=\&quot;simple-form-email-02\&quot;\n          name=\&quot;simple-form-email-02\&quot;\n          value={email}\n          onChange={handleEmailChange}\n        /&gt;\n      &lt;/FormGroup&gt;\n      &lt;FormGroup label=\&quot;Phone number\&quot; isRequired fieldId=\&quot;simple-form-number\&quot;&gt;\n        &lt;TextInput\n          isRequired\n          type=\&quot;tel\&quot;\n          placeholder=\&quot;555-555-5555\&quot;\n          id=\&quot;simple-form-number\&quot;\n          name=\&quot;simple-form-number\&quot;\n          value={phone}\n          onChange={handlePhoneChange}\n        /&gt;\n      &lt;/FormGroup&gt;\n      &lt;FormGroup role=\&quot;group\&quot; isInline fieldId=\&quot;limit-width-form-checkbox-group\&quot; label=\&quot;How can we contact you?\&quot;&gt;\n        &lt;Checkbox label=\&quot;Email\&quot; aria-label=\&quot;Email\&quot; id=\&quot;inlinecheck04\&quot; /&gt;\n        &lt;Checkbox label=\&quot;Phone\&quot; aria-label=\&quot;Phone\&quot; id=\&quot;inlinecheck05\&quot; /&gt;\n        &lt;Checkbox label=\&quot;Mail\&quot; aria-label=\&quot;Mail\&quot; id=\&quot;inlinecheck06\&quot; /&gt;\n      &lt;/FormGroup&gt;\n      &lt;FormGroup role=\&quot;radiogroup\&quot; isInline fieldId=\&quot;limit-width-form-radio-group\&quot; label=\&quot;Time zone\&quot;&gt;\n        &lt;Radio name=\&quot;limit-width-radio\&quot; label=\&quot;Eastern\&quot; id=\&quot;limit-width-inline-radio-01\&quot; /&gt;\n        &lt;Radio name=\&quot;limit-width-radio\&quot; label=\&quot;Central\&quot; id=\&quot;limit-width-inline-radio-02\&quot; /&gt;\n        &lt;Radio name=\&quot;limit-width-radio\&quot; label=\&quot;Pacific\&quot; id=\&quot;limit-width-inline-radio-03\&quot; /&gt;\n      &lt;/FormGroup&gt;\n      &lt;FormGroup label=\&quot;Additional note\&quot; fieldId=\&quot;simple-form-note-02\&quot;&gt;\n        &lt;TextInput isDisabled type=\&quot;text\&quot; id=\&quot;simple-form-note-02\&quot; name=\&quot;simple-form-number\&quot; value=\&quot;disabled\&quot; /&gt;\n      &lt;/FormGroup&gt;\n      &lt;FormGroup fieldId=\&quot;checkbox02\&quot;&gt;\n        &lt;Checkbox label=\&quot;I&#39;d like updates via email.\&quot; id=\&quot;checkbox02\&quot; name=\&quot;checkbox02\&quot; aria-label=\&quot;Update via email\&quot; /&gt;\n      &lt;/FormGroup&gt;\n      &lt;ActionGroup&gt;\n        &lt;Button variant=\&quot;primary\&quot;&gt;Submit&lt;/Button&gt;\n        &lt;Button variant=\&quot;link\&quot;&gt;Cancel&lt;/Button&gt;\n      &lt;/ActionGroup&gt;\n    &lt;/Form&gt;\n  );\n};\n&quot;],&quot;html&quot;:[0]}" ssr client="only" opts="{&quot;name&quot;:&quot;LiveExampleBase&quot;,&quot;value&quot;:&quot;react&quot;}"></astro-island>
-<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2102" data-pf-content="true" class="pf-v6-c-content--h3">Invalid</h3>
+<astro-island uid="ZBBfAv" component-url="/_astro/LiveExample.B5R4Dzng.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;src&quot;:[0,&quot;import { useRef, useState } from &#39;react&#39;;\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 &#39;@patternfly/react-core&#39;;\n\nexport const FormLimitWidth: React.FunctionComponent = () =&gt; {\n  const [name, setName] = useState(&#39;&#39;);\n  const [email, setEmail] = useState(&#39;&#39;);\n  const [phone, setPhone] = useState(&#39;&#39;);\n  const labelHelpRef = useRef(null);\n\n  const handleNameChange = (_event, name: string) =&gt; {\n    setName(name);\n  };\n\n  const handleEmailChange = (_event, email: string) =&gt; {\n    setEmail(email);\n  };\n\n  const handlePhoneChange = (_event, phone: string) =&gt; {\n    setPhone(phone);\n  };\n\n  return (\n    &lt;Form isWidthLimited&gt;\n      &lt;FormGroup\n        label=\&quot;Full name\&quot;\n        labelHelp={\n          &lt;Popover\n            triggerRef={labelHelpRef}\n            headerContent={\n              &lt;div&gt;\n                The{&#39; &#39;}\n                &lt;a href=\&quot;https://schema.org/name\&quot; target=\&quot;_blank\&quot; rel=\&quot;noreferrer\&quot;&gt;\n                  name\n                &lt;/a&gt;{&#39; &#39;}\n                of a{&#39; &#39;}\n                &lt;a href=\&quot;https://schema.org/Person\&quot; target=\&quot;_blank\&quot; rel=\&quot;noreferrer\&quot;&gt;\n                  Person\n                &lt;/a&gt;\n              &lt;/div&gt;\n            }\n            bodyContent={\n              &lt;div&gt;\n                Often composed of{&#39; &#39;}\n                &lt;a href=\&quot;https://schema.org/givenName\&quot; target=\&quot;_blank\&quot; rel=\&quot;noreferrer\&quot;&gt;\n                  givenName\n                &lt;/a&gt;{&#39; &#39;}\n                and{&#39; &#39;}\n                &lt;a href=\&quot;https://schema.org/familyName\&quot; target=\&quot;_blank\&quot; rel=\&quot;noreferrer\&quot;&gt;\n                  familyName\n                &lt;/a&gt;\n                .\n              &lt;/div&gt;\n            }\n          &gt;\n            &lt;FormGroupLabelHelp ref={labelHelpRef} aria-label=\&quot;More info for name field\&quot; /&gt;\n          &lt;/Popover&gt;\n        }\n        isRequired\n        fieldId=\&quot;simple-form-name-02\&quot;\n      &gt;\n        &lt;TextInput\n          isRequired\n          type=\&quot;text\&quot;\n          id=\&quot;simple-form-name-02\&quot;\n          name=\&quot;simple-form-name-02\&quot;\n          aria-describedby=\&quot;simple-form-name-02-helper\&quot;\n          value={name}\n          onChange={handleNameChange}\n        /&gt;\n        &lt;FormHelperText&gt;\n          &lt;HelperText&gt;\n            &lt;HelperTextItem&gt;Include your middle name if you have one.&lt;/HelperTextItem&gt;\n          &lt;/HelperText&gt;\n        &lt;/FormHelperText&gt;\n      &lt;/FormGroup&gt;\n      &lt;FormGroup label=\&quot;Email\&quot; isRequired fieldId=\&quot;simple-form-email-02\&quot;&gt;\n        &lt;TextInput\n          isRequired\n          type=\&quot;email\&quot;\n          id=\&quot;simple-form-email-02\&quot;\n          name=\&quot;simple-form-email-02\&quot;\n          value={email}\n          onChange={handleEmailChange}\n        /&gt;\n      &lt;/FormGroup&gt;\n      &lt;FormGroup label=\&quot;Phone number\&quot; isRequired fieldId=\&quot;simple-form-number\&quot;&gt;\n        &lt;TextInput\n          isRequired\n          type=\&quot;tel\&quot;\n          placeholder=\&quot;555-555-5555\&quot;\n          id=\&quot;simple-form-number\&quot;\n          name=\&quot;simple-form-number\&quot;\n          value={phone}\n          onChange={handlePhoneChange}\n        /&gt;\n      &lt;/FormGroup&gt;\n      &lt;FormGroup role=\&quot;group\&quot; isInline fieldId=\&quot;limit-width-form-checkbox-group\&quot; label=\&quot;How can we contact you?\&quot;&gt;\n        &lt;Checkbox label=\&quot;Email\&quot; aria-label=\&quot;Email\&quot; id=\&quot;inlinecheck04\&quot; /&gt;\n        &lt;Checkbox label=\&quot;Phone\&quot; aria-label=\&quot;Phone\&quot; id=\&quot;inlinecheck05\&quot; /&gt;\n        &lt;Checkbox label=\&quot;Mail\&quot; aria-label=\&quot;Mail\&quot; id=\&quot;inlinecheck06\&quot; /&gt;\n      &lt;/FormGroup&gt;\n      &lt;FormGroup role=\&quot;radiogroup\&quot; isInline fieldId=\&quot;limit-width-form-radio-group\&quot; label=\&quot;Time zone\&quot;&gt;\n        &lt;Radio name=\&quot;limit-width-radio\&quot; label=\&quot;Eastern\&quot; id=\&quot;limit-width-inline-radio-01\&quot; /&gt;\n        &lt;Radio name=\&quot;limit-width-radio\&quot; label=\&quot;Central\&quot; id=\&quot;limit-width-inline-radio-02\&quot; /&gt;\n        &lt;Radio name=\&quot;limit-width-radio\&quot; label=\&quot;Pacific\&quot; id=\&quot;limit-width-inline-radio-03\&quot; /&gt;\n      &lt;/FormGroup&gt;\n      &lt;FormGroup label=\&quot;Additional note\&quot; fieldId=\&quot;simple-form-note-02\&quot;&gt;\n        &lt;TextInput isDisabled type=\&quot;text\&quot; id=\&quot;simple-form-note-02\&quot; name=\&quot;simple-form-number\&quot; value=\&quot;disabled\&quot; /&gt;\n      &lt;/FormGroup&gt;\n      &lt;FormGroup fieldId=\&quot;checkbox02\&quot;&gt;\n        &lt;Checkbox label=\&quot;I&#39;d like updates via email.\&quot; id=\&quot;checkbox02\&quot; name=\&quot;checkbox02\&quot; aria-label=\&quot;Update via email\&quot; /&gt;\n      &lt;/FormGroup&gt;\n      &lt;ActionGroup&gt;\n        &lt;Button variant=\&quot;primary\&quot;&gt;Submit&lt;/Button&gt;\n        &lt;Button variant=\&quot;link\&quot;&gt;Cancel&lt;/Button&gt;\n      &lt;/ActionGroup&gt;\n    &lt;/Form&gt;\n  );\n};\n&quot;],&quot;html&quot;:[0]}" ssr client="only" opts="{&quot;name&quot;:&quot;LiveExampleBase&quot;,&quot;value&quot;:&quot;react&quot;}"></astro-island>
+<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2068" data-pf-content="true" class="pf-v6-c-content--h3">Invalid</h3>
-<astro-island uid="Z1MyOdk" component-url="/_astro/LiveExample.BOl02361.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;src&quot;:[0,&quot;import { useState } from &#39;react&#39;;\nimport { Form, FormGroup, TextInput, HelperText, HelperTextItem, FormHelperText } from &#39;@patternfly/react-core&#39;;\nimport ExclamationCircleIcon from &#39;@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon&#39;;\n\nexport const FormInvalid: React.FunctionComponent = () =&gt; {\n  type validate = &#39;success&#39; | &#39;warning&#39; | &#39;error&#39; | &#39;default&#39;;\n\n  const [age, setAge] = useState(&#39;Five&#39;);\n  const [validated, setValidated] = useState&lt;validate&gt;(&#39;error&#39;);\n\n  const handleAgeChange = (_event, age: string) =&gt; {\n    setAge(age);\n    if (age === &#39;&#39;) {\n      setValidated(&#39;default&#39;);\n    } else if (/^\\d+$/.test(age)) {\n      setValidated(&#39;success&#39;);\n    } else {\n      setValidated(&#39;error&#39;);\n    }\n  };\n\n  return (\n    &lt;Form&gt;\n      &lt;FormGroup label=\&quot;Age\&quot; type=\&quot;number\&quot; fieldId=\&quot;age-1\&quot;&gt;\n        &lt;TextInput\n          validated={validated}\n          value={age}\n          id=\&quot;age-1\&quot;\n          aria-describedby=\&quot;age-1-helper\&quot;\n          onChange={handleAgeChange}\n        /&gt;\n        {validated !== &#39;success&#39; &amp;&amp; (\n          &lt;FormHelperText&gt;\n            &lt;HelperText&gt;\n              &lt;HelperTextItem icon={&lt;ExclamationCircleIcon /&gt;} variant={validated}&gt;\n                {validated === &#39;error&#39; ? &#39;Must be a number&#39; : &#39;Please enter your age&#39;}\n              &lt;/HelperTextItem&gt;\n            &lt;/HelperText&gt;\n          &lt;/FormHelperText&gt;\n        )}\n      &lt;/FormGroup&gt;\n    &lt;/Form&gt;\n  );\n};\n&quot;],&quot;html&quot;:[0]}" ssr client="only" opts="{&quot;name&quot;:&quot;LiveExampleBase&quot;,&quot;value&quot;:&quot;react&quot;}"></astro-island>
-<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2103" data-pf-content="true" class="pf-v6-c-content--h3">Invalid with form alert</h3>
+<astro-island uid="Z1MyOdk" component-url="/_astro/LiveExample.B5R4Dzng.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;src&quot;:[0,&quot;import { useState } from &#39;react&#39;;\nimport { Form, FormGroup, TextInput, HelperText, HelperTextItem, FormHelperText } from &#39;@patternfly/react-core&#39;;\nimport ExclamationCircleIcon from &#39;@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon&#39;;\n\nexport const FormInvalid: React.FunctionComponent = () =&gt; {\n  type validate = &#39;success&#39; | &#39;warning&#39; | &#39;error&#39; | &#39;default&#39;;\n\n  const [age, setAge] = useState(&#39;Five&#39;);\n  const [validated, setValidated] = useState&lt;validate&gt;(&#39;error&#39;);\n\n  const handleAgeChange = (_event, age: string) =&gt; {\n    setAge(age);\n    if (age === &#39;&#39;) {\n      setValidated(&#39;default&#39;);\n    } else if (/^\\d+$/.test(age)) {\n      setValidated(&#39;success&#39;);\n    } else {\n      setValidated(&#39;error&#39;);\n    }\n  };\n\n  return (\n    &lt;Form&gt;\n      &lt;FormGroup label=\&quot;Age\&quot; type=\&quot;number\&quot; fieldId=\&quot;age-1\&quot;&gt;\n        &lt;TextInput\n          validated={validated}\n          value={age}\n          id=\&quot;age-1\&quot;\n          aria-describedby=\&quot;age-1-helper\&quot;\n          onChange={handleAgeChange}\n        /&gt;\n        {validated !== &#39;success&#39; &amp;&amp; (\n          &lt;FormHelperText&gt;\n            &lt;HelperText&gt;\n              &lt;HelperTextItem icon={&lt;ExclamationCircleIcon /&gt;} variant={validated}&gt;\n                {validated === &#39;error&#39; ? &#39;Must be a number&#39; : &#39;Please enter your age&#39;}\n              &lt;/HelperTextItem&gt;\n            &lt;/HelperText&gt;\n          &lt;/FormHelperText&gt;\n        )}\n      &lt;/FormGroup&gt;\n    &lt;/Form&gt;\n  );\n};\n&quot;],&quot;html&quot;:[0]}" ssr client="only" opts="{&quot;name&quot;:&quot;LiveExampleBase&quot;,&quot;value&quot;:&quot;react&quot;}"></astro-island>
+<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2069" data-pf-content="true" class="pf-v6-c-content--h3">Invalid with form alert</h3>
-<astro-island uid="Z2x2yUg" component-url="/_astro/LiveExample.BOl02361.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;src&quot;:[0,&quot;import { useState } from &#39;react&#39;;\nimport {\n  Alert,\n  Form,\n  FormAlert,\n  FormGroup,\n  TextInput,\n  HelperText,\n  HelperTextItem,\n  FormHelperText\n} from &#39;@patternfly/react-core&#39;;\nimport ExclamationCircleIcon from &#39;@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon&#39;;\n\nexport const FormInvalidWithAlert: React.FunctionComponent = () =&gt; {\n  type validate = &#39;success&#39; | &#39;warning&#39; | &#39;error&#39; | &#39;default&#39;;\n\n  const [age, setAge] = useState(&#39;Five&#39;);\n  const [validated, setValidated] = useState&lt;validate&gt;(&#39;error&#39;);\n\n  const handleAgeChange = (_event, age: string) =&gt; {\n    setAge(age);\n    if (age === &#39;&#39;) {\n      setValidated(&#39;default&#39;);\n    } else if (/^\\d+$/.test(age)) {\n      setValidated(&#39;success&#39;);\n    } else {\n      setValidated(&#39;error&#39;);\n    }\n  };\n\n  return (\n    &lt;Form&gt;\n      {validated === &#39;error&#39; &amp;&amp; (\n        &lt;FormAlert&gt;\n          &lt;Alert variant=\&quot;danger\&quot; title=\&quot;Fill out all required fields before continuing.\&quot; aria-live=\&quot;polite\&quot; isInline /&gt;\n        &lt;/FormAlert&gt;\n      )}\n      &lt;FormGroup label=\&quot;Age\&quot; type=\&quot;number\&quot; fieldId=\&quot;age-2\&quot;&gt;\n        &lt;TextInput\n          validated={validated}\n          value={age}\n          id=\&quot;age-2\&quot;\n          aria-describedby=\&quot;age-2-helper\&quot;\n          onChange={handleAgeChange}\n        /&gt;\n        {validated !== &#39;success&#39; &amp;&amp; (\n          &lt;FormHelperText&gt;\n            &lt;HelperText&gt;\n              &lt;HelperTextItem icon={&lt;ExclamationCircleIcon /&gt;} variant={validated}&gt;\n                {validated === &#39;error&#39; ? &#39;Must be a number&#39; : &#39;Please enter your age&#39;}\n              &lt;/HelperTextItem&gt;\n            &lt;/HelperText&gt;\n          &lt;/FormHelperText&gt;\n        )}\n      &lt;/FormGroup&gt;\n    &lt;/Form&gt;\n  );\n};\n&quot;],&quot;html&quot;:[0]}" ssr client="only" opts="{&quot;name&quot;:&quot;LiveExampleBase&quot;,&quot;value&quot;:&quot;react&quot;}"></astro-island>
-<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2104" data-pf-content="true" class="pf-v6-c-content--h3">Validated</h3>
+<astro-island uid="Z2x2yUg" component-url="/_astro/LiveExample.B5R4Dzng.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;src&quot;:[0,&quot;import { useState } from &#39;react&#39;;\nimport {\n  Alert,\n  Form,\n  FormAlert,\n  FormGroup,\n  TextInput,\n  HelperText,\n  HelperTextItem,\n  FormHelperText\n} from &#39;@patternfly/react-core&#39;;\nimport ExclamationCircleIcon from &#39;@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon&#39;;\n\nexport const FormInvalidWithAlert: React.FunctionComponent = () =&gt; {\n  type validate = &#39;success&#39; | &#39;warning&#39; | &#39;error&#39; | &#39;default&#39;;\n\n  const [age, setAge] = useState(&#39;Five&#39;);\n  const [validated, setValidated] = useState&lt;validate&gt;(&#39;error&#39;);\n\n  const handleAgeChange = (_event, age: string) =&gt; {\n    setAge(age);\n    if (age === &#39;&#39;) {\n      setValidated(&#39;default&#39;);\n    } else if (/^\\d+$/.test(age)) {\n      setValidated(&#39;success&#39;);\n    } else {\n      setValidated(&#39;error&#39;);\n    }\n  };\n\n  return (\n    &lt;Form&gt;\n      {validated === &#39;error&#39; &amp;&amp; (\n        &lt;FormAlert&gt;\n          &lt;Alert variant=\&quot;danger\&quot; title=\&quot;Fill out all required fields before continuing.\&quot; aria-live=\&quot;polite\&quot; isInline /&gt;\n        &lt;/FormAlert&gt;\n      )}\n      &lt;FormGroup label=\&quot;Age\&quot; type=\&quot;number\&quot; fieldId=\&quot;age-2\&quot;&gt;\n        &lt;TextInput\n          validated={validated}\n          value={age}\n          id=\&quot;age-2\&quot;\n          aria-describedby=\&quot;age-2-helper\&quot;\n          onChange={handleAgeChange}\n        /&gt;\n        {validated !== &#39;success&#39; &amp;&amp; (\n          &lt;FormHelperText&gt;\n            &lt;HelperText&gt;\n              &lt;HelperTextItem icon={&lt;ExclamationCircleIcon /&gt;} variant={validated}&gt;\n                {validated === &#39;error&#39; ? &#39;Must be a number&#39; : &#39;Please enter your age&#39;}\n              &lt;/HelperTextItem&gt;\n            &lt;/HelperText&gt;\n          &lt;/FormHelperText&gt;\n        )}\n      &lt;/FormGroup&gt;\n    &lt;/Form&gt;\n  );\n};\n&quot;],&quot;html&quot;:[0]}" ssr client="only" opts="{&quot;name&quot;:&quot;LiveExampleBase&quot;,&quot;value&quot;:&quot;react&quot;}"></astro-island>
+<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2070" data-pf-content="true" class="pf-v6-c-content--h3">Validated</h3>
-<astro-island uid="2q3jLS" component-url="/_astro/LiveExample.BOl02361.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;src&quot;:[0,&quot;import { useEffect, useState } from &#39;react&#39;;\nimport { Form, FormGroup, FormHelperText, HelperText, HelperTextItem, TextInput } from &#39;@patternfly/react-core&#39;;\nimport ExclamationCircleIcon from &#39;@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon&#39;;\n\nexport const FormValidated: React.FunctionComponent = () =&gt; {\n  type validate = &#39;success&#39; | &#39;warning&#39; | &#39;error&#39; | &#39;default&#39;;\n\n  const [age, setAge] = useState(&#39;Five&#39;);\n  const [validated, setValidated] = useState&lt;validate&gt;(&#39;default&#39;);\n  const [helperText, setHelperText] = useState(&#39;Enter your age to continue&#39;);\n\n  const handleAgeChange = (_event, age: string) =&gt; {\n    setAge(age);\n    setValidated(&#39;default&#39;);\n    setHelperText(&#39;Validating...&#39;);\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(() =&gt; {\n    const timer = setTimeout(() =&gt; {\n      if (/^\\d+$/.test(age)) {\n        if (parseInt(age) &gt;= 21) {\n          setValidated(&#39;success&#39;);\n          setHelperText(&#39;Enjoy your stay&#39;);\n        } else {\n          setValidated(&#39;warning&#39;);\n          setHelperText(&#39;You must be at least 21 years old to continue&#39;);\n        }\n      } else {\n        setValidated(&#39;error&#39;);\n        setHelperText(&#39;Must be a number&#39;);\n      }\n    }, 2000);\n\n    return () =&gt; clearTimeout(timer);\n  }, [age]);\n\n  return (\n    &lt;Form&gt;\n      &lt;FormGroup label=\&quot;Age\&quot; type=\&quot;number\&quot; fieldId=\&quot;age-3\&quot;&gt;\n        &lt;TextInput\n          validated={validated}\n          value={age}\n          id=\&quot;age-3\&quot;\n          aria-describedby=\&quot;age-3-helper\&quot;\n          onChange={handleAgeChange}\n        /&gt;\n        &lt;FormHelperText&gt;\n          &lt;HelperText&gt;\n            &lt;HelperTextItem variant={validated} {...(validated === &#39;error&#39; &amp;&amp; { icon: &lt;ExclamationCircleIcon /&gt; })}&gt;\n              {helperText}\n            &lt;/HelperTextItem&gt;\n          &lt;/HelperText&gt;\n        &lt;/FormHelperText&gt;\n      &lt;/FormGroup&gt;\n    &lt;/Form&gt;\n  );\n};\n&quot;],&quot;html&quot;:[0]}" ssr client="only" opts="{&quot;name&quot;:&quot;LiveExampleBase&quot;,&quot;value&quot;:&quot;react&quot;}"></astro-island>
-<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2105" data-pf-content="true" class="pf-v6-c-content--h3">Horizontal stacked no padding top</h3>
+<astro-island uid="2q3jLS" component-url="/_astro/LiveExample.B5R4Dzng.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;src&quot;:[0,&quot;import { useEffect, useState } from &#39;react&#39;;\nimport { Form, FormGroup, FormHelperText, HelperText, HelperTextItem, TextInput } from &#39;@patternfly/react-core&#39;;\nimport ExclamationCircleIcon from &#39;@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon&#39;;\n\nexport const FormValidated: React.FunctionComponent = () =&gt; {\n  type validate = &#39;success&#39; | &#39;warning&#39; | &#39;error&#39; | &#39;default&#39;;\n\n  const [age, setAge] = useState(&#39;Five&#39;);\n  const [validated, setValidated] = useState&lt;validate&gt;(&#39;default&#39;);\n  const [helperText, setHelperText] = useState(&#39;Enter your age to continue&#39;);\n\n  const handleAgeChange = (_event, age: string) =&gt; {\n    setAge(age);\n    setValidated(&#39;default&#39;);\n    setHelperText(&#39;Validating...&#39;);\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(() =&gt; {\n    const timer = setTimeout(() =&gt; {\n      if (/^\\d+$/.test(age)) {\n        if (parseInt(age) &gt;= 21) {\n          setValidated(&#39;success&#39;);\n          setHelperText(&#39;Enjoy your stay&#39;);\n        } else {\n          setValidated(&#39;warning&#39;);\n          setHelperText(&#39;You must be at least 21 years old to continue&#39;);\n        }\n      } else {\n        setValidated(&#39;error&#39;);\n        setHelperText(&#39;Must be a number&#39;);\n      }\n    }, 2000);\n\n    return () =&gt; clearTimeout(timer);\n  }, [age]);\n\n  return (\n    &lt;Form&gt;\n      &lt;FormGroup label=\&quot;Age\&quot; type=\&quot;number\&quot; fieldId=\&quot;age-3\&quot;&gt;\n        &lt;TextInput\n          validated={validated}\n          value={age}\n          id=\&quot;age-3\&quot;\n          aria-describedby=\&quot;age-3-helper\&quot;\n          onChange={handleAgeChange}\n        /&gt;\n        &lt;FormHelperText&gt;\n          &lt;HelperText&gt;\n            &lt;HelperTextItem variant={validated} {...(validated === &#39;error&#39; &amp;&amp; { icon: &lt;ExclamationCircleIcon /&gt; })}&gt;\n              {helperText}\n            &lt;/HelperTextItem&gt;\n          &lt;/HelperText&gt;\n        &lt;/FormHelperText&gt;\n      &lt;/FormGroup&gt;\n    &lt;/Form&gt;\n  );\n};\n&quot;],&quot;html&quot;:[0]}" ssr client="only" opts="{&quot;name&quot;:&quot;LiveExampleBase&quot;,&quot;value&quot;:&quot;react&quot;}"></astro-island>
+<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2071" data-pf-content="true" class="pf-v6-c-content--h3">Horizontal stacked no padding top</h3>
-<astro-island uid="ZiO2QO" component-url="/_astro/LiveExample.BOl02361.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;src&quot;:[0,&quot;import { Form, FormGroup, Checkbox } from &#39;@patternfly/react-core&#39;;\n\nexport const FormHorizontalStacked: React.FunctionComponent = () =&gt; (\n  &lt;Form isHorizontal&gt;\n    &lt;FormGroup role=\&quot;group\&quot; label=\&quot;Label\&quot; hasNoPaddingTop fieldId=\&quot;horizontal-form-stacked-options\&quot; isStack&gt;\n      &lt;Checkbox label=\&quot;option 1\&quot; id=\&quot;option-01\&quot; /&gt;\n      &lt;Checkbox label=\&quot;option 2\&quot; id=\&quot;option-02\&quot; /&gt;\n    &lt;/FormGroup&gt;\n  &lt;/Form&gt;\n);\n&quot;],&quot;html&quot;:[0]}" ssr client="only" opts="{&quot;name&quot;:&quot;LiveExampleBase&quot;,&quot;value&quot;:&quot;react&quot;}"></astro-island>
-<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2106" data-pf-content="true" class="pf-v6-c-content--h3">Horizontal stacked helper text on top</h3>
+<astro-island uid="ZiO2QO" component-url="/_astro/LiveExample.B5R4Dzng.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;src&quot;:[0,&quot;import { Form, FormGroup, Checkbox } from &#39;@patternfly/react-core&#39;;\n\nexport const FormHorizontalStacked: React.FunctionComponent = () =&gt; (\n  &lt;Form isHorizontal&gt;\n    &lt;FormGroup role=\&quot;group\&quot; label=\&quot;Label\&quot; hasNoPaddingTop fieldId=\&quot;horizontal-form-stacked-options\&quot; isStack&gt;\n      &lt;Checkbox label=\&quot;option 1\&quot; id=\&quot;option-01\&quot; /&gt;\n      &lt;Checkbox label=\&quot;option 2\&quot; id=\&quot;option-02\&quot; /&gt;\n    &lt;/FormGroup&gt;\n  &lt;/Form&gt;\n);\n&quot;],&quot;html&quot;:[0]}" ssr client="only" opts="{&quot;name&quot;:&quot;LiveExampleBase&quot;,&quot;value&quot;:&quot;react&quot;}"></astro-island>
+<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2072" data-pf-content="true" class="pf-v6-c-content--h3">Horizontal stacked helper text on top</h3>
-<astro-island uid="Z1jASeC" component-url="/_astro/LiveExample.BOl02361.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;src&quot;:[0,&quot;import { Form, FormGroup, Checkbox, HelperText, HelperTextItem, FormHelperText } from &#39;@patternfly/react-core&#39;;\n\nexport const FormHorizontalFormHelperText: React.FunctionComponent = () =&gt; (\n  &lt;Form isHorizontal&gt;\n    &lt;FormGroup label=\&quot;Label\&quot; hasNoPaddingTop isStack fieldId=\&quot;horizontal-form-helper-options\&quot; role=\&quot;group\&quot;&gt;\n      &lt;FormHelperText&gt;\n        &lt;HelperText&gt;\n          &lt;HelperTextItem&gt;Select all that apply:&lt;/HelperTextItem&gt;\n        &lt;/HelperText&gt;\n      &lt;/FormHelperText&gt;\n      &lt;Checkbox label=\&quot;Option 1\&quot; id=\&quot;option-03\&quot; /&gt;\n      &lt;Checkbox label=\&quot;Option 2\&quot; id=\&quot;option-04\&quot; /&gt;\n    &lt;/FormGroup&gt;\n  &lt;/Form&gt;\n);\n&quot;],&quot;html&quot;:[0]}" ssr client="only" opts="{&quot;name&quot;:&quot;LiveExampleBase&quot;,&quot;value&quot;:&quot;react&quot;}"></astro-island>
-<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2107" data-pf-content="true" class="pf-v6-c-content--h3">Form group with additional label info</h3>
+<astro-island uid="Z1jASeC" component-url="/_astro/LiveExample.B5R4Dzng.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;src&quot;:[0,&quot;import { Form, FormGroup, Checkbox, HelperText, HelperTextItem, FormHelperText } from &#39;@patternfly/react-core&#39;;\n\nexport const FormHorizontalFormHelperText: React.FunctionComponent = () =&gt; (\n  &lt;Form isHorizontal&gt;\n    &lt;FormGroup label=\&quot;Label\&quot; hasNoPaddingTop isStack fieldId=\&quot;horizontal-form-helper-options\&quot; role=\&quot;group\&quot;&gt;\n      &lt;FormHelperText&gt;\n        &lt;HelperText&gt;\n          &lt;HelperTextItem&gt;Select all that apply:&lt;/HelperTextItem&gt;\n        &lt;/HelperText&gt;\n      &lt;/FormHelperText&gt;\n      &lt;Checkbox label=\&quot;Option 1\&quot; id=\&quot;option-03\&quot; /&gt;\n      &lt;Checkbox label=\&quot;Option 2\&quot; id=\&quot;option-04\&quot; /&gt;\n    &lt;/FormGroup&gt;\n  &lt;/Form&gt;\n);\n&quot;],&quot;html&quot;:[0]}" ssr client="only" opts="{&quot;name&quot;:&quot;LiveExampleBase&quot;,&quot;value&quot;:&quot;react&quot;}"></astro-island>
+<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2073" data-pf-content="true" class="pf-v6-c-content--h3">Form group with additional label info</h3>
-<astro-island uid="Z2qdMz8" component-url="/_astro/LiveExample.BOl02361.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;src&quot;:[0,&quot;import { useRef, useState } from &#39;react&#39;;\nimport {\n  Form,\n  FormGroup,\n  TextInput,\n  Popover,\n  HelperText,\n  HelperTextItem,\n  FormHelperText,\n  FormGroupLabelHelp\n} from &#39;@patternfly/react-core&#39;;\n\nexport const FormGroupLabelInfo: React.FunctionComponent = () =&gt; {\n  const [name, setName] = useState(&#39;&#39;);\n  const labelHelpRef = useRef(null);\n\n  const handleNameChange = (_event, name: string) =&gt; {\n    setName(name);\n  };\n\n  return (\n    &lt;Form&gt;\n      &lt;FormGroup\n        label=\&quot;Full name\&quot;\n        labelInfo=\&quot;Additional label info\&quot;\n        labelHelp={\n          &lt;Popover\n            triggerRef={labelHelpRef}\n            headerContent={\n              &lt;div&gt;\n                The{&#39; &#39;}\n                &lt;a href=\&quot;https://schema.org/name\&quot; target=\&quot;_blank\&quot; rel=\&quot;noreferrer\&quot;&gt;\n                  name\n                &lt;/a&gt;{&#39; &#39;}\n                of a{&#39; &#39;}\n                &lt;a href=\&quot;https://schema.org/Person\&quot; target=\&quot;_blank\&quot; rel=\&quot;noreferrer\&quot;&gt;\n                  Person\n                &lt;/a&gt;\n              &lt;/div&gt;\n            }\n            bodyContent={\n              &lt;div&gt;\n                Often composed of{&#39; &#39;}\n                &lt;a href=\&quot;https://schema.org/givenName\&quot; target=\&quot;_blank\&quot; rel=\&quot;noreferrer\&quot;&gt;\n                  givenName\n                &lt;/a&gt;{&#39; &#39;}\n                and{&#39; &#39;}\n                &lt;a href=\&quot;https://schema.org/familyName\&quot; target=\&quot;_blank\&quot; rel=\&quot;noreferrer\&quot;&gt;\n                  familyName\n                &lt;/a&gt;\n                .\n              &lt;/div&gt;\n            }\n          &gt;\n            &lt;FormGroupLabelHelp ref={labelHelpRef} aria-label=\&quot;More info for name field\&quot; /&gt;\n          &lt;/Popover&gt;\n        }\n        isRequired\n        fieldId=\&quot;form-group-label-info\&quot;\n      &gt;\n        &lt;TextInput\n          isRequired\n          type=\&quot;text\&quot;\n          id=\&quot;form-group-label-info\&quot;\n          name=\&quot;form-group-label-info\&quot;\n          aria-describedby=\&quot;form-group-label-info-helper\&quot;\n          value={name}\n          onChange={handleNameChange}\n        /&gt;\n        &lt;FormHelperText&gt;\n          &lt;HelperText&gt;\n            &lt;HelperTextItem&gt;Include your middle name if you have one.&lt;/HelperTextItem&gt;\n          &lt;/HelperText&gt;\n        &lt;/FormHelperText&gt;\n      &lt;/FormGroup&gt;\n    &lt;/Form&gt;\n  );\n};\n&quot;],&quot;html&quot;:[0]}" ssr client="only" opts="{&quot;name&quot;:&quot;LiveExampleBase&quot;,&quot;value&quot;:&quot;react&quot;}"></astro-island>
-<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2108" data-pf-content="true" class="pf-v6-c-content--h3">Form Sections</h3>
+<astro-island uid="Z2qdMz8" component-url="/_astro/LiveExample.B5R4Dzng.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;src&quot;:[0,&quot;import { useRef, useState } from &#39;react&#39;;\nimport {\n  Form,\n  FormGroup,\n  TextInput,\n  Popover,\n  HelperText,\n  HelperTextItem,\n  FormHelperText,\n  FormGroupLabelHelp\n} from &#39;@patternfly/react-core&#39;;\n\nexport const FormGroupLabelInfo: React.FunctionComponent = () =&gt; {\n  const [name, setName] = useState(&#39;&#39;);\n  const labelHelpRef = useRef(null);\n\n  const handleNameChange = (_event, name: string) =&gt; {\n    setName(name);\n  };\n\n  return (\n    &lt;Form&gt;\n      &lt;FormGroup\n        label=\&quot;Full name\&quot;\n        labelInfo=\&quot;Additional label info\&quot;\n        labelHelp={\n          &lt;Popover\n            triggerRef={labelHelpRef}\n            headerContent={\n              &lt;div&gt;\n                The{&#39; &#39;}\n                &lt;a href=\&quot;https://schema.org/name\&quot; target=\&quot;_blank\&quot; rel=\&quot;noreferrer\&quot;&gt;\n                  name\n                &lt;/a&gt;{&#39; &#39;}\n                of a{&#39; &#39;}\n                &lt;a href=\&quot;https://schema.org/Person\&quot; target=\&quot;_blank\&quot; rel=\&quot;noreferrer\&quot;&gt;\n                  Person\n                &lt;/a&gt;\n              &lt;/div&gt;\n            }\n            bodyContent={\n              &lt;div&gt;\n                Often composed of{&#39; &#39;}\n                &lt;a href=\&quot;https://schema.org/givenName\&quot; target=\&quot;_blank\&quot; rel=\&quot;noreferrer\&quot;&gt;\n                  givenName\n                &lt;/a&gt;{&#39; &#39;}\n                and{&#39; &#39;}\n                &lt;a href=\&quot;https://schema.org/familyName\&quot; target=\&quot;_blank\&quot; rel=\&quot;noreferrer\&quot;&gt;\n                  familyName\n                &lt;/a&gt;\n                .\n              &lt;/div&gt;\n            }\n          &gt;\n            &lt;FormGroupLabelHelp ref={labelHelpRef} aria-label=\&quot;More info for name field\&quot; /&gt;\n          &lt;/Popover&gt;\n        }\n        isRequired\n        fieldId=\&quot;form-group-label-info\&quot;\n      &gt;\n        &lt;TextInput\n          isRequired\n          type=\&quot;text\&quot;\n          id=\&quot;form-group-label-info\&quot;\n          name=\&quot;form-group-label-info\&quot;\n          aria-describedby=\&quot;form-group-label-info-helper\&quot;\n          value={name}\n          onChange={handleNameChange}\n        /&gt;\n        &lt;FormHelperText&gt;\n          &lt;HelperText&gt;\n            &lt;HelperTextItem&gt;Include your middle name if you have one.&lt;/HelperTextItem&gt;\n          &lt;/HelperText&gt;\n        &lt;/FormHelperText&gt;\n      &lt;/FormGroup&gt;\n    &lt;/Form&gt;\n  );\n};\n&quot;],&quot;html&quot;:[0]}" ssr client="only" opts="{&quot;name&quot;:&quot;LiveExampleBase&quot;,&quot;value&quot;:&quot;react&quot;}"></astro-island>
+<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2074" data-pf-content="true" class="pf-v6-c-content--h3">Form Sections</h3>
-<astro-island uid="1YelM3" component-url="/_astro/LiveExample.BOl02361.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;src&quot;:[0,&quot;import { useState } from &#39;react&#39;;\nimport { Form, FormGroup, FormSection, TextInput } from &#39;@patternfly/react-core&#39;;\n\nexport const FormSections: React.FunctionComponent = () =&gt; {\n  const [input1, setInput1] = useState(&#39;&#39;);\n  const [input2, setInput2] = useState(&#39;&#39;);\n\n  const handleInputChange1 = (_event, input1: string) =&gt; {\n    setInput1(input1);\n  };\n\n  const handleInputChange2 = (_event, input2: string) =&gt; {\n    setInput2(input2);\n  };\n\n  return (\n    &lt;Form&gt;\n      &lt;FormSection&gt;\n        &lt;FormGroup label=\&quot;Form section 1 input\&quot; isRequired fieldId=\&quot;simple-form-section-1-input\&quot;&gt;\n          &lt;TextInput\n            isRequired\n            type=\&quot;text\&quot;\n            id=\&quot;simple-form-section-1-input\&quot;\n            name=\&quot;simple-form-section-1-input\&quot;\n            value={input1}\n            onChange={handleInputChange1}\n          /&gt;\n        &lt;/FormGroup&gt;\n      &lt;/FormSection&gt;\n      &lt;FormSection title=\&quot;Form section 2 (optional title)\&quot; titleElement=\&quot;h2\&quot;&gt;\n        &lt;FormGroup label=\&quot;Form section 2 input\&quot; isRequired fieldId=\&quot;simple-form-section-2-input\&quot;&gt;\n          &lt;TextInput\n            isRequired\n            type=\&quot;text\&quot;\n            id=\&quot;simple-form-section-2-input\&quot;\n            name=\&quot;simple-form-section-2-input\&quot;\n            value={input2}\n            onChange={handleInputChange2}\n          /&gt;\n        &lt;/FormGroup&gt;\n      &lt;/FormSection&gt;\n    &lt;/Form&gt;\n  );\n};\n&quot;],&quot;html&quot;:[0]}" ssr client="only" opts="{&quot;name&quot;:&quot;LiveExampleBase&quot;,&quot;value&quot;:&quot;react&quot;}"></astro-island>
-<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2109" data-pf-content="true" class="pf-v6-c-content--h3">Grid form</h3>
+<astro-island uid="1YelM3" component-url="/_astro/LiveExample.B5R4Dzng.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;src&quot;:[0,&quot;import { useState } from &#39;react&#39;;\nimport { Form, FormGroup, FormSection, TextInput } from &#39;@patternfly/react-core&#39;;\n\nexport const FormSections: React.FunctionComponent = () =&gt; {\n  const [input1, setInput1] = useState(&#39;&#39;);\n  const [input2, setInput2] = useState(&#39;&#39;);\n\n  const handleInputChange1 = (_event, input1: string) =&gt; {\n    setInput1(input1);\n  };\n\n  const handleInputChange2 = (_event, input2: string) =&gt; {\n    setInput2(input2);\n  };\n\n  return (\n    &lt;Form&gt;\n      &lt;FormSection&gt;\n        &lt;FormGroup label=\&quot;Form section 1 input\&quot; isRequired fieldId=\&quot;simple-form-section-1-input\&quot;&gt;\n          &lt;TextInput\n            isRequired\n            type=\&quot;text\&quot;\n            id=\&quot;simple-form-section-1-input\&quot;\n            name=\&quot;simple-form-section-1-input\&quot;\n            value={input1}\n            onChange={handleInputChange1}\n          /&gt;\n        &lt;/FormGroup&gt;\n      &lt;/FormSection&gt;\n      &lt;FormSection title=\&quot;Form section 2 (optional title)\&quot; titleElement=\&quot;h2\&quot;&gt;\n        &lt;FormGroup label=\&quot;Form section 2 input\&quot; isRequired fieldId=\&quot;simple-form-section-2-input\&quot;&gt;\n          &lt;TextInput\n            isRequired\n            type=\&quot;text\&quot;\n            id=\&quot;simple-form-section-2-input\&quot;\n            name=\&quot;simple-form-section-2-input\&quot;\n            value={input2}\n            onChange={handleInputChange2}\n          /&gt;\n        &lt;/FormGroup&gt;\n      &lt;/FormSection&gt;\n    &lt;/Form&gt;\n  );\n};\n&quot;],&quot;html&quot;:[0]}" ssr client="only" opts="{&quot;name&quot;:&quot;LiveExampleBase&quot;,&quot;value&quot;:&quot;react&quot;}"></astro-island>
+<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2075" data-pf-content="true" class="pf-v6-c-content--h3">Grid form</h3>
-<astro-island uid="ZqwHXq" component-url="/_astro/LiveExample.BOl02361.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;src&quot;:[0,&quot;import { useState } from &#39;react&#39;;\nimport {\n  Form,\n  FormGroup,\n  TextInput,\n  Grid,\n  GridItem,\n  HelperText,\n  HelperTextItem,\n  FormHelperText\n} from &#39;@patternfly/react-core&#39;;\n\nexport const FormGrid: React.FunctionComponent = () =&gt; {\n  const [name, setName] = useState(&#39;&#39;);\n  const [email, setEmail] = useState(&#39;&#39;);\n  const [phone, setPhone] = useState(&#39;&#39;);\n\n  const handleNameChange = (_event, name: string) =&gt; {\n    setName(name);\n  };\n\n  const handleEmailChange = (_event, email: string) =&gt; {\n    setEmail(email);\n  };\n\n  const handlePhoneChange = (_event, phone: string) =&gt; {\n    setPhone(phone);\n  };\n\n  return (\n    &lt;Form&gt;\n      &lt;Grid hasGutter md={6}&gt;\n        &lt;GridItem span={12}&gt;\n          &lt;FormGroup label=\&quot;Full name\&quot; isRequired fieldId=\&quot;grid-form-name-01\&quot;&gt;\n            &lt;TextInput\n              isRequired\n              type=\&quot;text\&quot;\n              id=\&quot;grid-form-name-01\&quot;\n              name=\&quot;grid-form-name-01\&quot;\n              aria-describedby=\&quot;grid-form-name-01-helper\&quot;\n              value={name}\n              onChange={handleNameChange}\n            /&gt;\n            &lt;FormHelperText&gt;\n              &lt;HelperText&gt;\n                &lt;HelperTextItem&gt;Include your middle name if you have one.&lt;/HelperTextItem&gt;\n              &lt;/HelperText&gt;\n            &lt;/FormHelperText&gt;\n          &lt;/FormGroup&gt;\n        &lt;/GridItem&gt;\n        &lt;FormGroup label=\&quot;Email\&quot; isRequired fieldId=\&quot;grid-form-email-01\&quot;&gt;\n          &lt;TextInput\n            isRequired\n            type=\&quot;email\&quot;\n            id=\&quot;grid-form-email-01\&quot;\n            name=\&quot;grid-form-email-01\&quot;\n            value={email}\n            onChange={handleEmailChange}\n          /&gt;\n        &lt;/FormGroup&gt;\n        &lt;FormGroup label=\&quot;Phone number\&quot; isRequired fieldId=\&quot;grid-form-number-01\&quot;&gt;\n          &lt;TextInput\n            isRequired\n            type=\&quot;tel\&quot;\n            id=\&quot;grid-form-number-01\&quot;\n            placeholder=\&quot;555-555-5555\&quot;\n            name=\&quot;grid-form-number-01\&quot;\n            value={phone}\n            onChange={handlePhoneChange}\n          /&gt;\n        &lt;/FormGroup&gt;\n      &lt;/Grid&gt;\n    &lt;/Form&gt;\n  );\n};\n&quot;],&quot;html&quot;:[0]}" ssr client="only" opts="{&quot;name&quot;:&quot;LiveExampleBase&quot;,&quot;value&quot;:&quot;react&quot;}"></astro-island>
-<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2110" data-pf-content="true" class="pf-v6-c-content--h3">Field Groups</h3>
+<astro-island uid="ZqwHXq" component-url="/_astro/LiveExample.B5R4Dzng.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;src&quot;:[0,&quot;import { useState } from &#39;react&#39;;\nimport {\n  Form,\n  FormGroup,\n  TextInput,\n  Grid,\n  GridItem,\n  HelperText,\n  HelperTextItem,\n  FormHelperText\n} from &#39;@patternfly/react-core&#39;;\n\nexport const FormGrid: React.FunctionComponent = () =&gt; {\n  const [name, setName] = useState(&#39;&#39;);\n  const [email, setEmail] = useState(&#39;&#39;);\n  const [phone, setPhone] = useState(&#39;&#39;);\n\n  const handleNameChange = (_event, name: string) =&gt; {\n    setName(name);\n  };\n\n  const handleEmailChange = (_event, email: string) =&gt; {\n    setEmail(email);\n  };\n\n  const handlePhoneChange = (_event, phone: string) =&gt; {\n    setPhone(phone);\n  };\n\n  return (\n    &lt;Form&gt;\n      &lt;Grid hasGutter md={6}&gt;\n        &lt;GridItem span={12}&gt;\n          &lt;FormGroup label=\&quot;Full name\&quot; isRequired fieldId=\&quot;grid-form-name-01\&quot;&gt;\n            &lt;TextInput\n              isRequired\n              type=\&quot;text\&quot;\n              id=\&quot;grid-form-name-01\&quot;\n              name=\&quot;grid-form-name-01\&quot;\n              aria-describedby=\&quot;grid-form-name-01-helper\&quot;\n              value={name}\n              onChange={handleNameChange}\n            /&gt;\n            &lt;FormHelperText&gt;\n              &lt;HelperText&gt;\n                &lt;HelperTextItem&gt;Include your middle name if you have one.&lt;/HelperTextItem&gt;\n              &lt;/HelperText&gt;\n            &lt;/FormHelperText&gt;\n          &lt;/FormGroup&gt;\n        &lt;/GridItem&gt;\n        &lt;FormGroup label=\&quot;Email\&quot; isRequired fieldId=\&quot;grid-form-email-01\&quot;&gt;\n          &lt;TextInput\n            isRequired\n            type=\&quot;email\&quot;\n            id=\&quot;grid-form-email-01\&quot;\n            name=\&quot;grid-form-email-01\&quot;\n            value={email}\n            onChange={handleEmailChange}\n          /&gt;\n        &lt;/FormGroup&gt;\n        &lt;FormGroup label=\&quot;Phone number\&quot; isRequired fieldId=\&quot;grid-form-number-01\&quot;&gt;\n          &lt;TextInput\n            isRequired\n            type=\&quot;tel\&quot;\n            id=\&quot;grid-form-number-01\&quot;\n            placeholder=\&quot;555-555-5555\&quot;\n            name=\&quot;grid-form-number-01\&quot;\n            value={phone}\n            onChange={handlePhoneChange}\n          /&gt;\n        &lt;/FormGroup&gt;\n      &lt;/Grid&gt;\n    &lt;/Form&gt;\n  );\n};\n&quot;],&quot;html&quot;:[0]}" ssr client="only" opts="{&quot;name&quot;:&quot;LiveExampleBase&quot;,&quot;value&quot;:&quot;react&quot;}"></astro-island>
+<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2076" data-pf-content="true" class="pf-v6-c-content--h3">Field Groups</h3>
-<astro-island uid="BADSk" component-url="/_astro/LiveExample.BOl02361.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;src&quot;:[0,&quot;import { useState } from &#39;react&#39;;\nimport {\n  Form,\n  FormGroup,\n  FormFieldGroup,\n  FormFieldGroupExpandable,\n  FormFieldGroupHeader,\n  TextInput,\n  Button\n} from &#39;@patternfly/react-core&#39;;\nimport TrashIcon from &#39;@patternfly/react-icons/dist/esm/icons/trash-icon&#39;;\n\nexport const FormFieldGroups: React.FunctionComponent = () =&gt; {\n  const initialValues = {\n    &#39;0-label1&#39;: &#39;&#39;,\n    &#39;0-label2&#39;: &#39;&#39;,\n    &#39;1-expanded-group1-label1&#39;: &#39;&#39;,\n    &#39;1-expanded-group1-label2&#39;: &#39;&#39;,\n    &#39;1-expanded-group2-label1&#39;: &#39;&#39;,\n    &#39;1-expanded-group2-label2&#39;: &#39;&#39;,\n    &#39;1-expanded-group3-label1&#39;: &#39;&#39;,\n    &#39;1-expanded-group3-label2&#39;: &#39;&#39;,\n    &#39;1-group1-label1&#39;: &#39;&#39;,\n    &#39;1-group1-label2&#39;: &#39;&#39;,\n    &#39;2-label1&#39;: &#39;&#39;,\n    &#39;2-label2&#39;: &#39;&#39;,\n    &#39;3-label1&#39;: &#39;&#39;,\n    &#39;3-label2&#39;: &#39;&#39;,\n    &#39;3-nonexpand-group1-label1&#39;: &#39;&#39;,\n    &#39;3-nonexpand-group1-label2&#39;: &#39;&#39;,\n    &#39;3-nonexpand-group2-label1&#39;: &#39;&#39;,\n    &#39;3-nonexpand-group2-label2&#39;: &#39;&#39;,\n    &#39;4-nonexpand-label1&#39;: &#39;&#39;,\n    &#39;4-nonexpand-label2&#39;: &#39;&#39;,\n    &#39;0-label3&#39;: &#39;&#39;,\n    &#39;0-label4&#39;: &#39;&#39;\n  };\n\n  const [inputValues, setInputValues] = useState(initialValues);\n\n  const handleChange = (event, value: string) =&gt; {\n    const { name } = event.currentTarget;\n    setInputValues({ ...inputValues, [name]: value });\n  };\n\n  return (\n    &lt;Form&gt;\n      &lt;FormGroup label=\&quot;Label 1\&quot; isRequired fieldId=\&quot;0-label1\&quot;&gt;\n        &lt;TextInput isRequired id=\&quot;0-label1\&quot; name=\&quot;0-label1\&quot; value={inputValues[&#39;0-label1&#39;]} onChange={handleChange} /&gt;\n      &lt;/FormGroup&gt;\n      &lt;FormGroup label=\&quot;Label 2\&quot; isRequired fieldId=\&quot;0-label2\&quot;&gt;\n        &lt;TextInput isRequired id=\&quot;0-label2\&quot; name=\&quot;0-label2\&quot; value={inputValues[&#39;0-label2&#39;]} onChange={handleChange} /&gt;\n      &lt;/FormGroup&gt;\n      &lt;FormFieldGroupExpandable\n        isExpanded\n        toggleAriaLabel=\&quot;Details\&quot;\n        header={\n          &lt;FormFieldGroupHeader\n            titleText={{ text: &#39;Field group 1&#39;, id: &#39;field-group1-titleText-id&#39; }}\n            titleDescription=\&quot;Field group 1 description text.\&quot;\n            actions={\n              &lt;&gt;\n                &lt;Button variant=\&quot;link\&quot;&gt;Delete all&lt;/Button&gt; &lt;Button variant=\&quot;secondary\&quot;&gt;Add parameter&lt;/Button&gt;\n              &lt;/&gt;\n            }\n          /&gt;\n        }\n      &gt;\n        &lt;FormFieldGroupExpandable\n          isExpanded\n          toggleAriaLabel=\&quot;Details\&quot;\n          header={\n            &lt;FormFieldGroupHeader\n              titleText={{ text: &#39;Nested field group 1&#39;, id: &#39;nested-field-group1-titleText-id&#39; }}\n              titleDescription=\&quot;Nested field group 1 description text.\&quot;\n              actions={&lt;Button variant=\&quot;plain\&quot; aria-label=\&quot;Remove\&quot; icon={&lt;TrashIcon /&gt;} /&gt;}\n            /&gt;\n          }\n        &gt;\n          &lt;FormGroup label=\&quot;Label 1\&quot; isRequired fieldId=\&quot;1-expanded-group1-label1\&quot;&gt;\n            &lt;TextInput\n              isRequired\n              id=\&quot;1-expanded-group1-label1\&quot;\n              name=\&quot;1-expanded-group1-label1\&quot;\n              value={inputValues[&#39;1-expanded-group1-label1&#39;]}\n              onChange={handleChange}\n            /&gt;\n          &lt;/FormGroup&gt;\n          &lt;FormGroup label=\&quot;Label 2\&quot; isRequired fieldId=\&quot;1-expanded-group1-label2\&quot;&gt;\n            &lt;TextInput\n              isRequired\n              id=\&quot;1-expanded-group1-label2\&quot;\n              name=\&quot;1-expanded-group1-label2\&quot;\n              value={inputValues[&#39;1-expanded-group1-label2&#39;]}\n              onChange={handleChange}\n            /&gt;\n          &lt;/FormGroup&gt;\n        &lt;/FormFieldGroupExpandable&gt;\n        &lt;FormFieldGroupExpandable\n          toggleAriaLabel=\&quot;Details\&quot;\n          header={\n            &lt;FormFieldGroupHeader\n              titleText={{ text: &#39;Nested field group 2&#39;, id: &#39;nested-field-group2-titleText-id&#39; }}\n              actions={&lt;Button variant=\&quot;plain\&quot; aria-label=\&quot;Remove\&quot; icon={&lt;TrashIcon /&gt;} /&gt;}\n            /&gt;\n          }\n        &gt;\n          &lt;FormGroup label=\&quot;Label 1\&quot; isRequired fieldId=\&quot;1-expanded-group2-label1\&quot;&gt;\n            &lt;TextInput\n              isRequired\n              id=\&quot;1-expanded-group2-label1\&quot;\n              name=\&quot;1-expanded-group2-label1\&quot;\n              value={inputValues[&#39;1-expanded-group2-label1&#39;]}\n              onChange={handleChange}\n            /&gt;\n          &lt;/FormGroup&gt;\n          &lt;FormGroup label=\&quot;Label 2\&quot; isRequired fieldId=\&quot;1-expanded-group2-label2\&quot;&gt;\n            &lt;TextInput\n              isRequired\n              id=\&quot;1-expanded-group2-label2\&quot;\n              name=\&quot;1-expanded-group2-label2\&quot;\n              value={inputValues[&#39;1-expanded-group2-label2&#39;]}\n              onChange={handleChange}\n            /&gt;\n          &lt;/FormGroup&gt;\n        &lt;/FormFieldGroupExpandable&gt;\n        &lt;FormFieldGroupExpandable\n          toggleAriaLabel=\&quot;Details\&quot;\n          header={\n            &lt;FormFieldGroupHeader\n              titleText={{ text: &#39;Nested field group 3&#39;, id: &#39;nested-field-group3-titleText-id&#39; }}\n              titleDescription=\&quot;Field group 3 description text.\&quot;\n              actions={&lt;Button variant=\&quot;plain\&quot; aria-label=\&quot;Remove\&quot; icon={&lt;TrashIcon /&gt;} /&gt;}\n            /&gt;\n          }\n        &gt;\n          &lt;FormGroup label=\&quot;Label 1\&quot; isRequired fieldId=\&quot;1-expanded-group3-label1\&quot;&gt;\n            &lt;TextInput\n              isRequired\n              id=\&quot;1-expanded-group3-label1\&quot;\n              name=\&quot;1-expanded-group3-label1\&quot;\n              value={inputValues[&#39;1-expanded-group3-label1&#39;]}\n              onChange={handleChange}\n            /&gt;\n          &lt;/FormGroup&gt;\n          &lt;FormGroup label=\&quot;Label 2\&quot; isRequired fieldId=\&quot;1-expanded-group3-label2\&quot;&gt;\n            &lt;TextInput\n              isRequired\n              id=\&quot;1-expanded-group3-label2\&quot;\n              name=\&quot;1-expanded-group3-label2\&quot;\n              value={inputValues[&#39;1-expanded-group3-label2&#39;]}\n              onChange={handleChange}\n            /&gt;\n          &lt;/FormGroup&gt;\n        &lt;/FormFieldGroupExpandable&gt;\n        &lt;FormGroup label=\&quot;Label 1\&quot; isRequired fieldId=\&quot;1-group1-label1\&quot;&gt;\n          &lt;TextInput\n            isRequired\n            id=\&quot;1-group1-label1\&quot;\n            name=\&quot;1-group1-label1\&quot;\n            value={inputValues[&#39;1-group1-label1&#39;]}\n            onChange={handleChange}\n          /&gt;\n        &lt;/FormGroup&gt;\n        &lt;FormGroup label=\&quot;Label 2\&quot; isRequired fieldId=\&quot;1-group1-label2\&quot;&gt;\n          &lt;TextInput\n            isRequired\n            id=\&quot;1-group1-label2\&quot;\n            name=\&quot;1-group1-label2\&quot;\n            value={inputValues[&#39;1-group1-label2&#39;]}\n            onChange={handleChange}\n          /&gt;\n        &lt;/FormGroup&gt;\n      &lt;/FormFieldGroupExpandable&gt;\n      &lt;FormFieldGroupExpandable\n        toggleAriaLabel=\&quot;Details\&quot;\n        header={\n          &lt;FormFieldGroupHeader\n            titleText={{ text: &#39;Field group 2&#39;, id: &#39;field-group2-titleText-id&#39; }}\n            titleDescription=\&quot;Field group 2 description text.\&quot;\n            actions={\n              &lt;&gt;\n                &lt;Button variant=\&quot;link\&quot;&gt;Delete all&lt;/Button&gt; &lt;Button variant=\&quot;secondary\&quot;&gt;Add parameter&lt;/Button&gt;\n              &lt;/&gt;\n            }\n          /&gt;\n        }\n      &gt;\n        &lt;FormGroup label=\&quot;Label 1\&quot; isRequired fieldId=\&quot;2-label1\&quot;&gt;\n          &lt;TextInput isRequired id=\&quot;2-label1\&quot; name=\&quot;2-label1\&quot; value={inputValues[&#39;2-label1&#39;]} onChange={handleChange} /&gt;\n        &lt;/FormGroup&gt;\n        &lt;FormGroup label=\&quot;Label 2\&quot; isRequired fieldId=\&quot;2-label2\&quot;&gt;\n          &lt;TextInput isRequired id=\&quot;2-label2\&quot; name=\&quot;2-label2\&quot; value={inputValues[&#39;2-label2&#39;]} onChange={handleChange} /&gt;\n        &lt;/FormGroup&gt;\n      &lt;/FormFieldGroupExpandable&gt;\n      &lt;FormFieldGroupExpandable\n        isExpanded\n        toggleAriaLabel=\&quot;Details\&quot;\n        header={\n          &lt;FormFieldGroupHeader\n            titleText={{ text: &#39;Field group 3&#39;, id: &#39;field-group3-titleText-id&#39; }}\n            titleDescription=\&quot;Field group 3 description text.\&quot;\n          /&gt;\n        }\n      &gt;\n        &lt;FormGroup label=\&quot;Label 1\&quot; isRequired fieldId=\&quot;3-label1\&quot;&gt;\n          &lt;TextInput isRequired id=\&quot;3-label1\&quot; name=\&quot;3-label1\&quot; value={inputValues[&#39;3-label1&#39;]} onChange={handleChange} /&gt;\n        &lt;/FormGroup&gt;\n        &lt;FormGroup label=\&quot;Label 2\&quot; isRequired fieldId=\&quot;3-label2\&quot;&gt;\n          &lt;TextInput isRequired id=\&quot;3-label2\&quot; name=\&quot;3-label2\&quot; value={inputValues[&#39;3-label2&#39;]} onChange={handleChange} /&gt;\n        &lt;/FormGroup&gt;\n        &lt;FormFieldGroup\n          header={\n            &lt;FormFieldGroupHeader\n              titleText={{\n                text: &#39;Nested field group 1 (non-expandable)&#39;,\n                id: &#39;nested-field-group1-non-expandable-titleText-id&#39;\n              }}\n            /&gt;\n          }\n        &gt;\n          &lt;FormGroup label=\&quot;Label 1\&quot; isRequired fieldId=\&quot;3-nonexpand-group1-label1\&quot;&gt;\n            &lt;TextInput\n              isRequired\n              id=\&quot;3-nonexpand-group1-label1\&quot;\n              name=\&quot;3-nonexpand-group1-label1\&quot;\n              value={inputValues[&#39;3-nonexpand-group1-label1&#39;]}\n              onChange={handleChange}\n            /&gt;\n          &lt;/FormGroup&gt;\n          &lt;FormGroup label=\&quot;Label 2\&quot; isRequired fieldId=\&quot;3-nonexpand-group1-label2\&quot;&gt;\n            &lt;TextInput\n              isRequired\n              id=\&quot;3-nonexpand-group1-label2\&quot;\n              name=\&quot;3-nonexpand-group1-label2\&quot;\n              value={inputValues[&#39;3-nonexpand-group1-label2&#39;]}\n              onChange={handleChange}\n            /&gt;\n          &lt;/FormGroup&gt;\n        &lt;/FormFieldGroup&gt;\n        &lt;FormFieldGroup\n          header={\n            &lt;FormFieldGroupHeader\n              titleText={{\n                text: &#39;Nested field group 2 (non-expandable)&#39;,\n                id: &#39;nested-field-group2-non-expandable-titleText-id&#39;\n              }}\n              titleDescription=\&quot;Field group 2 description text.\&quot;\n            /&gt;\n          }\n        &gt;\n          &lt;FormGroup label=\&quot;Label 1\&quot; isRequired fieldId=\&quot;3-nonexpand-group2-label1\&quot;&gt;\n            &lt;TextInput\n              isRequired\n              id=\&quot;3-nonexpand-group2-label1\&quot;\n              name=\&quot;3-nonexpand-group2-label1\&quot;\n              value={inputValues[&#39;3-nonexpand-group2-label1&#39;]}\n              onChange={handleChange}\n            /&gt;\n          &lt;/FormGroup&gt;\n          &lt;FormGroup label=\&quot;Label 2\&quot; isRequired fieldId=\&quot;3-nonexpand-group2-label2\&quot;&gt;\n            &lt;TextInput\n              isRequired\n              id=\&quot;3-nonexpand-group2-label2\&quot;\n              name=\&quot;3-nonexpand-group2-label2\&quot;\n              value={inputValues[&#39;3-nonexpand-group2-label2&#39;]}\n              onChange={handleChange}\n            /&gt;\n          &lt;/FormGroup&gt;\n        &lt;/FormFieldGroup&gt;\n      &lt;/FormFieldGroupExpandable&gt;\n      &lt;FormFieldGroup\n        header={\n          &lt;FormFieldGroupHeader\n            titleText={{ text: &#39;Field group 4 (non-expandable)&#39;, id: &#39;field-group4-non-expandable-titleText-id&#39; }}\n            titleDescription=\&quot;Field group 4 description text.\&quot;\n            actions={\n              &lt;&gt;\n                &lt;Button variant=\&quot;link\&quot;&gt;Delete all&lt;/Button&gt; &lt;Button variant=\&quot;secondary\&quot;&gt;Add parameter&lt;/Button&gt;\n              &lt;/&gt;\n            }\n          /&gt;\n        }\n      &gt;\n        &lt;FormGroup label=\&quot;Label 1\&quot; isRequired fieldId=\&quot;4-nonexpand-label1\&quot;&gt;\n          &lt;TextInput\n            isRequired\n            id=\&quot;4-nonexpand-label1\&quot;\n            name=\&quot;4-nonexpand-label1\&quot;\n            value={inputValues[&#39;4-nonexpand-label1&#39;]}\n            onChange={handleChange}\n          /&gt;\n        &lt;/FormGroup&gt;\n        &lt;FormGroup label=\&quot;Label 2\&quot; isRequired fieldId=\&quot;4-nonexpand-label2\&quot;&gt;\n          &lt;TextInput\n            isRequired\n            id=\&quot;4-nonexpand-label2\&quot;\n            name=\&quot;4-nonexpand-label2\&quot;\n            value={inputValues[&#39;4-nonexpand-label2&#39;]}\n            onChange={handleChange}\n          /&gt;\n        &lt;/FormGroup&gt;\n      &lt;/FormFieldGroup&gt;\n      &lt;FormGroup label=\&quot;Label 3\&quot; isRequired fieldId=\&quot;0-label3\&quot;&gt;\n        &lt;TextInput isRequired id=\&quot;0-label3\&quot; name=\&quot;0-label3\&quot; value={inputValues[&#39;0-label3&#39;]} onChange={handleChange} /&gt;\n      &lt;/FormGroup&gt;\n      &lt;FormGroup label=\&quot;Label 4\&quot; isRequired fieldId=\&quot;0-label4\&quot;&gt;\n        &lt;TextInput isRequired id=\&quot;0-label4\&quot; name=\&quot;0-label4\&quot; value={inputValues[&#39;0-label4&#39;]} onChange={handleChange} /&gt;\n      &lt;/FormGroup&gt;\n    &lt;/Form&gt;\n  );\n};\n&quot;],&quot;html&quot;:[0]}" ssr client="only" opts="{&quot;name&quot;:&quot;LiveExampleBase&quot;,&quot;value&quot;:&quot;react&quot;}"></astro-island>
-<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2111" data-pf-content="true" class="pf-v6-c-content--h3">Form state</h3>
+<astro-island uid="BADSk" component-url="/_astro/LiveExample.B5R4Dzng.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;src&quot;:[0,&quot;import { useState } from &#39;react&#39;;\nimport {\n  Form,\n  FormGroup,\n  FormFieldGroup,\n  FormFieldGroupExpandable,\n  FormFieldGroupHeader,\n  TextInput,\n  Button\n} from &#39;@patternfly/react-core&#39;;\nimport TrashIcon from &#39;@patternfly/react-icons/dist/esm/icons/trash-icon&#39;;\n\nexport const FormFieldGroups: React.FunctionComponent = () =&gt; {\n  const initialValues = {\n    &#39;0-label1&#39;: &#39;&#39;,\n    &#39;0-label2&#39;: &#39;&#39;,\n    &#39;1-expanded-group1-label1&#39;: &#39;&#39;,\n    &#39;1-expanded-group1-label2&#39;: &#39;&#39;,\n    &#39;1-expanded-group2-label1&#39;: &#39;&#39;,\n    &#39;1-expanded-group2-label2&#39;: &#39;&#39;,\n    &#39;1-expanded-group3-label1&#39;: &#39;&#39;,\n    &#39;1-expanded-group3-label2&#39;: &#39;&#39;,\n    &#39;1-group1-label1&#39;: &#39;&#39;,\n    &#39;1-group1-label2&#39;: &#39;&#39;,\n    &#39;2-label1&#39;: &#39;&#39;,\n    &#39;2-label2&#39;: &#39;&#39;,\n    &#39;3-label1&#39;: &#39;&#39;,\n    &#39;3-label2&#39;: &#39;&#39;,\n    &#39;3-nonexpand-group1-label1&#39;: &#39;&#39;,\n    &#39;3-nonexpand-group1-label2&#39;: &#39;&#39;,\n    &#39;3-nonexpand-group2-label1&#39;: &#39;&#39;,\n    &#39;3-nonexpand-group2-label2&#39;: &#39;&#39;,\n    &#39;4-nonexpand-label1&#39;: &#39;&#39;,\n    &#39;4-nonexpand-label2&#39;: &#39;&#39;,\n    &#39;0-label3&#39;: &#39;&#39;,\n    &#39;0-label4&#39;: &#39;&#39;\n  };\n\n  const [inputValues, setInputValues] = useState(initialValues);\n\n  const handleChange = (event, value: string) =&gt; {\n    const { name } = event.currentTarget;\n    setInputValues({ ...inputValues, [name]: value });\n  };\n\n  return (\n    &lt;Form&gt;\n      &lt;FormGroup label=\&quot;Label 1\&quot; isRequired fieldId=\&quot;0-label1\&quot;&gt;\n        &lt;TextInput isRequired id=\&quot;0-label1\&quot; name=\&quot;0-label1\&quot; value={inputValues[&#39;0-label1&#39;]} onChange={handleChange} /&gt;\n      &lt;/FormGroup&gt;\n      &lt;FormGroup label=\&quot;Label 2\&quot; isRequired fieldId=\&quot;0-label2\&quot;&gt;\n        &lt;TextInput isRequired id=\&quot;0-label2\&quot; name=\&quot;0-label2\&quot; value={inputValues[&#39;0-label2&#39;]} onChange={handleChange} /&gt;\n      &lt;/FormGroup&gt;\n      &lt;FormFieldGroupExpandable\n        isExpanded\n        toggleAriaLabel=\&quot;Details\&quot;\n        header={\n          &lt;FormFieldGroupHeader\n            titleText={{ text: &#39;Field group 1&#39;, id: &#39;field-group1-titleText-id&#39; }}\n            titleDescription=\&quot;Field group 1 description text.\&quot;\n            actions={\n              &lt;&gt;\n                &lt;Button variant=\&quot;link\&quot;&gt;Delete all&lt;/Button&gt; &lt;Button variant=\&quot;secondary\&quot;&gt;Add parameter&lt;/Button&gt;\n              &lt;/&gt;\n            }\n          /&gt;\n        }\n      &gt;\n        &lt;FormFieldGroupExpandable\n          isExpanded\n          toggleAriaLabel=\&quot;Details\&quot;\n          header={\n            &lt;FormFieldGroupHeader\n              titleText={{ text: &#39;Nested field group 1&#39;, id: &#39;nested-field-group1-titleText-id&#39; }}\n              titleDescription=\&quot;Nested field group 1 description text.\&quot;\n              actions={&lt;Button variant=\&quot;plain\&quot; aria-label=\&quot;Remove\&quot; icon={&lt;TrashIcon /&gt;} /&gt;}\n            /&gt;\n          }\n        &gt;\n          &lt;FormGroup label=\&quot;Label 1\&quot; isRequired fieldId=\&quot;1-expanded-group1-label1\&quot;&gt;\n            &lt;TextInput\n              isRequired\n              id=\&quot;1-expanded-group1-label1\&quot;\n              name=\&quot;1-expanded-group1-label1\&quot;\n              value={inputValues[&#39;1-expanded-group1-label1&#39;]}\n              onChange={handleChange}\n            /&gt;\n          &lt;/FormGroup&gt;\n          &lt;FormGroup label=\&quot;Label 2\&quot; isRequired fieldId=\&quot;1-expanded-group1-label2\&quot;&gt;\n            &lt;TextInput\n              isRequired\n              id=\&quot;1-expanded-group1-label2\&quot;\n              name=\&quot;1-expanded-group1-label2\&quot;\n              value={inputValues[&#39;1-expanded-group1-label2&#39;]}\n              onChange={handleChange}\n            /&gt;\n          &lt;/FormGroup&gt;\n        &lt;/FormFieldGroupExpandable&gt;\n        &lt;FormFieldGroupExpandable\n          toggleAriaLabel=\&quot;Details\&quot;\n          header={\n            &lt;FormFieldGroupHeader\n              titleText={{ text: &#39;Nested field group 2&#39;, id: &#39;nested-field-group2-titleText-id&#39; }}\n              actions={&lt;Button variant=\&quot;plain\&quot; aria-label=\&quot;Remove\&quot; icon={&lt;TrashIcon /&gt;} /&gt;}\n            /&gt;\n          }\n        &gt;\n          &lt;FormGroup label=\&quot;Label 1\&quot; isRequired fieldId=\&quot;1-expanded-group2-label1\&quot;&gt;\n            &lt;TextInput\n              isRequired\n              id=\&quot;1-expanded-group2-label1\&quot;\n              name=\&quot;1-expanded-group2-label1\&quot;\n              value={inputValues[&#39;1-expanded-group2-label1&#39;]}\n              onChange={handleChange}\n            /&gt;\n          &lt;/FormGroup&gt;\n          &lt;FormGroup label=\&quot;Label 2\&quot; isRequired fieldId=\&quot;1-expanded-group2-label2\&quot;&gt;\n            &lt;TextInput\n              isRequired\n              id=\&quot;1-expanded-group2-label2\&quot;\n              name=\&quot;1-expanded-group2-label2\&quot;\n              value={inputValues[&#39;1-expanded-group2-label2&#39;]}\n              onChange={handleChange}\n            /&gt;\n          &lt;/FormGroup&gt;\n        &lt;/FormFieldGroupExpandable&gt;\n        &lt;FormFieldGroupExpandable\n          toggleAriaLabel=\&quot;Details\&quot;\n          header={\n            &lt;FormFieldGroupHeader\n              titleText={{ text: &#39;Nested field group 3&#39;, id: &#39;nested-field-group3-titleText-id&#39; }}\n              titleDescription=\&quot;Field group 3 description text.\&quot;\n              actions={&lt;Button variant=\&quot;plain\&quot; aria-label=\&quot;Remove\&quot; icon={&lt;TrashIcon /&gt;} /&gt;}\n            /&gt;\n          }\n        &gt;\n          &lt;FormGroup label=\&quot;Label 1\&quot; isRequired fieldId=\&quot;1-expanded-group3-label1\&quot;&gt;\n            &lt;TextInput\n              isRequired\n              id=\&quot;1-expanded-group3-label1\&quot;\n              name=\&quot;1-expanded-group3-label1\&quot;\n              value={inputValues[&#39;1-expanded-group3-label1&#39;]}\n              onChange={handleChange}\n            /&gt;\n          &lt;/FormGroup&gt;\n          &lt;FormGroup label=\&quot;Label 2\&quot; isRequired fieldId=\&quot;1-expanded-group3-label2\&quot;&gt;\n            &lt;TextInput\n              isRequired\n              id=\&quot;1-expanded-group3-label2\&quot;\n              name=\&quot;1-expanded-group3-label2\&quot;\n              value={inputValues[&#39;1-expanded-group3-label2&#39;]}\n              onChange={handleChange}\n            /&gt;\n          &lt;/FormGroup&gt;\n        &lt;/FormFieldGroupExpandable&gt;\n        &lt;FormGroup label=\&quot;Label 1\&quot; isRequired fieldId=\&quot;1-group1-label1\&quot;&gt;\n          &lt;TextInput\n            isRequired\n            id=\&quot;1-group1-label1\&quot;\n            name=\&quot;1-group1-label1\&quot;\n            value={inputValues[&#39;1-group1-label1&#39;]}\n            onChange={handleChange}\n          /&gt;\n        &lt;/FormGroup&gt;\n        &lt;FormGroup label=\&quot;Label 2\&quot; isRequired fieldId=\&quot;1-group1-label2\&quot;&gt;\n          &lt;TextInput\n            isRequired\n            id=\&quot;1-group1-label2\&quot;\n            name=\&quot;1-group1-label2\&quot;\n            value={inputValues[&#39;1-group1-label2&#39;]}\n            onChange={handleChange}\n          /&gt;\n        &lt;/FormGroup&gt;\n      &lt;/FormFieldGroupExpandable&gt;\n      &lt;FormFieldGroupExpandable\n        toggleAriaLabel=\&quot;Details\&quot;\n        header={\n          &lt;FormFieldGroupHeader\n            titleText={{ text: &#39;Field group 2&#39;, id: &#39;field-group2-titleText-id&#39; }}\n            titleDescription=\&quot;Field group 2 description text.\&quot;\n            actions={\n              &lt;&gt;\n                &lt;Button variant=\&quot;link\&quot;&gt;Delete all&lt;/Button&gt; &lt;Button variant=\&quot;secondary\&quot;&gt;Add parameter&lt;/Button&gt;\n              &lt;/&gt;\n            }\n          /&gt;\n        }\n      &gt;\n        &lt;FormGroup label=\&quot;Label 1\&quot; isRequired fieldId=\&quot;2-label1\&quot;&gt;\n          &lt;TextInput isRequired id=\&quot;2-label1\&quot; name=\&quot;2-label1\&quot; value={inputValues[&#39;2-label1&#39;]} onChange={handleChange} /&gt;\n        &lt;/FormGroup&gt;\n        &lt;FormGroup label=\&quot;Label 2\&quot; isRequired fieldId=\&quot;2-label2\&quot;&gt;\n          &lt;TextInput isRequired id=\&quot;2-label2\&quot; name=\&quot;2-label2\&quot; value={inputValues[&#39;2-label2&#39;]} onChange={handleChange} /&gt;\n        &lt;/FormGroup&gt;\n      &lt;/FormFieldGroupExpandable&gt;\n      &lt;FormFieldGroupExpandable\n        isExpanded\n        toggleAriaLabel=\&quot;Details\&quot;\n        header={\n          &lt;FormFieldGroupHeader\n            titleText={{ text: &#39;Field group 3&#39;, id: &#39;field-group3-titleText-id&#39; }}\n            titleDescription=\&quot;Field group 3 description text.\&quot;\n          /&gt;\n        }\n      &gt;\n        &lt;FormGroup label=\&quot;Label 1\&quot; isRequired fieldId=\&quot;3-label1\&quot;&gt;\n          &lt;TextInput isRequired id=\&quot;3-label1\&quot; name=\&quot;3-label1\&quot; value={inputValues[&#39;3-label1&#39;]} onChange={handleChange} /&gt;\n        &lt;/FormGroup&gt;\n        &lt;FormGroup label=\&quot;Label 2\&quot; isRequired fieldId=\&quot;3-label2\&quot;&gt;\n          &lt;TextInput isRequired id=\&quot;3-label2\&quot; name=\&quot;3-label2\&quot; value={inputValues[&#39;3-label2&#39;]} onChange={handleChange} /&gt;\n        &lt;/FormGroup&gt;\n        &lt;FormFieldGroup\n          header={\n            &lt;FormFieldGroupHeader\n              titleText={{\n                text: &#39;Nested field group 1 (non-expandable)&#39;,\n                id: &#39;nested-field-group1-non-expandable-titleText-id&#39;\n              }}\n            /&gt;\n          }\n        &gt;\n          &lt;FormGroup label=\&quot;Label 1\&quot; isRequired fieldId=\&quot;3-nonexpand-group1-label1\&quot;&gt;\n            &lt;TextInput\n              isRequired\n              id=\&quot;3-nonexpand-group1-label1\&quot;\n              name=\&quot;3-nonexpand-group1-label1\&quot;\n              value={inputValues[&#39;3-nonexpand-group1-label1&#39;]}\n              onChange={handleChange}\n            /&gt;\n          &lt;/FormGroup&gt;\n          &lt;FormGroup label=\&quot;Label 2\&quot; isRequired fieldId=\&quot;3-nonexpand-group1-label2\&quot;&gt;\n            &lt;TextInput\n              isRequired\n              id=\&quot;3-nonexpand-group1-label2\&quot;\n              name=\&quot;3-nonexpand-group1-label2\&quot;\n              value={inputValues[&#39;3-nonexpand-group1-label2&#39;]}\n              onChange={handleChange}\n            /&gt;\n          &lt;/FormGroup&gt;\n        &lt;/FormFieldGroup&gt;\n        &lt;FormFieldGroup\n          header={\n            &lt;FormFieldGroupHeader\n              titleText={{\n                text: &#39;Nested field group 2 (non-expandable)&#39;,\n                id: &#39;nested-field-group2-non-expandable-titleText-id&#39;\n              }}\n              titleDescription=\&quot;Field group 2 description text.\&quot;\n            /&gt;\n          }\n        &gt;\n          &lt;FormGroup label=\&quot;Label 1\&quot; isRequired fieldId=\&quot;3-nonexpand-group2-label1\&quot;&gt;\n            &lt;TextInput\n              isRequired\n              id=\&quot;3-nonexpand-group2-label1\&quot;\n              name=\&quot;3-nonexpand-group2-label1\&quot;\n              value={inputValues[&#39;3-nonexpand-group2-label1&#39;]}\n              onChange={handleChange}\n            /&gt;\n          &lt;/FormGroup&gt;\n          &lt;FormGroup label=\&quot;Label 2\&quot; isRequired fieldId=\&quot;3-nonexpand-group2-label2\&quot;&gt;\n            &lt;TextInput\n              isRequired\n              id=\&quot;3-nonexpand-group2-label2\&quot;\n              name=\&quot;3-nonexpand-group2-label2\&quot;\n              value={inputValues[&#39;3-nonexpand-group2-label2&#39;]}\n              onChange={handleChange}\n            /&gt;\n          &lt;/FormGroup&gt;\n        &lt;/FormFieldGroup&gt;\n      &lt;/FormFieldGroupExpandable&gt;\n      &lt;FormFieldGroup\n        header={\n          &lt;FormFieldGroupHeader\n            titleText={{ text: &#39;Field group 4 (non-expandable)&#39;, id: &#39;field-group4-non-expandable-titleText-id&#39; }}\n            titleDescription=\&quot;Field group 4 description text.\&quot;\n            actions={\n              &lt;&gt;\n                &lt;Button variant=\&quot;link\&quot;&gt;Delete all&lt;/Button&gt; &lt;Button variant=\&quot;secondary\&quot;&gt;Add parameter&lt;/Button&gt;\n              &lt;/&gt;\n            }\n          /&gt;\n        }\n      &gt;\n        &lt;FormGroup label=\&quot;Label 1\&quot; isRequired fieldId=\&quot;4-nonexpand-label1\&quot;&gt;\n          &lt;TextInput\n            isRequired\n            id=\&quot;4-nonexpand-label1\&quot;\n            name=\&quot;4-nonexpand-label1\&quot;\n            value={inputValues[&#39;4-nonexpand-label1&#39;]}\n            onChange={handleChange}\n          /&gt;\n        &lt;/FormGroup&gt;\n        &lt;FormGroup label=\&quot;Label 2\&quot; isRequired fieldId=\&quot;4-nonexpand-label2\&quot;&gt;\n          &lt;TextInput\n            isRequired\n            id=\&quot;4-nonexpand-label2\&quot;\n            name=\&quot;4-nonexpand-label2\&quot;\n            value={inputValues[&#39;4-nonexpand-label2&#39;]}\n            onChange={handleChange}\n          /&gt;\n        &lt;/FormGroup&gt;\n      &lt;/FormFieldGroup&gt;\n      &lt;FormGroup label=\&quot;Label 3\&quot; isRequired fieldId=\&quot;0-label3\&quot;&gt;\n        &lt;TextInput isRequired id=\&quot;0-label3\&quot; name=\&quot;0-label3\&quot; value={inputValues[&#39;0-label3&#39;]} onChange={handleChange} /&gt;\n      &lt;/FormGroup&gt;\n      &lt;FormGroup label=\&quot;Label 4\&quot; isRequired fieldId=\&quot;0-label4\&quot;&gt;\n        &lt;TextInput isRequired id=\&quot;0-label4\&quot; name=\&quot;0-label4\&quot; value={inputValues[&#39;0-label4&#39;]} onChange={handleChange} /&gt;\n      &lt;/FormGroup&gt;\n    &lt;/Form&gt;\n  );\n};\n&quot;],&quot;html&quot;:[0]}" ssr client="only" opts="{&quot;name&quot;:&quot;LiveExampleBase&quot;,&quot;value&quot;:&quot;react&quot;}"></astro-island>
+<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2077" data-pf-content="true" class="pf-v6-c-content--h3">Form state</h3>
-<astro-island uid="Z26WxpN" component-url="/_astro/LiveExample.BOl02361.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;src&quot;:[0,&quot;import { useState } from &#39;react&#39;;\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 &#39;@patternfly/react-core&#39;;\nimport ExclamationCircleIcon from &#39;@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon&#39;;\n\nexport const FormState = () =&gt; {\n  const [isSelectOpen, setIsSelectOpen] = useState(false);\n  const [formStateExpanded, setFormStateExpanded] = useState(false);\n\n  return (\n    &lt;FormContextProvider initialValues={{ &#39;select-id&#39;: &#39;Option 1&#39; }}&gt;\n      {({ setValue, getValue, setError, values, errors }) =&gt; (\n        &lt;Form&gt;\n          &lt;FormGroup label=\&quot;Input value\&quot; fieldId=\&quot;input-id\&quot; isRequired&gt;\n            &lt;TextInput\n              id=\&quot;input-id\&quot;\n              onChange={(_event, value) =&gt; {\n                setValue(&#39;input-id&#39;, value);\n                setError(&#39;input-id&#39;, undefined);\n              }}\n              value={getValue(&#39;input-id&#39;)}\n              validated={errors[&#39;input-id&#39;] ? &#39;error&#39; : &#39;default&#39;}\n            /&gt;\n            &lt;FormHelperText&gt;\n              &lt;HelperText&gt;\n                &lt;HelperTextItem\n                  variant={errors[&#39;input-id&#39;] ? &#39;error&#39; : &#39;default&#39;}\n                  {...(errors[&#39;input-id&#39;] &amp;&amp; { icon: &lt;ExclamationCircleIcon /&gt; })}\n                &gt;\n                  {errors[&#39;input-id&#39;]}\n                &lt;/HelperTextItem&gt;\n              &lt;/HelperText&gt;\n            &lt;/FormHelperText&gt;\n          &lt;/FormGroup&gt;\n\n          &lt;TextArea\n            id=\&quot;textarea-id\&quot;\n            aria-label=\&quot;Form state TextArea\&quot;\n            onChange={(_event, value) =&gt; setValue(&#39;textarea-id&#39;, value)}\n            value={getValue(&#39;textarea-id&#39;)}\n          /&gt;\n\n          &lt;Select\n            id=\&quot;select-id\&quot;\n            selected={getValue(&#39;select-id&#39;)}\n            isOpen={isSelectOpen}\n            toggle={(toggleRef) =&gt; (\n              &lt;MenuToggle\n                ref={toggleRef}\n                onClick={(isOpen) =&gt; setIsSelectOpen(isOpen)}\n                isExpanded={isSelectOpen}\n                style={\n                  {\n                    width: &#39;200px&#39;\n                  } as React.CSSProperties\n                }\n              &gt;\n                {getValue(&#39;select-id&#39;)}\n              &lt;/MenuToggle&gt;\n            )}\n            onOpenChange={(isOpen) =&gt; setIsSelectOpen(isOpen)}\n            onSelect={(_, value) =&gt; {\n              setValue(&#39;select-id&#39;, value as string);\n              setIsSelectOpen(false);\n            }}\n          &gt;\n            &lt;SelectList&gt;\n              &lt;SelectOption value=\&quot;Option 1\&quot;&gt;Option 1&lt;/SelectOption&gt;\n              &lt;SelectOption value=\&quot;Option 2\&quot;&gt;Option 2&lt;/SelectOption&gt;\n              &lt;SelectOption value=\&quot;Option 3\&quot;&gt;Option 3&lt;/SelectOption&gt;\n            &lt;/SelectList&gt;\n          &lt;/Select&gt;\n\n          &lt;ActionGroup&gt;\n            &lt;Button\n              type={ButtonType.submit}\n              onClick={(e) =&gt; {\n                e.preventDefault();\n\n                if (!values[&#39;input-id&#39;]) {\n                  setError(&#39;input-id&#39;, &#39;Input value is required.&#39;);\n                } else {\n                  alert(`Form submitted with: \\n ${JSON.stringify(values)}`);\n                }\n              }}\n            &gt;\n              Submit\n            &lt;/Button&gt;\n            &lt;Button variant={ButtonVariant.link} onClick={() =&gt; setFormStateExpanded((prevExpanded) =&gt; !prevExpanded)}&gt;\n              {`${formStateExpanded ? &#39;Hide&#39; : &#39;Show&#39;} form state`}\n            &lt;/Button&gt;\n          &lt;/ActionGroup&gt;\n          {formStateExpanded &amp;&amp; (\n            &lt;&gt;\n              &lt;Divider /&gt;\n              &lt;pre&gt;{JSON.stringify({ values, errors }, null, 2)}&lt;/pre&gt;\n            &lt;/&gt;\n          )}\n        &lt;/Form&gt;\n      )}\n    &lt;/FormContextProvider&gt;\n  );\n};\n&quot;],&quot;html&quot;:[0]}" ssr client="only" opts="{&quot;name&quot;:&quot;LiveExampleBase&quot;,&quot;value&quot;:&quot;react&quot;}"></astro-island> <div class="pf-v6-l-stack pf-m-gutter"><div class="pf-v6-l-stack__item pf-v6-u-mt-md"><astro-island uid="Z2pxIWC" component-url="/_astro/PropsTables.Cio9znJH.js" component-export="PropsTables" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;propComponents&quot;:[1,[[0,&quot;ActionGroup&quot;],[0,&quot;Form&quot;],[0,&quot;FormGroup&quot;],[0,&quot;FormGroupLabelHelp&quot;],[0,&quot;FormSection&quot;],[0,&quot;FormHelperText&quot;],[0,&quot;FormFieldGroup&quot;],[0,&quot;FormFieldGroupExpandable&quot;],[0,&quot;FormFieldGroupHeader&quot;],[0,&quot;FormFieldGroupHeaderTitleTextObject&quot;],[0,&quot;FormContextProps&quot;],[0,&quot;FormContextProviderProps&quot;],[0,&quot;Button&quot;],[0,&quot;Popover&quot;]]],&quot;url&quot;:[7,&quot;http://localhost:4321/components/form/react&quot;]}" ssr client="only" opts="{&quot;name&quot;:&quot;PropsTables&quot;,&quot;value&quot;:&quot;react&quot;}"></astro-island></div><div class="pf-v6-l-stack__item"><div class="pf-v6-l-stack pf-m-gutter"><div class="pf-v6-l-stack__item"><div class="pf-v6-l-flex pf-m-space-items-sm pf-m-align-items-center"><div class=""><h2 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2097" id="css-variables" tabindex="-1" data-pf-content="true" class="pf-v6-c-content--h2 pf-m-editorial ws-heading pf-v6-c-content--h2"><a href="#css-variables" class="ws-heading-anchor" tabindex="-1"><svg class="pf-v6-svg ws-heading-anchor-icon" viewBox="0 0 512 512" fill="currentColor" aria-hidden="true" role="img" width="1em" height="1em" style="vertical-align:middle"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"></path></svg></a>
+<astro-island uid="Z26WxpN" component-url="/_astro/LiveExample.B5R4Dzng.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;src&quot;:[0,&quot;import { useState } from &#39;react&#39;;\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 &#39;@patternfly/react-core&#39;;\nimport ExclamationCircleIcon from &#39;@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon&#39;;\n\nexport const FormState = () =&gt; {\n  const [isSelectOpen, setIsSelectOpen] = useState(false);\n  const [formStateExpanded, setFormStateExpanded] = useState(false);\n\n  return (\n    &lt;FormContextProvider initialValues={{ &#39;select-id&#39;: &#39;Option 1&#39; }}&gt;\n      {({ setValue, getValue, setError, values, errors }) =&gt; (\n        &lt;Form&gt;\n          &lt;FormGroup label=\&quot;Input value\&quot; fieldId=\&quot;input-id\&quot; isRequired&gt;\n            &lt;TextInput\n              id=\&quot;input-id\&quot;\n              onChange={(_event, value) =&gt; {\n                setValue(&#39;input-id&#39;, value);\n                setError(&#39;input-id&#39;, undefined);\n              }}\n              value={getValue(&#39;input-id&#39;)}\n              validated={errors[&#39;input-id&#39;] ? &#39;error&#39; : &#39;default&#39;}\n            /&gt;\n            &lt;FormHelperText&gt;\n              &lt;HelperText&gt;\n                &lt;HelperTextItem\n                  variant={errors[&#39;input-id&#39;] ? &#39;error&#39; : &#39;default&#39;}\n                  {...(errors[&#39;input-id&#39;] &amp;&amp; { icon: &lt;ExclamationCircleIcon /&gt; })}\n                &gt;\n                  {errors[&#39;input-id&#39;]}\n                &lt;/HelperTextItem&gt;\n              &lt;/HelperText&gt;\n            &lt;/FormHelperText&gt;\n          &lt;/FormGroup&gt;\n\n          &lt;TextArea\n            id=\&quot;textarea-id\&quot;\n            aria-label=\&quot;Form state TextArea\&quot;\n            onChange={(_event, value) =&gt; setValue(&#39;textarea-id&#39;, value)}\n            value={getValue(&#39;textarea-id&#39;)}\n          /&gt;\n\n          &lt;Select\n            id=\&quot;select-id\&quot;\n            selected={getValue(&#39;select-id&#39;)}\n            isOpen={isSelectOpen}\n            toggle={(toggleRef) =&gt; (\n              &lt;MenuToggle\n                ref={toggleRef}\n                onClick={(isOpen) =&gt; setIsSelectOpen(isOpen)}\n                isExpanded={isSelectOpen}\n                style={\n                  {\n                    width: &#39;200px&#39;\n                  } as React.CSSProperties\n                }\n              &gt;\n                {getValue(&#39;select-id&#39;)}\n              &lt;/MenuToggle&gt;\n            )}\n            onOpenChange={(isOpen) =&gt; setIsSelectOpen(isOpen)}\n            onSelect={(_, value) =&gt; {\n              setValue(&#39;select-id&#39;, value as string);\n              setIsSelectOpen(false);\n            }}\n          &gt;\n            &lt;SelectList&gt;\n              &lt;SelectOption value=\&quot;Option 1\&quot;&gt;Option 1&lt;/SelectOption&gt;\n              &lt;SelectOption value=\&quot;Option 2\&quot;&gt;Option 2&lt;/SelectOption&gt;\n              &lt;SelectOption value=\&quot;Option 3\&quot;&gt;Option 3&lt;/SelectOption&gt;\n            &lt;/SelectList&gt;\n          &lt;/Select&gt;\n\n          &lt;ActionGroup&gt;\n            &lt;Button\n              type={ButtonType.submit}\n              onClick={(e) =&gt; {\n                e.preventDefault();\n\n                if (!values[&#39;input-id&#39;]) {\n                  setError(&#39;input-id&#39;, &#39;Input value is required.&#39;);\n                } else {\n                  alert(`Form submitted with: \\n ${JSON.stringify(values)}`);\n                }\n              }}\n            &gt;\n              Submit\n            &lt;/Button&gt;\n            &lt;Button variant={ButtonVariant.link} onClick={() =&gt; setFormStateExpanded((prevExpanded) =&gt; !prevExpanded)}&gt;\n              {`${formStateExpanded ? &#39;Hide&#39; : &#39;Show&#39;} form state`}\n            &lt;/Button&gt;\n          &lt;/ActionGroup&gt;\n          {formStateExpanded &amp;&amp; (\n            &lt;&gt;\n              &lt;Divider /&gt;\n              &lt;pre&gt;{JSON.stringify({ values, errors }, null, 2)}&lt;/pre&gt;\n            &lt;/&gt;\n          )}\n        &lt;/Form&gt;\n      )}\n    &lt;/FormContextProvider&gt;\n  );\n};\n&quot;],&quot;html&quot;:[0]}" ssr client="only" opts="{&quot;name&quot;:&quot;LiveExampleBase&quot;,&quot;value&quot;:&quot;react&quot;}"></astro-island> <div class="pf-v6-l-stack pf-m-gutter"><div class="pf-v6-l-stack__item pf-v6-u-mt-md"><astro-island uid="Z2pxIWC" component-url="/_astro/PropsTables.YkW1puJk.js" component-export="PropsTables" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;propComponents&quot;:[1,[[0,&quot;ActionGroup&quot;],[0,&quot;Form&quot;],[0,&quot;FormGroup&quot;],[0,&quot;FormGroupLabelHelp&quot;],[0,&quot;FormSection&quot;],[0,&quot;FormHelperText&quot;],[0,&quot;FormFieldGroup&quot;],[0,&quot;FormFieldGroupExpandable&quot;],[0,&quot;FormFieldGroupHeader&quot;],[0,&quot;FormFieldGroupHeaderTitleTextObject&quot;],[0,&quot;FormContextProps&quot;],[0,&quot;FormContextProviderProps&quot;],[0,&quot;Button&quot;],[0,&quot;Popover&quot;]]],&quot;url&quot;:[7,&quot;http://localhost:4321/components/form/react&quot;]}" ssr client="only" opts="{&quot;name&quot;:&quot;PropsTables&quot;,&quot;value&quot;:&quot;react&quot;}"></astro-island></div><div class="pf-v6-l-stack__item"><div class="pf-v6-l-stack pf-m-gutter"><div class="pf-v6-l-stack__item"><div class="pf-v6-l-flex pf-m-space-items-sm pf-m-align-items-center"><div class=""><h2 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2063" id="css-variables" tabindex="-1" data-pf-content="true" class="pf-v6-c-content--h2 pf-m-editorial ws-heading pf-v6-c-content--h2"><a href="#css-variables" class="ws-heading-anchor" tabindex="-1"><svg class="pf-v6-svg ws-heading-anchor-icon" viewBox="0 0 512 512" fill="currentColor" aria-hidden="true" role="img" width="1em" height="1em" style="vertical-align:middle"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"></path></svg></a>
 CSS variables
 </h2></div></div></div><div class="pf-v6-l-stack__item"><astro-island uid="ZUcWbY" component-url="/_astro/CSSTable.-Emc9iTg.js" component-export="CSSTable" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;autoLinkHeader&quot;:[0,false],&quot;cssPrefix&quot;:[0,&quot;pf-v6-c-form&quot;]}" ssr client="only" opts="{&quot;name&quot;:&quot;CSSTableComponent&quot;,&quot;value&quot;:&quot;react&quot;}"></astro-island></div></div></div></div> </div></section>   </div></section> </main> </div> </div> <script type="module">try{localStorage.getItem("theme-preference")==="dark"&&document.documentElement.classList.add("pf-v6-theme-dark")}catch(e){console.error("Failed to set initial theme:",e)}</script></body></html>