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

package/patternfly-docs/generated/components/menus/select/react.js

@@ -0,0 +1,998 @@
+import React from 'react';
+import { AutoLinkHeader, Example, Link as PatternflyThemeLink } from '@patternfly/documentation-framework/components';
+import { Fragment, useEffect, useRef, useState } from 'react';
+import RhMicronsCloseIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-close-icon';
+import RhUiNotificationFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-notification-fill-icon';
+const pageData = {
+  "id": "Select",
+  "section": "components",
+  "subsection": "menus",
+  "deprecated": false,
+  "template": false,
+  "beta": false,
+  "demo": false,
+  "newImplementationLink": false,
+  "source": "react",
+  "tabName": null,
+  "slug": "/components/menus/select/react",
+  "sourceLink": "https://github.com/patternfly/patternfly-react/blob/main/packages/react-core/src/components/Select/examples/Select.md",
+  "relPath": "packages/react-core/src/components/Select/examples/Select.md",
+  "propComponents": [
+    {
+      "name": "Select",
+      "description": "See the Menu documentation for additional props that may be passed.",
+      "props": [
+        {
+          "name": "activeItemId",
+          "type": "string | number",
+          "description": "itemId of the currently active item. You can also specify isActive on the MenuItem."
+        },
+        {
+          "name": "activeMenu",
+          "type": "string",
+          "description": "ID of the currently active menu for the drilldown variant"
+        },
+        {
+          "name": "children",
+          "type": "React.ReactNode",
+          "description": "Anything that can be rendered inside of the Menu"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "description": "Additional classes added to the Menu"
+        },
+        {
+          "name": "containsDrilldown",
+          "type": "boolean",
+          "description": "Indicates if menu contains a drilldown menu"
+        },
+        {
+          "name": "containsFlyout",
+          "type": "boolean",
+          "description": "Indicates if menu contains a flyout menu"
+        },
+        {
+          "name": "drilldownItemPath",
+          "type": "string[]",
+          "description": "Indicates the path of drilled in menu itemIds"
+        },
+        {
+          "name": "drilledInMenus",
+          "type": "string[]",
+          "description": "Array of menus that are drilled in"
+        },
+        {
+          "name": "focusTimeoutDelay",
+          "type": "number",
+          "description": "Time in ms to wait before firing the toggles' focus event. Defaults to 0"
+        },
+        {
+          "name": "id",
+          "type": "string",
+          "description": "ID of the menu"
+        },
+        {
+          "name": "isMenuDrilledIn",
+          "type": "boolean",
+          "description": "Indicates if a menu is drilled into"
+        },
+        {
+          "name": "isNavFlyout",
+          "type": "boolean",
+          "description": "Indicating that the menu should have nav flyout styling"
+        },
+        {
+          "name": "isOpen",
+          "type": "boolean",
+          "description": "Flag to indicate if select is open"
+        },
+        {
+          "name": "isPlain",
+          "type": "boolean",
+          "description": "Indicates if the menu should be without the outer box-shadow"
+        },
+        {
+          "name": "isRootMenu",
+          "type": "boolean",
+          "description": "Internal flag indicating if the Menu is the root of a menu tree"
+        },
+        {
+          "name": "isScrollable",
+          "type": "boolean",
+          "description": "Indicates if the menu should be srollable"
+        },
+        {
+          "name": "maxMenuHeight",
+          "type": "string",
+          "description": "Maximum height of select menu"
+        },
+        {
+          "name": "menuHeight",
+          "type": "string",
+          "description": "Height of the select menu"
+        },
+        {
+          "name": "onActionClick",
+          "type": "(event?: any, itemId?: any, actionId?: any) => void",
+          "description": "Callback called when an MenuItems's action button is clicked. You can also specify it within a MenuItemAction."
+        },
+        {
+          "name": "onDrillIn",
+          "type": "(\n  event: React.KeyboardEvent | React.MouseEvent,\n  fromItemId: string,\n  toItemId: string,\n  itemId: string\n) => void",
+          "description": "Callback for drilling into a submenu"
+        },
+        {
+          "name": "onDrillOut",
+          "type": "(event: React.KeyboardEvent | React.MouseEvent, toItemId: string, itemId: string) => void",
+          "description": "Callback for drilling out of a submenu"
+        },
+        {
+          "name": "onGetMenuHeight",
+          "type": "(menuId: string, height: number) => void",
+          "description": "Callback for collecting menu heights"
+        },
+        {
+          "name": "onOpenChange",
+          "type": "(isOpen: boolean) => void",
+          "description": "Callback to allow the select component to change the open state of the menu.\nTriggered by clicking outside of the menu, or by pressing any keys specified in onOpenChangeKeys."
+        },
+        {
+          "name": "onOpenChangeKeys",
+          "type": "string[]",
+          "description": "Keys that trigger onOpenChange, defaults to tab and escape. It is highly recommended to include Escape in the array, while Tab may be omitted if the menu contains non-menu items that are focusable."
+        },
+        {
+          "name": "onSelect",
+          "type": "(event?: React.MouseEvent<Element, MouseEvent>, value?: SelectOptionProps['value']) => void",
+          "description": "Callback for updating when item selection changes. You can also specify onClick on the MenuItem."
+        },
+        {
+          "name": "onToggleKeydown",
+          "type": "(event: KeyboardEvent) => void",
+          "description": "Callback to override the toggle keydown behavior. By default, when the toggle has focus and the menu is open, pressing the up/down arrow keys will focus a valid non-disabled menu item - the first item for the down arrow key and last item for the up arrow key."
+        },
+        {
+          "name": "ouiaId",
+          "type": "number | string",
+          "description": "Value to overwrite the randomly generated data-ouia-component-id."
+        },
+        {
+          "name": "ouiaSafe",
+          "type": "boolean",
+          "description": "Set the value of data-ouia-safe. Only set to true when the component is in a static state, i.e. no animations are occurring. At all other times, this value must be false."
+        },
+        {
+          "name": "parentMenu",
+          "type": "string",
+          "description": "ID of parent menu for drilldown menus"
+        },
+        {
+          "name": "popperProps",
+          "type": "PopperOptions",
+          "description": "Additional properties to pass to the popper"
+        },
+        {
+          "name": "role",
+          "type": "string",
+          "description": "Determines the accessible role of the menu. For a non-checkbox menu that can have\none or more items selected, pass in \"listbox\"."
+        },
+        {
+          "name": "selected",
+          "type": "any | any[]",
+          "description": "Single itemId for single select menus, or array of itemIds for multi select. You can also specify isSelected on the MenuItem."
+        },
+        {
+          "name": "shouldFocusFirstItemOnOpen",
+          "type": "boolean",
+          "description": "Flag indicating the first menu item should be focused after opening the menu.",
+          "beta": true
+        },
+        {
+          "name": "shouldFocusToggleOnSelect",
+          "type": "boolean",
+          "description": "Flag indicating the toggle should be focused after a selection. If this use case is too restrictive, the optional toggleRef property with a node toggle may be used to control focus."
+        },
+        {
+          "name": "shouldPreventScrollOnItemFocus",
+          "type": "boolean",
+          "description": "Flag indicating if scroll on focus of the first menu item should occur."
+        },
+        {
+          "name": "toggle",
+          "type": "SelectToggleProps | ((toggleRef: React.RefObject<any>) => React.ReactNode)",
+          "description": "Select toggle. The toggle should either be a renderer function which forwards the given toggle ref, or a direct ReactNode that should be passed along with the toggleRef property.",
+          "required": true
+        },
+        {
+          "name": "variant",
+          "type": "'default' | 'typeahead'",
+          "description": "Select variant. For typeahead variant focus won't shift to menu items when pressing up/down arrows."
+        },
+        {
+          "name": "zIndex",
+          "type": "number",
+          "description": "z-index of the select menu"
+        }
+      ]
+    },
+    {
+      "name": "SelectOption",
+      "description": "See the MenuItem section of the Menu documentation for additional props that may be passed.",
+      "props": [
+        {
+          "name": "children",
+          "type": "React.ReactNode",
+          "description": "Anything which can be rendered in a select option"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "description": "Classes applied to root element of select option"
+        },
+        {
+          "name": "description",
+          "type": "React.ReactNode",
+          "description": "Description of the option"
+        },
+        {
+          "name": "hasCheckbox",
+          "type": "boolean",
+          "description": "Indicates the option has a checkbox"
+        },
+        {
+          "name": "icon",
+          "type": "React.ReactNode",
+          "description": "Render option with icon"
+        },
+        {
+          "name": "isDisabled",
+          "type": "boolean",
+          "description": "Indicates the option is disabled"
+        },
+        {
+          "name": "isExternalLink",
+          "type": "boolean",
+          "description": "Render an external link icon on focus or hover, and set the link's\n\"target\" attribute to a value of \"_blank\"."
+        },
+        {
+          "name": "isFocused",
+          "type": "boolean",
+          "description": "Indicates the option is focused"
+        },
+        {
+          "name": "isSelected",
+          "type": "boolean",
+          "description": "Indicates the option is selected"
+        },
+        {
+          "name": "value",
+          "type": "any",
+          "description": "Identifies the component in the Select onSelect callback"
+        }
+      ]
+    },
+    {
+      "name": "SelectGroup",
+      "description": "See the MenuGroup section of the Menu documentation for additional props that may be passed.",
+      "props": [
+        {
+          "name": "children",
+          "type": "React.ReactNode",
+          "description": "Anything which can be rendered in a select group",
+          "required": true
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "description": "Classes applied to root element of select group"
+        },
+        {
+          "name": "label",
+          "type": "React.ReactNode",
+          "description": "Label of the select group"
+        }
+      ]
+    },
+    {
+      "name": "SelectList",
+      "description": "",
+      "props": [
+        {
+          "name": "aria-label",
+          "type": "string",
+          "description": "Adds an accessible name to the menu."
+        },
+        {
+          "name": "children",
+          "type": "React.ReactNode",
+          "description": "Anything that can be rendered inside of menu list",
+          "required": true
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "description": "Additional classes added to the menu list"
+        },
+        {
+          "name": "isAriaMultiselectable",
+          "type": "boolean",
+          "description": "Indicates to assistive technologies whether more than one item can be selected\nfor a non-checkbox menu. Only applies when the menu's role is \"listbox\".",
+          "defaultValue": "false"
+        }
+      ]
+    },
+    {
+      "name": "MenuToggle",
+      "description": "",
+      "props": [
+        {
+          "name": "badge",
+          "type": "BadgeProps | React.ReactNode",
+          "description": "Optional badge rendered inside the toggle, after the children content"
+        },
+        {
+          "name": "children",
+          "type": "React.ReactNode",
+          "description": "Content rendered inside the toggle"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "description": "Additional classes added to the toggle"
+        },
+        {
+          "name": "icon",
+          "type": "React.ReactNode",
+          "description": "Optional icon or image rendered inside the toggle, before the children content. It is\nrecommended to wrap most basic icons in our icon component."
+        },
+        {
+          "name": "isCircle",
+          "type": "boolean",
+          "description": "Flag indicating the toggle has circular styling. Can only be applied to plain toggles.",
+          "beta": true
+        },
+        {
+          "name": "isDisabled",
+          "type": "boolean",
+          "description": "Flag indicating the toggle is disabled"
+        },
+        {
+          "name": "isDocked",
+          "type": "boolean",
+          "description": "Flag indicating the menu toggle is a docked variant. For use in docked navigation.",
+          "beta": true
+        },
+        {
+          "name": "isExpanded",
+          "type": "boolean",
+          "description": "Flag indicating the toggle has expanded styling"
+        },
+        {
+          "name": "isFullHeight",
+          "type": "boolean",
+          "description": "Flag indicating the toggle is full height"
+        },
+        {
+          "name": "isFullWidth",
+          "type": "boolean",
+          "description": "Flag indicating the toggle takes up the full width of its parent"
+        },
+        {
+          "name": "isInForm",
+          "type": "boolean",
+          "description": "Flag indicating the toggle is placed inside a form",
+          "beta": true
+        },
+        {
+          "name": "isPlaceholder",
+          "type": "boolean",
+          "description": "Flag indicating the toggle contains placeholder text"
+        },
+        {
+          "name": "isSettings",
+          "type": "boolean",
+          "description": "Flag indicating whether the toggle is a settings toggle. This will override the icon property"
+        },
+        {
+          "name": "isTextExpanded",
+          "type": "boolean",
+          "description": "Flag indicating the docked toggle should display text. Only applies when isDocked is true.",
+          "beta": true
+        },
+        {
+          "name": "ouiaId",
+          "type": "number | string",
+          "description": "Value to overwrite the randomly generated data-ouia-component-id. It will always target the toggle button."
+        },
+        {
+          "name": "ouiaSafe",
+          "type": "boolean",
+          "description": "Set the value of data-ouia-safe. Only set to true when the component is in a static state, i.e. no animations are occurring. At all other times, this value must be false."
+        },
+        {
+          "name": "size",
+          "type": "'default' | 'sm'",
+          "description": "Adds styling which affects the size of the menu toggle"
+        },
+        {
+          "name": "splitButtonItems",
+          "type": "React.ReactNode[]",
+          "description": "Elements to display before the toggle button. When included, renders the menu toggle as a split button."
+        },
+        {
+          "name": "status",
+          "type": "'success' | 'warning' | 'danger'",
+          "description": "Status styles of the menu toggle"
+        },
+        {
+          "name": "statusIcon",
+          "type": "React.ReactNode",
+          "description": "Overrides the status icon"
+        },
+        {
+          "name": "variant",
+          "type": "'default' | 'plain' | 'primary' | 'plainText' | 'secondary' | 'typeahead'",
+          "description": "Variant styles of the menu toggle"
+        }
+      ]
+    },
+    {
+      "name": "SelectToggleProps",
+      "description": "",
+      "props": [
+        {
+          "name": "toggleNode",
+          "type": "React.ReactNode",
+          "description": "Select toggle node.",
+          "required": true
+        },
+        {
+          "name": "toggleRef",
+          "type": "React.RefObject<HTMLButtonElement | null>",
+          "description": "Reference to the toggle."
+        }
+      ]
+    },
+    {
+      "name": "PopperOptions",
+      "description": "Properties of Popper that can be used to customize its behavior.",
+      "props": [
+        {
+          "name": "animationDuration",
+          "type": "number",
+          "description": "The duration of the CSS fade transition animation."
+        },
+        {
+          "name": "appendTo",
+          "type": "HTMLElement | (() => HTMLElement) | 'inline'",
+          "description": "The container to append the popper to. Defaults to 'inline'."
+        },
+        {
+          "name": "direction",
+          "type": "'up' | 'down'",
+          "description": "popper direction"
+        },
+        {
+          "name": "distance",
+          "type": "number",
+          "description": "Distance of the popper to the trigger"
+        },
+        {
+          "name": "enableFlip",
+          "type": "boolean",
+          "description": "Enable to flip the popper when it reaches the boundary"
+        },
+        {
+          "name": "entryDelay",
+          "type": "number",
+          "description": "Delay in ms before the popper appears"
+        },
+        {
+          "name": "exitDelay",
+          "type": "number",
+          "description": "Delay in ms before the popper disappears"
+        },
+        {
+          "name": "flipBehavior",
+          "type": "| 'flip'\n    | (\n        | 'top'\n        | 'bottom'\n        | 'left'\n        | 'right'\n        | 'top-start'\n        | 'top-end'\n        | 'bottom-start'\n        | 'bottom-end'\n        | 'left-start'\n        | 'left-end'\n        | 'right-start'\n        | 'right-end'\n      )[]",
+          "description": "The behavior of how the popper flips when it reaches the boundary"
+        },
+        {
+          "name": "maxWidth",
+          "type": "string | 'trigger'",
+          "description": "Maximum width of the popper. If the value is \"trigger\", it will set the max width to the trigger element's width"
+        },
+        {
+          "name": "minWidth",
+          "type": "string | 'trigger'",
+          "description": "Minimum width of the popper. If the value is \"trigger\", it will set the min width to the trigger element's width"
+        },
+        {
+          "name": "offset",
+          "type": "OffsetOptions['offset']",
+          "description": "Override for the popper's offset"
+        },
+        {
+          "name": "onBlur",
+          "type": "(event?: FocusEvent) => void",
+          "description": "Callback function when trigger is blurred (focus leaves)"
+        },
+        {
+          "name": "onDocumentClick",
+          "type": "(event?: MouseEvent, triggerElement?: HTMLElement, popperElement?: HTMLElement) => void",
+          "description": "Callback function when document is clicked"
+        },
+        {
+          "name": "onDocumentKeyDown",
+          "type": "(event?: KeyboardEvent) => void",
+          "description": "Callback function when keydown event occurs on document"
+        },
+        {
+          "name": "onFocus",
+          "type": "(event?: FocusEvent) => void",
+          "description": "Callback function when trigger is focused"
+        },
+        {
+          "name": "onHidden",
+          "type": "() => void",
+          "description": "Callback when popper's hide transition has finished executing"
+        },
+        {
+          "name": "onHide",
+          "type": "() => void",
+          "description": "Lifecycle function invoked when the popper begins to transition out."
+        },
+        {
+          "name": "onMount",
+          "type": "() => void",
+          "description": "Lifecycle function invoked when the popper has been mounted to the DOM."
+        },
+        {
+          "name": "onMouseEnter",
+          "type": "(event?: MouseEvent) => void",
+          "description": "Callback function when mouse enters trigger"
+        },
+        {
+          "name": "onMouseLeave",
+          "type": "(event?: MouseEvent) => void",
+          "description": "Callback function when mouse leaves trigger"
+        },
+        {
+          "name": "onPopperClick",
+          "type": "(event?: MouseEvent) => void",
+          "description": "Callback function when popper is clicked"
+        },
+        {
+          "name": "onPopperMouseEnter",
+          "type": "(event?: MouseEvent) => void",
+          "description": "Callback function when mouse enters popper content"
+        },
+        {
+          "name": "onPopperMouseLeave",
+          "type": "(event?: MouseEvent) => void",
+          "description": "Callback function when mouse leaves popper content"
+        },
+        {
+          "name": "onShow",
+          "type": "() => void",
+          "description": "Lifecycle function invoked when the popper begins to transition in."
+        },
+        {
+          "name": "onShown",
+          "type": "() => void",
+          "description": "Lifecycle function invoked when the popper has fully transitioned in."
+        },
+        {
+          "name": "onTriggerClick",
+          "type": "(event?: MouseEvent) => void",
+          "description": "Callback function when trigger is clicked"
+        },
+        {
+          "name": "onTriggerEnter",
+          "type": "(event?: KeyboardEvent) => void",
+          "description": "Callback function when Enter key is used on trigger"
+        },
+        {
+          "name": "placement",
+          "type": "Placement",
+          "description": "Instead of direction and position can set the placement of the popper"
+        },
+        {
+          "name": "position",
+          "type": "'right' | 'left' | 'center' | 'start' | 'end'",
+          "description": "Horizontal position of the popper. Use the additional prop preventOverflow if seeing clipping."
+        },
+        {
+          "name": "positionModifiers",
+          "type": "{\n    top?: string;\n    right?: string;\n    bottom?: string;\n    left?: string;\n    topStart?: string;\n    topEnd?: string;\n    bottomStart?: string;\n    bottomEnd?: string;\n    leftStart?: string;\n    leftEnd?: string;\n    rightStart?: string;\n    rightEnd?: string;\n  }",
+          "description": "Map class names to positions, for example:\n{\n  top: styles.modifiers.top,\n  bottom: styles.modifiers.bottom,\n  left: styles.modifiers.left,\n  right: styles.modifiers.right\n}"
+        },
+        {
+          "name": "preventOverflow",
+          "type": "boolean",
+          "description": "Flag to prevent the popper from overflowing its container and becoming partially obscured."
+        },
+        {
+          "name": "width",
+          "type": "string | 'trigger'",
+          "description": "Custom width of the popper. If the value is \"trigger\", it will set the width to the trigger element's width"
+        },
+        {
+          "name": "zIndex",
+          "type": "number",
+          "description": "z-index of the popper element"
+        }
+      ]
+    }
+  ],
+  "cssPrefix": [
+    "pf-v6-c-select"
+  ],
+  "examples": [
+    "Single select",
+    "Select option variants",
+    "With grouped items",
+    "With validation",
+    "Checkbox select",
+    "Typeahead",
+    "Typeahead with create option",
+    "Multiple typeahead with labels",
+    "Multiple typeahead with create option",
+    "Multiple typeahead with checkboxes",
+    "With view more",
+    "With a footer"
+  ]
+};
+pageData.liveContext = {
+  Fragment,
+  useEffect,
+  useRef,
+  useState,
+  RhMicronsCloseIcon,
+  RhUiNotificationFillIcon
+};
+pageData.examples = {
+  'Single select': props => 
+    <Example {...pageData} {...props} {...{"code":"import { Fragment, useState } from 'react';\nimport { Select, SelectOption, SelectList, MenuToggle, MenuToggleElement, Checkbox } from '@patternfly/react-core';\n\nexport const SelectBasic: React.FunctionComponent = () => {\n  const [isOpen, setIsOpen] = useState(false);\n  const [selected, setSelected] = useState<string>('Select a value');\n  const [isDisabled, setIsDisabled] = useState<boolean>(false);\n\n  const onToggleClick = () => {\n    setIsOpen(!isOpen);\n  };\n\n  const onSelect = (_event: React.MouseEvent<Element, MouseEvent> | undefined, value: string | number | undefined) => {\n    // eslint-disable-next-line no-console\n    console.log('selected', value);\n\n    setSelected(value as string);\n    setIsOpen(false);\n  };\n\n  const toggle = (toggleRef: React.Ref<MenuToggleElement>) => (\n    <MenuToggle\n      ref={toggleRef}\n      onClick={onToggleClick}\n      isExpanded={isOpen}\n      isDisabled={isDisabled}\n      style={\n        {\n          width: '200px'\n        } as React.CSSProperties\n      }\n    >\n      {selected}\n    </MenuToggle>\n  );\n\n  return (\n    <Fragment>\n      <Checkbox\n        id=\"toggle-disabled\"\n        label=\"isDisabled\"\n        isChecked={isDisabled}\n        onChange={(_event, checked) => setIsDisabled(checked)}\n        style={{ marginBottom: 20 }}\n      />\n      <Select\n        id=\"single-select\"\n        isOpen={isOpen}\n        selected={selected}\n        onSelect={onSelect}\n        onOpenChange={(isOpen) => setIsOpen(isOpen)}\n        toggle={toggle}\n        shouldFocusToggleOnSelect\n      >\n        <SelectList>\n          <SelectOption value=\"Option 1\">Option 1</SelectOption>\n          <SelectOption value=\"Option 2\">Option 2</SelectOption>\n          <SelectOption value=\"Option 3\">Option 3</SelectOption>\n        </SelectList>\n      </Select>\n    </Fragment>\n  );\n};\n","title":"Single select","lang":"ts","className":""}}>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`To let users select a single item from a list, use a single select menu.`}
+      </p>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`You can add multiple `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`<SelectOption>`}
+        </code>
+        {` components to build out a list of menu items. For each select option, pass a relevant option label to the `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`value`}
+        </code>
+        {` property.`}
+      </p>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`To disable the select menu toggle, use the `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`isDisabled`}
+        </code>
+        {` property. In the following example, select the checkbox to observe this behavior.`}
+      </p>
+    </Example>,
+  'Select option variants': props => 
+    <Example {...pageData} {...props} {...{"code":"import { useState } from 'react';\nimport { Select, SelectOption, SelectList, MenuToggle, MenuToggleElement } from '@patternfly/react-core';\nimport RhUiNotificationFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-notification-fill-icon';\n\nexport const SelectOptionVariations: React.FunctionComponent = () => {\n  const [isOpen, setIsOpen] = useState(false);\n  const [selected, setSelected] = useState<string>('Select a value');\n\n  const onToggleClick = () => {\n    setIsOpen(!isOpen);\n  };\n\n  const onSelect = (_event: React.MouseEvent<Element, MouseEvent> | undefined, value: string | number | undefined) => {\n    // eslint-disable-next-line no-console\n    console.log('selected', value);\n\n    setSelected(value as string);\n    setIsOpen(false);\n  };\n\n  const toggle = (toggleRef: React.Ref<MenuToggleElement>) => (\n    <MenuToggle\n      ref={toggleRef}\n      onClick={onToggleClick}\n      isExpanded={isOpen}\n      style={\n        {\n          width: '200px'\n        } as React.CSSProperties\n      }\n    >\n      {selected}\n    </MenuToggle>\n  );\n\n  return (\n    <Select\n      id=\"option-variations-select\"\n      isOpen={isOpen}\n      selected={selected}\n      onSelect={onSelect}\n      onOpenChange={(isOpen) => setIsOpen(isOpen)}\n      toggle={toggle}\n      shouldFocusToggleOnSelect\n    >\n      <SelectList>\n        <SelectOption value=\"Basic option\">Basic option</SelectOption>\n        <SelectOption value=\"Option with description\" description=\"This is a description\">\n          Option with description\n        </SelectOption>\n        <SelectOption\n          to=\"#\"\n          // Prevent default clicking functionality for example purposes only\n          onClick={(event) => event.preventDefault()}\n          value=\"Option with link\"\n          isExternalLink\n        >\n          Option with link\n        </SelectOption>\n        <SelectOption value=\"Option with icon\" icon={<RhUiNotificationFillIcon />}>\n          Option with icon\n        </SelectOption>\n        <SelectOption value=\"Disabled option\" isDisabled>\n          Disabled option\n        </SelectOption>\n        <SelectOption value=\"See Menu for additional variations!\">See Menu for additional variations!</SelectOption>\n      </SelectList>\n    </Select>\n  );\n};\n","title":"Select option variants","lang":"ts","className":""}}>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`The following example showcases different option variants and customizations that are commonly used in a select menu.`}
+      </p>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`To create these variants, you can pass different properties into a `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`<SelectOption>`}
+        </code>
+        {` component.`}
+      </p>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`This example provides examples of:`}
+      </p>
+      
+      <ul {...{"className":"pf-v6-c-content--ul pf-m-editorial ws-ul "}}>
+        
+
+        
+        <li {...{"className":"pf-v6-c-content--li pf-m-editorial ws-li "}}>
+          {`An option with a description, which is created by using the `}
+          
+          <code {...{"className":"ws-code "}}>
+            {`description`}
+          </code>
+          {` property.`}
+        </li>
+        
+
+        
+        <li {...{"className":"pf-v6-c-content--li pf-m-editorial ws-li "}}>
+          {`An option with a link, which is created by passing a URL into the `}
+          
+          <code {...{"className":"ws-code "}}>
+            {`to`}
+          </code>
+          {` property. For external links, use the `}
+          
+          <code {...{"className":"ws-code "}}>
+            {`isExternalLink`}
+          </code>
+          {` property so that the option is styled with an outbound link icon.`}
+        </li>
+        
+
+        
+        <li {...{"className":"pf-v6-c-content--li pf-m-editorial ws-li "}}>
+          {`An option with an icon, which is created by using the `}
+          
+          <code {...{"className":"ws-code "}}>
+            {`icon`}
+          </code>
+          {` property.`}
+        </li>
+        
+
+        
+        <li {...{"className":"pf-v6-c-content--li pf-m-editorial ws-li "}}>
+          {`An option that is disabled by using the `}
+          
+          <code {...{"className":"ws-code "}}>
+            {`isDisabled`}
+          </code>
+          {` property.`}
+        </li>
+        
+
+      </ul>
+    </Example>,
+  'With grouped items': props => 
+    <Example {...pageData} {...props} {...{"code":"import { useState } from 'react';\nimport {\n  Select,\n  SelectOption,\n  SelectList,\n  SelectGroup,\n  MenuToggle,\n  MenuToggleElement,\n  Divider\n} from '@patternfly/react-core';\n\nexport const SelectGrouped: React.FunctionComponent = () => {\n  const [isOpen, setIsOpen] = useState(false);\n  const [selected, setSelected] = useState<string>('Select a value');\n\n  const onToggleClick = () => {\n    setIsOpen(!isOpen);\n  };\n\n  const onSelect = (_event: React.MouseEvent<Element, MouseEvent> | undefined, value: string | number | undefined) => {\n    // eslint-disable-next-line no-console\n    console.log('selected', value);\n\n    setSelected(value as string);\n    setIsOpen(false);\n  };\n\n  const toggle = (toggleRef: React.Ref<MenuToggleElement>) => (\n    <MenuToggle\n      ref={toggleRef}\n      onClick={onToggleClick}\n      isExpanded={isOpen}\n      style={\n        {\n          width: '200px'\n        } as React.CSSProperties\n      }\n    >\n      {selected}\n    </MenuToggle>\n  );\n\n  return (\n    <Select\n      id=\"single-grouped-select\"\n      isOpen={isOpen}\n      selected={selected}\n      onSelect={onSelect}\n      onOpenChange={(isOpen) => setIsOpen(isOpen)}\n      toggle={toggle}\n      shouldFocusToggleOnSelect\n    >\n      <SelectGroup label=\"Group 1\">\n        <SelectList>\n          <SelectOption value=\"Option 1\">Option 1</SelectOption>\n          <SelectOption value=\"Option 2\">Option 2</SelectOption>\n          <SelectOption value=\"Option 3\">Option 3</SelectOption>\n        </SelectList>\n      </SelectGroup>\n      <Divider />\n      <SelectGroup label=\"Group 2\">\n        <SelectList>\n          <SelectOption value=\"Option 4\">Option 4</SelectOption>\n          <SelectOption value=\"Option 5\">Option 5</SelectOption>\n          <SelectOption value=\"Option 6\">Option 6</SelectOption>\n        </SelectList>\n      </SelectGroup>\n    </Select>\n  );\n};\n","title":"With grouped items","lang":"ts","className":""}}>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`To group related select options together, use 1 or more `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`<SelectGroup>`}
+        </code>
+        {` components and title each group using the `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`label`}
+        </code>
+        {` property.`}
+      </p>
+    </Example>,
+  'With validation': props => 
+    <Example {...pageData} {...props} {...{"code":"import { Fragment, useState } from 'react';\nimport {\n  Select,\n  SelectOption,\n  SelectList,\n  MenuToggle,\n  MenuToggleElement,\n  MenuToggleStatus,\n  HelperText,\n  HelperTextItem\n} from '@patternfly/react-core';\n\nexport const SelectValidated: React.FunctionComponent = () => {\n  const [isOpen, setIsOpen] = useState(false);\n  const [selected, setSelected] = useState<string>('Select a value');\n  const [status, setStatus] = useState<MenuToggleStatus>();\n\n  const onToggleClick = () => {\n    setIsOpen(!isOpen);\n  };\n\n  const onSelect = (_event: React.MouseEvent<Element, MouseEvent> | undefined, value: string | number | undefined) => {\n    // eslint-disable-next-line no-console\n    console.log('selected', 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<MenuToggleElement>) => (\n    <MenuToggle\n      ref={toggleRef}\n      onClick={onToggleClick}\n      isExpanded={isOpen}\n      style={\n        {\n          width: '200px'\n        } as React.CSSProperties\n      }\n      status={status}\n    >\n      {selected}\n    </MenuToggle>\n  );\n\n  return (\n    <Fragment>\n      <Select\n        id=\"single-select\"\n        isOpen={isOpen}\n        selected={selected}\n        onSelect={onSelect}\n        onOpenChange={(isOpen) => setIsOpen(isOpen)}\n        toggle={toggle}\n        shouldFocusToggleOnSelect\n      >\n        <SelectList>\n          <SelectOption value=\"Success\">Success</SelectOption>\n          <SelectOption value=\"Warning\">Warning</SelectOption>\n          <SelectOption value=\"Danger\">Danger</SelectOption>\n        </SelectList>\n      </Select>\n      {(status === MenuToggleStatus.warning || status === MenuToggleStatus.danger) && (\n        <HelperText isLiveRegion>\n          <HelperTextItem variant={status === MenuToggleStatus.warning ? 'warning' : 'error'}>\n            {status === MenuToggleStatus.warning && 'Warning text that explains the issue.'}\n            {status === MenuToggleStatus.danger && 'Danger text that explains the issue.'}\n          </HelperTextItem>\n        </HelperText>\n      )}\n    </Fragment>\n  );\n};\n","title":"With validation","lang":"ts","className":""}}>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`To create a toggle with a status, pass in `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`status`}
+        </code>
+        {` to the `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`MenuToggle`}
+        </code>
+        {`. The default icon associated with each status may be overridden by using the `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`statusIcon`}
+        </code>
+        {` property.`}
+      </p>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`When the status value is "warning" or "danger", you must include helper text that conveys what is causing the warning/error.`}
+      </p>
+    </Example>,
+  'Checkbox select': props => 
+    <Example {...pageData} {...props} {...{"code":"import { useState } from 'react';\nimport { Select, SelectOption, SelectList, MenuToggle, MenuToggleElement, Badge } from '@patternfly/react-core';\n\nexport const SelectCheckbox: React.FunctionComponent = () => {\n  const [isOpen, setIsOpen] = useState(false);\n  const [selectedItems, setSelectedItems] = useState<number[]>([]);\n\n  const onToggleClick = () => {\n    setIsOpen(!isOpen);\n  };\n\n  const onSelect = (_event: React.MouseEvent<Element, MouseEvent> | undefined, value: string | number | undefined) => {\n    // eslint-disable-next-line no-console\n    console.log('selected', value);\n\n    if (selectedItems.includes(value as number)) {\n      setSelectedItems(selectedItems.filter((id) => id !== value));\n    } else {\n      setSelectedItems([...selectedItems, value as number]);\n    }\n  };\n\n  const toggle = (toggleRef: React.Ref<MenuToggleElement>) => (\n    <MenuToggle\n      ref={toggleRef}\n      onClick={onToggleClick}\n      isExpanded={isOpen}\n      style={\n        {\n          width: '200px'\n        } as React.CSSProperties\n      }\n    >\n      Filter by status\n      {selectedItems.length > 0 && <Badge isRead>{selectedItems.length}</Badge>}\n    </MenuToggle>\n  );\n\n  return (\n    <Select\n      role=\"menu\"\n      id=\"checkbox-select\"\n      isOpen={isOpen}\n      selected={selectedItems}\n      onSelect={onSelect}\n      onOpenChange={(nextOpen: boolean) => setIsOpen(nextOpen)}\n      toggle={toggle}\n    >\n      <SelectList>\n        <SelectOption hasCheckbox value={0} isSelected={selectedItems.includes(0)}>\n          Debug\n        </SelectOption>\n        <SelectOption hasCheckbox value={1} isSelected={selectedItems.includes(1)}>\n          Info\n        </SelectOption>\n        <SelectOption hasCheckbox value={2} isSelected={selectedItems.includes(2)}>\n          Warn\n        </SelectOption>\n        <SelectOption hasCheckbox isDisabled value={4} isSelected={selectedItems.includes(4)}>\n          Error\n        </SelectOption>\n      </SelectList>\n    </Select>\n  );\n};\n","title":"Checkbox select","lang":"ts","className":""}}>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`To let users select multiple list options via checkbox input, use a checkbox select.`}
+      </p>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`To create a checkbox select, pass `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`role="menu"`}
+        </code>
+        {` to the `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`<Select>`}
+        </code>
+        {`, and `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`hasCheckbox`}
+        </code>
+        {` into each `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`<SelectOption>`}
+        </code>
+        {` component. To indicate that an option is selected, use the `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`isSelected`}
+        </code>
+        {` property.`}
+      </p>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`By default, the menu toggle will display a badge to indicate the number of items that a user has selected.`}
+      </p>
+    </Example>,
+  'Typeahead': props => 
+    <Example {...pageData} {...props} {...{"code":"import { useEffect, useRef, useState } from 'react';\nimport {\n  Select,\n  SelectOption,\n  SelectList,\n  SelectOptionProps,\n  MenuToggle,\n  MenuToggleElement,\n  TextInputGroup,\n  TextInputGroupMain,\n  TextInputGroupUtilities,\n  Button\n} from '@patternfly/react-core';\nimport RhMicronsCloseIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-close-icon';\n\nconst initialSelectOptions: SelectOptionProps[] = [\n  { value: 'Alabama', children: 'Alabama' },\n  { value: 'Florida', children: 'Florida' },\n  { value: 'New Jersey', children: 'New Jersey' },\n  { value: 'New Mexico', children: 'New Mexico' },\n  { value: 'New York', children: 'New York' },\n  { value: 'North Carolina', children: 'North Carolina' }\n];\n\nexport const SelectTypeahead: React.FunctionComponent = () => {\n  const [isOpen, setIsOpen] = useState(false);\n  const [selected, setSelected] = useState<string>('');\n  const [inputValue, setInputValue] = useState<string>('');\n  const [filterValue, setFilterValue] = useState<string>('');\n  const [selectOptions, setSelectOptions] = useState<SelectOptionProps[]>(initialSelectOptions);\n  const [focusedItemIndex, setFocusedItemIndex] = useState<number | null>(null);\n  const [activeItemId, setActiveItemId] = useState<string | null>(null);\n  const textInputRef = useRef<HTMLInputElement>(undefined);\n\n  const NO_RESULTS = 'no results';\n\n  useEffect(() => {\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) =>\n        String(menuItem.children).toLowerCase().includes(filterValue.toLowerCase())\n      );\n\n      // When no options are found after filtering, display 'No results found'\n      if (!newSelectOptions.length) {\n        newSelectOptions = [\n          { isAriaDisabled: true, children: `No results found for \"${filterValue}\"`, 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) => `select-typeahead-${value.replace(' ', '-')}`;\n\n  const setActiveAndFocusedItem = (itemIndex: number) => {\n    setFocusedItemIndex(itemIndex);\n    const focusedItem = selectOptions[itemIndex];\n    setActiveItemId(createItemId(focusedItem.value));\n  };\n\n  const resetActiveAndFocusedItem = () => {\n    setFocusedItemIndex(null);\n    setActiveItemId(null);\n  };\n\n  const closeMenu = () => {\n    setIsOpen(false);\n    resetActiveAndFocusedItem();\n  };\n\n  const onInputClick = () => {\n    if (!isOpen) {\n      setIsOpen(true);\n    } else if (!inputValue) {\n      closeMenu();\n    }\n  };\n\n  const selectOption = (value: string | number, content: string | number) => {\n    // eslint-disable-next-line no-console\n    console.log('selected', content);\n\n    setInputValue(String(content));\n    setFilterValue('');\n    setSelected(String(value));\n\n    closeMenu();\n  };\n\n  const onSelect = (_event: React.MouseEvent<Element, MouseEvent> | undefined, value: string | number | undefined) => {\n    if (value && value !== NO_RESULTS) {\n      const optionText = selectOptions.find((option) => option.value === value)?.children;\n      selectOption(value, optionText as string);\n    }\n  };\n\n  const onTextInputChange = (_event: React.FormEvent<HTMLInputElement>, value: string) => {\n    setInputValue(value);\n    setFilterValue(value);\n\n    resetActiveAndFocusedItem();\n\n    if (value !== selected) {\n      setSelected('');\n    }\n  };\n\n  const handleMenuArrowKeys = (key: string) => {\n    let indexToFocus = 0;\n\n    if (!isOpen) {\n      setIsOpen(true);\n    }\n\n    if (selectOptions.every((option) => option.isDisabled)) {\n      return;\n    }\n\n    if (key === 'ArrowUp') {\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 === 'ArrowDown') {\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<HTMLInputElement>) => {\n    const focusedItem = focusedItemIndex !== null ? selectOptions[focusedItemIndex] : null;\n\n    switch (event.key) {\n      case 'Enter':\n        if (isOpen && focusedItem && focusedItem.value !== NO_RESULTS && !focusedItem.isAriaDisabled) {\n          selectOption(focusedItem.value, focusedItem.children as string);\n        }\n\n        if (!isOpen) {\n          setIsOpen(true);\n        }\n\n        break;\n      case 'ArrowUp':\n      case 'ArrowDown':\n        event.preventDefault();\n        handleMenuArrowKeys(event.key);\n        break;\n    }\n  };\n\n  const onToggleClick = () => {\n    setIsOpen(!isOpen);\n    textInputRef?.current?.focus();\n  };\n\n  const onClearButtonClick = () => {\n    setSelected('');\n    setInputValue('');\n    setFilterValue('');\n    resetActiveAndFocusedItem();\n    textInputRef?.current?.focus();\n  };\n\n  const toggle = (toggleRef: React.Ref<MenuToggleElement>) => (\n    <MenuToggle\n      ref={toggleRef}\n      variant=\"typeahead\"\n      aria-label=\"Typeahead menu toggle\"\n      onClick={onToggleClick}\n      isExpanded={isOpen}\n      isFullWidth\n    >\n      <TextInputGroup isPlain>\n        <TextInputGroupMain\n          value={inputValue}\n          onClick={onInputClick}\n          onChange={onTextInputChange}\n          onKeyDown={onInputKeyDown}\n          id=\"typeahead-select-input\"\n          autoComplete=\"off\"\n          innerRef={textInputRef}\n          placeholder=\"Select a state\"\n          {...(activeItemId && { 'aria-activedescendant': activeItemId })}\n          role=\"combobox\"\n          isExpanded={isOpen}\n          aria-controls=\"select-typeahead-listbox\"\n        />\n\n        <TextInputGroupUtilities {...(!inputValue ? { style: { display: 'none' } } : {})}>\n          <Button\n            variant=\"plain\"\n            onClick={onClearButtonClick}\n            aria-label=\"Clear input value\"\n            icon={<RhMicronsCloseIcon />}\n          />\n        </TextInputGroupUtilities>\n      </TextInputGroup>\n    </MenuToggle>\n  );\n\n  return (\n    <Select\n      id=\"typeahead-select\"\n      isOpen={isOpen}\n      selected={selected}\n      onSelect={onSelect}\n      onOpenChange={(isOpen) => {\n        !isOpen && closeMenu();\n      }}\n      toggle={toggle}\n      variant=\"typeahead\"\n    >\n      <SelectList id=\"select-typeahead-listbox\">\n        {selectOptions.map((option, index) => (\n          <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          />\n        ))}\n      </SelectList>\n    </Select>\n  );\n};\n","title":"Typeahead","lang":"ts","className":""}}>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-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 {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`To make a typeahead, pass `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`variant=typeahead`}
+        </code>
+        {` into the `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`<MenuToggle>`}
+        </code>
+        {` component and link an `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`onClick`}
+        </code>
+        {` function to the `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`<TextInputGroupMain>`}
+        </code>
+        {` component.`}
+      </p>
+    </Example>,
+  'Typeahead with create option': props => 
+    <Example {...pageData} {...props} {...{"code":"import { useEffect, useRef, useState } from 'react';\nimport {\n  Select,\n  SelectOption,\n  SelectList,\n  SelectOptionProps,\n  MenuToggle,\n  MenuToggleElement,\n  TextInputGroup,\n  TextInputGroupMain,\n  TextInputGroupUtilities,\n  Button\n} from '@patternfly/react-core';\nimport RhMicronsCloseIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-close-icon';\n\nlet initialSelectOptions: SelectOptionProps[] = [\n  { value: 'Alabama', children: 'Alabama' },\n  { value: 'Florida', children: 'Florida' },\n  { value: 'New Jersey', children: 'New Jersey' },\n  { value: 'New Mexico', children: 'New Mexico' },\n  { value: 'New York', children: 'New York' },\n  { value: 'North Carolina', children: 'North Carolina' }\n];\n\nexport const SelectTypeaheadCreatable: React.FunctionComponent = () => {\n  const [isOpen, setIsOpen] = useState(false);\n  const [selected, setSelected] = useState<string>('');\n  const [inputValue, setInputValue] = useState<string>('');\n  const [filterValue, setFilterValue] = useState<string>('');\n  const [selectOptions, setSelectOptions] = useState<SelectOptionProps[]>(initialSelectOptions);\n  const [focusedItemIndex, setFocusedItemIndex] = useState<number | null>(null);\n  const [activeItemId, setActiveItemId] = useState<string | null>(null);\n  const textInputRef = useRef<HTMLInputElement>(undefined);\n\n  const CREATE_NEW = 'create';\n\n  useEffect(() => {\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) =>\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) => option.value === filterValue)) {\n        newSelectOptions = [...newSelectOptions, { children: `Create new option \"${filterValue}\"`, 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) => `select-typeahead-${value.replace(' ', '-')}`;\n\n  const setActiveAndFocusedItem = (itemIndex: number) => {\n    setFocusedItemIndex(itemIndex);\n    const focusedItem = selectOptions[itemIndex];\n    setActiveItemId(createItemId(focusedItem.value));\n  };\n\n  const resetActiveAndFocusedItem = () => {\n    setFocusedItemIndex(null);\n    setActiveItemId(null);\n  };\n\n  const closeMenu = () => {\n    setIsOpen(false);\n    resetActiveAndFocusedItem();\n  };\n\n  const onInputClick = () => {\n    if (!isOpen) {\n      setIsOpen(true);\n    } else if (!inputValue) {\n      closeMenu();\n    }\n  };\n\n  const selectOption = (value: string | number, content: string | number) => {\n    // eslint-disable-next-line no-console\n    console.log('selected', content);\n\n    setInputValue(String(content));\n    setFilterValue('');\n    setSelected(String(value));\n\n    closeMenu();\n  };\n\n  const onSelect = (_event: React.MouseEvent<Element, MouseEvent> | undefined, value: string | number | undefined) => {\n    if (value) {\n      if (value === CREATE_NEW) {\n        if (!initialSelectOptions.some((item) => item.children === filterValue)) {\n          initialSelectOptions = [...initialSelectOptions, { value: filterValue, children: filterValue }];\n        }\n        setSelected(filterValue);\n        setFilterValue('');\n        closeMenu();\n      } else {\n        const optionText = selectOptions.find((option) => option.value === value)?.children;\n        selectOption(value, optionText as string);\n      }\n    }\n  };\n\n  const onTextInputChange = (_event: React.FormEvent<HTMLInputElement>, value: string) => {\n    setInputValue(value);\n    setFilterValue(value);\n\n    resetActiveAndFocusedItem();\n\n    if (value !== selected) {\n      setSelected('');\n    }\n  };\n\n  const handleMenuArrowKeys = (key: string) => {\n    let indexToFocus = 0;\n\n    if (!isOpen) {\n      setIsOpen(true);\n    }\n\n    if (selectOptions.every((option) => option.isDisabled)) {\n      return;\n    }\n\n    if (key === 'ArrowUp') {\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 === 'ArrowDown') {\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<HTMLInputElement>) => {\n    const focusedItem = focusedItemIndex !== null ? selectOptions[focusedItemIndex] : null;\n\n    switch (event.key) {\n      case 'Enter':\n        if (isOpen && focusedItem && !focusedItem.isAriaDisabled) {\n          onSelect(undefined, focusedItem.value as string);\n        }\n\n        if (!isOpen) {\n          setIsOpen(true);\n        }\n\n        break;\n      case 'ArrowUp':\n      case 'ArrowDown':\n        event.preventDefault();\n        handleMenuArrowKeys(event.key);\n        break;\n    }\n  };\n\n  const onToggleClick = () => {\n    setIsOpen(!isOpen);\n    textInputRef?.current?.focus();\n  };\n\n  const onClearButtonClick = () => {\n    setSelected('');\n    setInputValue('');\n    setFilterValue('');\n    resetActiveAndFocusedItem();\n    textInputRef?.current?.focus();\n  };\n\n  const toggle = (toggleRef: React.Ref<MenuToggleElement>) => (\n    <MenuToggle\n      ref={toggleRef}\n      variant=\"typeahead\"\n      aria-label=\"Typeahead creatable menu toggle\"\n      onClick={onToggleClick}\n      isExpanded={isOpen}\n      isFullWidth\n    >\n      <TextInputGroup isPlain>\n        <TextInputGroupMain\n          value={inputValue}\n          onClick={onInputClick}\n          onChange={onTextInputChange}\n          onKeyDown={onInputKeyDown}\n          id=\"create-typeahead-select-input\"\n          autoComplete=\"off\"\n          innerRef={textInputRef}\n          placeholder=\"Select a state\"\n          {...(activeItemId && { 'aria-activedescendant': activeItemId })}\n          role=\"combobox\"\n          isExpanded={isOpen}\n          aria-controls=\"select-create-typeahead-listbox\"\n        />\n\n        <TextInputGroupUtilities {...(!inputValue ? { style: { display: 'none' } } : {})}>\n          <Button\n            variant=\"plain\"\n            onClick={onClearButtonClick}\n            aria-label=\"Clear input value\"\n            icon={<RhMicronsCloseIcon />}\n          />\n        </TextInputGroupUtilities>\n      </TextInputGroup>\n    </MenuToggle>\n  );\n\n  return (\n    <Select\n      id=\"create-typeahead-select\"\n      isOpen={isOpen}\n      selected={selected}\n      onSelect={onSelect}\n      onOpenChange={(isOpen) => {\n        !isOpen && closeMenu();\n      }}\n      toggle={toggle}\n      variant=\"typeahead\"\n    >\n      <SelectList id=\"select-create-typeahead-listbox\">\n        {selectOptions.map((option, index) => (\n          <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          />\n        ))}\n      </SelectList>\n    </Select>\n  );\n};\n","title":"Typeahead with create option","lang":"ts","className":""}}>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-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 {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`To enable the creation ability, pass a predetermined `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`value`}
+        </code>
+        {` into a `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`<SelectOption>`}
+        </code>
+        {` component. You can use the `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`placeholder`}
+        </code>
+        {` property to change the default text shown in the text input.`}
+      </p>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`The following example outlines the code implementation required to create a working typeahead menu that allows for creation.`}
+      </p>
+    </Example>,
+  'Multiple typeahead with labels': props => 
+    <Example {...pageData} {...props} {...{"code":"import { useEffect, useRef, useState } from 'react';\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 '@patternfly/react-core';\nimport RhMicronsCloseIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-close-icon';\n\nconst initialSelectOptions: SelectOptionProps[] = [\n  { value: 'Alabama', children: 'Alabama' },\n  { value: 'Florida', children: 'Florida' },\n  { value: 'New Jersey', children: 'New Jersey' },\n  { value: 'New Mexico', children: 'New Mexico' },\n  { value: 'New York', children: 'New York' },\n  { value: 'North Carolina', children: 'North Carolina' }\n];\n\nexport const SelectMultiTypeahead: React.FunctionComponent = () => {\n  const [isOpen, setIsOpen] = useState(false);\n  const [inputValue, setInputValue] = useState<string>('');\n  const [selected, setSelected] = useState<string[]>([]);\n  const [selectOptions, setSelectOptions] = useState<SelectOptionProps[]>(initialSelectOptions);\n  const [focusedItemIndex, setFocusedItemIndex] = useState<number | null>(null);\n  const [activeItemId, setActiveItemId] = useState<string | null>(null);\n  const textInputRef = useRef<HTMLInputElement>(undefined);\n\n  const NO_RESULTS = 'no results';\n\n  useEffect(() => {\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) =>\n        String(menuItem.children).toLowerCase().includes(inputValue.toLowerCase())\n      );\n\n      // When no options are found after filtering, display 'No results found'\n      if (!newSelectOptions.length) {\n        newSelectOptions = [\n          { isAriaDisabled: true, children: `No results found for \"${inputValue}\"`, 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) => `select-multi-typeahead-${value.replace(' ', '-')}`;\n\n  const setActiveAndFocusedItem = (itemIndex: number) => {\n    setFocusedItemIndex(itemIndex);\n    const focusedItem = selectOptions[itemIndex];\n    setActiveItemId(createItemId(focusedItem.value));\n  };\n\n  const resetActiveAndFocusedItem = () => {\n    setFocusedItemIndex(null);\n    setActiveItemId(null);\n  };\n\n  const closeMenu = () => {\n    setIsOpen(false);\n    resetActiveAndFocusedItem();\n  };\n\n  const onInputClick = () => {\n    if (!isOpen) {\n      setIsOpen(true);\n    } else if (!inputValue) {\n      closeMenu();\n    }\n  };\n\n  const onSelect = (value: string) => {\n    if (value && value !== NO_RESULTS) {\n      // eslint-disable-next-line no-console\n      console.log('selected', value);\n\n      setSelected(\n        selected.includes(value) ? selected.filter((selection) => selection !== value) : [...selected, value]\n      );\n    }\n\n    textInputRef.current?.focus();\n  };\n\n  const onTextInputChange = (_event: React.FormEvent<HTMLInputElement>, value: string) => {\n    setInputValue(value);\n    resetActiveAndFocusedItem();\n  };\n\n  const handleMenuArrowKeys = (key: string) => {\n    let indexToFocus = 0;\n\n    if (!isOpen) {\n      setIsOpen(true);\n    }\n\n    if (selectOptions.every((option) => option.isDisabled)) {\n      return;\n    }\n\n    if (key === 'ArrowUp') {\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 === 'ArrowDown') {\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<HTMLInputElement>) => {\n    const focusedItem = focusedItemIndex !== null ? selectOptions[focusedItemIndex] : null;\n\n    switch (event.key) {\n      case 'Enter':\n        if (isOpen && focusedItem && focusedItem.value !== NO_RESULTS && !focusedItem.isAriaDisabled) {\n          onSelect(focusedItem.value);\n        }\n\n        if (!isOpen) {\n          setIsOpen(true);\n        }\n\n        break;\n      case 'ArrowUp':\n      case 'ArrowDown':\n        event.preventDefault();\n        handleMenuArrowKeys(event.key);\n        break;\n    }\n  };\n\n  const onToggleClick = () => {\n    setIsOpen(!isOpen);\n    textInputRef?.current?.focus();\n  };\n\n  const onClearButtonClick = () => {\n    setSelected([]);\n    setInputValue('');\n    resetActiveAndFocusedItem();\n    textInputRef?.current?.focus();\n  };\n\n  const toggle = (toggleRef: React.Ref<MenuToggleElement>) => (\n    <MenuToggle\n      variant=\"typeahead\"\n      aria-label=\"Multi typeahead menu toggle\"\n      onClick={onToggleClick}\n      innerRef={toggleRef}\n      isExpanded={isOpen}\n      isFullWidth\n    >\n      <TextInputGroup isPlain>\n        <TextInputGroupMain\n          value={inputValue}\n          onClick={onInputClick}\n          onChange={onTextInputChange}\n          onKeyDown={onInputKeyDown}\n          id=\"multi-typeahead-select-input\"\n          autoComplete=\"off\"\n          innerRef={textInputRef}\n          placeholder=\"Select a state\"\n          {...(activeItemId && { 'aria-activedescendant': activeItemId })}\n          role=\"combobox\"\n          isExpanded={isOpen}\n          aria-controls=\"select-multi-typeahead-listbox\"\n        >\n          <LabelGroup aria-label=\"Current selections\">\n            {selected.map((selection, index) => (\n              <Label\n                key={index}\n                variant=\"outline\"\n                onClose={(ev) => {\n                  ev.stopPropagation();\n                  onSelect(selection);\n                }}\n              >\n                {selection}\n              </Label>\n            ))}\n          </LabelGroup>\n        </TextInputGroupMain>\n        <TextInputGroupUtilities {...(selected.length === 0 ? { style: { display: 'none' } } : {})}>\n          <Button\n            variant=\"plain\"\n            onClick={onClearButtonClick}\n            aria-label=\"Clear input value\"\n            icon={<RhMicronsCloseIcon />}\n          />\n        </TextInputGroupUtilities>\n      </TextInputGroup>\n    </MenuToggle>\n  );\n\n  return (\n    <Select\n      id=\"multi-typeahead-select\"\n      isOpen={isOpen}\n      selected={selected}\n      onSelect={(_event, selection) => onSelect(selection as string)}\n      onOpenChange={(isOpen) => {\n        !isOpen && closeMenu();\n      }}\n      toggle={toggle}\n      variant=\"typeahead\"\n    >\n      <SelectList isAriaMultiselectable id=\"select-multi-typeahead-listbox\">\n        {selectOptions.map((option, index) => (\n          <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          />\n        ))}\n      </SelectList>\n    </Select>\n  );\n};\n","title":"Multiple typeahead with labels","lang":"ts","className":""}}>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`A multiple typeahead can be used to allow users to select multiple options from a list. Additionally, you can render a label group to be placed in the select toggle.`}
+      </p>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-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>
+    </Example>,
+  'Multiple typeahead with create option': props => 
+    <Example {...pageData} {...props} {...{"code":"import { useEffect, useRef, useState } from 'react';\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 '@patternfly/react-core';\nimport RhMicronsCloseIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-close-icon';\n\nlet initialSelectOptions: SelectOptionProps[] = [\n  { value: 'Alabama', children: 'Alabama' },\n  { value: 'Florida', children: 'Florida' },\n  { value: 'New Jersey', children: 'New Jersey' },\n  { value: 'New Mexico', children: 'New Mexico' },\n  { value: 'New York', children: 'New York' },\n  { value: 'North Carolina', children: 'North Carolina' }\n];\n\nexport const SelectMultiTypeaheadCreatable: React.FunctionComponent = () => {\n  const [isOpen, setIsOpen] = useState(false);\n  const [inputValue, setInputValue] = useState<string>('');\n  const [selected, setSelected] = useState<string[]>([]);\n  const [selectOptions, setSelectOptions] = useState<SelectOptionProps[]>(initialSelectOptions);\n  const [focusedItemIndex, setFocusedItemIndex] = useState<number | null>(null);\n  const [activeItemId, setActiveItemId] = useState<string | null>(null);\n  const [onCreation, setOnCreation] = useState<boolean>(false); // Boolean to refresh filter state after new option is created\n  const textInputRef = useRef<HTMLInputElement>(undefined);\n\n  const CREATE_NEW = 'create';\n\n  useEffect(() => {\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) =>\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) => option.value === inputValue)) {\n        newSelectOptions = [...newSelectOptions, { children: `Create new option \"${inputValue}\"`, 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) => `select-multi-create-typeahead-${value.replace(' ', '-')}`;\n\n  const setActiveAndFocusedItem = (itemIndex: number) => {\n    setFocusedItemIndex(itemIndex);\n    const focusedItem = selectOptions[itemIndex];\n    setActiveItemId(createItemId(focusedItem.value));\n  };\n\n  const resetActiveAndFocusedItem = () => {\n    setFocusedItemIndex(null);\n    setActiveItemId(null);\n  };\n\n  const closeMenu = () => {\n    setIsOpen(false);\n    resetActiveAndFocusedItem();\n  };\n\n  const onInputClick = () => {\n    if (!isOpen) {\n      setIsOpen(true);\n    } else if (!inputValue) {\n      closeMenu();\n    }\n  };\n\n  const onSelect = (value: string) => {\n    if (value) {\n      if (value === CREATE_NEW) {\n        if (!initialSelectOptions.some((item) => item.value === inputValue)) {\n          initialSelectOptions = [...initialSelectOptions, { value: inputValue, children: inputValue }];\n        }\n        setSelected(\n          selected.includes(inputValue)\n            ? selected.filter((selection) => selection !== inputValue)\n            : [...selected, inputValue]\n        );\n        setOnCreation(!onCreation);\n        resetActiveAndFocusedItem();\n      } else {\n        // eslint-disable-next-line no-console\n        console.log('selected', value);\n        setSelected(\n          selected.includes(value) ? selected.filter((selection) => selection !== value) : [...selected, value]\n        );\n      }\n    }\n\n    textInputRef.current?.focus();\n  };\n\n  const onTextInputChange = (_event: React.FormEvent<HTMLInputElement>, value: string) => {\n    setInputValue(value);\n    resetActiveAndFocusedItem();\n  };\n\n  const handleMenuArrowKeys = (key: string) => {\n    let indexToFocus = 0;\n\n    if (!isOpen) {\n      setIsOpen(true);\n    }\n\n    if (selectOptions.every((option) => option.isDisabled)) {\n      return;\n    }\n\n    if (key === 'ArrowUp') {\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 === 'ArrowDown') {\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<HTMLInputElement>) => {\n    const focusedItem = focusedItemIndex !== null ? selectOptions[focusedItemIndex] : null;\n\n    switch (event.key) {\n      case 'Enter':\n        if (isOpen && focusedItem && !focusedItem.isAriaDisabled) {\n          onSelect(focusedItem.value as string);\n        }\n\n        if (!isOpen) {\n          setIsOpen(true);\n        }\n\n        break;\n      case 'ArrowUp':\n      case 'ArrowDown':\n        event.preventDefault();\n        handleMenuArrowKeys(event.key);\n        break;\n    }\n  };\n\n  const onToggleClick = () => {\n    setIsOpen(!isOpen);\n    textInputRef?.current?.focus();\n  };\n\n  const onClearButtonClick = () => {\n    setSelected([]);\n    setInputValue('');\n    resetActiveAndFocusedItem();\n    textInputRef?.current?.focus();\n  };\n\n  const getChildren = (value: string) => initialSelectOptions.find((option) => option.value === value)?.children;\n\n  const toggle = (toggleRef: React.Ref<MenuToggleElement>) => (\n    <MenuToggle\n      variant=\"typeahead\"\n      aria-label=\"Multi typeahead creatable menu toggle\"\n      onClick={onToggleClick}\n      innerRef={toggleRef}\n      isExpanded={isOpen}\n      isFullWidth\n    >\n      <TextInputGroup isPlain>\n        <TextInputGroupMain\n          value={inputValue}\n          onClick={onInputClick}\n          onChange={onTextInputChange}\n          onKeyDown={onInputKeyDown}\n          id=\"multi-create-typeahead-select-input\"\n          autoComplete=\"off\"\n          innerRef={textInputRef}\n          placeholder=\"Select a state\"\n          {...(activeItemId && { 'aria-activedescendant': activeItemId })}\n          role=\"combobox\"\n          isExpanded={isOpen}\n          aria-controls=\"select-multi-create-typeahead-listbox\"\n        >\n          <LabelGroup aria-label=\"Current selections\">\n            {selected.map((selection, index) => (\n              <Label\n                key={index}\n                variant=\"outline\"\n                onClose={(ev) => {\n                  ev.stopPropagation();\n                  onSelect(selection);\n                }}\n              >\n                {getChildren(selection)}\n              </Label>\n            ))}\n          </LabelGroup>\n        </TextInputGroupMain>\n        <TextInputGroupUtilities {...(selected.length === 0 ? { style: { display: 'none' } } : {})}>\n          <Button\n            variant=\"plain\"\n            onClick={onClearButtonClick}\n            aria-label=\"Clear input value\"\n            icon={<RhMicronsCloseIcon />}\n          />\n        </TextInputGroupUtilities>\n      </TextInputGroup>\n    </MenuToggle>\n  );\n\n  return (\n    <Select\n      id=\"multi-create-typeahead-select\"\n      isOpen={isOpen}\n      selected={selected}\n      onSelect={(_event, selection) => onSelect(selection as string)}\n      onOpenChange={(isOpen) => {\n        !isOpen && closeMenu();\n      }}\n      toggle={toggle}\n      variant=\"typeahead\"\n    >\n      <SelectList isAriaMultiselectable id=\"select-multi-create-typeahead-listbox\">\n        {selectOptions.map((option, index) => (\n          <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          />\n        ))}\n      </SelectList>\n    </Select>\n  );\n};\n","title":"Multiple typeahead with create option","lang":"ts","className":""}}>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-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 label group to display created items as labels.`}
+      </p>
+    </Example>,
+  'Multiple typeahead with checkboxes': props => 
+    <Example {...pageData} {...props} {...{"code":"import { useEffect, useRef, useState } from 'react';\nimport {\n  Select,\n  SelectOption,\n  SelectList,\n  SelectOptionProps,\n  MenuToggle,\n  MenuToggleElement,\n  TextInputGroup,\n  TextInputGroupMain,\n  TextInputGroupUtilities,\n  Button\n} from '@patternfly/react-core';\nimport RhMicronsCloseIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-close-icon';\n\nconst initialSelectOptions: SelectOptionProps[] = [\n  { value: 'Alabama', children: 'Alabama' },\n  { value: 'Florida', children: 'Florida' },\n  { value: 'New Jersey', children: 'New Jersey' },\n  { value: 'New Mexico', children: 'New Mexico' },\n  { value: 'New York', children: 'New York' },\n  { value: 'North Carolina', children: 'North Carolina' }\n];\n\nexport const SelectMultiTypeaheadCheckbox: React.FunctionComponent = () => {\n  const [isOpen, setIsOpen] = useState(false);\n  const [inputValue, setInputValue] = useState<string>('');\n  const [selected, setSelected] = useState<string[]>([]);\n  const [selectOptions, setSelectOptions] = useState<SelectOptionProps[]>(initialSelectOptions);\n  const [focusedItemIndex, setFocusedItemIndex] = useState<number | null>(null);\n  const [activeItemId, setActiveItemId] = useState<string | null>(null);\n  const [placeholder, setPlaceholder] = useState('0 items selected');\n  const textInputRef = useRef<HTMLInputElement>(undefined);\n\n  const NO_RESULTS = 'no results';\n\n  useEffect(() => {\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) =>\n        String(menuItem.children).toLowerCase().includes(inputValue.toLowerCase())\n      );\n\n      // When no options are found after filtering, display 'No results found'\n      if (!newSelectOptions.length) {\n        newSelectOptions = [\n          {\n            isAriaDisabled: true,\n            children: `No results found for \"${inputValue}\"`,\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(() => {\n    setPlaceholder(`${selected.length} item${selected.length !== 1 ? 's' : ''} selected`);\n  }, [selected]);\n\n  const createItemId = (value: any) => `select-multi-typeahead-${value.replace(' ', '-')}`;\n\n  const setActiveAndFocusedItem = (itemIndex: number) => {\n    setFocusedItemIndex(itemIndex);\n    const focusedItem = selectOptions[itemIndex];\n    setActiveItemId(createItemId(focusedItem.value));\n  };\n\n  const resetActiveAndFocusedItem = () => {\n    setFocusedItemIndex(null);\n    setActiveItemId(null);\n  };\n\n  const closeMenu = () => {\n    setIsOpen(false);\n    resetActiveAndFocusedItem();\n  };\n\n  const onInputClick = () => {\n    if (!isOpen) {\n      setIsOpen(true);\n    } else if (!inputValue) {\n      closeMenu();\n    }\n  };\n\n  const handleMenuArrowKeys = (key: string) => {\n    let indexToFocus = 0;\n\n    if (!isOpen) {\n      setIsOpen(true);\n    }\n\n    if (selectOptions.every((option) => option.isDisabled)) {\n      return;\n    }\n\n    if (key === 'ArrowUp') {\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 === 'ArrowDown') {\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<HTMLInputElement>) => {\n    const focusedItem = focusedItemIndex !== null ? selectOptions[focusedItemIndex] : null;\n\n    switch (event.key) {\n      case 'Enter':\n        if (isOpen && focusedItem && focusedItem.value !== NO_RESULTS && !focusedItem.isAriaDisabled) {\n          onSelect(focusedItem.value);\n        }\n\n        if (!isOpen) {\n          setIsOpen(true);\n        }\n\n        break;\n      case 'ArrowUp':\n      case 'ArrowDown':\n        event.preventDefault();\n        handleMenuArrowKeys(event.key);\n        break;\n    }\n  };\n\n  const onToggleClick = () => {\n    setIsOpen(!isOpen);\n    textInputRef?.current?.focus();\n  };\n\n  const onTextInputChange = (_event: React.FormEvent<HTMLInputElement>, value: string) => {\n    setInputValue(value);\n    resetActiveAndFocusedItem();\n  };\n\n  const onSelect = (value: string) => {\n    if (value && value !== NO_RESULTS) {\n      // eslint-disable-next-line no-console\n      console.log('selected', value);\n\n      setSelected(\n        selected.includes(value) ? selected.filter((selection) => selection !== value) : [...selected, value]\n      );\n    }\n\n    textInputRef.current?.focus();\n  };\n\n  const onClearButtonClick = () => {\n    setSelected([]);\n    setInputValue('');\n    resetActiveAndFocusedItem();\n    textInputRef?.current?.focus();\n  };\n\n  const toggle = (toggleRef: React.Ref<MenuToggleElement>) => (\n    <MenuToggle\n      variant=\"typeahead\"\n      aria-label=\"Multi typeahead checkbox menu toggle\"\n      onClick={onToggleClick}\n      innerRef={toggleRef}\n      isExpanded={isOpen}\n      isFullWidth\n    >\n      <TextInputGroup isPlain>\n        <TextInputGroupMain\n          value={inputValue}\n          onClick={onInputClick}\n          onChange={onTextInputChange}\n          onKeyDown={onInputKeyDown}\n          id=\"multi-typeahead-select-checkbox-input\"\n          autoComplete=\"off\"\n          innerRef={textInputRef}\n          placeholder={placeholder}\n          {...(activeItemId && { 'aria-activedescendant': activeItemId })}\n          role=\"combobox\"\n          isExpanded={isOpen}\n          aria-controls=\"select-multi-typeahead-checkbox-listbox\"\n        />\n        <TextInputGroupUtilities {...(selected.length === 0 ? { style: { display: 'none' } } : {})}>\n          <Button\n            variant=\"plain\"\n            onClick={onClearButtonClick}\n            aria-label=\"Clear input value\"\n            icon={<RhMicronsCloseIcon />}\n          />\n        </TextInputGroupUtilities>\n      </TextInputGroup>\n    </MenuToggle>\n  );\n\n  return (\n    <Select\n      role=\"menu\"\n      id=\"multi-typeahead-checkbox-select\"\n      isOpen={isOpen}\n      selected={selected}\n      onSelect={(_event, selection) => onSelect(selection as string)}\n      onOpenChange={(isOpen) => {\n        !isOpen && closeMenu();\n      }}\n      toggle={toggle}\n      variant=\"typeahead\"\n    >\n      <SelectList isAriaMultiselectable id=\"select-multi-typeahead-checkbox-listbox\">\n        {selectOptions.map((option, index) => (\n          <SelectOption\n            {...(!option.isDisabled && !option.isAriaDisabled && { 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          />\n        ))}\n      </SelectList>\n    </Select>\n  );\n};\n","title":"Multiple typeahead with checkboxes","lang":"ts","className":""}}>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-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>
+    </Example>,
+  'With view more': props => 
+    <Example {...pageData} {...props} {...{"code":"import { useEffect, useRef, useState } from 'react';\nimport { Select, SelectOption, SelectList, MenuToggle, Spinner } from '@patternfly/react-core';\n\nexport const SelectViewMore: React.FunctionComponent = () => {\n  const [isOpen, setIsOpen] = useState(false);\n  const [selected, setSelected] = useState<string>('Select a value');\n  const [activeItem, setActiveItem] = useState<number | string>(0);\n  const [isLoading, setIsLoading] = useState(false);\n  // eslint-disable-next-line @typescript-eslint/no-unused-vars\n  const [selectOptions, setSelectOptions] = useState([\n    <SelectOption key={0} value=\"Option 1\">\n      Option 1\n    </SelectOption>,\n    <SelectOption key={1} value=\"Option 2\">\n      Option 2\n    </SelectOption>,\n    <SelectOption key={2} value=\"Option 3\">\n      Option 3\n    </SelectOption>,\n    <SelectOption key={3} value=\"Option 4\">\n      Option 4\n    </SelectOption>,\n    <SelectOption key={4} value=\"Option 5\">\n      Option 5\n    </SelectOption>,\n    <SelectOption key={5} value=\"Option 6\">\n      Option 6\n    </SelectOption>,\n    <SelectOption key={6} value=\"Option 7\">\n      Option 7\n    </SelectOption>,\n    <SelectOption key={7} value=\"Option 8\">\n      Option 8\n    </SelectOption>,\n    <SelectOption key={8} value=\"Option 9\">\n      Option 9\n    </SelectOption>,\n    <SelectOption key={9} value=\"Final Option 10\">\n      Final Option 10\n    </SelectOption>\n  ]);\n  const [numOptions, setNumOptions] = useState(3);\n  const [visibleOptions, setVisibleOptions] = useState(selectOptions.slice(0, numOptions));\n  const activeItemRef = useRef<HTMLElement>(null);\n  const viewMoreRef = useRef<HTMLLIElement>(null);\n  const toggleRef = useRef<HTMLButtonElement>(null);\n\n  useEffect(() => {\n    activeItemRef.current?.focus();\n  }, [visibleOptions]);\n\n  const simulateNetworkCall = (networkCallback: () => void) => {\n    setTimeout(networkCallback, 2000);\n  };\n\n  const getNextValidItem = (startingIndex: number, maxLength: number) => {\n    let validItem;\n    for (let i = startingIndex; i < 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 = () => {\n    const newLength = numOptions + 3 <= 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 = () => {\n    setIsLoading(true);\n    simulateNetworkCall(() => {\n      loadMoreOptions();\n    });\n  };\n\n  const onToggleClick = () => {\n    setIsOpen(!isOpen);\n  };\n\n  const onSelect = (_event: React.MouseEvent<Element, MouseEvent> | undefined, value: string | number | undefined) => {\n    // eslint-disable-next-line no-console\n    console.log('selected', value);\n\n    if (value !== 'loader') {\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    <MenuToggle\n      ref={toggleRef}\n      onClick={onToggleClick}\n      isExpanded={isOpen}\n      style={\n        {\n          width: '200px'\n        } as React.CSSProperties\n      }\n    >\n      {selected}\n    </MenuToggle>\n  );\n\n  return (\n    <Select\n      id=\"single-view-more-select\"\n      isOpen={isOpen}\n      selected={selected}\n      onSelect={onSelect}\n      onOpenChange={(isOpen) => setIsOpen(isOpen)}\n      toggle={{ toggleNode: toggle, toggleRef }}\n    >\n      <SelectList>\n        {visibleOptions.map((option) => {\n          const props = option.props;\n\n          return <SelectOption key={option.key} ref={props.value === activeItem ? activeItemRef : null} {...props} />;\n        })}\n        {numOptions !== selectOptions.length && (\n          <SelectOption\n            {...(!isLoading && { isLoadButton: true })}\n            {...(isLoading && { isLoading: true })}\n            onClick={onViewMoreClick}\n            value=\"loader\"\n            ref={viewMoreRef}\n          >\n            {isLoading ? <Spinner size=\"lg\" /> : 'View more'}\n          </SelectOption>\n        )}\n      </SelectList>\n    </Select>\n  );\n};\n","title":"With view more","lang":"ts","className":""}}>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`To reduce the processing load for long select lists, you can add a "View more" action to load additional items.`}
+      </p>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-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>
+    </Example>,
+  'With a footer': props => 
+    <Example {...pageData} {...props} {...{"code":"import { useState } from 'react';\nimport { MenuToggle, MenuFooter, Select, SelectList, SelectOption, Button } from '@patternfly/react-core';\n\nexport const SelectFooter: React.FunctionComponent = () => {\n  const [isOpen, setIsOpen] = useState<boolean>(false);\n  const [selected, setSelected] = useState<string>('Select a value');\n\n  const onToggleClick = () => {\n    setIsOpen(!isOpen);\n  };\n\n  const toggle = (toggleRef) => (\n    <MenuToggle\n      ref={toggleRef}\n      onClick={onToggleClick}\n      isExpanded={isOpen}\n      style={\n        {\n          width: '200px'\n        } as React.CSSProperties\n      }\n    >\n      {selected}\n    </MenuToggle>\n  );\n\n  function onSelect(event: React.MouseEvent | undefined, value: string | number | undefined) {\n    if (typeof value === 'undefined') {\n      return;\n    }\n\n    setSelected(value.toString());\n  }\n\n  return (\n    <Select\n      isOpen={isOpen}\n      onOpenChange={(isOpen) => setIsOpen(isOpen)}\n      onOpenChangeKeys={['Escape']}\n      toggle={toggle}\n      id=\"menu-with-footer\"\n      onSelect={onSelect}\n      selected={selected}\n    >\n      <SelectList>\n        <SelectOption value=\"Option 1\">Option 1</SelectOption>\n        <SelectOption value=\"Option 2\">Option 2</SelectOption>\n        <SelectOption value=\"Option 3\">Option 3</SelectOption>\n      </SelectList>\n      <MenuFooter>\n        <Button variant=\"link\" isInline>\n          Footer action\n        </Button>\n      </MenuFooter>\n    </Select>\n  );\n};\n","title":"With a footer","lang":"ts","className":""}}>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`You can add a `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`<MenuFooter>`}
+        </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>
+    </Example>
+};
+
+const Component = () => (
+  <React.Fragment>
+    <AutoLinkHeader {...{"id":"examples","headingLevel":"h2","className":"ws-title ws-h2"}}>
+      {`Examples`}
+    </AutoLinkHeader>
+    <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+      {`Select builds off of the menu component suite to adapt commonly used properties and functions to create a select menu. See the `}
+      <PatternflyThemeLink {...{"to":"/components/menus/menu","className":""}}>
+        {`menu documentation`}
+      </PatternflyThemeLink>
+      {` for a full list of properties that may be used to further customize a select menu. View the `}
+      <PatternflyThemeLink {...{"to":"/components/menus/custom-menus","className":""}}>
+        {`custom menu examples`}
+      </PatternflyThemeLink>
+      {` to see examples of fully functional select menus.`}
+    </p>
+    <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+      {`For use cases that do not require a lot of customization, there are various template components available to use in the `}
+      <code {...{"className":"ws-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 `}
+      <PatternflyThemeLink {...{"to":"/components/menus/select/react-templates","className":""}}>
+        {`templates page`}
+      </PatternflyThemeLink>
+      {` for details.`}
+    </p>
+    {React.createElement(pageData.examples["Single select"])}
+    {React.createElement(pageData.examples["Select option variants"])}
+    {React.createElement(pageData.examples["With grouped items"])}
+    {React.createElement(pageData.examples["With validation"])}
+    {React.createElement(pageData.examples["Checkbox select"])}
+    {React.createElement(pageData.examples["Typeahead"])}
+    {React.createElement(pageData.examples["Typeahead with create option"])}
+    {React.createElement(pageData.examples["Multiple typeahead with labels"])}
+    {React.createElement(pageData.examples["Multiple typeahead with create option"])}
+    {React.createElement(pageData.examples["Multiple typeahead with checkboxes"])}
+    {React.createElement(pageData.examples["With view more"])}
+    {React.createElement(pageData.examples["With a footer"])}
+  </React.Fragment>
+);
+Component.displayName = 'ComponentsMenusSelectReactDocs';
+Component.pageData = pageData;
+
+export default Component;