diff --git a/packages/module/patternfly-docs/content/extensions/chatbot/examples/Messages/BotMessage.tsx b/packages/module/patternfly-docs/content/extensions/chatbot/examples/Messages/BotMessage.tsx
index f68a929e..6f1233b3 100644
--- a/packages/module/patternfly-docs/content/extensions/chatbot/examples/Messages/BotMessage.tsx
+++ b/packages/module/patternfly-docs/content/extensions/chatbot/examples/Messages/BotMessage.tsx
@@ -2,35 +2,44 @@ import React from 'react';
 import Message from '@patternfly/chatbot/dist/dynamic/Message';
 import patternflyAvatar from './patternfly_avatar.jpg';
 import squareImg from './PF-social-color-square.svg';
-import { AlertActionLink, Form, FormGroup, Radio } from '@patternfly/react-core';
+import {
+  AlertActionLink,
+  MenuToggle,
+  MenuToggleElement,
+  Select,
+  SelectList,
+  SelectOption
+} from '@patternfly/react-core';
 
 export const BotMessageExample: React.FunctionComponent = () => {
-  const [variant, setVariant] = React.useState('code');
+  const [variant, setVariant] = React.useState<string>('Code');
+  const [isOpen, setIsOpen] = React.useState(false);
+  const [selected, setSelected] = React.useState<string>('Message content type');
 
   /* eslint-disable indent */
   const renderContent = () => {
     switch (variant) {
-      case 'code':
+      case 'Code':
         return code;
-      case 'heading':
+      case 'Heading':
         return heading;
-      case 'emphasis':
+      case 'Emphasis':
         return emphasis;
-      case 'blockQuotes':
+      case 'Block quotes':
         return blockQuotes;
-      case 'orderedList':
+      case 'Ordered list':
         return orderedList;
-      case 'unorderedList':
+      case 'Unordered list':
         return unorderedList;
-      case 'moreComplexList':
+      case 'More complex list':
         return moreComplexList;
-      case 'inlineCode':
+      case 'Inline code':
         return inlineCode;
-      case 'link':
+      case 'Link':
         return link;
-      case 'table':
+      case 'Table':
         return table;
-      case 'image':
+      case 'Image':
         return image;
       default:
         return;
@@ -155,6 +164,32 @@ _Italic text, formatted with single underscores_
     )
   };
 
+  const onSelect = (_event: React.MouseEvent<Element, MouseEvent> | undefined, value: string | number | undefined) => {
+    setVariant(value);
+    setSelected(value as string);
+    setIsOpen(false);
+  };
+
+  const onToggleClick = () => {
+    setIsOpen(!isOpen);
+  };
+
+  const toggle = (toggleRef: React.Ref<MenuToggleElement>) => (
+    <MenuToggle
+      className="pf-v6-u-mb-md"
+      ref={toggleRef}
+      onClick={onToggleClick}
+      isExpanded={isOpen}
+      style={
+        {
+          width: '200px'
+        } as React.CSSProperties
+      }
+    >
+      {selected}
+    </MenuToggle>
+  );
+
   return (
     <>
       <Message
@@ -193,104 +228,39 @@ _Italic text, formatted with single underscores_
         timestamp="1 hour ago"
       />
       <Message name="Bot" role="bot" avatar={patternflyAvatar} content="Example content" isLoading />
-
-      <Form>
-        <FormGroup role="radiogroup" isInline fieldId="bot-message-type" label="Message content type">
-          <Radio
-            isChecked={variant === 'code'}
-            onChange={() => setVariant('code')}
-            name="bot-message-type"
-            label="Code"
-            id="code"
-          />
-          <Radio
-            isChecked={variant === 'inlineCode'}
-            onChange={() => setVariant('inlineCode')}
-            name="bot-message-type"
-            label="Inline code"
-            id="inline-code"
-          />
-          <Radio
-            isChecked={variant === 'heading'}
-            onChange={() => setVariant('heading')}
-            name="bot-message-type"
-            label="Heading"
-            id="heading"
-          />
-          <Radio
-            isChecked={variant === 'blockQuotes'}
-            onChange={() => setVariant('blockQuotes')}
-            name="bot-message-type"
-            label="Block quote"
-            id="block-quotes"
-          />
-          <Radio
-            isChecked={variant === 'emphasis'}
-            onChange={() => setVariant('emphasis')}
-            name="bot-message-type"
-            label="Emphasis"
-            id="emphasis"
-          />
-          <Radio
-            isChecked={variant === 'link'}
-            onChange={() => setVariant('link')}
-            name="bot-message-type"
-            label="Link"
-            id="link"
-          />
-          <Radio
-            isChecked={variant === 'unorderedList'}
-            onChange={() => setVariant('unorderedList')}
-            name="bot-message-type"
-            label="Unordered list"
-            id="unordered-list"
-          />
-          <Radio
-            isChecked={variant === 'orderedList'}
-            onChange={() => setVariant('orderedList')}
-            name="bot-message-type"
-            label="Ordered list"
-            id="ordered-list"
-          />
-          <Radio
-            isChecked={variant === 'moreComplexList'}
-            onChange={() => setVariant('moreComplexList')}
-            name="bot-message-type"
-            label="More complex list"
-            id="more-complex-list"
-          />
-          <Radio
-            isChecked={variant === 'table'}
-            onChange={() => setVariant('table')}
-            name="bot-message-type"
-            label="Table"
-            id="table"
-          />
-          <Radio
-            isChecked={variant === 'image'}
-            onChange={() => setVariant('image')}
-            name="bot-message-type"
-            label="Image"
-            id="image"
-          />
-          <Radio
-            isChecked={variant === 'error'}
-            onChange={() => setVariant('error')}
-            name="bot-message-type"
-            label="Error"
-            id="error"
-          />
-        </FormGroup>
-      </Form>
+      <Select
+        id="single-select"
+        isOpen={isOpen}
+        selected={selected}
+        onSelect={onSelect}
+        onOpenChange={(isOpen) => setIsOpen(isOpen)}
+        toggle={toggle}
+        shouldFocusToggleOnSelect
+      >
+        <SelectList>
+          <SelectOption value="Code">Code</SelectOption>
+          <SelectOption value="Inline code">Inline code</SelectOption>
+          <SelectOption value="Heading">Heading</SelectOption>
+          <SelectOption value="Block quotes">Block quotes</SelectOption>
+          <SelectOption value="Emphasis">Emphasis</SelectOption>
+          <SelectOption value="Link">Link</SelectOption>
+          <SelectOption value="Unordered list">Unordered list</SelectOption>
+          <SelectOption value="Ordered list">Ordered list</SelectOption>
+          <SelectOption value="More complex list">More complex list</SelectOption>
+          <SelectOption value="Table">Table</SelectOption>
+          <SelectOption value="Image">Image</SelectOption>
+          <SelectOption value="Error">Error</SelectOption>
+        </SelectList>
+      </Select>
       <Message
         name="Bot"
         role="bot"
         avatar={patternflyAvatar}
         content={renderContent()}
         tableProps={
-          variant === 'table' ? { 'aria-label': 'App information and user roles for bot messages' } : undefined
+          variant === 'Table' ? { 'aria-label': 'App information and user roles for bot messages' } : undefined
         }
-        error={variant === 'error' ? error : undefined}
+        error={variant === 'Error' ? error : undefined}
       />
     </>
   );
diff --git a/packages/module/patternfly-docs/content/extensions/chatbot/examples/Messages/FileDetailsLabel.tsx b/packages/module/patternfly-docs/content/extensions/chatbot/examples/Messages/FileDetailsLabel.tsx
index 0ce14f65..e9ee1c57 100644
--- a/packages/module/patternfly-docs/content/extensions/chatbot/examples/Messages/FileDetailsLabel.tsx
+++ b/packages/module/patternfly-docs/content/extensions/chatbot/examples/Messages/FileDetailsLabel.tsx
@@ -1,52 +1,63 @@
 import React from 'react';
 import FileDetailsLabel from '@patternfly/chatbot/dist/dynamic/FileDetailsLabel';
-import { Radio } from '@patternfly/react-core/dist/dynamic/Radio';
-import { FormGroup } from '@patternfly/react-core/dist/dynamic/FormGroup';
-import { Stack } from '@patternfly/react-core/dist/dynamic/Stack';
+import { Stack, MenuToggle, MenuToggleElement, Select, SelectList, SelectOption } from '@patternfly/react-core';
 
 export const FileDetailsLabelExample: React.FunctionComponent = () => {
-  const [variant, setVariant] = React.useState('plain');
+  const [variant, setVariant] = React.useState<string>('plain');
+  const [isOpen, setIsOpen] = React.useState<boolean>(false);
+  const [selected, setSelected] = React.useState<string>('Variant');
+
+  const onSelect = (_event: React.MouseEvent<Element, MouseEvent> | undefined, value: string | number | undefined) => {
+    setVariant(value);
+    setSelected(value as string);
+    setIsOpen(false);
+  };
+
+  const onToggleClick = () => {
+    setIsOpen(!isOpen);
+  };
+
+  const toggle = (toggleRef: React.Ref<MenuToggleElement>) => (
+    <MenuToggle
+      ref={toggleRef}
+      onClick={onToggleClick}
+      isExpanded={isOpen}
+      style={
+        {
+          width: '200px'
+        } as React.CSSProperties
+      }
+    >
+      {selected}
+    </MenuToggle>
+  );
 
   return (
     <Stack hasGutter>
-      <FormGroup role="radiogroup" isInline fieldId="basic-form-radio-group" label="Variant">
-        <Radio
-          isChecked={variant === 'plain'}
-          onChange={() => setVariant('plain')}
-          name="basic-inline-radio"
-          label="Plain"
-          id="plain"
-        />
-        <Radio
-          isChecked={variant === 'closeable'}
-          onChange={() => setVariant('closeable')}
-          name="basic-inline-radio"
-          label="Closeable"
-          id="closeable"
-        />
-        <Radio
-          isChecked={variant === 'clickable'}
-          onChange={() => setVariant('clickable')}
-          name="basic-inline-radio"
-          label="Clickable"
-          id="clickable"
-        />
-        <Radio
-          isChecked={variant === 'loading'}
-          onChange={() => setVariant('loading')}
-          name="basic-inline-radio"
-          label="Loading"
-          id="loading"
-        />
-      </FormGroup>
+      <Select
+        id="single-select"
+        isOpen={isOpen}
+        selected={selected}
+        onSelect={onSelect}
+        onOpenChange={(isOpen) => setIsOpen(isOpen)}
+        toggle={toggle}
+        shouldFocusToggleOnSelect
+      >
+        <SelectList>
+          <SelectOption value="Plain">Plain</SelectOption>
+          <SelectOption value="Closeable">Closeable</SelectOption>
+          <SelectOption value="Clickable">Clickable</SelectOption>
+          <SelectOption value="Loading">Loading</SelectOption>
+        </SelectList>
+      </Select>
       <div className="pf-chatbot__file-details-example">
         <FileDetailsLabel
           fileName="auth-operator.yml"
           // eslint-disable-next-line no-console
-          {...(variant === 'closeable' && { onClose: () => console.log('clicked close button!') })}
+          {...(variant === 'Closeable' && { onClose: () => console.log('clicked close button!') })}
           // eslint-disable-next-line no-console
-          {...(variant === 'clickable' && { onClick: () => console.log('clicked entire button!') })}
-          {...(variant === 'loading' && { isLoading: true })}
+          {...(variant === 'Clickable' && { onClick: () => console.log('clicked entire button!') })}
+          {...(variant === 'Loading' && { isLoading: true })}
         />
       </div>
     </Stack>
diff --git a/packages/module/patternfly-docs/content/extensions/chatbot/examples/Messages/UserMessage.tsx b/packages/module/patternfly-docs/content/extensions/chatbot/examples/Messages/UserMessage.tsx
index 2bab9660..f615b489 100644
--- a/packages/module/patternfly-docs/content/extensions/chatbot/examples/Messages/UserMessage.tsx
+++ b/packages/module/patternfly-docs/content/extensions/chatbot/examples/Messages/UserMessage.tsx
@@ -2,36 +2,45 @@ import React from 'react';
 
 import Message from '@patternfly/chatbot/dist/dynamic/Message';
 import userAvatar from './user_avatar.svg';
-import { AlertActionLink, Form, FormGroup, Radio } from '@patternfly/react-core';
+import {
+  AlertActionLink,
+  MenuToggle,
+  MenuToggleElement,
+  Select,
+  SelectList,
+  SelectOption
+} from '@patternfly/react-core';
 
 export const UserMessageExample: React.FunctionComponent = () => {
-  const [variant, setVariant] = React.useState('code');
-  const [isEditable, setIsEditable] = React.useState(true);
+  const [variant, setVariant] = React.useState<string>('Code');
+  const [isEditable, setIsEditable] = React.useState<boolean>(true);
+  const [isOpen, setIsOpen] = React.useState<boolean>(false);
+  const [selected, setSelected] = React.useState<string>('Message content type');
 
   /* eslint-disable indent */
   const renderContent = () => {
     switch (variant) {
-      case 'code':
+      case 'Code':
         return code;
-      case 'inlineCode':
+      case 'Inline code':
         return inlineCode;
-      case 'heading':
+      case 'Heading':
         return heading;
-      case 'emphasis':
+      case 'Emphasis':
         return emphasis;
-      case 'blockQuotes':
+      case 'Block quotes':
         return blockQuotes;
-      case 'orderedList':
+      case 'Ordered list':
         return orderedList;
-      case 'unorderedList':
+      case 'Unordered list':
         return unorderedList;
-      case 'moreComplexList':
+      case 'More complex list':
         return moreComplexList;
-      case 'link':
+      case 'Link':
         return link;
-      case 'table':
+      case 'Table':
         return table;
-      case 'image':
+      case 'Image':
         return image;
       default:
         return '';
@@ -156,6 +165,32 @@ _Italic text, formatted with single underscores_
     )
   };
 
+  const onSelect = (_event: React.MouseEvent<Element, MouseEvent> | undefined, value: string | number | undefined) => {
+    setVariant(value);
+    setSelected(value as string);
+    setIsOpen(false);
+  };
+
+  const onToggleClick = () => {
+    setIsOpen(!isOpen);
+  };
+
+  const toggle = (toggleRef: React.Ref<MenuToggleElement>) => (
+    <MenuToggle
+      className="pf-v6-u-mb-md"
+      ref={toggleRef}
+      onClick={onToggleClick}
+      isExpanded={isOpen}
+      style={
+        {
+          width: '200px'
+        } as React.CSSProperties
+      }
+    >
+      {selected}
+    </MenuToggle>
+  );
+
   return (
     <>
       <Message
@@ -172,147 +207,41 @@ _Italic text, formatted with single underscores_
         avatar={userAvatar}
         avatarProps={{ isBordered: true }}
       />
-      <Form>
-        <FormGroup role="radiogroup" isInline fieldId="user-message-type" label="Message content type">
-          <Radio
-            isChecked={variant === 'code'}
-            onChange={() => {
-              setVariant('code');
-              setIsEditable(true);
-            }}
-            name="user-message-type"
-            label="Code"
-            id="user-code"
-          />
-          <Radio
-            isChecked={variant === 'inlineCode'}
-            onChange={() => {
-              setVariant('inlineCode');
-              setIsEditable(true);
-            }}
-            name="user-message-type"
-            label="Inline code"
-            id="user-inline-code"
-          />
-          <Radio
-            isChecked={variant === 'heading'}
-            onChange={() => {
-              setVariant('heading');
-              setIsEditable(true);
-            }}
-            name="user-message-type"
-            label="Heading"
-            id="user-heading"
-          />
-          <Radio
-            isChecked={variant === 'blockQuotes'}
-            onChange={() => {
-              setVariant('blockQuotes');
-              setIsEditable(true);
-            }}
-            name="user-message-type"
-            label="Block quote"
-            id="user-block-quotes"
-          />
-          <Radio
-            isChecked={variant === 'emphasis'}
-            onChange={() => {
-              setVariant('emphasis');
-              setIsEditable(true);
-            }}
-            name="user-message-type"
-            label="Emphasis"
-            id="user-emphasis"
-          />
-          <Radio
-            isChecked={variant === 'link'}
-            onChange={() => {
-              setVariant('link');
-              setIsEditable(true);
-            }}
-            name="user-message-type"
-            label="Link"
-            id="user-link"
-          />
-          <Radio
-            isChecked={variant === 'unorderedList'}
-            onChange={() => {
-              setVariant('unorderedList');
-              setIsEditable(true);
-            }}
-            name="user-message-type"
-            label="Unordered list"
-            id="user-unordered-list"
-          />
-          <Radio
-            isChecked={variant === 'orderedList'}
-            onChange={() => {
-              setVariant('orderedList');
-              setIsEditable(true);
-            }}
-            name="user-message-type"
-            label="Ordered list"
-            id="user-ordered-list"
-          />
-          <Radio
-            isChecked={variant === 'moreComplexList'}
-            onChange={() => {
-              setVariant('moreComplexList');
-              setIsEditable(true);
-            }}
-            name="user-message-type"
-            label="More complex list"
-            id="user-more-complex-list"
-          />
-          <Radio
-            isChecked={variant === 'table'}
-            onChange={() => {
-              setVariant('table');
-              setIsEditable(true);
-            }}
-            name="user-message-type"
-            label="Table"
-            id="user-table"
-          />
-          <Radio
-            isChecked={variant === 'image'}
-            onChange={() => {
-              setVariant('image');
-              setIsEditable(true);
-            }}
-            name="user-message-type"
-            label="Image"
-            id="user-image"
-          />
-          <Radio
-            isChecked={variant === 'error'}
-            onChange={() => {
-              setVariant('error');
-              setIsEditable(true);
-            }}
-            name="user-message-type"
-            label="Error"
-            id="user-error"
-          />
-          <Radio
-            isChecked={variant === 'editable'}
-            onChange={() => setVariant('editable')}
-            name="user-message-type"
-            label="Editable"
-            id="user-edit"
-          />
-        </FormGroup>
-      </Form>
+      <Select
+        id="single-select"
+        isOpen={isOpen}
+        selected={selected}
+        onSelect={onSelect}
+        onOpenChange={(isOpen) => setIsOpen(isOpen)}
+        toggle={toggle}
+        shouldFocusToggleOnSelect
+      >
+        <SelectList>
+          <SelectOption value="Code">Code</SelectOption>
+          <SelectOption value="Inline code">Inline code</SelectOption>
+          <SelectOption value="Heading">Heading</SelectOption>
+          <SelectOption value="Block quotes">Block quotes</SelectOption>
+          <SelectOption value="Emphasis">Emphasis</SelectOption>
+          <SelectOption value="Link">Link</SelectOption>
+          <SelectOption value="Unordered list">Unordered list</SelectOption>
+          <SelectOption value="Ordered list">Ordered list</SelectOption>
+          <SelectOption value="More complex list">More complex list</SelectOption>
+          <SelectOption value="Table">Table</SelectOption>
+          <SelectOption value="Image">Image</SelectOption>
+          <SelectOption value="Error">Error</SelectOption>
+          <SelectOption value="Editable">Editable</SelectOption>
+        </SelectList>
+      </Select>
       <Message
         name="User"
         role="user"
         content={renderContent()}
         avatar={userAvatar}
         tableProps={
-          variant === 'table' ? { 'aria-label': 'App information and user roles for user messages' } : undefined
+          variant === 'Table' ? { 'aria-label': 'App information and user roles for user messages' } : undefined
         }
-        isEditable={variant === 'editable' ? isEditable : false}
-        error={variant === 'error' ? error : undefined}
+        isEditable={variant === 'Editable' ? isEditable : false}
+        error={variant === 'Error' ? error : undefined}
         onEditUpdate={() => setIsEditable(false)}
         onEditCancel={() => setIsEditable(false)}
       />