npm - @patternfly/patternfly-doc-core - Versions diffs - 1.13.2 → 1.13.3 - Mend

@patternfly/patternfly-doc-core 1.13.2 → 1.13.3

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 (369) hide show

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

@@ -42,88 +42,88 @@
 	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="bamE9" 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-421"><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="1l6Vke" 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-141"><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-422"><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-423"><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-141"><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/select/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-2634" 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-2692" data-pf-content="true" class="pf-v6-c-content--p">Select builds off of the menu component suite to adapt commonly used properties and functions to create a select menu. See the <a data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2635" data-pf-content="true" class="pf-v6-c-content--a">menu documentation</a> for a full list of properties that may be used to further customize a select menu. View the <a data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2636" data-pf-content="true" class="pf-v6-c-content--a">custom menu examples</a> to see examples of fully functional select menus.</p>
-<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2693" data-pf-content="true" class="pf-v6-c-content--p">For use cases that do not require a lot of customization, there are various template components available to use in the <code>@react-templates</code> package. These templates have a streamlined API and logic, making them easier to set up and use, but are limited in scope and flexibility. See the <a data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2637" data-pf-content="true" class="pf-v6-c-content--a">templates page</a> for details.</p>
-<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2638" data-pf-content="true" class="pf-v6-c-content--h3">Single select</h3>
-<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2639" data-pf-content="true" class="pf-v6-c-content--p">To let users select a single item from a list, use a single select menu.</p>
-<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2677" data-pf-content="true" class="pf-v6-c-content--p">You can add multiple <code>&lt;SelectOption&gt;</code> components to build out a list of menu items. For each select option, pass a relevant option label to the <code>value</code> property.</p>
-<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2678" data-pf-content="true" class="pf-v6-c-content--p">To disable the select menu toggle, use the <code>isDisabled</code> property. In the following example, select the checkbox to observe this behavior.</p>
+			[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="p82mt" 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-427"><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="h7AyB" 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-143"><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-428"><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-429"><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-143"><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.x46lNg3Y.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/select/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-2668" 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-2726" data-pf-content="true" class="pf-v6-c-content--p">Select builds off of the menu component suite to adapt commonly used properties and functions to create a select menu. See the <a data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2669" data-pf-content="true" class="pf-v6-c-content--a">menu documentation</a> for a full list of properties that may be used to further customize a select menu. View the <a data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2670" data-pf-content="true" class="pf-v6-c-content--a">custom menu examples</a> to see examples of fully functional select menus.</p>
+<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2727" data-pf-content="true" class="pf-v6-c-content--p">For use cases that do not require a lot of customization, there are various template components available to use in the <code>@react-templates</code> package. These templates have a streamlined API and logic, making them easier to set up and use, but are limited in scope and flexibility. See the <a data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2671" data-pf-content="true" class="pf-v6-c-content--a">templates page</a> for details.</p>
+<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2672" data-pf-content="true" class="pf-v6-c-content--h3">Single select</h3>
+<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2673" data-pf-content="true" class="pf-v6-c-content--p">To let users select a single item from a list, use a single select menu.</p>
+<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2711" data-pf-content="true" class="pf-v6-c-content--p">You can add multiple <code>&lt;SelectOption&gt;</code> components to build out a list of menu items. For each select option, pass a relevant option label to the <code>value</code> property.</p>
+<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2712" data-pf-content="true" class="pf-v6-c-content--p">To disable the select menu toggle, use the <code>isDisabled</code> property. In the following example, select the checkbox to observe this behavior.</p>
-<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="Z2bOoV" component-url="/_astro/LiveExample.B5R4Dzng.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;src&quot;:[0,&quot;import { Fragment, useState } from &#39;react&#39;;\nimport { Select, SelectOption, SelectList, MenuToggle, MenuToggleElement, Checkbox } from &#39;@patternfly/react-core&#39;;\n\nexport const SelectBasic: React.FunctionComponent = () =&gt; {\n  const [isOpen, setIsOpen] = useState(false);\n  const [selected, setSelected] = useState&lt;string&gt;(&#39;Select a value&#39;);\n  const [isDisabled, setIsDisabled] = useState&lt;boolean&gt;(false);\n\n  const onToggleClick = () =&gt; {\n    setIsOpen(!isOpen);\n  };\n\n  const onSelect = (_event: React.MouseEvent&lt;Element, MouseEvent&gt; | undefined, value: string | number | undefined) =&gt; {\n    // eslint-disable-next-line no-console\n    console.log(&#39;selected&#39;, value);\n\n    setSelected(value as string);\n    setIsOpen(false);\n  };\n\n  const toggle = (toggleRef: React.Ref&lt;MenuToggleElement&gt;) =&gt; (\n    &lt;MenuToggle\n      ref={toggleRef}\n      onClick={onToggleClick}\n      isExpanded={isOpen}\n      isDisabled={isDisabled}\n      style={\n        {\n          width: &#39;200px&#39;\n        } as React.CSSProperties\n      }\n    &gt;\n      {selected}\n    &lt;/MenuToggle&gt;\n  );\n\n  return (\n    &lt;Fragment&gt;\n      &lt;Checkbox\n        id=\&quot;toggle-disabled\&quot;\n        label=\&quot;isDisabled\&quot;\n        isChecked={isDisabled}\n        onChange={(_event, checked) =&gt; setIsDisabled(checked)}\n        style={{ marginBottom: 20 }}\n      /&gt;\n      &lt;Select\n        id=\&quot;single-select\&quot;\n        isOpen={isOpen}\n        selected={selected}\n        onSelect={onSelect}\n        onOpenChange={(isOpen) =&gt; setIsOpen(isOpen)}\n        toggle={toggle}\n        shouldFocusToggleOnSelect\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    &lt;/Fragment&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-2640" data-pf-content="true" class="pf-v6-c-content--h3">Select option variants</h3>
-<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2641" data-pf-content="true" class="pf-v6-c-content--p">The following example showcases different option variants and customizations that are commonly used in a select menu.</p>
-<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2679" data-pf-content="true" class="pf-v6-c-content--p">To create these variants, you can pass different properties into a <code>&lt;SelectOption&gt;</code> component.</p>
-<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2642" data-pf-content="true" class="pf-v6-c-content--p">This example provides examples of:</p>
-<ul data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2694" data-pf-content="true" class="pf-v6-c-content--ul">
-<li data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2680" data-pf-content="true" class="pf-v6-c-content--li">An option with a description, which is created by using the <code>description</code> property.</li>
-<li data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2681" data-pf-content="true" class="pf-v6-c-content--li">An option with a link, which is created by passing a URL into the <code>to</code> property. For external links, use the <code>isExternalLink</code> property so that the option is styled with an outbound link icon.</li>
-<li data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2682" data-pf-content="true" class="pf-v6-c-content--li">An option with an icon, which is created by using the <code>icon</code> property.</li>
-<li data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2683" data-pf-content="true" class="pf-v6-c-content--li">An option that is disabled by using the <code>isDisabled</code> property.</li>
+<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="Z2bOoV" component-url="/_astro/LiveExample.C43dqXje.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;src&quot;:[0,&quot;import { Fragment, useState } from &#39;react&#39;;\nimport { Select, SelectOption, SelectList, MenuToggle, MenuToggleElement, Checkbox } from &#39;@patternfly/react-core&#39;;\n\nexport const SelectBasic: React.FunctionComponent = () =&gt; {\n  const [isOpen, setIsOpen] = useState(false);\n  const [selected, setSelected] = useState&lt;string&gt;(&#39;Select a value&#39;);\n  const [isDisabled, setIsDisabled] = useState&lt;boolean&gt;(false);\n\n  const onToggleClick = () =&gt; {\n    setIsOpen(!isOpen);\n  };\n\n  const onSelect = (_event: React.MouseEvent&lt;Element, MouseEvent&gt; | undefined, value: string | number | undefined) =&gt; {\n    // eslint-disable-next-line no-console\n    console.log(&#39;selected&#39;, value);\n\n    setSelected(value as string);\n    setIsOpen(false);\n  };\n\n  const toggle = (toggleRef: React.Ref&lt;MenuToggleElement&gt;) =&gt; (\n    &lt;MenuToggle\n      ref={toggleRef}\n      onClick={onToggleClick}\n      isExpanded={isOpen}\n      isDisabled={isDisabled}\n      style={\n        {\n          width: &#39;200px&#39;\n        } as React.CSSProperties\n      }\n    &gt;\n      {selected}\n    &lt;/MenuToggle&gt;\n  );\n\n  return (\n    &lt;Fragment&gt;\n      &lt;Checkbox\n        id=\&quot;toggle-disabled\&quot;\n        label=\&quot;isDisabled\&quot;\n        isChecked={isDisabled}\n        onChange={(_event, checked) =&gt; setIsDisabled(checked)}\n        style={{ marginBottom: 20 }}\n      /&gt;\n      &lt;Select\n        id=\&quot;single-select\&quot;\n        isOpen={isOpen}\n        selected={selected}\n        onSelect={onSelect}\n        onOpenChange={(isOpen) =&gt; setIsOpen(isOpen)}\n        toggle={toggle}\n        shouldFocusToggleOnSelect\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    &lt;/Fragment&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-2674" data-pf-content="true" class="pf-v6-c-content--h3">Select option variants</h3>
+<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2675" data-pf-content="true" class="pf-v6-c-content--p">The following example showcases different option variants and customizations that are commonly used in a select menu.</p>
+<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2713" data-pf-content="true" class="pf-v6-c-content--p">To create these variants, you can pass different properties into a <code>&lt;SelectOption&gt;</code> component.</p>
+<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2676" data-pf-content="true" class="pf-v6-c-content--p">This example provides examples of:</p>
+<ul data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2728" data-pf-content="true" class="pf-v6-c-content--ul">
+<li data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2714" data-pf-content="true" class="pf-v6-c-content--li">An option with a description, which is created by using the <code>description</code> property.</li>
+<li data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2715" data-pf-content="true" class="pf-v6-c-content--li">An option with a link, which is created by passing a URL into the <code>to</code> property. For external links, use the <code>isExternalLink</code> property so that the option is styled with an outbound link icon.</li>
+<li data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2716" data-pf-content="true" class="pf-v6-c-content--li">An option with an icon, which is created by using the <code>icon</code> property.</li>
+<li data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2717" data-pf-content="true" class="pf-v6-c-content--li">An option that is disabled by using the <code>isDisabled</code> property.</li>
 </ul>
-<astro-island uid="ZPTGUu" 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 { Select, SelectOption, SelectList, MenuToggle, MenuToggleElement } from &#39;@patternfly/react-core&#39;;\nimport BellIcon from &#39;@patternfly/react-icons/dist/esm/icons/bell-icon&#39;;\n\nexport const SelectOptionVariations: React.FunctionComponent = () =&gt; {\n  const [isOpen, setIsOpen] = useState(false);\n  const [selected, setSelected] = useState&lt;string&gt;(&#39;Select a value&#39;);\n\n  const onToggleClick = () =&gt; {\n    setIsOpen(!isOpen);\n  };\n\n  const onSelect = (_event: React.MouseEvent&lt;Element, MouseEvent&gt; | undefined, value: string | number | undefined) =&gt; {\n    // eslint-disable-next-line no-console\n    console.log(&#39;selected&#39;, value);\n\n    setSelected(value as string);\n    setIsOpen(false);\n  };\n\n  const toggle = (toggleRef: React.Ref&lt;MenuToggleElement&gt;) =&gt; (\n    &lt;MenuToggle\n      ref={toggleRef}\n      onClick={onToggleClick}\n      isExpanded={isOpen}\n      style={\n        {\n          width: &#39;200px&#39;\n        } as React.CSSProperties\n      }\n    &gt;\n      {selected}\n    &lt;/MenuToggle&gt;\n  );\n\n  return (\n    &lt;Select\n      id=\&quot;option-variations-select\&quot;\n      isOpen={isOpen}\n      selected={selected}\n      onSelect={onSelect}\n      onOpenChange={(isOpen) =&gt; setIsOpen(isOpen)}\n      toggle={toggle}\n      shouldFocusToggleOnSelect\n    &gt;\n      &lt;SelectList&gt;\n        &lt;SelectOption value=\&quot;Basic option\&quot;&gt;Basic option&lt;/SelectOption&gt;\n        &lt;SelectOption value=\&quot;Option with description\&quot; description=\&quot;This is a description\&quot;&gt;\n          Option with description\n        &lt;/SelectOption&gt;\n        &lt;SelectOption\n          to=\&quot;#\&quot;\n          // Prevent default clicking functionality for example purposes only\n          onClick={(event) =&gt; event.preventDefault()}\n          value=\&quot;Option with link\&quot;\n          isExternalLink\n        &gt;\n          Option with link\n        &lt;/SelectOption&gt;\n        &lt;SelectOption value=\&quot;Option with icon\&quot; icon={&lt;BellIcon /&gt;}&gt;\n          Option with icon\n        &lt;/SelectOption&gt;\n        &lt;SelectOption value=\&quot;Disabled option\&quot; isDisabled&gt;\n          Disabled option\n        &lt;/SelectOption&gt;\n        &lt;SelectOption value=\&quot;See Menu for additional variations!\&quot;&gt;See Menu for additional variations!&lt;/SelectOption&gt;\n      &lt;/SelectList&gt;\n    &lt;/Select&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-2643" data-pf-content="true" class="pf-v6-c-content--h3">With grouped items</h3>
-<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2684" data-pf-content="true" class="pf-v6-c-content--p">To group related select options together, use 1 or more <code>&lt;SelectGroup&gt;</code> components and title each group using the <code>label</code> property.</p>
+<astro-island uid="ZPTGUu" component-url="/_astro/LiveExample.C43dqXje.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;src&quot;:[0,&quot;import { useState } from &#39;react&#39;;\nimport { Select, SelectOption, SelectList, MenuToggle, MenuToggleElement } from &#39;@patternfly/react-core&#39;;\nimport BellIcon from &#39;@patternfly/react-icons/dist/esm/icons/bell-icon&#39;;\n\nexport const SelectOptionVariations: React.FunctionComponent = () =&gt; {\n  const [isOpen, setIsOpen] = useState(false);\n  const [selected, setSelected] = useState&lt;string&gt;(&#39;Select a value&#39;);\n\n  const onToggleClick = () =&gt; {\n    setIsOpen(!isOpen);\n  };\n\n  const onSelect = (_event: React.MouseEvent&lt;Element, MouseEvent&gt; | undefined, value: string | number | undefined) =&gt; {\n    // eslint-disable-next-line no-console\n    console.log(&#39;selected&#39;, value);\n\n    setSelected(value as string);\n    setIsOpen(false);\n  };\n\n  const toggle = (toggleRef: React.Ref&lt;MenuToggleElement&gt;) =&gt; (\n    &lt;MenuToggle\n      ref={toggleRef}\n      onClick={onToggleClick}\n      isExpanded={isOpen}\n      style={\n        {\n          width: &#39;200px&#39;\n        } as React.CSSProperties\n      }\n    &gt;\n      {selected}\n    &lt;/MenuToggle&gt;\n  );\n\n  return (\n    &lt;Select\n      id=\&quot;option-variations-select\&quot;\n      isOpen={isOpen}\n      selected={selected}\n      onSelect={onSelect}\n      onOpenChange={(isOpen) =&gt; setIsOpen(isOpen)}\n      toggle={toggle}\n      shouldFocusToggleOnSelect\n    &gt;\n      &lt;SelectList&gt;\n        &lt;SelectOption value=\&quot;Basic option\&quot;&gt;Basic option&lt;/SelectOption&gt;\n        &lt;SelectOption value=\&quot;Option with description\&quot; description=\&quot;This is a description\&quot;&gt;\n          Option with description\n        &lt;/SelectOption&gt;\n        &lt;SelectOption\n          to=\&quot;#\&quot;\n          // Prevent default clicking functionality for example purposes only\n          onClick={(event) =&gt; event.preventDefault()}\n          value=\&quot;Option with link\&quot;\n          isExternalLink\n        &gt;\n          Option with link\n        &lt;/SelectOption&gt;\n        &lt;SelectOption value=\&quot;Option with icon\&quot; icon={&lt;BellIcon /&gt;}&gt;\n          Option with icon\n        &lt;/SelectOption&gt;\n        &lt;SelectOption value=\&quot;Disabled option\&quot; isDisabled&gt;\n          Disabled option\n        &lt;/SelectOption&gt;\n        &lt;SelectOption value=\&quot;See Menu for additional variations!\&quot;&gt;See Menu for additional variations!&lt;/SelectOption&gt;\n      &lt;/SelectList&gt;\n    &lt;/Select&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-2677" data-pf-content="true" class="pf-v6-c-content--h3">With grouped items</h3>
+<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2718" data-pf-content="true" class="pf-v6-c-content--p">To group related select options together, use 1 or more <code>&lt;SelectGroup&gt;</code> components and title each group using the <code>label</code> property.</p>
-<astro-island uid="1DnT1I" 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  Select,\n  SelectOption,\n  SelectList,\n  SelectGroup,\n  MenuToggle,\n  MenuToggleElement,\n  Divider\n} from &#39;@patternfly/react-core&#39;;\n\nexport const SelectGrouped: React.FunctionComponent = () =&gt; {\n  const [isOpen, setIsOpen] = useState(false);\n  const [selected, setSelected] = useState&lt;string&gt;(&#39;Select a value&#39;);\n\n  const onToggleClick = () =&gt; {\n    setIsOpen(!isOpen);\n  };\n\n  const onSelect = (_event: React.MouseEvent&lt;Element, MouseEvent&gt; | undefined, value: string | number | undefined) =&gt; {\n    // eslint-disable-next-line no-console\n    console.log(&#39;selected&#39;, value);\n\n    setSelected(value as string);\n    setIsOpen(false);\n  };\n\n  const toggle = (toggleRef: React.Ref&lt;MenuToggleElement&gt;) =&gt; (\n    &lt;MenuToggle\n      ref={toggleRef}\n      onClick={onToggleClick}\n      isExpanded={isOpen}\n      style={\n        {\n          width: &#39;200px&#39;\n        } as React.CSSProperties\n      }\n    &gt;\n      {selected}\n    &lt;/MenuToggle&gt;\n  );\n\n  return (\n    &lt;Select\n      id=\&quot;single-grouped-select\&quot;\n      isOpen={isOpen}\n      selected={selected}\n      onSelect={onSelect}\n      onOpenChange={(isOpen) =&gt; setIsOpen(isOpen)}\n      toggle={toggle}\n      shouldFocusToggleOnSelect\n    &gt;\n      &lt;SelectGroup label=\&quot;Group 1\&quot;&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;/SelectGroup&gt;\n      &lt;Divider /&gt;\n      &lt;SelectGroup label=\&quot;Group 2\&quot;&gt;\n        &lt;SelectList&gt;\n          &lt;SelectOption value=\&quot;Option 4\&quot;&gt;Option 4&lt;/SelectOption&gt;\n          &lt;SelectOption value=\&quot;Option 5\&quot;&gt;Option 5&lt;/SelectOption&gt;\n          &lt;SelectOption value=\&quot;Option 6\&quot;&gt;Option 6&lt;/SelectOption&gt;\n        &lt;/SelectList&gt;\n      &lt;/SelectGroup&gt;\n    &lt;/Select&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-2644" data-pf-content="true" class="pf-v6-c-content--h3">With validation</h3>
-<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2685" data-pf-content="true" class="pf-v6-c-content--p">To create a toggle with a status, pass in <code>status</code> to the <code>MenuToggle</code>. The default icon associated with each status may be overridden by using the <code>statusIcon</code> property.</p>
-<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2645" data-pf-content="true" class="pf-v6-c-content--p">When the status value is “warning” or “danger”, you must include helper text that conveys what is causing the warning/error.</p>
+<astro-island uid="1DnT1I" component-url="/_astro/LiveExample.C43dqXje.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;src&quot;:[0,&quot;import { useState } from &#39;react&#39;;\nimport {\n  Select,\n  SelectOption,\n  SelectList,\n  SelectGroup,\n  MenuToggle,\n  MenuToggleElement,\n  Divider\n} from &#39;@patternfly/react-core&#39;;\n\nexport const SelectGrouped: React.FunctionComponent = () =&gt; {\n  const [isOpen, setIsOpen] = useState(false);\n  const [selected, setSelected] = useState&lt;string&gt;(&#39;Select a value&#39;);\n\n  const onToggleClick = () =&gt; {\n    setIsOpen(!isOpen);\n  };\n\n  const onSelect = (_event: React.MouseEvent&lt;Element, MouseEvent&gt; | undefined, value: string | number | undefined) =&gt; {\n    // eslint-disable-next-line no-console\n    console.log(&#39;selected&#39;, value);\n\n    setSelected(value as string);\n    setIsOpen(false);\n  };\n\n  const toggle = (toggleRef: React.Ref&lt;MenuToggleElement&gt;) =&gt; (\n    &lt;MenuToggle\n      ref={toggleRef}\n      onClick={onToggleClick}\n      isExpanded={isOpen}\n      style={\n        {\n          width: &#39;200px&#39;\n        } as React.CSSProperties\n      }\n    &gt;\n      {selected}\n    &lt;/MenuToggle&gt;\n  );\n\n  return (\n    &lt;Select\n      id=\&quot;single-grouped-select\&quot;\n      isOpen={isOpen}\n      selected={selected}\n      onSelect={onSelect}\n      onOpenChange={(isOpen) =&gt; setIsOpen(isOpen)}\n      toggle={toggle}\n      shouldFocusToggleOnSelect\n    &gt;\n      &lt;SelectGroup label=\&quot;Group 1\&quot;&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;/SelectGroup&gt;\n      &lt;Divider /&gt;\n      &lt;SelectGroup label=\&quot;Group 2\&quot;&gt;\n        &lt;SelectList&gt;\n          &lt;SelectOption value=\&quot;Option 4\&quot;&gt;Option 4&lt;/SelectOption&gt;\n          &lt;SelectOption value=\&quot;Option 5\&quot;&gt;Option 5&lt;/SelectOption&gt;\n          &lt;SelectOption value=\&quot;Option 6\&quot;&gt;Option 6&lt;/SelectOption&gt;\n        &lt;/SelectList&gt;\n      &lt;/SelectGroup&gt;\n    &lt;/Select&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-2678" data-pf-content="true" class="pf-v6-c-content--h3">With validation</h3>
+<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2719" data-pf-content="true" class="pf-v6-c-content--p">To create a toggle with a status, pass in <code>status</code> to the <code>MenuToggle</code>. The default icon associated with each status may be overridden by using the <code>statusIcon</code> property.</p>
+<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2679" data-pf-content="true" class="pf-v6-c-content--p">When the status value is “warning” or “danger”, you must include helper text that conveys what is causing the warning/error.</p>
-<astro-island uid="Z1X0z6C" component-url="/_astro/LiveExample.B5R4Dzng.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;src&quot;:[0,&quot;import { Fragment, useState } from &#39;react&#39;;\nimport {\n  Select,\n  SelectOption,\n  SelectList,\n  MenuToggle,\n  MenuToggleElement,\n  MenuToggleStatus,\n  HelperText,\n  HelperTextItem\n} from &#39;@patternfly/react-core&#39;;\n\nexport const SelectValidated: React.FunctionComponent = () =&gt; {\n  const [isOpen, setIsOpen] = useState(false);\n  const [selected, setSelected] = useState&lt;string&gt;(&#39;Select a value&#39;);\n  const [status, setStatus] = useState&lt;MenuToggleStatus&gt;();\n\n  const onToggleClick = () =&gt; {\n    setIsOpen(!isOpen);\n  };\n\n  const onSelect = (_event: React.MouseEvent&lt;Element, MouseEvent&gt; | undefined, value: string | number | undefined) =&gt; {\n    // eslint-disable-next-line no-console\n    console.log(&#39;selected&#39;, value);\n\n    setSelected(value as string);\n    setStatus((value as string).toLowerCase() as MenuToggleStatus);\n    setIsOpen(false);\n  };\n\n  const toggle = (toggleRef: React.Ref&lt;MenuToggleElement&gt;) =&gt; (\n    &lt;MenuToggle\n      ref={toggleRef}\n      onClick={onToggleClick}\n      isExpanded={isOpen}\n      style={\n        {\n          width: &#39;200px&#39;\n        } as React.CSSProperties\n      }\n      status={status}\n    &gt;\n      {selected}\n    &lt;/MenuToggle&gt;\n  );\n\n  return (\n    &lt;Fragment&gt;\n      &lt;Select\n        id=\&quot;single-select\&quot;\n        isOpen={isOpen}\n        selected={selected}\n        onSelect={onSelect}\n        onOpenChange={(isOpen) =&gt; setIsOpen(isOpen)}\n        toggle={toggle}\n        shouldFocusToggleOnSelect\n      &gt;\n        &lt;SelectList&gt;\n          &lt;SelectOption value=\&quot;Success\&quot;&gt;Success&lt;/SelectOption&gt;\n          &lt;SelectOption value=\&quot;Warning\&quot;&gt;Warning&lt;/SelectOption&gt;\n          &lt;SelectOption value=\&quot;Danger\&quot;&gt;Danger&lt;/SelectOption&gt;\n        &lt;/SelectList&gt;\n      &lt;/Select&gt;\n      {(status === MenuToggleStatus.warning || status === MenuToggleStatus.danger) &amp;&amp; (\n        &lt;HelperText isLiveRegion&gt;\n          &lt;HelperTextItem variant={status === MenuToggleStatus.warning ? &#39;warning&#39; : &#39;error&#39;}&gt;\n            {status === MenuToggleStatus.warning &amp;&amp; &#39;Warning text that explains the issue.&#39;}\n            {status === MenuToggleStatus.danger &amp;&amp; &#39;Danger text that explains the issue.&#39;}\n          &lt;/HelperTextItem&gt;\n        &lt;/HelperText&gt;\n      )}\n    &lt;/Fragment&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-2646" data-pf-content="true" class="pf-v6-c-content--h3">Checkbox select</h3>
-<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2647" data-pf-content="true" class="pf-v6-c-content--p">To let users select multiple list options via checkbox input, use a checkbox select.</p>
-<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2686" data-pf-content="true" class="pf-v6-c-content--p">To create a checkbox select, pass <code>role=&quot;menu&quot;</code> to the <code>&lt;Select&gt;</code>, and <code>hasCheckbox</code> into each <code>&lt;SelectOption&gt;</code> component. To indicate that an option is selected, use the <code>isSelected</code> property.</p>
-<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2648" data-pf-content="true" class="pf-v6-c-content--p">By default, the menu toggle will display a badge to indicate the number of items that a user has selected.</p>
+<astro-island uid="Z1X0z6C" component-url="/_astro/LiveExample.C43dqXje.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;src&quot;:[0,&quot;import { Fragment, useState } from &#39;react&#39;;\nimport {\n  Select,\n  SelectOption,\n  SelectList,\n  MenuToggle,\n  MenuToggleElement,\n  MenuToggleStatus,\n  HelperText,\n  HelperTextItem\n} from &#39;@patternfly/react-core&#39;;\n\nexport const SelectValidated: React.FunctionComponent = () =&gt; {\n  const [isOpen, setIsOpen] = useState(false);\n  const [selected, setSelected] = useState&lt;string&gt;(&#39;Select a value&#39;);\n  const [status, setStatus] = useState&lt;MenuToggleStatus&gt;();\n\n  const onToggleClick = () =&gt; {\n    setIsOpen(!isOpen);\n  };\n\n  const onSelect = (_event: React.MouseEvent&lt;Element, MouseEvent&gt; | undefined, value: string | number | undefined) =&gt; {\n    // eslint-disable-next-line no-console\n    console.log(&#39;selected&#39;, value);\n\n    setSelected(value as string);\n    setStatus((value as string).toLowerCase() as MenuToggleStatus);\n    setIsOpen(false);\n  };\n\n  const toggle = (toggleRef: React.Ref&lt;MenuToggleElement&gt;) =&gt; (\n    &lt;MenuToggle\n      ref={toggleRef}\n      onClick={onToggleClick}\n      isExpanded={isOpen}\n      style={\n        {\n          width: &#39;200px&#39;\n        } as React.CSSProperties\n      }\n      status={status}\n    &gt;\n      {selected}\n    &lt;/MenuToggle&gt;\n  );\n\n  return (\n    &lt;Fragment&gt;\n      &lt;Select\n        id=\&quot;single-select\&quot;\n        isOpen={isOpen}\n        selected={selected}\n        onSelect={onSelect}\n        onOpenChange={(isOpen) =&gt; setIsOpen(isOpen)}\n        toggle={toggle}\n        shouldFocusToggleOnSelect\n      &gt;\n        &lt;SelectList&gt;\n          &lt;SelectOption value=\&quot;Success\&quot;&gt;Success&lt;/SelectOption&gt;\n          &lt;SelectOption value=\&quot;Warning\&quot;&gt;Warning&lt;/SelectOption&gt;\n          &lt;SelectOption value=\&quot;Danger\&quot;&gt;Danger&lt;/SelectOption&gt;\n        &lt;/SelectList&gt;\n      &lt;/Select&gt;\n      {(status === MenuToggleStatus.warning || status === MenuToggleStatus.danger) &amp;&amp; (\n        &lt;HelperText isLiveRegion&gt;\n          &lt;HelperTextItem variant={status === MenuToggleStatus.warning ? &#39;warning&#39; : &#39;error&#39;}&gt;\n            {status === MenuToggleStatus.warning &amp;&amp; &#39;Warning text that explains the issue.&#39;}\n            {status === MenuToggleStatus.danger &amp;&amp; &#39;Danger text that explains the issue.&#39;}\n          &lt;/HelperTextItem&gt;\n        &lt;/HelperText&gt;\n      )}\n    &lt;/Fragment&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-2680" data-pf-content="true" class="pf-v6-c-content--h3">Checkbox select</h3>
+<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2681" data-pf-content="true" class="pf-v6-c-content--p">To let users select multiple list options via checkbox input, use a checkbox select.</p>
+<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2720" data-pf-content="true" class="pf-v6-c-content--p">To create a checkbox select, pass <code>role=&quot;menu&quot;</code> to the <code>&lt;Select&gt;</code>, and <code>hasCheckbox</code> into each <code>&lt;SelectOption&gt;</code> component. To indicate that an option is selected, use the <code>isSelected</code> property.</p>
+<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2682" data-pf-content="true" class="pf-v6-c-content--p">By default, the menu toggle will display a badge to indicate the number of items that a user has selected.</p>
-<astro-island uid="Z1WhMQk" 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 { Select, SelectOption, SelectList, MenuToggle, MenuToggleElement, Badge } from &#39;@patternfly/react-core&#39;;\n\nexport const SelectCheckbox: React.FunctionComponent = () =&gt; {\n  const [isOpen, setIsOpen] = useState(false);\n  const [selectedItems, setSelectedItems] = useState&lt;number[]&gt;([]);\n\n  const onToggleClick = () =&gt; {\n    setIsOpen(!isOpen);\n  };\n\n  const onSelect = (_event: React.MouseEvent&lt;Element, MouseEvent&gt; | undefined, value: string | number | undefined) =&gt; {\n    // eslint-disable-next-line no-console\n    console.log(&#39;selected&#39;, value);\n\n    if (selectedItems.includes(value as number)) {\n      setSelectedItems(selectedItems.filter((id) =&gt; id !== value));\n    } else {\n      setSelectedItems([...selectedItems, value as number]);\n    }\n  };\n\n  const toggle = (toggleRef: React.Ref&lt;MenuToggleElement&gt;) =&gt; (\n    &lt;MenuToggle\n      ref={toggleRef}\n      onClick={onToggleClick}\n      isExpanded={isOpen}\n      style={\n        {\n          width: &#39;200px&#39;\n        } as React.CSSProperties\n      }\n    &gt;\n      Filter by status\n      {selectedItems.length &gt; 0 &amp;&amp; &lt;Badge isRead&gt;{selectedItems.length}&lt;/Badge&gt;}\n    &lt;/MenuToggle&gt;\n  );\n\n  return (\n    &lt;Select\n      role=\&quot;menu\&quot;\n      id=\&quot;checkbox-select\&quot;\n      isOpen={isOpen}\n      selected={selectedItems}\n      onSelect={onSelect}\n      onOpenChange={(nextOpen: boolean) =&gt; setIsOpen(nextOpen)}\n      toggle={toggle}\n    &gt;\n      &lt;SelectList&gt;\n        &lt;SelectOption hasCheckbox value={0} isSelected={selectedItems.includes(0)}&gt;\n          Debug\n        &lt;/SelectOption&gt;\n        &lt;SelectOption hasCheckbox value={1} isSelected={selectedItems.includes(1)}&gt;\n          Info\n        &lt;/SelectOption&gt;\n        &lt;SelectOption hasCheckbox value={2} isSelected={selectedItems.includes(2)}&gt;\n          Warn\n        &lt;/SelectOption&gt;\n        &lt;SelectOption hasCheckbox isDisabled value={4} isSelected={selectedItems.includes(4)}&gt;\n          Error\n        &lt;/SelectOption&gt;\n      &lt;/SelectList&gt;\n    &lt;/Select&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-2649" data-pf-content="true" class="pf-v6-c-content--h3">Typeahead</h3>
-<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2650" data-pf-content="true" class="pf-v6-c-content--p">Typeahead is a select variant that replaces the typical button toggle for opening the select menu with a text input and button toggle combo. As a user enters characters into the text input, the menu options will be filtered to match.</p>
-<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2651" data-pf-content="true" class="pf-v6-c-content--p">Typeahead is a select variant that replaces the typical button toggle for opening the select menu with a text input and button toggle combo. As a user enters characters into the text input, the menu options will be filtered to match.</p>
-<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2687" data-pf-content="true" class="pf-v6-c-content--p">To make a typeahead, pass <code>variant=typeahead</code> into the <code>&lt;MenuToggle&gt;</code> component and link an <code>onClick</code> function to the <code>&lt;TextInputGroupMain&gt;</code> component.</p>
-<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2652" data-pf-content="true" class="pf-v6-c-content--p">Typeahead is a select variant that replaces the typical button toggle for opening the select menu with a text input and button toggle combo. As a user enters characters into the text input, the menu options will be filtered to match.</p>
-<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2688" data-pf-content="true" class="pf-v6-c-content--p">To make a typeahead, pass <code>variant=typeahead</code> into the <code>&lt;MenuToggle&gt;</code> component and link an <code>onClick</code> function to the <code>&lt;TextInputGroupMain&gt;</code> component.</p>
+<astro-island uid="Z1WhMQk" component-url="/_astro/LiveExample.C43dqXje.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;src&quot;:[0,&quot;import { useState } from &#39;react&#39;;\nimport { Select, SelectOption, SelectList, MenuToggle, MenuToggleElement, Badge } from &#39;@patternfly/react-core&#39;;\n\nexport const SelectCheckbox: React.FunctionComponent = () =&gt; {\n  const [isOpen, setIsOpen] = useState(false);\n  const [selectedItems, setSelectedItems] = useState&lt;number[]&gt;([]);\n\n  const onToggleClick = () =&gt; {\n    setIsOpen(!isOpen);\n  };\n\n  const onSelect = (_event: React.MouseEvent&lt;Element, MouseEvent&gt; | undefined, value: string | number | undefined) =&gt; {\n    // eslint-disable-next-line no-console\n    console.log(&#39;selected&#39;, value);\n\n    if (selectedItems.includes(value as number)) {\n      setSelectedItems(selectedItems.filter((id) =&gt; id !== value));\n    } else {\n      setSelectedItems([...selectedItems, value as number]);\n    }\n  };\n\n  const toggle = (toggleRef: React.Ref&lt;MenuToggleElement&gt;) =&gt; (\n    &lt;MenuToggle\n      ref={toggleRef}\n      onClick={onToggleClick}\n      isExpanded={isOpen}\n      style={\n        {\n          width: &#39;200px&#39;\n        } as React.CSSProperties\n      }\n    &gt;\n      Filter by status\n      {selectedItems.length &gt; 0 &amp;&amp; &lt;Badge isRead&gt;{selectedItems.length}&lt;/Badge&gt;}\n    &lt;/MenuToggle&gt;\n  );\n\n  return (\n    &lt;Select\n      role=\&quot;menu\&quot;\n      id=\&quot;checkbox-select\&quot;\n      isOpen={isOpen}\n      selected={selectedItems}\n      onSelect={onSelect}\n      onOpenChange={(nextOpen: boolean) =&gt; setIsOpen(nextOpen)}\n      toggle={toggle}\n    &gt;\n      &lt;SelectList&gt;\n        &lt;SelectOption hasCheckbox value={0} isSelected={selectedItems.includes(0)}&gt;\n          Debug\n        &lt;/SelectOption&gt;\n        &lt;SelectOption hasCheckbox value={1} isSelected={selectedItems.includes(1)}&gt;\n          Info\n        &lt;/SelectOption&gt;\n        &lt;SelectOption hasCheckbox value={2} isSelected={selectedItems.includes(2)}&gt;\n          Warn\n        &lt;/SelectOption&gt;\n        &lt;SelectOption hasCheckbox isDisabled value={4} isSelected={selectedItems.includes(4)}&gt;\n          Error\n        &lt;/SelectOption&gt;\n      &lt;/SelectList&gt;\n    &lt;/Select&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-2683" data-pf-content="true" class="pf-v6-c-content--h3">Typeahead</h3>
+<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2684" data-pf-content="true" class="pf-v6-c-content--p">Typeahead is a select variant that replaces the typical button toggle for opening the select menu with a text input and button toggle combo. As a user enters characters into the text input, the menu options will be filtered to match.</p>
+<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2685" data-pf-content="true" class="pf-v6-c-content--p">Typeahead is a select variant that replaces the typical button toggle for opening the select menu with a text input and button toggle combo. As a user enters characters into the text input, the menu options will be filtered to match.</p>
+<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2721" data-pf-content="true" class="pf-v6-c-content--p">To make a typeahead, pass <code>variant=typeahead</code> into the <code>&lt;MenuToggle&gt;</code> component and link an <code>onClick</code> function to the <code>&lt;TextInputGroupMain&gt;</code> component.</p>
+<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2686" data-pf-content="true" class="pf-v6-c-content--p">Typeahead is a select variant that replaces the typical button toggle for opening the select menu with a text input and button toggle combo. As a user enters characters into the text input, the menu options will be filtered to match.</p>
+<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2722" data-pf-content="true" class="pf-v6-c-content--p">To make a typeahead, pass <code>variant=typeahead</code> into the <code>&lt;MenuToggle&gt;</code> component and link an <code>onClick</code> function to the <code>&lt;TextInputGroupMain&gt;</code> component.</p>
-<astro-island uid="2tClVz" component-url="/_astro/LiveExample.B5R4Dzng.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;src&quot;:[0,&quot;import { useEffect, useRef, useState } from &#39;react&#39;;\nimport {\n  Select,\n  SelectOption,\n  SelectList,\n  SelectOptionProps,\n  MenuToggle,\n  MenuToggleElement,\n  TextInputGroup,\n  TextInputGroupMain,\n  TextInputGroupUtilities,\n  Button\n} from &#39;@patternfly/react-core&#39;;\nimport TimesIcon from &#39;@patternfly/react-icons/dist/esm/icons/times-icon&#39;;\n\nconst initialSelectOptions: SelectOptionProps[] = [\n  { value: &#39;Alabama&#39;, children: &#39;Alabama&#39; },\n  { value: &#39;Florida&#39;, children: &#39;Florida&#39; },\n  { value: &#39;New Jersey&#39;, children: &#39;New Jersey&#39; },\n  { value: &#39;New Mexico&#39;, children: &#39;New Mexico&#39; },\n  { value: &#39;New York&#39;, children: &#39;New York&#39; },\n  { value: &#39;North Carolina&#39;, children: &#39;North Carolina&#39; }\n];\n\nexport const SelectTypeahead: React.FunctionComponent = () =&gt; {\n  const [isOpen, setIsOpen] = useState(false);\n  const [selected, setSelected] = useState&lt;string&gt;(&#39;&#39;);\n  const [inputValue, setInputValue] = useState&lt;string&gt;(&#39;&#39;);\n  const [filterValue, setFilterValue] = useState&lt;string&gt;(&#39;&#39;);\n  const [selectOptions, setSelectOptions] = useState&lt;SelectOptionProps[]&gt;(initialSelectOptions);\n  const [focusedItemIndex, setFocusedItemIndex] = useState&lt;number | null&gt;(null);\n  const [activeItemId, setActiveItemId] = useState&lt;string | null&gt;(null);\n  const textInputRef = useRef&lt;HTMLInputElement&gt;(undefined);\n\n  const NO_RESULTS = &#39;no results&#39;;\n\n  useEffect(() =&gt; {\n    let newSelectOptions: SelectOptionProps[] = initialSelectOptions;\n\n    // Filter menu items based on the text input value when one exists\n    if (filterValue) {\n      newSelectOptions = initialSelectOptions.filter((menuItem) =&gt;\n        String(menuItem.children).toLowerCase().includes(filterValue.toLowerCase())\n      );\n\n      // When no options are found after filtering, display &#39;No results found&#39;\n      if (!newSelectOptions.length) {\n        newSelectOptions = [\n          { isAriaDisabled: true, children: `No results found for \&quot;${filterValue}\&quot;`, value: NO_RESULTS }\n        ];\n      }\n\n      // Open the menu when the input value changes and the new value is not empty\n      if (!isOpen) {\n        setIsOpen(true);\n      }\n    }\n\n    setSelectOptions(newSelectOptions);\n  }, [filterValue]);\n\n  const createItemId = (value: any) =&gt; `select-typeahead-${value.replace(&#39; &#39;, &#39;-&#39;)}`;\n\n  const setActiveAndFocusedItem = (itemIndex: number) =&gt; {\n    setFocusedItemIndex(itemIndex);\n    const focusedItem = selectOptions[itemIndex];\n    setActiveItemId(createItemId(focusedItem.value));\n  };\n\n  const resetActiveAndFocusedItem = () =&gt; {\n    setFocusedItemIndex(null);\n    setActiveItemId(null);\n  };\n\n  const closeMenu = () =&gt; {\n    setIsOpen(false);\n    resetActiveAndFocusedItem();\n  };\n\n  const onInputClick = () =&gt; {\n    if (!isOpen) {\n      setIsOpen(true);\n    } else if (!inputValue) {\n      closeMenu();\n    }\n  };\n\n  const selectOption = (value: string | number, content: string | number) =&gt; {\n    // eslint-disable-next-line no-console\n    console.log(&#39;selected&#39;, content);\n\n    setInputValue(String(content));\n    setFilterValue(&#39;&#39;);\n    setSelected(String(value));\n\n    closeMenu();\n  };\n\n  const onSelect = (_event: React.MouseEvent&lt;Element, MouseEvent&gt; | undefined, value: string | number | undefined) =&gt; {\n    if (value &amp;&amp; value !== NO_RESULTS) {\n      const optionText = selectOptions.find((option) =&gt; option.value === value)?.children;\n      selectOption(value, optionText as string);\n    }\n  };\n\n  const onTextInputChange = (_event: React.FormEvent&lt;HTMLInputElement&gt;, value: string) =&gt; {\n    setInputValue(value);\n    setFilterValue(value);\n\n    resetActiveAndFocusedItem();\n\n    if (value !== selected) {\n      setSelected(&#39;&#39;);\n    }\n  };\n\n  const handleMenuArrowKeys = (key: string) =&gt; {\n    let indexToFocus = 0;\n\n    if (!isOpen) {\n      setIsOpen(true);\n    }\n\n    if (selectOptions.every((option) =&gt; option.isDisabled)) {\n      return;\n    }\n\n    if (key === &#39;ArrowUp&#39;) {\n      // When no index is set or at the first index, focus to the last, otherwise decrement focus index\n      if (focusedItemIndex === null || focusedItemIndex === 0) {\n        indexToFocus = selectOptions.length - 1;\n      } else {\n        indexToFocus = focusedItemIndex - 1;\n      }\n\n      // Skip disabled options\n      while (selectOptions[indexToFocus].isDisabled) {\n        indexToFocus--;\n        if (indexToFocus === -1) {\n          indexToFocus = selectOptions.length - 1;\n        }\n      }\n    }\n\n    if (key === &#39;ArrowDown&#39;) {\n      // When no index is set or at the last index, focus to the first, otherwise increment focus index\n      if (focusedItemIndex === null || focusedItemIndex === selectOptions.length - 1) {\n        indexToFocus = 0;\n      } else {\n        indexToFocus = focusedItemIndex + 1;\n      }\n\n      // Skip disabled options\n      while (selectOptions[indexToFocus].isDisabled) {\n        indexToFocus++;\n        if (indexToFocus === selectOptions.length) {\n          indexToFocus = 0;\n        }\n      }\n    }\n\n    setActiveAndFocusedItem(indexToFocus);\n  };\n\n  const onInputKeyDown = (event: React.KeyboardEvent&lt;HTMLInputElement&gt;) =&gt; {\n    const focusedItem = focusedItemIndex !== null ? selectOptions[focusedItemIndex] : null;\n\n    switch (event.key) {\n      case &#39;Enter&#39;:\n        if (isOpen &amp;&amp; focusedItem &amp;&amp; focusedItem.value !== NO_RESULTS &amp;&amp; !focusedItem.isAriaDisabled) {\n          selectOption(focusedItem.value, focusedItem.children as string);\n        }\n\n        if (!isOpen) {\n          setIsOpen(true);\n        }\n\n        break;\n      case &#39;ArrowUp&#39;:\n      case &#39;ArrowDown&#39;:\n        event.preventDefault();\n        handleMenuArrowKeys(event.key);\n        break;\n    }\n  };\n\n  const onToggleClick = () =&gt; {\n    setIsOpen(!isOpen);\n    textInputRef?.current?.focus();\n  };\n\n  const onClearButtonClick = () =&gt; {\n    setSelected(&#39;&#39;);\n    setInputValue(&#39;&#39;);\n    setFilterValue(&#39;&#39;);\n    resetActiveAndFocusedItem();\n    textInputRef?.current?.focus();\n  };\n\n  const toggle = (toggleRef: React.Ref&lt;MenuToggleElement&gt;) =&gt; (\n    &lt;MenuToggle\n      ref={toggleRef}\n      variant=\&quot;typeahead\&quot;\n      aria-label=\&quot;Typeahead menu toggle\&quot;\n      onClick={onToggleClick}\n      isExpanded={isOpen}\n      isFullWidth\n    &gt;\n      &lt;TextInputGroup isPlain&gt;\n        &lt;TextInputGroupMain\n          value={inputValue}\n          onClick={onInputClick}\n          onChange={onTextInputChange}\n          onKeyDown={onInputKeyDown}\n          id=\&quot;typeahead-select-input\&quot;\n          autoComplete=\&quot;off\&quot;\n          innerRef={textInputRef}\n          placeholder=\&quot;Select a state\&quot;\n          {...(activeItemId &amp;&amp; { &#39;aria-activedescendant&#39;: activeItemId })}\n          role=\&quot;combobox\&quot;\n          isExpanded={isOpen}\n          aria-controls=\&quot;select-typeahead-listbox\&quot;\n        /&gt;\n\n        &lt;TextInputGroupUtilities {...(!inputValue ? { style: { display: &#39;none&#39; } } : {})}&gt;\n          &lt;Button variant=\&quot;plain\&quot; onClick={onClearButtonClick} aria-label=\&quot;Clear input value\&quot; icon={&lt;TimesIcon /&gt;} /&gt;\n        &lt;/TextInputGroupUtilities&gt;\n      &lt;/TextInputGroup&gt;\n    &lt;/MenuToggle&gt;\n  );\n\n  return (\n    &lt;Select\n      id=\&quot;typeahead-select\&quot;\n      isOpen={isOpen}\n      selected={selected}\n      onSelect={onSelect}\n      onOpenChange={(isOpen) =&gt; {\n        !isOpen &amp;&amp; closeMenu();\n      }}\n      toggle={toggle}\n      variant=\&quot;typeahead\&quot;\n    &gt;\n      &lt;SelectList id=\&quot;select-typeahead-listbox\&quot;&gt;\n        {selectOptions.map((option, index) =&gt; (\n          &lt;SelectOption\n            key={option.value || option.children}\n            isFocused={focusedItemIndex === index}\n            className={option.className}\n            id={createItemId(option.value)}\n            {...option}\n            ref={null}\n          /&gt;\n        ))}\n      &lt;/SelectList&gt;\n    &lt;/Select&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-2653" data-pf-content="true" class="pf-v6-c-content--h3">Typeahead with create option</h3>
-<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2654" data-pf-content="true" class="pf-v6-c-content--p">If a user enters a value into a typeahead select menu that does not exist, you can allow them to create an option of that value.</p>
-<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2655" data-pf-content="true" class="pf-v6-c-content--p">If a user enters a value into a typeahead select menu that does not exist, you can allow them to create an option of that value.</p>
-<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2689" data-pf-content="true" class="pf-v6-c-content--p">To enable the creation ability, pass a predetermined <code>value</code> into a <code>&lt;SelectOption&gt;</code> component. You can use the <code>placeholder</code> property to change the default text shown in the text input.</p>
-<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2656" data-pf-content="true" class="pf-v6-c-content--p">The following example outlines the code implementation required to create a working typeahead menu that allows for creation.</p>
-<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2657" data-pf-content="true" class="pf-v6-c-content--p">If a user enters a value into a typeahead select menu that does not exist, you can allow them to create an option of that value.</p>
-<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2690" data-pf-content="true" class="pf-v6-c-content--p">To enable the creation ability, pass a predetermined <code>value</code> into a <code>&lt;SelectOption&gt;</code> component. You can use the <code>placeholder</code> property to change the default text shown in the text input.</p>
-<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2658" data-pf-content="true" class="pf-v6-c-content--p">The following example outlines the code implementation required to create a working typeahead menu that allows for creation.</p>
+<astro-island uid="2tClVz" component-url="/_astro/LiveExample.C43dqXje.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;src&quot;:[0,&quot;import { useEffect, useRef, useState } from &#39;react&#39;;\nimport {\n  Select,\n  SelectOption,\n  SelectList,\n  SelectOptionProps,\n  MenuToggle,\n  MenuToggleElement,\n  TextInputGroup,\n  TextInputGroupMain,\n  TextInputGroupUtilities,\n  Button\n} from &#39;@patternfly/react-core&#39;;\nimport TimesIcon from &#39;@patternfly/react-icons/dist/esm/icons/times-icon&#39;;\n\nconst initialSelectOptions: SelectOptionProps[] = [\n  { value: &#39;Alabama&#39;, children: &#39;Alabama&#39; },\n  { value: &#39;Florida&#39;, children: &#39;Florida&#39; },\n  { value: &#39;New Jersey&#39;, children: &#39;New Jersey&#39; },\n  { value: &#39;New Mexico&#39;, children: &#39;New Mexico&#39; },\n  { value: &#39;New York&#39;, children: &#39;New York&#39; },\n  { value: &#39;North Carolina&#39;, children: &#39;North Carolina&#39; }\n];\n\nexport const SelectTypeahead: React.FunctionComponent = () =&gt; {\n  const [isOpen, setIsOpen] = useState(false);\n  const [selected, setSelected] = useState&lt;string&gt;(&#39;&#39;);\n  const [inputValue, setInputValue] = useState&lt;string&gt;(&#39;&#39;);\n  const [filterValue, setFilterValue] = useState&lt;string&gt;(&#39;&#39;);\n  const [selectOptions, setSelectOptions] = useState&lt;SelectOptionProps[]&gt;(initialSelectOptions);\n  const [focusedItemIndex, setFocusedItemIndex] = useState&lt;number | null&gt;(null);\n  const [activeItemId, setActiveItemId] = useState&lt;string | null&gt;(null);\n  const textInputRef = useRef&lt;HTMLInputElement&gt;(undefined);\n\n  const NO_RESULTS = &#39;no results&#39;;\n\n  useEffect(() =&gt; {\n    let newSelectOptions: SelectOptionProps[] = initialSelectOptions;\n\n    // Filter menu items based on the text input value when one exists\n    if (filterValue) {\n      newSelectOptions = initialSelectOptions.filter((menuItem) =&gt;\n        String(menuItem.children).toLowerCase().includes(filterValue.toLowerCase())\n      );\n\n      // When no options are found after filtering, display &#39;No results found&#39;\n      if (!newSelectOptions.length) {\n        newSelectOptions = [\n          { isAriaDisabled: true, children: `No results found for \&quot;${filterValue}\&quot;`, value: NO_RESULTS }\n        ];\n      }\n\n      // Open the menu when the input value changes and the new value is not empty\n      if (!isOpen) {\n        setIsOpen(true);\n      }\n    }\n\n    setSelectOptions(newSelectOptions);\n  }, [filterValue]);\n\n  const createItemId = (value: any) =&gt; `select-typeahead-${value.replace(&#39; &#39;, &#39;-&#39;)}`;\n\n  const setActiveAndFocusedItem = (itemIndex: number) =&gt; {\n    setFocusedItemIndex(itemIndex);\n    const focusedItem = selectOptions[itemIndex];\n    setActiveItemId(createItemId(focusedItem.value));\n  };\n\n  const resetActiveAndFocusedItem = () =&gt; {\n    setFocusedItemIndex(null);\n    setActiveItemId(null);\n  };\n\n  const closeMenu = () =&gt; {\n    setIsOpen(false);\n    resetActiveAndFocusedItem();\n  };\n\n  const onInputClick = () =&gt; {\n    if (!isOpen) {\n      setIsOpen(true);\n    } else if (!inputValue) {\n      closeMenu();\n    }\n  };\n\n  const selectOption = (value: string | number, content: string | number) =&gt; {\n    // eslint-disable-next-line no-console\n    console.log(&#39;selected&#39;, content);\n\n    setInputValue(String(content));\n    setFilterValue(&#39;&#39;);\n    setSelected(String(value));\n\n    closeMenu();\n  };\n\n  const onSelect = (_event: React.MouseEvent&lt;Element, MouseEvent&gt; | undefined, value: string | number | undefined) =&gt; {\n    if (value &amp;&amp; value !== NO_RESULTS) {\n      const optionText = selectOptions.find((option) =&gt; option.value === value)?.children;\n      selectOption(value, optionText as string);\n    }\n  };\n\n  const onTextInputChange = (_event: React.FormEvent&lt;HTMLInputElement&gt;, value: string) =&gt; {\n    setInputValue(value);\n    setFilterValue(value);\n\n    resetActiveAndFocusedItem();\n\n    if (value !== selected) {\n      setSelected(&#39;&#39;);\n    }\n  };\n\n  const handleMenuArrowKeys = (key: string) =&gt; {\n    let indexToFocus = 0;\n\n    if (!isOpen) {\n      setIsOpen(true);\n    }\n\n    if (selectOptions.every((option) =&gt; option.isDisabled)) {\n      return;\n    }\n\n    if (key === &#39;ArrowUp&#39;) {\n      // When no index is set or at the first index, focus to the last, otherwise decrement focus index\n      if (focusedItemIndex === null || focusedItemIndex === 0) {\n        indexToFocus = selectOptions.length - 1;\n      } else {\n        indexToFocus = focusedItemIndex - 1;\n      }\n\n      // Skip disabled options\n      while (selectOptions[indexToFocus].isDisabled) {\n        indexToFocus--;\n        if (indexToFocus === -1) {\n          indexToFocus = selectOptions.length - 1;\n        }\n      }\n    }\n\n    if (key === &#39;ArrowDown&#39;) {\n      // When no index is set or at the last index, focus to the first, otherwise increment focus index\n      if (focusedItemIndex === null || focusedItemIndex === selectOptions.length - 1) {\n        indexToFocus = 0;\n      } else {\n        indexToFocus = focusedItemIndex + 1;\n      }\n\n      // Skip disabled options\n      while (selectOptions[indexToFocus].isDisabled) {\n        indexToFocus++;\n        if (indexToFocus === selectOptions.length) {\n          indexToFocus = 0;\n        }\n      }\n    }\n\n    setActiveAndFocusedItem(indexToFocus);\n  };\n\n  const onInputKeyDown = (event: React.KeyboardEvent&lt;HTMLInputElement&gt;) =&gt; {\n    const focusedItem = focusedItemIndex !== null ? selectOptions[focusedItemIndex] : null;\n\n    switch (event.key) {\n      case &#39;Enter&#39;:\n        if (isOpen &amp;&amp; focusedItem &amp;&amp; focusedItem.value !== NO_RESULTS &amp;&amp; !focusedItem.isAriaDisabled) {\n          selectOption(focusedItem.value, focusedItem.children as string);\n        }\n\n        if (!isOpen) {\n          setIsOpen(true);\n        }\n\n        break;\n      case &#39;ArrowUp&#39;:\n      case &#39;ArrowDown&#39;:\n        event.preventDefault();\n        handleMenuArrowKeys(event.key);\n        break;\n    }\n  };\n\n  const onToggleClick = () =&gt; {\n    setIsOpen(!isOpen);\n    textInputRef?.current?.focus();\n  };\n\n  const onClearButtonClick = () =&gt; {\n    setSelected(&#39;&#39;);\n    setInputValue(&#39;&#39;);\n    setFilterValue(&#39;&#39;);\n    resetActiveAndFocusedItem();\n    textInputRef?.current?.focus();\n  };\n\n  const toggle = (toggleRef: React.Ref&lt;MenuToggleElement&gt;) =&gt; (\n    &lt;MenuToggle\n      ref={toggleRef}\n      variant=\&quot;typeahead\&quot;\n      aria-label=\&quot;Typeahead menu toggle\&quot;\n      onClick={onToggleClick}\n      isExpanded={isOpen}\n      isFullWidth\n    &gt;\n      &lt;TextInputGroup isPlain&gt;\n        &lt;TextInputGroupMain\n          value={inputValue}\n          onClick={onInputClick}\n          onChange={onTextInputChange}\n          onKeyDown={onInputKeyDown}\n          id=\&quot;typeahead-select-input\&quot;\n          autoComplete=\&quot;off\&quot;\n          innerRef={textInputRef}\n          placeholder=\&quot;Select a state\&quot;\n          {...(activeItemId &amp;&amp; { &#39;aria-activedescendant&#39;: activeItemId })}\n          role=\&quot;combobox\&quot;\n          isExpanded={isOpen}\n          aria-controls=\&quot;select-typeahead-listbox\&quot;\n        /&gt;\n\n        &lt;TextInputGroupUtilities {...(!inputValue ? { style: { display: &#39;none&#39; } } : {})}&gt;\n          &lt;Button variant=\&quot;plain\&quot; onClick={onClearButtonClick} aria-label=\&quot;Clear input value\&quot; icon={&lt;TimesIcon /&gt;} /&gt;\n        &lt;/TextInputGroupUtilities&gt;\n      &lt;/TextInputGroup&gt;\n    &lt;/MenuToggle&gt;\n  );\n\n  return (\n    &lt;Select\n      id=\&quot;typeahead-select\&quot;\n      isOpen={isOpen}\n      selected={selected}\n      onSelect={onSelect}\n      onOpenChange={(isOpen) =&gt; {\n        !isOpen &amp;&amp; closeMenu();\n      }}\n      toggle={toggle}\n      variant=\&quot;typeahead\&quot;\n    &gt;\n      &lt;SelectList id=\&quot;select-typeahead-listbox\&quot;&gt;\n        {selectOptions.map((option, index) =&gt; (\n          &lt;SelectOption\n            key={option.value || option.children}\n            isFocused={focusedItemIndex === index}\n            className={option.className}\n            id={createItemId(option.value)}\n            {...option}\n            ref={null}\n          /&gt;\n        ))}\n      &lt;/SelectList&gt;\n    &lt;/Select&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-2687" data-pf-content="true" class="pf-v6-c-content--h3">Typeahead with create option</h3>
+<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2688" data-pf-content="true" class="pf-v6-c-content--p">If a user enters a value into a typeahead select menu that does not exist, you can allow them to create an option of that value.</p>
+<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2689" data-pf-content="true" class="pf-v6-c-content--p">If a user enters a value into a typeahead select menu that does not exist, you can allow them to create an option of that value.</p>
+<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2723" data-pf-content="true" class="pf-v6-c-content--p">To enable the creation ability, pass a predetermined <code>value</code> into a <code>&lt;SelectOption&gt;</code> component. You can use the <code>placeholder</code> property to change the default text shown in the text input.</p>
+<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2690" data-pf-content="true" class="pf-v6-c-content--p">The following example outlines the code implementation required to create a working typeahead menu that allows for creation.</p>
+<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2691" data-pf-content="true" class="pf-v6-c-content--p">If a user enters a value into a typeahead select menu that does not exist, you can allow them to create an option of that value.</p>
+<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2724" data-pf-content="true" class="pf-v6-c-content--p">To enable the creation ability, pass a predetermined <code>value</code> into a <code>&lt;SelectOption&gt;</code> component. You can use the <code>placeholder</code> property to change the default text shown in the text input.</p>
+<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2692" data-pf-content="true" class="pf-v6-c-content--p">The following example outlines the code implementation required to create a working typeahead menu that allows for creation.</p>
-<astro-island uid="CemmO" component-url="/_astro/LiveExample.B5R4Dzng.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;src&quot;:[0,&quot;import { useEffect, useRef, useState } from &#39;react&#39;;\nimport {\n  Select,\n  SelectOption,\n  SelectList,\n  SelectOptionProps,\n  MenuToggle,\n  MenuToggleElement,\n  TextInputGroup,\n  TextInputGroupMain,\n  TextInputGroupUtilities,\n  Button\n} from &#39;@patternfly/react-core&#39;;\nimport TimesIcon from &#39;@patternfly/react-icons/dist/esm/icons/times-icon&#39;;\n\nlet initialSelectOptions: SelectOptionProps[] = [\n  { value: &#39;Alabama&#39;, children: &#39;Alabama&#39; },\n  { value: &#39;Florida&#39;, children: &#39;Florida&#39; },\n  { value: &#39;New Jersey&#39;, children: &#39;New Jersey&#39; },\n  { value: &#39;New Mexico&#39;, children: &#39;New Mexico&#39; },\n  { value: &#39;New York&#39;, children: &#39;New York&#39; },\n  { value: &#39;North Carolina&#39;, children: &#39;North Carolina&#39; }\n];\n\nexport const SelectTypeaheadCreatable: React.FunctionComponent = () =&gt; {\n  const [isOpen, setIsOpen] = useState(false);\n  const [selected, setSelected] = useState&lt;string&gt;(&#39;&#39;);\n  const [inputValue, setInputValue] = useState&lt;string&gt;(&#39;&#39;);\n  const [filterValue, setFilterValue] = useState&lt;string&gt;(&#39;&#39;);\n  const [selectOptions, setSelectOptions] = useState&lt;SelectOptionProps[]&gt;(initialSelectOptions);\n  const [focusedItemIndex, setFocusedItemIndex] = useState&lt;number | null&gt;(null);\n  const [activeItemId, setActiveItemId] = useState&lt;string | null&gt;(null);\n  const textInputRef = useRef&lt;HTMLInputElement&gt;(undefined);\n\n  const CREATE_NEW = &#39;create&#39;;\n\n  useEffect(() =&gt; {\n    let newSelectOptions: SelectOptionProps[] = initialSelectOptions;\n\n    // Filter menu items based on the text input value when one exists\n    if (filterValue) {\n      newSelectOptions = initialSelectOptions.filter((menuItem) =&gt;\n        String(menuItem.children).toLowerCase().includes(filterValue.toLowerCase())\n      );\n\n      // If no option matches the filter exactly, display creation option\n      if (!initialSelectOptions.some((option) =&gt; option.value === filterValue)) {\n        newSelectOptions = [...newSelectOptions, { children: `Create new option \&quot;${filterValue}\&quot;`, value: CREATE_NEW }];\n      }\n\n      // Open the menu when the input value changes and the new value is not empty\n      if (!isOpen) {\n        setIsOpen(true);\n      }\n    }\n\n    setSelectOptions(newSelectOptions);\n  }, [filterValue]);\n\n  const createItemId = (value: any) =&gt; `select-typeahead-${value.replace(&#39; &#39;, &#39;-&#39;)}`;\n\n  const setActiveAndFocusedItem = (itemIndex: number) =&gt; {\n    setFocusedItemIndex(itemIndex);\n    const focusedItem = selectOptions[itemIndex];\n    setActiveItemId(createItemId(focusedItem.value));\n  };\n\n  const resetActiveAndFocusedItem = () =&gt; {\n    setFocusedItemIndex(null);\n    setActiveItemId(null);\n  };\n\n  const closeMenu = () =&gt; {\n    setIsOpen(false);\n    resetActiveAndFocusedItem();\n  };\n\n  const onInputClick = () =&gt; {\n    if (!isOpen) {\n      setIsOpen(true);\n    } else if (!inputValue) {\n      closeMenu();\n    }\n  };\n\n  const selectOption = (value: string | number, content: string | number) =&gt; {\n    // eslint-disable-next-line no-console\n    console.log(&#39;selected&#39;, content);\n\n    setInputValue(String(content));\n    setFilterValue(&#39;&#39;);\n    setSelected(String(value));\n\n    closeMenu();\n  };\n\n  const onSelect = (_event: React.MouseEvent&lt;Element, MouseEvent&gt; | undefined, value: string | number | undefined) =&gt; {\n    if (value) {\n      if (value === CREATE_NEW) {\n        if (!initialSelectOptions.some((item) =&gt; item.children === filterValue)) {\n          initialSelectOptions = [...initialSelectOptions, { value: filterValue, children: filterValue }];\n        }\n        setSelected(filterValue);\n        setFilterValue(&#39;&#39;);\n        closeMenu();\n      } else {\n        const optionText = selectOptions.find((option) =&gt; option.value === value)?.children;\n        selectOption(value, optionText as string);\n      }\n    }\n  };\n\n  const onTextInputChange = (_event: React.FormEvent&lt;HTMLInputElement&gt;, value: string) =&gt; {\n    setInputValue(value);\n    setFilterValue(value);\n\n    resetActiveAndFocusedItem();\n\n    if (value !== selected) {\n      setSelected(&#39;&#39;);\n    }\n  };\n\n  const handleMenuArrowKeys = (key: string) =&gt; {\n    let indexToFocus = 0;\n\n    if (!isOpen) {\n      setIsOpen(true);\n    }\n\n    if (selectOptions.every((option) =&gt; option.isDisabled)) {\n      return;\n    }\n\n    if (key === &#39;ArrowUp&#39;) {\n      // When no index is set or at the first index, focus to the last, otherwise decrement focus index\n      if (focusedItemIndex === null || focusedItemIndex === 0) {\n        indexToFocus = selectOptions.length - 1;\n      } else {\n        indexToFocus = focusedItemIndex - 1;\n      }\n\n      // Skip disabled options\n      while (selectOptions[indexToFocus].isDisabled) {\n        indexToFocus--;\n        if (indexToFocus === -1) {\n          indexToFocus = selectOptions.length - 1;\n        }\n      }\n    }\n\n    if (key === &#39;ArrowDown&#39;) {\n      // When no index is set or at the last index, focus to the first, otherwise increment focus index\n      if (focusedItemIndex === null || focusedItemIndex === selectOptions.length - 1) {\n        indexToFocus = 0;\n      } else {\n        indexToFocus = focusedItemIndex + 1;\n      }\n\n      // Skip disabled options\n      while (selectOptions[indexToFocus].isDisabled) {\n        indexToFocus++;\n        if (indexToFocus === selectOptions.length) {\n          indexToFocus = 0;\n        }\n      }\n    }\n\n    setActiveAndFocusedItem(indexToFocus);\n  };\n\n  const onInputKeyDown = (event: React.KeyboardEvent&lt;HTMLInputElement&gt;) =&gt; {\n    const focusedItem = focusedItemIndex !== null ? selectOptions[focusedItemIndex] : null;\n\n    switch (event.key) {\n      case &#39;Enter&#39;:\n        if (isOpen &amp;&amp; focusedItem &amp;&amp; !focusedItem.isAriaDisabled) {\n          onSelect(undefined, focusedItem.value as string);\n        }\n\n        if (!isOpen) {\n          setIsOpen(true);\n        }\n\n        break;\n      case &#39;ArrowUp&#39;:\n      case &#39;ArrowDown&#39;:\n        event.preventDefault();\n        handleMenuArrowKeys(event.key);\n        break;\n    }\n  };\n\n  const onToggleClick = () =&gt; {\n    setIsOpen(!isOpen);\n    textInputRef?.current?.focus();\n  };\n\n  const onClearButtonClick = () =&gt; {\n    setSelected(&#39;&#39;);\n    setInputValue(&#39;&#39;);\n    setFilterValue(&#39;&#39;);\n    resetActiveAndFocusedItem();\n    textInputRef?.current?.focus();\n  };\n\n  const toggle = (toggleRef: React.Ref&lt;MenuToggleElement&gt;) =&gt; (\n    &lt;MenuToggle\n      ref={toggleRef}\n      variant=\&quot;typeahead\&quot;\n      aria-label=\&quot;Typeahead creatable menu toggle\&quot;\n      onClick={onToggleClick}\n      isExpanded={isOpen}\n      isFullWidth\n    &gt;\n      &lt;TextInputGroup isPlain&gt;\n        &lt;TextInputGroupMain\n          value={inputValue}\n          onClick={onInputClick}\n          onChange={onTextInputChange}\n          onKeyDown={onInputKeyDown}\n          id=\&quot;create-typeahead-select-input\&quot;\n          autoComplete=\&quot;off\&quot;\n          innerRef={textInputRef}\n          placeholder=\&quot;Select a state\&quot;\n          {...(activeItemId &amp;&amp; { &#39;aria-activedescendant&#39;: activeItemId })}\n          role=\&quot;combobox\&quot;\n          isExpanded={isOpen}\n          aria-controls=\&quot;select-create-typeahead-listbox\&quot;\n        /&gt;\n\n        &lt;TextInputGroupUtilities {...(!inputValue ? { style: { display: &#39;none&#39; } } : {})}&gt;\n          &lt;Button variant=\&quot;plain\&quot; onClick={onClearButtonClick} aria-label=\&quot;Clear input value\&quot; icon={&lt;TimesIcon /&gt;} /&gt;\n        &lt;/TextInputGroupUtilities&gt;\n      &lt;/TextInputGroup&gt;\n    &lt;/MenuToggle&gt;\n  );\n\n  return (\n    &lt;Select\n      id=\&quot;create-typeahead-select\&quot;\n      isOpen={isOpen}\n      selected={selected}\n      onSelect={onSelect}\n      onOpenChange={(isOpen) =&gt; {\n        !isOpen &amp;&amp; closeMenu();\n      }}\n      toggle={toggle}\n      variant=\&quot;typeahead\&quot;\n    &gt;\n      &lt;SelectList id=\&quot;select-create-typeahead-listbox\&quot;&gt;\n        {selectOptions.map((option, index) =&gt; (\n          &lt;SelectOption\n            key={option.value || option.children}\n            isFocused={focusedItemIndex === index}\n            className={option.className}\n            id={createItemId(option.value)}\n            {...option}\n            ref={null}\n          /&gt;\n        ))}\n      &lt;/SelectList&gt;\n    &lt;/Select&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-2659" data-pf-content="true" class="pf-v6-c-content--h3">Multiple typeahead with chips</h3>
-<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2660" data-pf-content="true" class="pf-v6-c-content--p">A multiple typeahead can be used to allow users to select multiple options from a list. Additionally, you can render a chip group to be placed in the select toggle.</p>
-<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2661" data-pf-content="true" class="pf-v6-c-content--p">A multiple typeahead can be used to allow users to select multiple options from a list. Additionally, you can render a chip group to be placed in the select toggle.</p>
-<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2662" data-pf-content="true" class="pf-v6-c-content--p">When more items than the allowed limit are selected, overflowing items will be hidden under a “more” button. The following example hides items after more than 3 are selected. To show hidden items, select the “more” button. Select “show less” to hide extra items again.</p>
-<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2663" data-pf-content="true" class="pf-v6-c-content--p">A multiple typeahead can be used to allow users to select multiple options from a list. Additionally, you can render a chip group to be placed in the select toggle.</p>
-<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2664" data-pf-content="true" class="pf-v6-c-content--p">When more items than the allowed limit are selected, overflowing items will be hidden under a “more” button. The following example hides items after more than 3 are selected. To show hidden items, select the “more” button. Select “show less” to hide extra items again.</p>
+<astro-island uid="CemmO" component-url="/_astro/LiveExample.C43dqXje.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;src&quot;:[0,&quot;import { useEffect, useRef, useState } from &#39;react&#39;;\nimport {\n  Select,\n  SelectOption,\n  SelectList,\n  SelectOptionProps,\n  MenuToggle,\n  MenuToggleElement,\n  TextInputGroup,\n  TextInputGroupMain,\n  TextInputGroupUtilities,\n  Button\n} from &#39;@patternfly/react-core&#39;;\nimport TimesIcon from &#39;@patternfly/react-icons/dist/esm/icons/times-icon&#39;;\n\nlet initialSelectOptions: SelectOptionProps[] = [\n  { value: &#39;Alabama&#39;, children: &#39;Alabama&#39; },\n  { value: &#39;Florida&#39;, children: &#39;Florida&#39; },\n  { value: &#39;New Jersey&#39;, children: &#39;New Jersey&#39; },\n  { value: &#39;New Mexico&#39;, children: &#39;New Mexico&#39; },\n  { value: &#39;New York&#39;, children: &#39;New York&#39; },\n  { value: &#39;North Carolina&#39;, children: &#39;North Carolina&#39; }\n];\n\nexport const SelectTypeaheadCreatable: React.FunctionComponent = () =&gt; {\n  const [isOpen, setIsOpen] = useState(false);\n  const [selected, setSelected] = useState&lt;string&gt;(&#39;&#39;);\n  const [inputValue, setInputValue] = useState&lt;string&gt;(&#39;&#39;);\n  const [filterValue, setFilterValue] = useState&lt;string&gt;(&#39;&#39;);\n  const [selectOptions, setSelectOptions] = useState&lt;SelectOptionProps[]&gt;(initialSelectOptions);\n  const [focusedItemIndex, setFocusedItemIndex] = useState&lt;number | null&gt;(null);\n  const [activeItemId, setActiveItemId] = useState&lt;string | null&gt;(null);\n  const textInputRef = useRef&lt;HTMLInputElement&gt;(undefined);\n\n  const CREATE_NEW = &#39;create&#39;;\n\n  useEffect(() =&gt; {\n    let newSelectOptions: SelectOptionProps[] = initialSelectOptions;\n\n    // Filter menu items based on the text input value when one exists\n    if (filterValue) {\n      newSelectOptions = initialSelectOptions.filter((menuItem) =&gt;\n        String(menuItem.children).toLowerCase().includes(filterValue.toLowerCase())\n      );\n\n      // If no option matches the filter exactly, display creation option\n      if (!initialSelectOptions.some((option) =&gt; option.value === filterValue)) {\n        newSelectOptions = [...newSelectOptions, { children: `Create new option \&quot;${filterValue}\&quot;`, value: CREATE_NEW }];\n      }\n\n      // Open the menu when the input value changes and the new value is not empty\n      if (!isOpen) {\n        setIsOpen(true);\n      }\n    }\n\n    setSelectOptions(newSelectOptions);\n  }, [filterValue]);\n\n  const createItemId = (value: any) =&gt; `select-typeahead-${value.replace(&#39; &#39;, &#39;-&#39;)}`;\n\n  const setActiveAndFocusedItem = (itemIndex: number) =&gt; {\n    setFocusedItemIndex(itemIndex);\n    const focusedItem = selectOptions[itemIndex];\n    setActiveItemId(createItemId(focusedItem.value));\n  };\n\n  const resetActiveAndFocusedItem = () =&gt; {\n    setFocusedItemIndex(null);\n    setActiveItemId(null);\n  };\n\n  const closeMenu = () =&gt; {\n    setIsOpen(false);\n    resetActiveAndFocusedItem();\n  };\n\n  const onInputClick = () =&gt; {\n    if (!isOpen) {\n      setIsOpen(true);\n    } else if (!inputValue) {\n      closeMenu();\n    }\n  };\n\n  const selectOption = (value: string | number, content: string | number) =&gt; {\n    // eslint-disable-next-line no-console\n    console.log(&#39;selected&#39;, content);\n\n    setInputValue(String(content));\n    setFilterValue(&#39;&#39;);\n    setSelected(String(value));\n\n    closeMenu();\n  };\n\n  const onSelect = (_event: React.MouseEvent&lt;Element, MouseEvent&gt; | undefined, value: string | number | undefined) =&gt; {\n    if (value) {\n      if (value === CREATE_NEW) {\n        if (!initialSelectOptions.some((item) =&gt; item.children === filterValue)) {\n          initialSelectOptions = [...initialSelectOptions, { value: filterValue, children: filterValue }];\n        }\n        setSelected(filterValue);\n        setFilterValue(&#39;&#39;);\n        closeMenu();\n      } else {\n        const optionText = selectOptions.find((option) =&gt; option.value === value)?.children;\n        selectOption(value, optionText as string);\n      }\n    }\n  };\n\n  const onTextInputChange = (_event: React.FormEvent&lt;HTMLInputElement&gt;, value: string) =&gt; {\n    setInputValue(value);\n    setFilterValue(value);\n\n    resetActiveAndFocusedItem();\n\n    if (value !== selected) {\n      setSelected(&#39;&#39;);\n    }\n  };\n\n  const handleMenuArrowKeys = (key: string) =&gt; {\n    let indexToFocus = 0;\n\n    if (!isOpen) {\n      setIsOpen(true);\n    }\n\n    if (selectOptions.every((option) =&gt; option.isDisabled)) {\n      return;\n    }\n\n    if (key === &#39;ArrowUp&#39;) {\n      // When no index is set or at the first index, focus to the last, otherwise decrement focus index\n      if (focusedItemIndex === null || focusedItemIndex === 0) {\n        indexToFocus = selectOptions.length - 1;\n      } else {\n        indexToFocus = focusedItemIndex - 1;\n      }\n\n      // Skip disabled options\n      while (selectOptions[indexToFocus].isDisabled) {\n        indexToFocus--;\n        if (indexToFocus === -1) {\n          indexToFocus = selectOptions.length - 1;\n        }\n      }\n    }\n\n    if (key === &#39;ArrowDown&#39;) {\n      // When no index is set or at the last index, focus to the first, otherwise increment focus index\n      if (focusedItemIndex === null || focusedItemIndex === selectOptions.length - 1) {\n        indexToFocus = 0;\n      } else {\n        indexToFocus = focusedItemIndex + 1;\n      }\n\n      // Skip disabled options\n      while (selectOptions[indexToFocus].isDisabled) {\n        indexToFocus++;\n        if (indexToFocus === selectOptions.length) {\n          indexToFocus = 0;\n        }\n      }\n    }\n\n    setActiveAndFocusedItem(indexToFocus);\n  };\n\n  const onInputKeyDown = (event: React.KeyboardEvent&lt;HTMLInputElement&gt;) =&gt; {\n    const focusedItem = focusedItemIndex !== null ? selectOptions[focusedItemIndex] : null;\n\n    switch (event.key) {\n      case &#39;Enter&#39;:\n        if (isOpen &amp;&amp; focusedItem &amp;&amp; !focusedItem.isAriaDisabled) {\n          onSelect(undefined, focusedItem.value as string);\n        }\n\n        if (!isOpen) {\n          setIsOpen(true);\n        }\n\n        break;\n      case &#39;ArrowUp&#39;:\n      case &#39;ArrowDown&#39;:\n        event.preventDefault();\n        handleMenuArrowKeys(event.key);\n        break;\n    }\n  };\n\n  const onToggleClick = () =&gt; {\n    setIsOpen(!isOpen);\n    textInputRef?.current?.focus();\n  };\n\n  const onClearButtonClick = () =&gt; {\n    setSelected(&#39;&#39;);\n    setInputValue(&#39;&#39;);\n    setFilterValue(&#39;&#39;);\n    resetActiveAndFocusedItem();\n    textInputRef?.current?.focus();\n  };\n\n  const toggle = (toggleRef: React.Ref&lt;MenuToggleElement&gt;) =&gt; (\n    &lt;MenuToggle\n      ref={toggleRef}\n      variant=\&quot;typeahead\&quot;\n      aria-label=\&quot;Typeahead creatable menu toggle\&quot;\n      onClick={onToggleClick}\n      isExpanded={isOpen}\n      isFullWidth\n    &gt;\n      &lt;TextInputGroup isPlain&gt;\n        &lt;TextInputGroupMain\n          value={inputValue}\n          onClick={onInputClick}\n          onChange={onTextInputChange}\n          onKeyDown={onInputKeyDown}\n          id=\&quot;create-typeahead-select-input\&quot;\n          autoComplete=\&quot;off\&quot;\n          innerRef={textInputRef}\n          placeholder=\&quot;Select a state\&quot;\n          {...(activeItemId &amp;&amp; { &#39;aria-activedescendant&#39;: activeItemId })}\n          role=\&quot;combobox\&quot;\n          isExpanded={isOpen}\n          aria-controls=\&quot;select-create-typeahead-listbox\&quot;\n        /&gt;\n\n        &lt;TextInputGroupUtilities {...(!inputValue ? { style: { display: &#39;none&#39; } } : {})}&gt;\n          &lt;Button variant=\&quot;plain\&quot; onClick={onClearButtonClick} aria-label=\&quot;Clear input value\&quot; icon={&lt;TimesIcon /&gt;} /&gt;\n        &lt;/TextInputGroupUtilities&gt;\n      &lt;/TextInputGroup&gt;\n    &lt;/MenuToggle&gt;\n  );\n\n  return (\n    &lt;Select\n      id=\&quot;create-typeahead-select\&quot;\n      isOpen={isOpen}\n      selected={selected}\n      onSelect={onSelect}\n      onOpenChange={(isOpen) =&gt; {\n        !isOpen &amp;&amp; closeMenu();\n      }}\n      toggle={toggle}\n      variant=\&quot;typeahead\&quot;\n    &gt;\n      &lt;SelectList id=\&quot;select-create-typeahead-listbox\&quot;&gt;\n        {selectOptions.map((option, index) =&gt; (\n          &lt;SelectOption\n            key={option.value || option.children}\n            isFocused={focusedItemIndex === index}\n            className={option.className}\n            id={createItemId(option.value)}\n            {...option}\n            ref={null}\n          /&gt;\n        ))}\n      &lt;/SelectList&gt;\n    &lt;/Select&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-2693" data-pf-content="true" class="pf-v6-c-content--h3">Multiple typeahead with chips</h3>
+<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2694" data-pf-content="true" class="pf-v6-c-content--p">A multiple typeahead can be used to allow users to select multiple options from a list. Additionally, you can render a chip group to be placed in the select toggle.</p>
+<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2695" data-pf-content="true" class="pf-v6-c-content--p">A multiple typeahead can be used to allow users to select multiple options from a list. Additionally, you can render a chip group to be placed in the select toggle.</p>
+<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2696" data-pf-content="true" class="pf-v6-c-content--p">When more items than the allowed limit are selected, overflowing items will be hidden under a “more” button. The following example hides items after more than 3 are selected. To show hidden items, select the “more” button. Select “show less” to hide extra items again.</p>
+<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2697" data-pf-content="true" class="pf-v6-c-content--p">A multiple typeahead can be used to allow users to select multiple options from a list. Additionally, you can render a chip group to be placed in the select toggle.</p>
+<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2698" data-pf-content="true" class="pf-v6-c-content--p">When more items than the allowed limit are selected, overflowing items will be hidden under a “more” button. The following example hides items after more than 3 are selected. To show hidden items, select the “more” button. Select “show less” to hide extra items again.</p>
-<astro-island uid="ZsqjkF" component-url="/_astro/LiveExample.B5R4Dzng.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;src&quot;:[0,&quot;import { useEffect, useRef, useState } from &#39;react&#39;;\nimport {\n  Select,\n  SelectOption,\n  SelectList,\n  SelectOptionProps,\n  MenuToggle,\n  MenuToggleElement,\n  TextInputGroup,\n  TextInputGroupMain,\n  TextInputGroupUtilities,\n  Label,\n  LabelGroup,\n  Button\n} from &#39;@patternfly/react-core&#39;;\nimport TimesIcon from &#39;@patternfly/react-icons/dist/esm/icons/times-icon&#39;;\n\nconst initialSelectOptions: SelectOptionProps[] = [\n  { value: &#39;Alabama&#39;, children: &#39;Alabama&#39; },\n  { value: &#39;Florida&#39;, children: &#39;Florida&#39; },\n  { value: &#39;New Jersey&#39;, children: &#39;New Jersey&#39; },\n  { value: &#39;New Mexico&#39;, children: &#39;New Mexico&#39; },\n  { value: &#39;New York&#39;, children: &#39;New York&#39; },\n  { value: &#39;North Carolina&#39;, children: &#39;North Carolina&#39; }\n];\n\nexport const SelectMultiTypeahead: React.FunctionComponent = () =&gt; {\n  const [isOpen, setIsOpen] = useState(false);\n  const [inputValue, setInputValue] = useState&lt;string&gt;(&#39;&#39;);\n  const [selected, setSelected] = useState&lt;string[]&gt;([]);\n  const [selectOptions, setSelectOptions] = useState&lt;SelectOptionProps[]&gt;(initialSelectOptions);\n  const [focusedItemIndex, setFocusedItemIndex] = useState&lt;number | null&gt;(null);\n  const [activeItemId, setActiveItemId] = useState&lt;string | null&gt;(null);\n  const textInputRef = useRef&lt;HTMLInputElement&gt;(undefined);\n\n  const NO_RESULTS = &#39;no results&#39;;\n\n  useEffect(() =&gt; {\n    let newSelectOptions: SelectOptionProps[] = initialSelectOptions;\n\n    // Filter menu items based on the text input value when one exists\n    if (inputValue) {\n      newSelectOptions = initialSelectOptions.filter((menuItem) =&gt;\n        String(menuItem.children).toLowerCase().includes(inputValue.toLowerCase())\n      );\n\n      // When no options are found after filtering, display &#39;No results found&#39;\n      if (!newSelectOptions.length) {\n        newSelectOptions = [\n          { isAriaDisabled: true, children: `No results found for \&quot;${inputValue}\&quot;`, value: NO_RESULTS }\n        ];\n      }\n\n      // Open the menu when the input value changes and the new value is not empty\n      if (!isOpen) {\n        setIsOpen(true);\n      }\n    }\n\n    setSelectOptions(newSelectOptions);\n  }, [inputValue]);\n\n  const createItemId = (value: any) =&gt; `select-multi-typeahead-${value.replace(&#39; &#39;, &#39;-&#39;)}`;\n\n  const setActiveAndFocusedItem = (itemIndex: number) =&gt; {\n    setFocusedItemIndex(itemIndex);\n    const focusedItem = selectOptions[itemIndex];\n    setActiveItemId(createItemId(focusedItem.value));\n  };\n\n  const resetActiveAndFocusedItem = () =&gt; {\n    setFocusedItemIndex(null);\n    setActiveItemId(null);\n  };\n\n  const closeMenu = () =&gt; {\n    setIsOpen(false);\n    resetActiveAndFocusedItem();\n  };\n\n  const onInputClick = () =&gt; {\n    if (!isOpen) {\n      setIsOpen(true);\n    } else if (!inputValue) {\n      closeMenu();\n    }\n  };\n\n  const onSelect = (value: string) =&gt; {\n    if (value &amp;&amp; value !== NO_RESULTS) {\n      // eslint-disable-next-line no-console\n      console.log(&#39;selected&#39;, value);\n\n      setSelected(\n        selected.includes(value) ? selected.filter((selection) =&gt; selection !== value) : [...selected, value]\n      );\n    }\n\n    textInputRef.current?.focus();\n  };\n\n  const onTextInputChange = (_event: React.FormEvent&lt;HTMLInputElement&gt;, value: string) =&gt; {\n    setInputValue(value);\n    resetActiveAndFocusedItem();\n  };\n\n  const handleMenuArrowKeys = (key: string) =&gt; {\n    let indexToFocus = 0;\n\n    if (!isOpen) {\n      setIsOpen(true);\n    }\n\n    if (selectOptions.every((option) =&gt; option.isDisabled)) {\n      return;\n    }\n\n    if (key === &#39;ArrowUp&#39;) {\n      // When no index is set or at the first index, focus to the last, otherwise decrement focus index\n      if (focusedItemIndex === null || focusedItemIndex === 0) {\n        indexToFocus = selectOptions.length - 1;\n      } else {\n        indexToFocus = focusedItemIndex - 1;\n      }\n\n      // Skip disabled options\n      while (selectOptions[indexToFocus].isDisabled) {\n        indexToFocus--;\n        if (indexToFocus === -1) {\n          indexToFocus = selectOptions.length - 1;\n        }\n      }\n    }\n\n    if (key === &#39;ArrowDown&#39;) {\n      // When no index is set or at the last index, focus to the first, otherwise increment focus index\n      if (focusedItemIndex === null || focusedItemIndex === selectOptions.length - 1) {\n        indexToFocus = 0;\n      } else {\n        indexToFocus = focusedItemIndex + 1;\n      }\n\n      // Skip disabled options\n      while (selectOptions[indexToFocus].isDisabled) {\n        indexToFocus++;\n        if (indexToFocus === selectOptions.length) {\n          indexToFocus = 0;\n        }\n      }\n    }\n\n    setActiveAndFocusedItem(indexToFocus);\n  };\n\n  const onInputKeyDown = (event: React.KeyboardEvent&lt;HTMLInputElement&gt;) =&gt; {\n    const focusedItem = focusedItemIndex !== null ? selectOptions[focusedItemIndex] : null;\n\n    switch (event.key) {\n      case &#39;Enter&#39;:\n        if (isOpen &amp;&amp; focusedItem &amp;&amp; focusedItem.value !== NO_RESULTS &amp;&amp; !focusedItem.isAriaDisabled) {\n          onSelect(focusedItem.value);\n        }\n\n        if (!isOpen) {\n          setIsOpen(true);\n        }\n\n        break;\n      case &#39;ArrowUp&#39;:\n      case &#39;ArrowDown&#39;:\n        event.preventDefault();\n        handleMenuArrowKeys(event.key);\n        break;\n    }\n  };\n\n  const onToggleClick = () =&gt; {\n    setIsOpen(!isOpen);\n    textInputRef?.current?.focus();\n  };\n\n  const onClearButtonClick = () =&gt; {\n    setSelected([]);\n    setInputValue(&#39;&#39;);\n    resetActiveAndFocusedItem();\n    textInputRef?.current?.focus();\n  };\n\n  const toggle = (toggleRef: React.Ref&lt;MenuToggleElement&gt;) =&gt; (\n    &lt;MenuToggle\n      variant=\&quot;typeahead\&quot;\n      aria-label=\&quot;Multi typeahead menu toggle\&quot;\n      onClick={onToggleClick}\n      innerRef={toggleRef}\n      isExpanded={isOpen}\n      isFullWidth\n    &gt;\n      &lt;TextInputGroup isPlain&gt;\n        &lt;TextInputGroupMain\n          value={inputValue}\n          onClick={onInputClick}\n          onChange={onTextInputChange}\n          onKeyDown={onInputKeyDown}\n          id=\&quot;multi-typeahead-select-input\&quot;\n          autoComplete=\&quot;off\&quot;\n          innerRef={textInputRef}\n          placeholder=\&quot;Select a state\&quot;\n          {...(activeItemId &amp;&amp; { &#39;aria-activedescendant&#39;: activeItemId })}\n          role=\&quot;combobox\&quot;\n          isExpanded={isOpen}\n          aria-controls=\&quot;select-multi-typeahead-listbox\&quot;\n        &gt;\n          &lt;LabelGroup aria-label=\&quot;Current selections\&quot;&gt;\n            {selected.map((selection, index) =&gt; (\n              &lt;Label\n                key={index}\n                variant=\&quot;outline\&quot;\n                onClose={(ev) =&gt; {\n                  ev.stopPropagation();\n                  onSelect(selection);\n                }}\n              &gt;\n                {selection}\n              &lt;/Label&gt;\n            ))}\n          &lt;/LabelGroup&gt;\n        &lt;/TextInputGroupMain&gt;\n        &lt;TextInputGroupUtilities {...(selected.length === 0 ? { style: { display: &#39;none&#39; } } : {})}&gt;\n          &lt;Button variant=\&quot;plain\&quot; onClick={onClearButtonClick} aria-label=\&quot;Clear input value\&quot; icon={&lt;TimesIcon /&gt;} /&gt;\n        &lt;/TextInputGroupUtilities&gt;\n      &lt;/TextInputGroup&gt;\n    &lt;/MenuToggle&gt;\n  );\n\n  return (\n    &lt;Select\n      id=\&quot;multi-typeahead-select\&quot;\n      isOpen={isOpen}\n      selected={selected}\n      onSelect={(_event, selection) =&gt; onSelect(selection as string)}\n      onOpenChange={(isOpen) =&gt; {\n        !isOpen &amp;&amp; closeMenu();\n      }}\n      toggle={toggle}\n      variant=\&quot;typeahead\&quot;\n    &gt;\n      &lt;SelectList isAriaMultiselectable id=\&quot;select-multi-typeahead-listbox\&quot;&gt;\n        {selectOptions.map((option, index) =&gt; (\n          &lt;SelectOption\n            key={option.value || option.children}\n            isFocused={focusedItemIndex === index}\n            className={option.className}\n            id={createItemId(option.value)}\n            {...option}\n            ref={null}\n          /&gt;\n        ))}\n      &lt;/SelectList&gt;\n    &lt;/Select&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-2665" data-pf-content="true" class="pf-v6-c-content--h3">Multiple typeahead with create option</h3>
-<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2666" data-pf-content="true" class="pf-v6-c-content--p">If the text that is entered into a typeahead doesn’t match a menu item, users can choose to create a new option that matches the text input. You can also combine this create functionality with a chip group to display created items as chips.”</p>
-<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2667" data-pf-content="true" class="pf-v6-c-content--p">If the text that is entered into a typeahead doesn’t match a menu item, users can choose to create a new option that matches the text input. You can also combine this create functionality with a chip group to display created items as chips.”</p>
-<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2668" data-pf-content="true" class="pf-v6-c-content--p">If the text that is entered into a typeahead doesn’t match a menu item, users can choose to create a new option that matches the text input. You can also combine this create functionality with a chip group to display created items as chips.”</p>
+<astro-island uid="ZsqjkF" component-url="/_astro/LiveExample.C43dqXje.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;src&quot;:[0,&quot;import { useEffect, useRef, useState } from &#39;react&#39;;\nimport {\n  Select,\n  SelectOption,\n  SelectList,\n  SelectOptionProps,\n  MenuToggle,\n  MenuToggleElement,\n  TextInputGroup,\n  TextInputGroupMain,\n  TextInputGroupUtilities,\n  Label,\n  LabelGroup,\n  Button\n} from &#39;@patternfly/react-core&#39;;\nimport TimesIcon from &#39;@patternfly/react-icons/dist/esm/icons/times-icon&#39;;\n\nconst initialSelectOptions: SelectOptionProps[] = [\n  { value: &#39;Alabama&#39;, children: &#39;Alabama&#39; },\n  { value: &#39;Florida&#39;, children: &#39;Florida&#39; },\n  { value: &#39;New Jersey&#39;, children: &#39;New Jersey&#39; },\n  { value: &#39;New Mexico&#39;, children: &#39;New Mexico&#39; },\n  { value: &#39;New York&#39;, children: &#39;New York&#39; },\n  { value: &#39;North Carolina&#39;, children: &#39;North Carolina&#39; }\n];\n\nexport const SelectMultiTypeahead: React.FunctionComponent = () =&gt; {\n  const [isOpen, setIsOpen] = useState(false);\n  const [inputValue, setInputValue] = useState&lt;string&gt;(&#39;&#39;);\n  const [selected, setSelected] = useState&lt;string[]&gt;([]);\n  const [selectOptions, setSelectOptions] = useState&lt;SelectOptionProps[]&gt;(initialSelectOptions);\n  const [focusedItemIndex, setFocusedItemIndex] = useState&lt;number | null&gt;(null);\n  const [activeItemId, setActiveItemId] = useState&lt;string | null&gt;(null);\n  const textInputRef = useRef&lt;HTMLInputElement&gt;(undefined);\n\n  const NO_RESULTS = &#39;no results&#39;;\n\n  useEffect(() =&gt; {\n    let newSelectOptions: SelectOptionProps[] = initialSelectOptions;\n\n    // Filter menu items based on the text input value when one exists\n    if (inputValue) {\n      newSelectOptions = initialSelectOptions.filter((menuItem) =&gt;\n        String(menuItem.children).toLowerCase().includes(inputValue.toLowerCase())\n      );\n\n      // When no options are found after filtering, display &#39;No results found&#39;\n      if (!newSelectOptions.length) {\n        newSelectOptions = [\n          { isAriaDisabled: true, children: `No results found for \&quot;${inputValue}\&quot;`, value: NO_RESULTS }\n        ];\n      }\n\n      // Open the menu when the input value changes and the new value is not empty\n      if (!isOpen) {\n        setIsOpen(true);\n      }\n    }\n\n    setSelectOptions(newSelectOptions);\n  }, [inputValue]);\n\n  const createItemId = (value: any) =&gt; `select-multi-typeahead-${value.replace(&#39; &#39;, &#39;-&#39;)}`;\n\n  const setActiveAndFocusedItem = (itemIndex: number) =&gt; {\n    setFocusedItemIndex(itemIndex);\n    const focusedItem = selectOptions[itemIndex];\n    setActiveItemId(createItemId(focusedItem.value));\n  };\n\n  const resetActiveAndFocusedItem = () =&gt; {\n    setFocusedItemIndex(null);\n    setActiveItemId(null);\n  };\n\n  const closeMenu = () =&gt; {\n    setIsOpen(false);\n    resetActiveAndFocusedItem();\n  };\n\n  const onInputClick = () =&gt; {\n    if (!isOpen) {\n      setIsOpen(true);\n    } else if (!inputValue) {\n      closeMenu();\n    }\n  };\n\n  const onSelect = (value: string) =&gt; {\n    if (value &amp;&amp; value !== NO_RESULTS) {\n      // eslint-disable-next-line no-console\n      console.log(&#39;selected&#39;, value);\n\n      setSelected(\n        selected.includes(value) ? selected.filter((selection) =&gt; selection !== value) : [...selected, value]\n      );\n    }\n\n    textInputRef.current?.focus();\n  };\n\n  const onTextInputChange = (_event: React.FormEvent&lt;HTMLInputElement&gt;, value: string) =&gt; {\n    setInputValue(value);\n    resetActiveAndFocusedItem();\n  };\n\n  const handleMenuArrowKeys = (key: string) =&gt; {\n    let indexToFocus = 0;\n\n    if (!isOpen) {\n      setIsOpen(true);\n    }\n\n    if (selectOptions.every((option) =&gt; option.isDisabled)) {\n      return;\n    }\n\n    if (key === &#39;ArrowUp&#39;) {\n      // When no index is set or at the first index, focus to the last, otherwise decrement focus index\n      if (focusedItemIndex === null || focusedItemIndex === 0) {\n        indexToFocus = selectOptions.length - 1;\n      } else {\n        indexToFocus = focusedItemIndex - 1;\n      }\n\n      // Skip disabled options\n      while (selectOptions[indexToFocus].isDisabled) {\n        indexToFocus--;\n        if (indexToFocus === -1) {\n          indexToFocus = selectOptions.length - 1;\n        }\n      }\n    }\n\n    if (key === &#39;ArrowDown&#39;) {\n      // When no index is set or at the last index, focus to the first, otherwise increment focus index\n      if (focusedItemIndex === null || focusedItemIndex === selectOptions.length - 1) {\n        indexToFocus = 0;\n      } else {\n        indexToFocus = focusedItemIndex + 1;\n      }\n\n      // Skip disabled options\n      while (selectOptions[indexToFocus].isDisabled) {\n        indexToFocus++;\n        if (indexToFocus === selectOptions.length) {\n          indexToFocus = 0;\n        }\n      }\n    }\n\n    setActiveAndFocusedItem(indexToFocus);\n  };\n\n  const onInputKeyDown = (event: React.KeyboardEvent&lt;HTMLInputElement&gt;) =&gt; {\n    const focusedItem = focusedItemIndex !== null ? selectOptions[focusedItemIndex] : null;\n\n    switch (event.key) {\n      case &#39;Enter&#39;:\n        if (isOpen &amp;&amp; focusedItem &amp;&amp; focusedItem.value !== NO_RESULTS &amp;&amp; !focusedItem.isAriaDisabled) {\n          onSelect(focusedItem.value);\n        }\n\n        if (!isOpen) {\n          setIsOpen(true);\n        }\n\n        break;\n      case &#39;ArrowUp&#39;:\n      case &#39;ArrowDown&#39;:\n        event.preventDefault();\n        handleMenuArrowKeys(event.key);\n        break;\n    }\n  };\n\n  const onToggleClick = () =&gt; {\n    setIsOpen(!isOpen);\n    textInputRef?.current?.focus();\n  };\n\n  const onClearButtonClick = () =&gt; {\n    setSelected([]);\n    setInputValue(&#39;&#39;);\n    resetActiveAndFocusedItem();\n    textInputRef?.current?.focus();\n  };\n\n  const toggle = (toggleRef: React.Ref&lt;MenuToggleElement&gt;) =&gt; (\n    &lt;MenuToggle\n      variant=\&quot;typeahead\&quot;\n      aria-label=\&quot;Multi typeahead menu toggle\&quot;\n      onClick={onToggleClick}\n      innerRef={toggleRef}\n      isExpanded={isOpen}\n      isFullWidth\n    &gt;\n      &lt;TextInputGroup isPlain&gt;\n        &lt;TextInputGroupMain\n          value={inputValue}\n          onClick={onInputClick}\n          onChange={onTextInputChange}\n          onKeyDown={onInputKeyDown}\n          id=\&quot;multi-typeahead-select-input\&quot;\n          autoComplete=\&quot;off\&quot;\n          innerRef={textInputRef}\n          placeholder=\&quot;Select a state\&quot;\n          {...(activeItemId &amp;&amp; { &#39;aria-activedescendant&#39;: activeItemId })}\n          role=\&quot;combobox\&quot;\n          isExpanded={isOpen}\n          aria-controls=\&quot;select-multi-typeahead-listbox\&quot;\n        &gt;\n          &lt;LabelGroup aria-label=\&quot;Current selections\&quot;&gt;\n            {selected.map((selection, index) =&gt; (\n              &lt;Label\n                key={index}\n                variant=\&quot;outline\&quot;\n                onClose={(ev) =&gt; {\n                  ev.stopPropagation();\n                  onSelect(selection);\n                }}\n              &gt;\n                {selection}\n              &lt;/Label&gt;\n            ))}\n          &lt;/LabelGroup&gt;\n        &lt;/TextInputGroupMain&gt;\n        &lt;TextInputGroupUtilities {...(selected.length === 0 ? { style: { display: &#39;none&#39; } } : {})}&gt;\n          &lt;Button variant=\&quot;plain\&quot; onClick={onClearButtonClick} aria-label=\&quot;Clear input value\&quot; icon={&lt;TimesIcon /&gt;} /&gt;\n        &lt;/TextInputGroupUtilities&gt;\n      &lt;/TextInputGroup&gt;\n    &lt;/MenuToggle&gt;\n  );\n\n  return (\n    &lt;Select\n      id=\&quot;multi-typeahead-select\&quot;\n      isOpen={isOpen}\n      selected={selected}\n      onSelect={(_event, selection) =&gt; onSelect(selection as string)}\n      onOpenChange={(isOpen) =&gt; {\n        !isOpen &amp;&amp; closeMenu();\n      }}\n      toggle={toggle}\n      variant=\&quot;typeahead\&quot;\n    &gt;\n      &lt;SelectList isAriaMultiselectable id=\&quot;select-multi-typeahead-listbox\&quot;&gt;\n        {selectOptions.map((option, index) =&gt; (\n          &lt;SelectOption\n            key={option.value || option.children}\n            isFocused={focusedItemIndex === index}\n            className={option.className}\n            id={createItemId(option.value)}\n            {...option}\n            ref={null}\n          /&gt;\n        ))}\n      &lt;/SelectList&gt;\n    &lt;/Select&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-2699" data-pf-content="true" class="pf-v6-c-content--h3">Multiple typeahead with create option</h3>
+<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2700" data-pf-content="true" class="pf-v6-c-content--p">If the text that is entered into a typeahead doesn’t match a menu item, users can choose to create a new option that matches the text input. You can also combine this create functionality with a chip group to display created items as chips.”</p>
+<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2701" data-pf-content="true" class="pf-v6-c-content--p">If the text that is entered into a typeahead doesn’t match a menu item, users can choose to create a new option that matches the text input. You can also combine this create functionality with a chip group to display created items as chips.”</p>
+<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2702" data-pf-content="true" class="pf-v6-c-content--p">If the text that is entered into a typeahead doesn’t match a menu item, users can choose to create a new option that matches the text input. You can also combine this create functionality with a chip group to display created items as chips.”</p>
-<astro-island uid="Z16jK9f" component-url="/_astro/LiveExample.B5R4Dzng.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;src&quot;:[0,&quot;import { useEffect, useRef, useState } from &#39;react&#39;;\nimport {\n  Select,\n  SelectOption,\n  SelectList,\n  SelectOptionProps,\n  MenuToggle,\n  MenuToggleElement,\n  TextInputGroup,\n  TextInputGroupMain,\n  TextInputGroupUtilities,\n  Label,\n  LabelGroup,\n  Button\n} from &#39;@patternfly/react-core&#39;;\nimport TimesIcon from &#39;@patternfly/react-icons/dist/esm/icons/times-icon&#39;;\n\nlet initialSelectOptions: SelectOptionProps[] = [\n  { value: &#39;Alabama&#39;, children: &#39;Alabama&#39; },\n  { value: &#39;Florida&#39;, children: &#39;Florida&#39; },\n  { value: &#39;New Jersey&#39;, children: &#39;New Jersey&#39; },\n  { value: &#39;New Mexico&#39;, children: &#39;New Mexico&#39; },\n  { value: &#39;New York&#39;, children: &#39;New York&#39; },\n  { value: &#39;North Carolina&#39;, children: &#39;North Carolina&#39; }\n];\n\nexport const SelectMultiTypeaheadCreatable: React.FunctionComponent = () =&gt; {\n  const [isOpen, setIsOpen] = useState(false);\n  const [inputValue, setInputValue] = useState&lt;string&gt;(&#39;&#39;);\n  const [selected, setSelected] = useState&lt;string[]&gt;([]);\n  const [selectOptions, setSelectOptions] = useState&lt;SelectOptionProps[]&gt;(initialSelectOptions);\n  const [focusedItemIndex, setFocusedItemIndex] = useState&lt;number | null&gt;(null);\n  const [activeItemId, setActiveItemId] = useState&lt;string | null&gt;(null);\n  const [onCreation, setOnCreation] = useState&lt;boolean&gt;(false); // Boolean to refresh filter state after new option is created\n  const textInputRef = useRef&lt;HTMLInputElement&gt;(undefined);\n\n  const CREATE_NEW = &#39;create&#39;;\n\n  useEffect(() =&gt; {\n    let newSelectOptions: SelectOptionProps[] = initialSelectOptions;\n\n    // Filter menu items based on the text input value when one exists\n    if (inputValue) {\n      newSelectOptions = initialSelectOptions.filter((menuItem) =&gt;\n        String(menuItem.children).toLowerCase().includes(inputValue.toLowerCase())\n      );\n\n      // If no option matches the filter exactly, display creation option\n      if (!initialSelectOptions.some((option) =&gt; option.value === inputValue)) {\n        newSelectOptions = [...newSelectOptions, { children: `Create new option \&quot;${inputValue}\&quot;`, value: CREATE_NEW }];\n      }\n\n      // Open the menu when the input value changes and the new value is not empty\n      if (!isOpen) {\n        setIsOpen(true);\n      }\n    }\n\n    setSelectOptions(newSelectOptions);\n  }, [inputValue, onCreation]);\n\n  const createItemId = (value: any) =&gt; `select-multi-create-typeahead-${value.replace(&#39; &#39;, &#39;-&#39;)}`;\n\n  const setActiveAndFocusedItem = (itemIndex: number) =&gt; {\n    setFocusedItemIndex(itemIndex);\n    const focusedItem = selectOptions[itemIndex];\n    setActiveItemId(createItemId(focusedItem.value));\n  };\n\n  const resetActiveAndFocusedItem = () =&gt; {\n    setFocusedItemIndex(null);\n    setActiveItemId(null);\n  };\n\n  const closeMenu = () =&gt; {\n    setIsOpen(false);\n    resetActiveAndFocusedItem();\n  };\n\n  const onInputClick = () =&gt; {\n    if (!isOpen) {\n      setIsOpen(true);\n    } else if (!inputValue) {\n      closeMenu();\n    }\n  };\n\n  const onSelect = (value: string) =&gt; {\n    if (value) {\n      if (value === CREATE_NEW) {\n        if (!initialSelectOptions.some((item) =&gt; item.value === inputValue)) {\n          initialSelectOptions = [...initialSelectOptions, { value: inputValue, children: inputValue }];\n        }\n        setSelected(\n          selected.includes(inputValue)\n            ? selected.filter((selection) =&gt; selection !== inputValue)\n            : [...selected, inputValue]\n        );\n        setOnCreation(!onCreation);\n        resetActiveAndFocusedItem();\n      } else {\n        // eslint-disable-next-line no-console\n        console.log(&#39;selected&#39;, value);\n        setSelected(\n          selected.includes(value) ? selected.filter((selection) =&gt; selection !== value) : [...selected, value]\n        );\n      }\n    }\n\n    textInputRef.current?.focus();\n  };\n\n  const onTextInputChange = (_event: React.FormEvent&lt;HTMLInputElement&gt;, value: string) =&gt; {\n    setInputValue(value);\n    resetActiveAndFocusedItem();\n  };\n\n  const handleMenuArrowKeys = (key: string) =&gt; {\n    let indexToFocus = 0;\n\n    if (!isOpen) {\n      setIsOpen(true);\n    }\n\n    if (selectOptions.every((option) =&gt; option.isDisabled)) {\n      return;\n    }\n\n    if (key === &#39;ArrowUp&#39;) {\n      // When no index is set or at the first index, focus to the last, otherwise decrement focus index\n      if (focusedItemIndex === null || focusedItemIndex === 0) {\n        indexToFocus = selectOptions.length - 1;\n      } else {\n        indexToFocus = focusedItemIndex - 1;\n      }\n\n      // Skip disabled options\n      while (selectOptions[indexToFocus].isDisabled) {\n        indexToFocus--;\n        if (indexToFocus === -1) {\n          indexToFocus = selectOptions.length - 1;\n        }\n      }\n    }\n\n    if (key === &#39;ArrowDown&#39;) {\n      // When no index is set or at the last index, focus to the first, otherwise increment focus index\n      if (focusedItemIndex === null || focusedItemIndex === selectOptions.length - 1) {\n        indexToFocus = 0;\n      } else {\n        indexToFocus = focusedItemIndex + 1;\n      }\n\n      // Skip disabled options\n      while (selectOptions[indexToFocus].isDisabled) {\n        indexToFocus++;\n        if (indexToFocus === selectOptions.length) {\n          indexToFocus = 0;\n        }\n      }\n    }\n\n    setActiveAndFocusedItem(indexToFocus);\n  };\n\n  const onInputKeyDown = (event: React.KeyboardEvent&lt;HTMLInputElement&gt;) =&gt; {\n    const focusedItem = focusedItemIndex !== null ? selectOptions[focusedItemIndex] : null;\n\n    switch (event.key) {\n      case &#39;Enter&#39;:\n        if (isOpen &amp;&amp; focusedItem &amp;&amp; !focusedItem.isAriaDisabled) {\n          onSelect(focusedItem.value as string);\n        }\n\n        if (!isOpen) {\n          setIsOpen(true);\n        }\n\n        break;\n      case &#39;ArrowUp&#39;:\n      case &#39;ArrowDown&#39;:\n        event.preventDefault();\n        handleMenuArrowKeys(event.key);\n        break;\n    }\n  };\n\n  const onToggleClick = () =&gt; {\n    setIsOpen(!isOpen);\n    textInputRef?.current?.focus();\n  };\n\n  const onClearButtonClick = () =&gt; {\n    setSelected([]);\n    setInputValue(&#39;&#39;);\n    resetActiveAndFocusedItem();\n    textInputRef?.current?.focus();\n  };\n\n  const getChildren = (value: string) =&gt; initialSelectOptions.find((option) =&gt; option.value === value)?.children;\n\n  const toggle = (toggleRef: React.Ref&lt;MenuToggleElement&gt;) =&gt; (\n    &lt;MenuToggle\n      variant=\&quot;typeahead\&quot;\n      aria-label=\&quot;Multi typeahead creatable menu toggle\&quot;\n      onClick={onToggleClick}\n      innerRef={toggleRef}\n      isExpanded={isOpen}\n      isFullWidth\n    &gt;\n      &lt;TextInputGroup isPlain&gt;\n        &lt;TextInputGroupMain\n          value={inputValue}\n          onClick={onInputClick}\n          onChange={onTextInputChange}\n          onKeyDown={onInputKeyDown}\n          id=\&quot;multi-create-typeahead-select-input\&quot;\n          autoComplete=\&quot;off\&quot;\n          innerRef={textInputRef}\n          placeholder=\&quot;Select a state\&quot;\n          {...(activeItemId &amp;&amp; { &#39;aria-activedescendant&#39;: activeItemId })}\n          role=\&quot;combobox\&quot;\n          isExpanded={isOpen}\n          aria-controls=\&quot;select-multi-create-typeahead-listbox\&quot;\n        &gt;\n          &lt;LabelGroup aria-label=\&quot;Current selections\&quot;&gt;\n            {selected.map((selection, index) =&gt; (\n              &lt;Label\n                key={index}\n                variant=\&quot;outline\&quot;\n                onClose={(ev) =&gt; {\n                  ev.stopPropagation();\n                  onSelect(selection);\n                }}\n              &gt;\n                {getChildren(selection)}\n              &lt;/Label&gt;\n            ))}\n          &lt;/LabelGroup&gt;\n        &lt;/TextInputGroupMain&gt;\n        &lt;TextInputGroupUtilities {...(selected.length === 0 ? { style: { display: &#39;none&#39; } } : {})}&gt;\n          &lt;Button variant=\&quot;plain\&quot; onClick={onClearButtonClick} aria-label=\&quot;Clear input value\&quot; icon={&lt;TimesIcon /&gt;} /&gt;\n        &lt;/TextInputGroupUtilities&gt;\n      &lt;/TextInputGroup&gt;\n    &lt;/MenuToggle&gt;\n  );\n\n  return (\n    &lt;Select\n      id=\&quot;multi-create-typeahead-select\&quot;\n      isOpen={isOpen}\n      selected={selected}\n      onSelect={(_event, selection) =&gt; onSelect(selection as string)}\n      onOpenChange={(isOpen) =&gt; {\n        !isOpen &amp;&amp; closeMenu();\n      }}\n      toggle={toggle}\n      variant=\&quot;typeahead\&quot;\n    &gt;\n      &lt;SelectList isAriaMultiselectable id=\&quot;select-multi-create-typeahead-listbox\&quot;&gt;\n        {selectOptions.map((option, index) =&gt; (\n          &lt;SelectOption\n            key={option.value || option.children}\n            isFocused={focusedItemIndex === index}\n            className={option.className}\n            id={createItemId(option.value)}\n            {...option}\n            ref={null}\n          /&gt;\n        ))}\n      &lt;/SelectList&gt;\n    &lt;/Select&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-2669" data-pf-content="true" class="pf-v6-c-content--h3">Multiple typeahead with checkboxes</h3>
-<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2670" data-pf-content="true" class="pf-v6-c-content--p">By default, a multiple typeahead select allows you to select multiple menu items, placing a checkmark beside selected items. Like basic checkbox select menus, you can add checkboxes to your menu items. This approach may be more accurate and comprehensive for more complex menu scenarios like filtering.</p>
-<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2671" data-pf-content="true" class="pf-v6-c-content--p">By default, a multiple typeahead select allows you to select multiple menu items, placing a checkmark beside selected items. Like basic checkbox select menus, you can add checkboxes to your menu items. This approach may be more accurate and comprehensive for more complex menu scenarios like filtering.</p>
-<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2672" data-pf-content="true" class="pf-v6-c-content--p">By default, a multiple typeahead select allows you to select multiple menu items, placing a checkmark beside selected items. Like basic checkbox select menus, you can add checkboxes to your menu items. This approach may be more accurate and comprehensive for more complex menu scenarios like filtering.</p>
+<astro-island uid="Z16jK9f" component-url="/_astro/LiveExample.C43dqXje.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;src&quot;:[0,&quot;import { useEffect, useRef, useState } from &#39;react&#39;;\nimport {\n  Select,\n  SelectOption,\n  SelectList,\n  SelectOptionProps,\n  MenuToggle,\n  MenuToggleElement,\n  TextInputGroup,\n  TextInputGroupMain,\n  TextInputGroupUtilities,\n  Label,\n  LabelGroup,\n  Button\n} from &#39;@patternfly/react-core&#39;;\nimport TimesIcon from &#39;@patternfly/react-icons/dist/esm/icons/times-icon&#39;;\n\nlet initialSelectOptions: SelectOptionProps[] = [\n  { value: &#39;Alabama&#39;, children: &#39;Alabama&#39; },\n  { value: &#39;Florida&#39;, children: &#39;Florida&#39; },\n  { value: &#39;New Jersey&#39;, children: &#39;New Jersey&#39; },\n  { value: &#39;New Mexico&#39;, children: &#39;New Mexico&#39; },\n  { value: &#39;New York&#39;, children: &#39;New York&#39; },\n  { value: &#39;North Carolina&#39;, children: &#39;North Carolina&#39; }\n];\n\nexport const SelectMultiTypeaheadCreatable: React.FunctionComponent = () =&gt; {\n  const [isOpen, setIsOpen] = useState(false);\n  const [inputValue, setInputValue] = useState&lt;string&gt;(&#39;&#39;);\n  const [selected, setSelected] = useState&lt;string[]&gt;([]);\n  const [selectOptions, setSelectOptions] = useState&lt;SelectOptionProps[]&gt;(initialSelectOptions);\n  const [focusedItemIndex, setFocusedItemIndex] = useState&lt;number | null&gt;(null);\n  const [activeItemId, setActiveItemId] = useState&lt;string | null&gt;(null);\n  const [onCreation, setOnCreation] = useState&lt;boolean&gt;(false); // Boolean to refresh filter state after new option is created\n  const textInputRef = useRef&lt;HTMLInputElement&gt;(undefined);\n\n  const CREATE_NEW = &#39;create&#39;;\n\n  useEffect(() =&gt; {\n    let newSelectOptions: SelectOptionProps[] = initialSelectOptions;\n\n    // Filter menu items based on the text input value when one exists\n    if (inputValue) {\n      newSelectOptions = initialSelectOptions.filter((menuItem) =&gt;\n        String(menuItem.children).toLowerCase().includes(inputValue.toLowerCase())\n      );\n\n      // If no option matches the filter exactly, display creation option\n      if (!initialSelectOptions.some((option) =&gt; option.value === inputValue)) {\n        newSelectOptions = [...newSelectOptions, { children: `Create new option \&quot;${inputValue}\&quot;`, value: CREATE_NEW }];\n      }\n\n      // Open the menu when the input value changes and the new value is not empty\n      if (!isOpen) {\n        setIsOpen(true);\n      }\n    }\n\n    setSelectOptions(newSelectOptions);\n  }, [inputValue, onCreation]);\n\n  const createItemId = (value: any) =&gt; `select-multi-create-typeahead-${value.replace(&#39; &#39;, &#39;-&#39;)}`;\n\n  const setActiveAndFocusedItem = (itemIndex: number) =&gt; {\n    setFocusedItemIndex(itemIndex);\n    const focusedItem = selectOptions[itemIndex];\n    setActiveItemId(createItemId(focusedItem.value));\n  };\n\n  const resetActiveAndFocusedItem = () =&gt; {\n    setFocusedItemIndex(null);\n    setActiveItemId(null);\n  };\n\n  const closeMenu = () =&gt; {\n    setIsOpen(false);\n    resetActiveAndFocusedItem();\n  };\n\n  const onInputClick = () =&gt; {\n    if (!isOpen) {\n      setIsOpen(true);\n    } else if (!inputValue) {\n      closeMenu();\n    }\n  };\n\n  const onSelect = (value: string) =&gt; {\n    if (value) {\n      if (value === CREATE_NEW) {\n        if (!initialSelectOptions.some((item) =&gt; item.value === inputValue)) {\n          initialSelectOptions = [...initialSelectOptions, { value: inputValue, children: inputValue }];\n        }\n        setSelected(\n          selected.includes(inputValue)\n            ? selected.filter((selection) =&gt; selection !== inputValue)\n            : [...selected, inputValue]\n        );\n        setOnCreation(!onCreation);\n        resetActiveAndFocusedItem();\n      } else {\n        // eslint-disable-next-line no-console\n        console.log(&#39;selected&#39;, value);\n        setSelected(\n          selected.includes(value) ? selected.filter((selection) =&gt; selection !== value) : [...selected, value]\n        );\n      }\n    }\n\n    textInputRef.current?.focus();\n  };\n\n  const onTextInputChange = (_event: React.FormEvent&lt;HTMLInputElement&gt;, value: string) =&gt; {\n    setInputValue(value);\n    resetActiveAndFocusedItem();\n  };\n\n  const handleMenuArrowKeys = (key: string) =&gt; {\n    let indexToFocus = 0;\n\n    if (!isOpen) {\n      setIsOpen(true);\n    }\n\n    if (selectOptions.every((option) =&gt; option.isDisabled)) {\n      return;\n    }\n\n    if (key === &#39;ArrowUp&#39;) {\n      // When no index is set or at the first index, focus to the last, otherwise decrement focus index\n      if (focusedItemIndex === null || focusedItemIndex === 0) {\n        indexToFocus = selectOptions.length - 1;\n      } else {\n        indexToFocus = focusedItemIndex - 1;\n      }\n\n      // Skip disabled options\n      while (selectOptions[indexToFocus].isDisabled) {\n        indexToFocus--;\n        if (indexToFocus === -1) {\n          indexToFocus = selectOptions.length - 1;\n        }\n      }\n    }\n\n    if (key === &#39;ArrowDown&#39;) {\n      // When no index is set or at the last index, focus to the first, otherwise increment focus index\n      if (focusedItemIndex === null || focusedItemIndex === selectOptions.length - 1) {\n        indexToFocus = 0;\n      } else {\n        indexToFocus = focusedItemIndex + 1;\n      }\n\n      // Skip disabled options\n      while (selectOptions[indexToFocus].isDisabled) {\n        indexToFocus++;\n        if (indexToFocus === selectOptions.length) {\n          indexToFocus = 0;\n        }\n      }\n    }\n\n    setActiveAndFocusedItem(indexToFocus);\n  };\n\n  const onInputKeyDown = (event: React.KeyboardEvent&lt;HTMLInputElement&gt;) =&gt; {\n    const focusedItem = focusedItemIndex !== null ? selectOptions[focusedItemIndex] : null;\n\n    switch (event.key) {\n      case &#39;Enter&#39;:\n        if (isOpen &amp;&amp; focusedItem &amp;&amp; !focusedItem.isAriaDisabled) {\n          onSelect(focusedItem.value as string);\n        }\n\n        if (!isOpen) {\n          setIsOpen(true);\n        }\n\n        break;\n      case &#39;ArrowUp&#39;:\n      case &#39;ArrowDown&#39;:\n        event.preventDefault();\n        handleMenuArrowKeys(event.key);\n        break;\n    }\n  };\n\n  const onToggleClick = () =&gt; {\n    setIsOpen(!isOpen);\n    textInputRef?.current?.focus();\n  };\n\n  const onClearButtonClick = () =&gt; {\n    setSelected([]);\n    setInputValue(&#39;&#39;);\n    resetActiveAndFocusedItem();\n    textInputRef?.current?.focus();\n  };\n\n  const getChildren = (value: string) =&gt; initialSelectOptions.find((option) =&gt; option.value === value)?.children;\n\n  const toggle = (toggleRef: React.Ref&lt;MenuToggleElement&gt;) =&gt; (\n    &lt;MenuToggle\n      variant=\&quot;typeahead\&quot;\n      aria-label=\&quot;Multi typeahead creatable menu toggle\&quot;\n      onClick={onToggleClick}\n      innerRef={toggleRef}\n      isExpanded={isOpen}\n      isFullWidth\n    &gt;\n      &lt;TextInputGroup isPlain&gt;\n        &lt;TextInputGroupMain\n          value={inputValue}\n          onClick={onInputClick}\n          onChange={onTextInputChange}\n          onKeyDown={onInputKeyDown}\n          id=\&quot;multi-create-typeahead-select-input\&quot;\n          autoComplete=\&quot;off\&quot;\n          innerRef={textInputRef}\n          placeholder=\&quot;Select a state\&quot;\n          {...(activeItemId &amp;&amp; { &#39;aria-activedescendant&#39;: activeItemId })}\n          role=\&quot;combobox\&quot;\n          isExpanded={isOpen}\n          aria-controls=\&quot;select-multi-create-typeahead-listbox\&quot;\n        &gt;\n          &lt;LabelGroup aria-label=\&quot;Current selections\&quot;&gt;\n            {selected.map((selection, index) =&gt; (\n              &lt;Label\n                key={index}\n                variant=\&quot;outline\&quot;\n                onClose={(ev) =&gt; {\n                  ev.stopPropagation();\n                  onSelect(selection);\n                }}\n              &gt;\n                {getChildren(selection)}\n              &lt;/Label&gt;\n            ))}\n          &lt;/LabelGroup&gt;\n        &lt;/TextInputGroupMain&gt;\n        &lt;TextInputGroupUtilities {...(selected.length === 0 ? { style: { display: &#39;none&#39; } } : {})}&gt;\n          &lt;Button variant=\&quot;plain\&quot; onClick={onClearButtonClick} aria-label=\&quot;Clear input value\&quot; icon={&lt;TimesIcon /&gt;} /&gt;\n        &lt;/TextInputGroupUtilities&gt;\n      &lt;/TextInputGroup&gt;\n    &lt;/MenuToggle&gt;\n  );\n\n  return (\n    &lt;Select\n      id=\&quot;multi-create-typeahead-select\&quot;\n      isOpen={isOpen}\n      selected={selected}\n      onSelect={(_event, selection) =&gt; onSelect(selection as string)}\n      onOpenChange={(isOpen) =&gt; {\n        !isOpen &amp;&amp; closeMenu();\n      }}\n      toggle={toggle}\n      variant=\&quot;typeahead\&quot;\n    &gt;\n      &lt;SelectList isAriaMultiselectable id=\&quot;select-multi-create-typeahead-listbox\&quot;&gt;\n        {selectOptions.map((option, index) =&gt; (\n          &lt;SelectOption\n            key={option.value || option.children}\n            isFocused={focusedItemIndex === index}\n            className={option.className}\n            id={createItemId(option.value)}\n            {...option}\n            ref={null}\n          /&gt;\n        ))}\n      &lt;/SelectList&gt;\n    &lt;/Select&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-2703" data-pf-content="true" class="pf-v6-c-content--h3">Multiple typeahead with checkboxes</h3>
+<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2704" data-pf-content="true" class="pf-v6-c-content--p">By default, a multiple typeahead select allows you to select multiple menu items, placing a checkmark beside selected items. Like basic checkbox select menus, you can add checkboxes to your menu items. This approach may be more accurate and comprehensive for more complex menu scenarios like filtering.</p>
+<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2705" data-pf-content="true" class="pf-v6-c-content--p">By default, a multiple typeahead select allows you to select multiple menu items, placing a checkmark beside selected items. Like basic checkbox select menus, you can add checkboxes to your menu items. This approach may be more accurate and comprehensive for more complex menu scenarios like filtering.</p>
+<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2706" data-pf-content="true" class="pf-v6-c-content--p">By default, a multiple typeahead select allows you to select multiple menu items, placing a checkmark beside selected items. Like basic checkbox select menus, you can add checkboxes to your menu items. This approach may be more accurate and comprehensive for more complex menu scenarios like filtering.</p>
-<astro-island uid="sYXnJ" component-url="/_astro/LiveExample.B5R4Dzng.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;src&quot;:[0,&quot;import { useEffect, useRef, useState } from &#39;react&#39;;\nimport {\n  Select,\n  SelectOption,\n  SelectList,\n  SelectOptionProps,\n  MenuToggle,\n  MenuToggleElement,\n  TextInputGroup,\n  TextInputGroupMain,\n  TextInputGroupUtilities,\n  Button\n} from &#39;@patternfly/react-core&#39;;\nimport TimesIcon from &#39;@patternfly/react-icons/dist/esm/icons/times-icon&#39;;\n\nconst initialSelectOptions: SelectOptionProps[] = [\n  { value: &#39;Alabama&#39;, children: &#39;Alabama&#39; },\n  { value: &#39;Florida&#39;, children: &#39;Florida&#39; },\n  { value: &#39;New Jersey&#39;, children: &#39;New Jersey&#39; },\n  { value: &#39;New Mexico&#39;, children: &#39;New Mexico&#39; },\n  { value: &#39;New York&#39;, children: &#39;New York&#39; },\n  { value: &#39;North Carolina&#39;, children: &#39;North Carolina&#39; }\n];\n\nexport const SelectMultiTypeaheadCheckbox: React.FunctionComponent = () =&gt; {\n  const [isOpen, setIsOpen] = useState(false);\n  const [inputValue, setInputValue] = useState&lt;string&gt;(&#39;&#39;);\n  const [selected, setSelected] = useState&lt;string[]&gt;([]);\n  const [selectOptions, setSelectOptions] = useState&lt;SelectOptionProps[]&gt;(initialSelectOptions);\n  const [focusedItemIndex, setFocusedItemIndex] = useState&lt;number | null&gt;(null);\n  const [activeItemId, setActiveItemId] = useState&lt;string | null&gt;(null);\n  const [placeholder, setPlaceholder] = useState(&#39;0 items selected&#39;);\n  const textInputRef = useRef&lt;HTMLInputElement&gt;(undefined);\n\n  const NO_RESULTS = &#39;no results&#39;;\n\n  useEffect(() =&gt; {\n    let newSelectOptions: SelectOptionProps[] = initialSelectOptions;\n\n    // Filter menu items based on the text input value when one exists\n    if (inputValue) {\n      newSelectOptions = initialSelectOptions.filter((menuItem) =&gt;\n        String(menuItem.children).toLowerCase().includes(inputValue.toLowerCase())\n      );\n\n      // When no options are found after filtering, display &#39;No results found&#39;\n      if (!newSelectOptions.length) {\n        newSelectOptions = [\n          {\n            isAriaDisabled: true,\n            children: `No results found for \&quot;${inputValue}\&quot;`,\n            value: NO_RESULTS,\n            hasCheckbox: false\n          }\n        ];\n      }\n\n      // Open the menu when the input value changes and the new value is not empty\n      if (!isOpen) {\n        setIsOpen(true);\n      }\n    }\n\n    setSelectOptions(newSelectOptions);\n  }, [inputValue]);\n\n  useEffect(() =&gt; {\n    setPlaceholder(`${selected.length} item${selected.length !== 1 ? &#39;s&#39; : &#39;&#39;} selected`);\n  }, [selected]);\n\n  const createItemId = (value: any) =&gt; `select-multi-typeahead-${value.replace(&#39; &#39;, &#39;-&#39;)}`;\n\n  const setActiveAndFocusedItem = (itemIndex: number) =&gt; {\n    setFocusedItemIndex(itemIndex);\n    const focusedItem = selectOptions[itemIndex];\n    setActiveItemId(createItemId(focusedItem.value));\n  };\n\n  const resetActiveAndFocusedItem = () =&gt; {\n    setFocusedItemIndex(null);\n    setActiveItemId(null);\n  };\n\n  const closeMenu = () =&gt; {\n    setIsOpen(false);\n    resetActiveAndFocusedItem();\n  };\n\n  const onInputClick = () =&gt; {\n    if (!isOpen) {\n      setIsOpen(true);\n    } else if (!inputValue) {\n      closeMenu();\n    }\n  };\n\n  const handleMenuArrowKeys = (key: string) =&gt; {\n    let indexToFocus = 0;\n\n    if (!isOpen) {\n      setIsOpen(true);\n    }\n\n    if (selectOptions.every((option) =&gt; option.isDisabled)) {\n      return;\n    }\n\n    if (key === &#39;ArrowUp&#39;) {\n      // When no index is set or at the first index, focus to the last, otherwise decrement focus index\n      if (focusedItemIndex === null || focusedItemIndex === 0) {\n        indexToFocus = selectOptions.length - 1;\n      } else {\n        indexToFocus = focusedItemIndex - 1;\n      }\n\n      // Skip disabled options\n      while (selectOptions[indexToFocus].isDisabled) {\n        indexToFocus--;\n        if (indexToFocus === -1) {\n          indexToFocus = selectOptions.length - 1;\n        }\n      }\n    }\n\n    if (key === &#39;ArrowDown&#39;) {\n      // When no index is set or at the last index, focus to the first, otherwise increment focus index\n      if (focusedItemIndex === null || focusedItemIndex === selectOptions.length - 1) {\n        indexToFocus = 0;\n      } else {\n        indexToFocus = focusedItemIndex + 1;\n      }\n\n      // Skip disabled options\n      while (selectOptions[indexToFocus].isDisabled) {\n        indexToFocus++;\n        if (indexToFocus === selectOptions.length) {\n          indexToFocus = 0;\n        }\n      }\n    }\n\n    setActiveAndFocusedItem(indexToFocus);\n  };\n\n  const onInputKeyDown = (event: React.KeyboardEvent&lt;HTMLInputElement&gt;) =&gt; {\n    const focusedItem = focusedItemIndex !== null ? selectOptions[focusedItemIndex] : null;\n\n    switch (event.key) {\n      case &#39;Enter&#39;:\n        if (isOpen &amp;&amp; focusedItem &amp;&amp; focusedItem.value !== NO_RESULTS &amp;&amp; !focusedItem.isAriaDisabled) {\n          onSelect(focusedItem.value);\n        }\n\n        if (!isOpen) {\n          setIsOpen(true);\n        }\n\n        break;\n      case &#39;ArrowUp&#39;:\n      case &#39;ArrowDown&#39;:\n        event.preventDefault();\n        handleMenuArrowKeys(event.key);\n        break;\n    }\n  };\n\n  const onToggleClick = () =&gt; {\n    setIsOpen(!isOpen);\n    textInputRef?.current?.focus();\n  };\n\n  const onTextInputChange = (_event: React.FormEvent&lt;HTMLInputElement&gt;, value: string) =&gt; {\n    setInputValue(value);\n    resetActiveAndFocusedItem();\n  };\n\n  const onSelect = (value: string) =&gt; {\n    if (value &amp;&amp; value !== NO_RESULTS) {\n      // eslint-disable-next-line no-console\n      console.log(&#39;selected&#39;, value);\n\n      setSelected(\n        selected.includes(value) ? selected.filter((selection) =&gt; selection !== value) : [...selected, value]\n      );\n    }\n\n    textInputRef.current?.focus();\n  };\n\n  const onClearButtonClick = () =&gt; {\n    setSelected([]);\n    setInputValue(&#39;&#39;);\n    resetActiveAndFocusedItem();\n    textInputRef?.current?.focus();\n  };\n\n  const toggle = (toggleRef: React.Ref&lt;MenuToggleElement&gt;) =&gt; (\n    &lt;MenuToggle\n      variant=\&quot;typeahead\&quot;\n      aria-label=\&quot;Multi typeahead checkbox menu toggle\&quot;\n      onClick={onToggleClick}\n      innerRef={toggleRef}\n      isExpanded={isOpen}\n      isFullWidth\n    &gt;\n      &lt;TextInputGroup isPlain&gt;\n        &lt;TextInputGroupMain\n          value={inputValue}\n          onClick={onInputClick}\n          onChange={onTextInputChange}\n          onKeyDown={onInputKeyDown}\n          id=\&quot;multi-typeahead-select-checkbox-input\&quot;\n          autoComplete=\&quot;off\&quot;\n          innerRef={textInputRef}\n          placeholder={placeholder}\n          {...(activeItemId &amp;&amp; { &#39;aria-activedescendant&#39;: activeItemId })}\n          role=\&quot;combobox\&quot;\n          isExpanded={isOpen}\n          aria-controls=\&quot;select-multi-typeahead-checkbox-listbox\&quot;\n        /&gt;\n        &lt;TextInputGroupUtilities {...(selected.length === 0 ? { style: { display: &#39;none&#39; } } : {})}&gt;\n          &lt;Button variant=\&quot;plain\&quot; onClick={onClearButtonClick} aria-label=\&quot;Clear input value\&quot; icon={&lt;TimesIcon /&gt;} /&gt;\n        &lt;/TextInputGroupUtilities&gt;\n      &lt;/TextInputGroup&gt;\n    &lt;/MenuToggle&gt;\n  );\n\n  return (\n    &lt;Select\n      role=\&quot;menu\&quot;\n      id=\&quot;multi-typeahead-checkbox-select\&quot;\n      isOpen={isOpen}\n      selected={selected}\n      onSelect={(_event, selection) =&gt; onSelect(selection as string)}\n      onOpenChange={(isOpen) =&gt; {\n        !isOpen &amp;&amp; closeMenu();\n      }}\n      toggle={toggle}\n      variant=\&quot;typeahead\&quot;\n    &gt;\n      &lt;SelectList isAriaMultiselectable id=\&quot;select-multi-typeahead-checkbox-listbox\&quot;&gt;\n        {selectOptions.map((option, index) =&gt; (\n          &lt;SelectOption\n            {...(!option.isDisabled &amp;&amp; !option.isAriaDisabled &amp;&amp; { hasCheckbox: true })}\n            isSelected={selected.includes(option.value)}\n            key={option.value || option.children}\n            isFocused={focusedItemIndex === index}\n            className={option.className}\n            id={createItemId(option.value)}\n            {...option}\n            ref={null}\n          /&gt;\n        ))}\n      &lt;/SelectList&gt;\n    &lt;/Select&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-2673" data-pf-content="true" class="pf-v6-c-content--h3">With view more</h3>
-<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2674" data-pf-content="true" class="pf-v6-c-content--p">To reduce the processing load for long select lists, you can add a “View more” action to load additional items.</p>
-<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2675" data-pf-content="true" class="pf-v6-c-content--p">The following example shows 3 items before the “View more” link, but you can adjust the number of visible items for your use case.</p>
+<astro-island uid="sYXnJ" component-url="/_astro/LiveExample.C43dqXje.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;src&quot;:[0,&quot;import { useEffect, useRef, useState } from &#39;react&#39;;\nimport {\n  Select,\n  SelectOption,\n  SelectList,\n  SelectOptionProps,\n  MenuToggle,\n  MenuToggleElement,\n  TextInputGroup,\n  TextInputGroupMain,\n  TextInputGroupUtilities,\n  Button\n} from &#39;@patternfly/react-core&#39;;\nimport TimesIcon from &#39;@patternfly/react-icons/dist/esm/icons/times-icon&#39;;\n\nconst initialSelectOptions: SelectOptionProps[] = [\n  { value: &#39;Alabama&#39;, children: &#39;Alabama&#39; },\n  { value: &#39;Florida&#39;, children: &#39;Florida&#39; },\n  { value: &#39;New Jersey&#39;, children: &#39;New Jersey&#39; },\n  { value: &#39;New Mexico&#39;, children: &#39;New Mexico&#39; },\n  { value: &#39;New York&#39;, children: &#39;New York&#39; },\n  { value: &#39;North Carolina&#39;, children: &#39;North Carolina&#39; }\n];\n\nexport const SelectMultiTypeaheadCheckbox: React.FunctionComponent = () =&gt; {\n  const [isOpen, setIsOpen] = useState(false);\n  const [inputValue, setInputValue] = useState&lt;string&gt;(&#39;&#39;);\n  const [selected, setSelected] = useState&lt;string[]&gt;([]);\n  const [selectOptions, setSelectOptions] = useState&lt;SelectOptionProps[]&gt;(initialSelectOptions);\n  const [focusedItemIndex, setFocusedItemIndex] = useState&lt;number | null&gt;(null);\n  const [activeItemId, setActiveItemId] = useState&lt;string | null&gt;(null);\n  const [placeholder, setPlaceholder] = useState(&#39;0 items selected&#39;);\n  const textInputRef = useRef&lt;HTMLInputElement&gt;(undefined);\n\n  const NO_RESULTS = &#39;no results&#39;;\n\n  useEffect(() =&gt; {\n    let newSelectOptions: SelectOptionProps[] = initialSelectOptions;\n\n    // Filter menu items based on the text input value when one exists\n    if (inputValue) {\n      newSelectOptions = initialSelectOptions.filter((menuItem) =&gt;\n        String(menuItem.children).toLowerCase().includes(inputValue.toLowerCase())\n      );\n\n      // When no options are found after filtering, display &#39;No results found&#39;\n      if (!newSelectOptions.length) {\n        newSelectOptions = [\n          {\n            isAriaDisabled: true,\n            children: `No results found for \&quot;${inputValue}\&quot;`,\n            value: NO_RESULTS,\n            hasCheckbox: false\n          }\n        ];\n      }\n\n      // Open the menu when the input value changes and the new value is not empty\n      if (!isOpen) {\n        setIsOpen(true);\n      }\n    }\n\n    setSelectOptions(newSelectOptions);\n  }, [inputValue]);\n\n  useEffect(() =&gt; {\n    setPlaceholder(`${selected.length} item${selected.length !== 1 ? &#39;s&#39; : &#39;&#39;} selected`);\n  }, [selected]);\n\n  const createItemId = (value: any) =&gt; `select-multi-typeahead-${value.replace(&#39; &#39;, &#39;-&#39;)}`;\n\n  const setActiveAndFocusedItem = (itemIndex: number) =&gt; {\n    setFocusedItemIndex(itemIndex);\n    const focusedItem = selectOptions[itemIndex];\n    setActiveItemId(createItemId(focusedItem.value));\n  };\n\n  const resetActiveAndFocusedItem = () =&gt; {\n    setFocusedItemIndex(null);\n    setActiveItemId(null);\n  };\n\n  const closeMenu = () =&gt; {\n    setIsOpen(false);\n    resetActiveAndFocusedItem();\n  };\n\n  const onInputClick = () =&gt; {\n    if (!isOpen) {\n      setIsOpen(true);\n    } else if (!inputValue) {\n      closeMenu();\n    }\n  };\n\n  const handleMenuArrowKeys = (key: string) =&gt; {\n    let indexToFocus = 0;\n\n    if (!isOpen) {\n      setIsOpen(true);\n    }\n\n    if (selectOptions.every((option) =&gt; option.isDisabled)) {\n      return;\n    }\n\n    if (key === &#39;ArrowUp&#39;) {\n      // When no index is set or at the first index, focus to the last, otherwise decrement focus index\n      if (focusedItemIndex === null || focusedItemIndex === 0) {\n        indexToFocus = selectOptions.length - 1;\n      } else {\n        indexToFocus = focusedItemIndex - 1;\n      }\n\n      // Skip disabled options\n      while (selectOptions[indexToFocus].isDisabled) {\n        indexToFocus--;\n        if (indexToFocus === -1) {\n          indexToFocus = selectOptions.length - 1;\n        }\n      }\n    }\n\n    if (key === &#39;ArrowDown&#39;) {\n      // When no index is set or at the last index, focus to the first, otherwise increment focus index\n      if (focusedItemIndex === null || focusedItemIndex === selectOptions.length - 1) {\n        indexToFocus = 0;\n      } else {\n        indexToFocus = focusedItemIndex + 1;\n      }\n\n      // Skip disabled options\n      while (selectOptions[indexToFocus].isDisabled) {\n        indexToFocus++;\n        if (indexToFocus === selectOptions.length) {\n          indexToFocus = 0;\n        }\n      }\n    }\n\n    setActiveAndFocusedItem(indexToFocus);\n  };\n\n  const onInputKeyDown = (event: React.KeyboardEvent&lt;HTMLInputElement&gt;) =&gt; {\n    const focusedItem = focusedItemIndex !== null ? selectOptions[focusedItemIndex] : null;\n\n    switch (event.key) {\n      case &#39;Enter&#39;:\n        if (isOpen &amp;&amp; focusedItem &amp;&amp; focusedItem.value !== NO_RESULTS &amp;&amp; !focusedItem.isAriaDisabled) {\n          onSelect(focusedItem.value);\n        }\n\n        if (!isOpen) {\n          setIsOpen(true);\n        }\n\n        break;\n      case &#39;ArrowUp&#39;:\n      case &#39;ArrowDown&#39;:\n        event.preventDefault();\n        handleMenuArrowKeys(event.key);\n        break;\n    }\n  };\n\n  const onToggleClick = () =&gt; {\n    setIsOpen(!isOpen);\n    textInputRef?.current?.focus();\n  };\n\n  const onTextInputChange = (_event: React.FormEvent&lt;HTMLInputElement&gt;, value: string) =&gt; {\n    setInputValue(value);\n    resetActiveAndFocusedItem();\n  };\n\n  const onSelect = (value: string) =&gt; {\n    if (value &amp;&amp; value !== NO_RESULTS) {\n      // eslint-disable-next-line no-console\n      console.log(&#39;selected&#39;, value);\n\n      setSelected(\n        selected.includes(value) ? selected.filter((selection) =&gt; selection !== value) : [...selected, value]\n      );\n    }\n\n    textInputRef.current?.focus();\n  };\n\n  const onClearButtonClick = () =&gt; {\n    setSelected([]);\n    setInputValue(&#39;&#39;);\n    resetActiveAndFocusedItem();\n    textInputRef?.current?.focus();\n  };\n\n  const toggle = (toggleRef: React.Ref&lt;MenuToggleElement&gt;) =&gt; (\n    &lt;MenuToggle\n      variant=\&quot;typeahead\&quot;\n      aria-label=\&quot;Multi typeahead checkbox menu toggle\&quot;\n      onClick={onToggleClick}\n      innerRef={toggleRef}\n      isExpanded={isOpen}\n      isFullWidth\n    &gt;\n      &lt;TextInputGroup isPlain&gt;\n        &lt;TextInputGroupMain\n          value={inputValue}\n          onClick={onInputClick}\n          onChange={onTextInputChange}\n          onKeyDown={onInputKeyDown}\n          id=\&quot;multi-typeahead-select-checkbox-input\&quot;\n          autoComplete=\&quot;off\&quot;\n          innerRef={textInputRef}\n          placeholder={placeholder}\n          {...(activeItemId &amp;&amp; { &#39;aria-activedescendant&#39;: activeItemId })}\n          role=\&quot;combobox\&quot;\n          isExpanded={isOpen}\n          aria-controls=\&quot;select-multi-typeahead-checkbox-listbox\&quot;\n        /&gt;\n        &lt;TextInputGroupUtilities {...(selected.length === 0 ? { style: { display: &#39;none&#39; } } : {})}&gt;\n          &lt;Button variant=\&quot;plain\&quot; onClick={onClearButtonClick} aria-label=\&quot;Clear input value\&quot; icon={&lt;TimesIcon /&gt;} /&gt;\n        &lt;/TextInputGroupUtilities&gt;\n      &lt;/TextInputGroup&gt;\n    &lt;/MenuToggle&gt;\n  );\n\n  return (\n    &lt;Select\n      role=\&quot;menu\&quot;\n      id=\&quot;multi-typeahead-checkbox-select\&quot;\n      isOpen={isOpen}\n      selected={selected}\n      onSelect={(_event, selection) =&gt; onSelect(selection as string)}\n      onOpenChange={(isOpen) =&gt; {\n        !isOpen &amp;&amp; closeMenu();\n      }}\n      toggle={toggle}\n      variant=\&quot;typeahead\&quot;\n    &gt;\n      &lt;SelectList isAriaMultiselectable id=\&quot;select-multi-typeahead-checkbox-listbox\&quot;&gt;\n        {selectOptions.map((option, index) =&gt; (\n          &lt;SelectOption\n            {...(!option.isDisabled &amp;&amp; !option.isAriaDisabled &amp;&amp; { hasCheckbox: true })}\n            isSelected={selected.includes(option.value)}\n            key={option.value || option.children}\n            isFocused={focusedItemIndex === index}\n            className={option.className}\n            id={createItemId(option.value)}\n            {...option}\n            ref={null}\n          /&gt;\n        ))}\n      &lt;/SelectList&gt;\n    &lt;/Select&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-2707" data-pf-content="true" class="pf-v6-c-content--h3">With view more</h3>
+<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2708" data-pf-content="true" class="pf-v6-c-content--p">To reduce the processing load for long select lists, you can add a “View more” action to load additional items.</p>
+<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2709" data-pf-content="true" class="pf-v6-c-content--p">The following example shows 3 items before the “View more” link, but you can adjust the number of visible items for your use case.</p>
-<astro-island uid="1kNh5f" component-url="/_astro/LiveExample.B5R4Dzng.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;src&quot;:[0,&quot;import { useEffect, useRef, useState } from &#39;react&#39;;\nimport { Select, SelectOption, SelectList, MenuToggle, Spinner } from &#39;@patternfly/react-core&#39;;\n\nexport const SelectViewMore: React.FunctionComponent = () =&gt; {\n  const [isOpen, setIsOpen] = useState(false);\n  const [selected, setSelected] = useState&lt;string&gt;(&#39;Select a value&#39;);\n  const [activeItem, setActiveItem] = useState&lt;number | string&gt;(0);\n  const [isLoading, setIsLoading] = useState(false);\n  // eslint-disable-next-line @typescript-eslint/no-unused-vars\n  const [selectOptions, setSelectOptions] = useState([\n    &lt;SelectOption key={0} value=\&quot;Option 1\&quot;&gt;\n      Option 1\n    &lt;/SelectOption&gt;,\n    &lt;SelectOption key={1} value=\&quot;Option 2\&quot;&gt;\n      Option 2\n    &lt;/SelectOption&gt;,\n    &lt;SelectOption key={2} value=\&quot;Option 3\&quot;&gt;\n      Option 3\n    &lt;/SelectOption&gt;,\n    &lt;SelectOption key={3} value=\&quot;Option 4\&quot;&gt;\n      Option 4\n    &lt;/SelectOption&gt;,\n    &lt;SelectOption key={4} value=\&quot;Option 5\&quot;&gt;\n      Option 5\n    &lt;/SelectOption&gt;,\n    &lt;SelectOption key={5} value=\&quot;Option 6\&quot;&gt;\n      Option 6\n    &lt;/SelectOption&gt;,\n    &lt;SelectOption key={6} value=\&quot;Option 7\&quot;&gt;\n      Option 7\n    &lt;/SelectOption&gt;,\n    &lt;SelectOption key={7} value=\&quot;Option 8\&quot;&gt;\n      Option 8\n    &lt;/SelectOption&gt;,\n    &lt;SelectOption key={8} value=\&quot;Option 9\&quot;&gt;\n      Option 9\n    &lt;/SelectOption&gt;,\n    &lt;SelectOption key={9} value=\&quot;Final Option 10\&quot;&gt;\n      Final Option 10\n    &lt;/SelectOption&gt;\n  ]);\n  const [numOptions, setNumOptions] = useState(3);\n  const [visibleOptions, setVisibleOptions] = useState(selectOptions.slice(0, numOptions));\n  const activeItemRef = useRef&lt;HTMLElement&gt;(null);\n  const viewMoreRef = useRef&lt;HTMLLIElement&gt;(null);\n  const toggleRef = useRef&lt;HTMLButtonElement&gt;(null);\n\n  useEffect(() =&gt; {\n    activeItemRef.current?.focus();\n  }, [visibleOptions]);\n\n  const simulateNetworkCall = (networkCallback: () =&gt; void) =&gt; {\n    setTimeout(networkCallback, 2000);\n  };\n\n  const getNextValidItem = (startingIndex: number, maxLength: number) =&gt; {\n    let validItem;\n    for (let i = startingIndex; i &lt; maxLength; i++) {\n      if (selectOptions[i].props.isDisabled) {\n        continue;\n      } else {\n        validItem = selectOptions[i];\n        break;\n      }\n    }\n    return validItem;\n  };\n\n  const loadMoreOptions = () =&gt; {\n    const newLength = numOptions + 3 &lt;= selectOptions.length ? numOptions + 3 : selectOptions.length;\n    const prevPosition = numOptions;\n    const nextValidItem = getNextValidItem(prevPosition, newLength);\n\n    setNumOptions(newLength);\n    setIsLoading(false);\n    setActiveItem(nextValidItem.props.value);\n    setVisibleOptions(selectOptions.slice(0, newLength));\n  };\n\n  const onViewMoreClick = () =&gt; {\n    setIsLoading(true);\n    simulateNetworkCall(() =&gt; {\n      loadMoreOptions();\n    });\n  };\n\n  const onToggleClick = () =&gt; {\n    setIsOpen(!isOpen);\n  };\n\n  const onSelect = (_event: React.MouseEvent&lt;Element, MouseEvent&gt; | undefined, value: string | number | undefined) =&gt; {\n    // eslint-disable-next-line no-console\n    console.log(&#39;selected&#39;, value);\n\n    if (value !== &#39;loader&#39;) {\n      setSelected(value as string);\n      setIsOpen(false);\n      toggleRef?.current?.focus(); // Only focus the toggle when a non-loader option is selected\n    }\n  };\n\n  const toggle = (\n    &lt;MenuToggle\n      ref={toggleRef}\n      onClick={onToggleClick}\n      isExpanded={isOpen}\n      style={\n        {\n          width: &#39;200px&#39;\n        } as React.CSSProperties\n      }\n    &gt;\n      {selected}\n    &lt;/MenuToggle&gt;\n  );\n\n  return (\n    &lt;Select\n      id=\&quot;single-view-more-select\&quot;\n      isOpen={isOpen}\n      selected={selected}\n      onSelect={onSelect}\n      onOpenChange={(isOpen) =&gt; setIsOpen(isOpen)}\n      toggle={{ toggleNode: toggle, toggleRef }}\n    &gt;\n      &lt;SelectList&gt;\n        {visibleOptions.map((option) =&gt; {\n          const props = option.props;\n\n          return &lt;SelectOption key={option.key} ref={props.value === activeItem ? activeItemRef : null} {...props} /&gt;;\n        })}\n        {numOptions !== selectOptions.length &amp;&amp; (\n          &lt;SelectOption\n            {...(!isLoading &amp;&amp; { isLoadButton: true })}\n            {...(isLoading &amp;&amp; { isLoading: true })}\n            onClick={onViewMoreClick}\n            value=\&quot;loader\&quot;\n            ref={viewMoreRef}\n          &gt;\n            {isLoading ? &lt;Spinner size=\&quot;lg\&quot; /&gt; : &#39;View more&#39;}\n          &lt;/SelectOption&gt;\n        )}\n      &lt;/SelectList&gt;\n    &lt;/Select&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-2676" data-pf-content="true" class="pf-v6-c-content--h3">With a footer</h3>
-<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2691" data-pf-content="true" class="pf-v6-c-content--p">You can add a <code>&lt;MenuFooter&gt;</code> component to a select menu to hold additional actions that users can take on menu items, through elements such as link buttons. A footer will be placed beneath a divider at the end of the select menu.</p>
+<astro-island uid="1kNh5f" component-url="/_astro/LiveExample.C43dqXje.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;src&quot;:[0,&quot;import { useEffect, useRef, useState } from &#39;react&#39;;\nimport { Select, SelectOption, SelectList, MenuToggle, Spinner } from &#39;@patternfly/react-core&#39;;\n\nexport const SelectViewMore: React.FunctionComponent = () =&gt; {\n  const [isOpen, setIsOpen] = useState(false);\n  const [selected, setSelected] = useState&lt;string&gt;(&#39;Select a value&#39;);\n  const [activeItem, setActiveItem] = useState&lt;number | string&gt;(0);\n  const [isLoading, setIsLoading] = useState(false);\n  // eslint-disable-next-line @typescript-eslint/no-unused-vars\n  const [selectOptions, setSelectOptions] = useState([\n    &lt;SelectOption key={0} value=\&quot;Option 1\&quot;&gt;\n      Option 1\n    &lt;/SelectOption&gt;,\n    &lt;SelectOption key={1} value=\&quot;Option 2\&quot;&gt;\n      Option 2\n    &lt;/SelectOption&gt;,\n    &lt;SelectOption key={2} value=\&quot;Option 3\&quot;&gt;\n      Option 3\n    &lt;/SelectOption&gt;,\n    &lt;SelectOption key={3} value=\&quot;Option 4\&quot;&gt;\n      Option 4\n    &lt;/SelectOption&gt;,\n    &lt;SelectOption key={4} value=\&quot;Option 5\&quot;&gt;\n      Option 5\n    &lt;/SelectOption&gt;,\n    &lt;SelectOption key={5} value=\&quot;Option 6\&quot;&gt;\n      Option 6\n    &lt;/SelectOption&gt;,\n    &lt;SelectOption key={6} value=\&quot;Option 7\&quot;&gt;\n      Option 7\n    &lt;/SelectOption&gt;,\n    &lt;SelectOption key={7} value=\&quot;Option 8\&quot;&gt;\n      Option 8\n    &lt;/SelectOption&gt;,\n    &lt;SelectOption key={8} value=\&quot;Option 9\&quot;&gt;\n      Option 9\n    &lt;/SelectOption&gt;,\n    &lt;SelectOption key={9} value=\&quot;Final Option 10\&quot;&gt;\n      Final Option 10\n    &lt;/SelectOption&gt;\n  ]);\n  const [numOptions, setNumOptions] = useState(3);\n  const [visibleOptions, setVisibleOptions] = useState(selectOptions.slice(0, numOptions));\n  const activeItemRef = useRef&lt;HTMLElement&gt;(null);\n  const viewMoreRef = useRef&lt;HTMLLIElement&gt;(null);\n  const toggleRef = useRef&lt;HTMLButtonElement&gt;(null);\n\n  useEffect(() =&gt; {\n    activeItemRef.current?.focus();\n  }, [visibleOptions]);\n\n  const simulateNetworkCall = (networkCallback: () =&gt; void) =&gt; {\n    setTimeout(networkCallback, 2000);\n  };\n\n  const getNextValidItem = (startingIndex: number, maxLength: number) =&gt; {\n    let validItem;\n    for (let i = startingIndex; i &lt; maxLength; i++) {\n      if (selectOptions[i].props.isDisabled) {\n        continue;\n      } else {\n        validItem = selectOptions[i];\n        break;\n      }\n    }\n    return validItem;\n  };\n\n  const loadMoreOptions = () =&gt; {\n    const newLength = numOptions + 3 &lt;= selectOptions.length ? numOptions + 3 : selectOptions.length;\n    const prevPosition = numOptions;\n    const nextValidItem = getNextValidItem(prevPosition, newLength);\n\n    setNumOptions(newLength);\n    setIsLoading(false);\n    setActiveItem(nextValidItem.props.value);\n    setVisibleOptions(selectOptions.slice(0, newLength));\n  };\n\n  const onViewMoreClick = () =&gt; {\n    setIsLoading(true);\n    simulateNetworkCall(() =&gt; {\n      loadMoreOptions();\n    });\n  };\n\n  const onToggleClick = () =&gt; {\n    setIsOpen(!isOpen);\n  };\n\n  const onSelect = (_event: React.MouseEvent&lt;Element, MouseEvent&gt; | undefined, value: string | number | undefined) =&gt; {\n    // eslint-disable-next-line no-console\n    console.log(&#39;selected&#39;, value);\n\n    if (value !== &#39;loader&#39;) {\n      setSelected(value as string);\n      setIsOpen(false);\n      toggleRef?.current?.focus(); // Only focus the toggle when a non-loader option is selected\n    }\n  };\n\n  const toggle = (\n    &lt;MenuToggle\n      ref={toggleRef}\n      onClick={onToggleClick}\n      isExpanded={isOpen}\n      style={\n        {\n          width: &#39;200px&#39;\n        } as React.CSSProperties\n      }\n    &gt;\n      {selected}\n    &lt;/MenuToggle&gt;\n  );\n\n  return (\n    &lt;Select\n      id=\&quot;single-view-more-select\&quot;\n      isOpen={isOpen}\n      selected={selected}\n      onSelect={onSelect}\n      onOpenChange={(isOpen) =&gt; setIsOpen(isOpen)}\n      toggle={{ toggleNode: toggle, toggleRef }}\n    &gt;\n      &lt;SelectList&gt;\n        {visibleOptions.map((option) =&gt; {\n          const props = option.props;\n\n          return &lt;SelectOption key={option.key} ref={props.value === activeItem ? activeItemRef : null} {...props} /&gt;;\n        })}\n        {numOptions !== selectOptions.length &amp;&amp; (\n          &lt;SelectOption\n            {...(!isLoading &amp;&amp; { isLoadButton: true })}\n            {...(isLoading &amp;&amp; { isLoading: true })}\n            onClick={onViewMoreClick}\n            value=\&quot;loader\&quot;\n            ref={viewMoreRef}\n          &gt;\n            {isLoading ? &lt;Spinner size=\&quot;lg\&quot; /&gt; : &#39;View more&#39;}\n          &lt;/SelectOption&gt;\n        )}\n      &lt;/SelectList&gt;\n    &lt;/Select&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-2710" data-pf-content="true" class="pf-v6-c-content--h3">With a footer</h3>
+<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2725" data-pf-content="true" class="pf-v6-c-content--p">You can add a <code>&lt;MenuFooter&gt;</code> component to a select menu to hold additional actions that users can take on menu items, through elements such as link buttons. A footer will be placed beneath a divider at the end of the select menu.</p>
-<astro-island uid="Z1HVlnl" 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 { MenuToggle, MenuFooter, Select, SelectList, SelectOption, Button } from &#39;@patternfly/react-core&#39;;\n\nexport const SelectFooter: React.FunctionComponent = () =&gt; {\n  const [isOpen, setIsOpen] = useState&lt;boolean&gt;(false);\n  const [selected, setSelected] = useState&lt;string&gt;(&#39;Select a value&#39;);\n\n  const onToggleClick = () =&gt; {\n    setIsOpen(!isOpen);\n  };\n\n  const toggle = (toggleRef) =&gt; (\n    &lt;MenuToggle\n      ref={toggleRef}\n      onClick={onToggleClick}\n      isExpanded={isOpen}\n      style={\n        {\n          width: &#39;200px&#39;\n        } as React.CSSProperties\n      }\n    &gt;\n      {selected}\n    &lt;/MenuToggle&gt;\n  );\n\n  function onSelect(event: React.MouseEvent | undefined, value: string | number | undefined) {\n    if (typeof value === &#39;undefined&#39;) {\n      return;\n    }\n\n    setSelected(value.toString());\n  }\n\n  return (\n    &lt;Select\n      isOpen={isOpen}\n      onOpenChange={(isOpen) =&gt; setIsOpen(isOpen)}\n      onOpenChangeKeys={[&#39;Escape&#39;]}\n      toggle={toggle}\n      id=\&quot;menu-with-footer\&quot;\n      onSelect={onSelect}\n      selected={selected}\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;MenuFooter&gt;\n        &lt;Button variant=\&quot;link\&quot; isInline&gt;\n          Footer action\n        &lt;/Button&gt;\n      &lt;/MenuFooter&gt;\n    &lt;/Select&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="ZTSaXP" component-url="/_astro/PropsTables.YkW1puJk.js" component-export="PropsTables" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;propComponents&quot;:[1,[[0,&quot;Select&quot;],[0,&quot;SelectOption&quot;],[0,&quot;SelectGroup&quot;],[0,&quot;SelectList&quot;],[0,&quot;MenuToggle&quot;],[0,&quot;SelectToggleProps&quot;],[0,&quot;SelectPopperProps&quot;]]],&quot;url&quot;:[7,&quot;http://localhost:4321/components/select/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-2633" 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="Z1HVlnl" component-url="/_astro/LiveExample.C43dqXje.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;src&quot;:[0,&quot;import { useState } from &#39;react&#39;;\nimport { MenuToggle, MenuFooter, Select, SelectList, SelectOption, Button } from &#39;@patternfly/react-core&#39;;\n\nexport const SelectFooter: React.FunctionComponent = () =&gt; {\n  const [isOpen, setIsOpen] = useState&lt;boolean&gt;(false);\n  const [selected, setSelected] = useState&lt;string&gt;(&#39;Select a value&#39;);\n\n  const onToggleClick = () =&gt; {\n    setIsOpen(!isOpen);\n  };\n\n  const toggle = (toggleRef) =&gt; (\n    &lt;MenuToggle\n      ref={toggleRef}\n      onClick={onToggleClick}\n      isExpanded={isOpen}\n      style={\n        {\n          width: &#39;200px&#39;\n        } as React.CSSProperties\n      }\n    &gt;\n      {selected}\n    &lt;/MenuToggle&gt;\n  );\n\n  function onSelect(event: React.MouseEvent | undefined, value: string | number | undefined) {\n    if (typeof value === &#39;undefined&#39;) {\n      return;\n    }\n\n    setSelected(value.toString());\n  }\n\n  return (\n    &lt;Select\n      isOpen={isOpen}\n      onOpenChange={(isOpen) =&gt; setIsOpen(isOpen)}\n      onOpenChangeKeys={[&#39;Escape&#39;]}\n      toggle={toggle}\n      id=\&quot;menu-with-footer\&quot;\n      onSelect={onSelect}\n      selected={selected}\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;MenuFooter&gt;\n        &lt;Button variant=\&quot;link\&quot; isInline&gt;\n          Footer action\n        &lt;/Button&gt;\n      &lt;/MenuFooter&gt;\n    &lt;/Select&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="ZTSaXP" component-url="/_astro/PropsTables.YkW1puJk.js" component-export="PropsTables" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;propComponents&quot;:[1,[[0,&quot;Select&quot;],[0,&quot;SelectOption&quot;],[0,&quot;SelectGroup&quot;],[0,&quot;SelectList&quot;],[0,&quot;MenuToggle&quot;],[0,&quot;SelectToggleProps&quot;],[0,&quot;SelectPopperProps&quot;]]],&quot;url&quot;:[7,&quot;http://localhost:4321/components/select/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-2667" 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="eehAe" 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-select&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>