diff --git a/.storybook/polaris-readme-loader.js b/.storybook/polaris-readme-loader.js
index 5c24dc6b889..90916ac44d3 100644
--- a/.storybook/polaris-readme-loader.js
+++ b/.storybook/polaris-readme-loader.js
@@ -75,6 +75,7 @@ import {
   ChoiceList,
   Collapsible,
   ColorPicker,
+  ComboBox,
   Connected,
   ContextualSaveBar,
   DataTable,
@@ -105,6 +106,7 @@ import {
   Layout,
   Link,
   List,
+  ListBox,
   Loading,
   MediaCard,
   Modal,
diff --git a/UNRELEASED.md b/UNRELEASED.md
index 2ec5de018c5..5def179668c 100644
--- a/UNRELEASED.md
+++ b/UNRELEASED.md
@@ -7,6 +7,8 @@ Use [the changelog guidelines](https://git.io/polaris-changelog-guidelines) to f
 - Updated `react` and `react-dom` to version 16.14.0. This is now the minimum version of React required to use the `@shopify/polaris` library.
 - Dropping support for node 10.x
 - Made `autoComplete` prop in `TextField` a required string ([#4267](https://github.com/Shopify/polaris-react/pull/4267)). If you do not want the browser to autofill a user's information (for example an email input which is a customer's email, but not the email of the user who is entering the information), we recommend setting `autoComplete` to `"off"`.
+- `Autocomplete` now requires `Autocomplete.TextField` to be used ([#3910](https://github.com/Shopify/polaris-react/pull/3910))
+- Removed ComboBox as a named export on `Autocomplete` ([#3910](https://github.com/Shopify/polaris-react/pull/3910))
 
 ### Enhancements
 
@@ -33,4 +35,6 @@ Use [the changelog guidelines](https://git.io/polaris-changelog-guidelines) to f
 
 ### Code quality
 
+- Rebuilt `Autocomplete` internals using new `ComboBox` and `ListBox` components built on the ARIA 1.2 spec for improved accessibility ([#3910](https://github.com/Shopify/polaris-react/pull/3910))
+
 ### Deprecations
diff --git a/locales/en.json b/locales/en.json
index 5d7fc27fa14..4f2163cde11 100644
--- a/locales/en.json
+++ b/locales/en.json
@@ -8,7 +8,8 @@
       "labelWithInitials": "Avatar with initials {initials}"
     },
     "Autocomplete": {
-      "spinnerAccessibilityLabel": "Loading"
+      "spinnerAccessibilityLabel": "Loading",
+      "ellipsis": "{content}…"
     },
     "Badge": {
       "PROGRESS_LABELS": {
diff --git a/package.json b/package.json
index a26d5884ba9..b139a8b4090 100644
--- a/package.json
+++ b/package.json
@@ -178,7 +178,7 @@
     {
       "name": "esm",
       "path": "dist/esm/index.js",
-      "limit": "100 kB"
+      "limit": "105 kB"
     },
     {
       "name": "esnext",
diff --git a/src/components/Autocomplete/Autocomplete.tsx b/src/components/Autocomplete/Autocomplete.tsx
index b0dd2deee7d..f9d163a2e2f 100644
--- a/src/components/Autocomplete/Autocomplete.tsx
+++ b/src/components/Autocomplete/Autocomplete.tsx
@@ -1,23 +1,25 @@
-import React from 'react';
+import React, {useMemo, useCallback} from 'react';
 
-import {useI18n} from '../../utilities/i18n';
 import type {ActionListItemDescriptor} from '../../types';
-import {Spinner} from '../Spinner';
+import type {OptionDescriptor} from '../OptionList';
+import type {PopoverProps} from '../Popover';
+import {useI18n} from '../../utilities/i18n';
+import {ComboBox} from '../ComboBox';
+import {ListBox} from '../ListBox';
 
-import {TextField, ComboBox, ComboBoxProps} from './components';
-import styles from './Autocomplete.scss';
+import {MappedOption, MappedAction} from './components';
 
 export interface AutocompleteProps {
   /** A unique identifier for the Autocomplete */
   id?: string;
   /** Collection of options to be listed */
-  options: ComboBoxProps['options'];
+  options: OptionDescriptor[];
   /** The selected options */
   selected: string[];
   /** The text field component attached to the list of options */
   textField: React.ReactElement;
   /** The preferred direction to open the popover */
-  preferredPosition?: ComboBoxProps['preferredPosition'];
+  preferredPosition?: PopoverProps['preferredPosition'];
   /** Title of the list of options */
   listTitle?: string;
   /** Allow more than one option to be selected */
@@ -42,10 +44,8 @@ export interface AutocompleteProps {
 // generated *.d.ts files.
 
 export const Autocomplete: React.FunctionComponent<AutocompleteProps> & {
-  ComboBox: typeof ComboBox;
-  TextField: typeof TextField;
+  TextField: typeof ComboBox.TextField;
 } = function Autocomplete({
-  id,
   options,
   selected,
   textField,
@@ -61,38 +61,89 @@ export const Autocomplete: React.FunctionComponent<AutocompleteProps> & {
 }: AutocompleteProps) {
   const i18n = useI18n();
 
-  const spinnerMarkup = loading ? (
-    <div className={styles.Loading}>
-      <Spinner
-        size="small"
-        accessibilityLabel={i18n.translate(
-          'Polaris.Autocomplete.spinnerAccessibilityLabel',
-        )}
-      />
-    </div>
+  const optionsMarkup = useMemo(() => {
+    const conditionalOptions = loading && !willLoadMoreResults ? [] : options;
+    const optionList =
+      conditionalOptions.length > 0
+        ? conditionalOptions.map((option) => (
+            <MappedOption
+              {...option}
+              key={option.id || option.value}
+              selected={selected.includes(option.value)}
+              singleSelection={!allowMultiple}
+            />
+          ))
+        : null;
+
+    if (listTitle) {
+      return (
+        <ListBox.Section
+          divider={false}
+          title={<ListBox.Header>{listTitle}</ListBox.Header>}
+        >
+          {optionList}
+        </ListBox.Section>
+      );
+    }
+
+    return optionList;
+  }, [
+    listTitle,
+    loading,
+    options,
+    willLoadMoreResults,
+    allowMultiple,
+    selected,
+  ]);
+
+  const loadingMarkup = loading ? (
+    <ListBox.Loading
+      accessibilityLabel={i18n.translate(
+        'Polaris.Autocomplete.spinnerAccessibilityLabel',
+      )}
+    />
   ) : null;
 
-  const conditionalOptions = loading && !willLoadMoreResults ? [] : options;
-  const conditionalAction =
-    actionBefore && actionBefore !== [] ? [actionBefore] : undefined;
+  const updateSelection = useCallback(
+    (newSelection: string) => {
+      if (allowMultiple) {
+        if (selected.includes(newSelection)) {
+          onSelect(selected.filter((option) => option !== newSelection));
+        } else {
+          onSelect([...selected, newSelection]);
+        }
+      } else {
+        onSelect([newSelection]);
+      }
+    },
+    [allowMultiple, onSelect, selected],
+  );
+
+  const actionMarkup = actionBefore && <MappedAction {...actionBefore} />;
+
+  const emptyStateMarkup = emptyState && options.length < 1 && !loading && (
+    <div role="status">{emptyState}</div>
+  );
 
   return (
     <ComboBox
-      id={id}
-      options={conditionalOptions}
-      selected={selected}
-      textField={textField}
-      preferredPosition={preferredPosition}
-      listTitle={listTitle}
+      activator={textField}
       allowMultiple={allowMultiple}
-      contentAfter={spinnerMarkup}
-      actionsBefore={conditionalAction}
-      onSelect={onSelect}
-      onEndReached={onLoadMoreResults}
-      emptyState={emptyState}
-    />
+      onScrolledToBottom={onLoadMoreResults}
+      preferredPosition={preferredPosition}
+    >
+      {actionMarkup || optionsMarkup || loadingMarkup || emptyStateMarkup ? (
+        <ListBox onSelect={updateSelection}>
+          {actionMarkup}
+          {optionsMarkup && (!loading || willLoadMoreResults)
+            ? optionsMarkup
+            : null}
+          {loadingMarkup}
+          {emptyStateMarkup}
+        </ListBox>
+      ) : null}
+    </ComboBox>
   );
 };
 
-Autocomplete.ComboBox = ComboBox;
-Autocomplete.TextField = TextField;
+Autocomplete.TextField = ComboBox.TextField;
diff --git a/src/components/Autocomplete/README.md b/src/components/Autocomplete/README.md
index 700868152f0..84f064a471c 100644
--- a/src/components/Autocomplete/README.md
+++ b/src/components/Autocomplete/README.md
@@ -5,11 +5,13 @@ keywords:
   - autocomplete
   - searchable
   - typeahead
+  - combobox
+  - listbox
 ---
 
 # Autocomplete
 
-The autocomplete component is an input field that provides selectable suggestions as a merchant types into it. It allows merchants to quickly search through and select from large collections of options.
+The autocomplete component is an input field that provides selectable suggestions as a merchant types into it. It allows merchants to quickly search through and select from large collections of options. It's a convenience wrapper around the `ComboBox` and `ListBox` components with minor UI differences.
 
 ---
 
@@ -77,7 +79,7 @@ function AutocompleteExample() {
       });
 
       setSelectedOptions(selected);
-      setInputValue(selectedValue);
+      setInputValue(selectedValue[0]);
     },
     [options],
   );
@@ -229,11 +231,11 @@ function AutocompleteExample() {
       setTimeout(() => {
         if (value === '') {
           setOptions(deselectedOptions);
-          setLoading(true);
+          setLoading(false);
           return;
         }
         const filterRegex = new RegExp(value, 'i');
-        const resultOptions = options.filter((option) =>
+        const resultOptions = deselectedOptions.filter((option) =>
           option.label.match(filterRegex),
         );
         setOptions(resultOptions);
@@ -252,7 +254,7 @@ function AutocompleteExample() {
         return matchedOption && matchedOption.label;
       });
       setSelectedOptions(selected);
-      setInputValue(selectedText);
+      setInputValue(selectedText[0]);
     },
     [options],
   );
@@ -287,23 +289,39 @@ function AutocompleteExample() {
 function AutoCompleteLazyLoadExample() {
   const paginationInterval = 25;
   const deselectedOptions = Array.from(Array(100)).map((_, index) => ({
-    value: `rustic ${index}`,
-    label: `Rustic ${index}`,
+    value: `rustic ${index + 1}`,
+    label: `Rustic ${index + 1}`,
   }));
 
   const [selectedOptions, setSelectedOptions] = useState([]);
   const [inputValue, setInputValue] = useState('');
   const [options, setOptions] = useState(deselectedOptions);
+  const [isLoading, setIsLoading] = useState(false);
+  const [willLoadMoreResults, setWillLoadMoreResults] = useState(true);
   const [visibleOptionIndex, setVisibleOptionIndex] = useState(
     paginationInterval,
   );
 
   const handleLoadMoreResults = useCallback(() => {
-    const nextVisibleOptionIndex = visibleOptionIndex + paginationInterval;
-    if (nextVisibleOptionIndex <= options.length - 1) {
-      setVisibleOptionIndex(nextVisibleOptionIndex);
+    if (willLoadMoreResults) {
+      setIsLoading(true);
+
+      setTimeout(() => {
+        const remainingOptionCount = options.length - visibleOptionIndex;
+        const nextVisibleOptionIndex =
+          remainingOptionCount >= paginationInterval
+            ? visibleOptionIndex + paginationInterval
+            : visibleOptionIndex + remainingOptionCount;
+
+        setIsLoading(false);
+        setVisibleOptionIndex(nextVisibleOptionIndex);
+
+        if (remainingOptionCount <= paginationInterval) {
+          setWillLoadMoreResults(false);
+        }
+      }, 1000);
     }
-  }, [visibleOptionIndex, options.length]);
+  }, [willLoadMoreResults, visibleOptionIndex, options.length]);
 
   const removeTag = useCallback(
     (tag) => () => {
@@ -324,7 +342,7 @@ function AutoCompleteLazyLoadExample() {
       }
 
       const filterRegex = new RegExp(value, 'i');
-      const resultOptions = options.filter((option) =>
+      const resultOptions = deselectedOptions.filter((option) =>
         option.label.match(filterRegex),
       );
 
@@ -333,6 +351,7 @@ function AutoCompleteLazyLoadExample() {
         endIndex = 0;
       }
       setOptions(resultOptions);
+      setInputValue;
     },
     [deselectedOptions, options],
   );
@@ -375,7 +394,9 @@ function AutoCompleteLazyLoadExample() {
         textField={textField}
         onSelect={setSelectedOptions}
         listTitle="Suggested Tags"
+        loading={isLoading}
         onLoadMoreResults={handleLoadMoreResults}
+        willLoadMoreResults={willLoadMoreResults}
       />
     </Stack>
   );
@@ -425,7 +446,7 @@ function AutocompleteExample() {
           return;
         }
         const filterRegex = new RegExp(value, 'i');
-        const resultOptions = options.filter((option) =>
+        const resultOptions = deselectedOptions.filter((option) =>
           option.label.match(filterRegex),
         );
         setOptions(resultOptions);
@@ -444,7 +465,7 @@ function AutocompleteExample() {
         return matchedOption && matchedOption.label;
       });
       setSelectedOptions(selected);
-      setInputValue(selectedText);
+      setInputValue(selectedText[0]);
     },
     [options],
   );
@@ -483,12 +504,194 @@ function AutocompleteExample() {
 }
 ```
 
+### Autocomplete with action
+
+Use to indicate there are no search results.
+
+```jsx
+function AutocompleteActionBeforeExample() {
+  const deselectedOptions = [
+    {value: 'rustic', label: 'Rustic'},
+    {value: 'antique', label: 'Antique'},
+    {value: 'vinyl', label: 'Vinyl'},
+    {value: 'vintage', label: 'Vintage'},
+    {value: 'refurbished', label: 'Refurbished'},
+  ];
+  const [selectedOptions, setSelectedOptions] = useState([]);
+  const [inputValue, setInputValue] = useState('');
+  const [options, setOptions] = useState(deselectedOptions);
+  const [loading, setLoading] = useState(false);
+
+  const updateText = useCallback(
+    (value) => {
+      setInputValue(value);
+
+      if (!loading) {
+        setLoading(true);
+      }
+
+      setTimeout(() => {
+        if (value === '') {
+          setOptions(deselectedOptions);
+          setLoading(false);
+          return;
+        }
+        const filterRegex = new RegExp(value, 'i');
+        const resultOptions = options.filter((option) =>
+          option.label.match(filterRegex),
+        );
+        setOptions(resultOptions);
+        setLoading(false);
+      }, 300);
+    },
+    [deselectedOptions, loading, options],
+  );
+
+  const updateSelection = useCallback(
+    (selected) => {
+      const selectedText = selected.map((selectedItem) => {
+        const matchedOption = options.find((option) => {
+          return option.value.match(selectedItem);
+        });
+        return matchedOption && matchedOption.label;
+      });
+      setSelectedOptions(selected);
+      setInputValue(selectedText[0]);
+    },
+    [options],
+  );
+
+  const textField = (
+    <Autocomplete.TextField
+      onChange={updateText}
+      label="Tags"
+      value={inputValue}
+      prefix={<Icon source={SearchMinor} color="inkLighter" />}
+      placeholder="Search"
+    />
+  );
+
+  return (
+    <div style={{height: '225px'}}>
+      <Autocomplete
+        actionBefore={{
+          accessibilityLabel: 'Action label',
+          badge: {
+            status: 'new',
+            content: 'New!',
+          },
+          content: 'Action with long name',
+          ellipsis: true,
+          helpText: 'Help text',
+          icon: CirclePlusMinor,
+        }}
+        options={options}
+        selected={selectedOptions}
+        onSelect={updateSelection}
+        listTitle="Suggested tags"
+        loading={loading}
+        textField={textField}
+      />
+    </div>
+  );
+}
+```
+
+### Autocomplete with destructive action
+
+Use to indicate there are no search results.
+
+```jsx
+function AutocompleteActionBeforeExample() {
+  const deselectedOptions = [
+    {value: 'rustic', label: 'Rustic'},
+    {value: 'antique', label: 'Antique'},
+    {value: 'vinyl', label: 'Vinyl'},
+    {value: 'vintage', label: 'Vintage'},
+    {value: 'refurbished', label: 'Refurbished'},
+  ];
+  const [selectedOptions, setSelectedOptions] = useState([]);
+  const [inputValue, setInputValue] = useState('');
+  const [options, setOptions] = useState(deselectedOptions);
+  const [loading, setLoading] = useState(false);
+
+  const updateText = useCallback(
+    (value) => {
+      setInputValue(value);
+
+      if (!loading) {
+        setLoading(true);
+      }
+
+      setTimeout(() => {
+        if (value === '') {
+          setOptions(deselectedOptions);
+          setLoading(false);
+          return;
+        }
+        const filterRegex = new RegExp(value, 'i');
+        const resultOptions = options.filter((option) =>
+          option.label.match(filterRegex),
+        );
+        setOptions(resultOptions);
+        setLoading(false);
+      }, 300);
+    },
+    [deselectedOptions, loading, options],
+  );
+
+  const updateSelection = useCallback(
+    (selected) => {
+      const selectedText = selected.map((selectedItem) => {
+        const matchedOption = options.find((option) => {
+          return option.value.match(selectedItem);
+        });
+        return matchedOption && matchedOption.label;
+      });
+      setSelectedOptions(selected);
+      setInputValue(selectedText[0]);
+    },
+    [options],
+  );
+
+  const textField = (
+    <Autocomplete.TextField
+      onChange={updateText}
+      label="Tags"
+      value={inputValue}
+      prefix={<Icon source={SearchMinor} color="inkLighter" />}
+      placeholder="Search"
+    />
+  );
+
+  return (
+    <div style={{height: '225px'}}>
+      <Autocomplete
+        actionBefore={{
+          accessibilityLabel: 'Destructive action label',
+          content: 'Destructive action',
+          destructive: true,
+          icon: DeleteMinor,
+        }}
+        options={options}
+        selected={selectedOptions}
+        onSelect={updateSelection}
+        listTitle="Suggested tags"
+        loading={loading}
+        textField={textField}
+      />
+    </div>
+  );
+}
+```
+
 ---
 
 ## Related components
 
 - For an input field without suggested options, [use the text field component](https://polaris.shopify.com/components/forms/text-field)
 - For a list of selectable options not linked to an input field, [use the option list component](https://polaris.shopify.com/components/lists-and-tables/option-list)
+- For a text field that triggers a popover, [use the combo box component](https://polaris.shopify.com/components/forms/combobox)
 
 ---
 
@@ -516,7 +719,7 @@ See Apple’s Human Interface Guidelines and API documentation about accessibili
 
 ### Structure
 
-The autocomplete component is based on the [ARIA 1.1 combobox pattern](https://www.w3.org/TR/wai-aria-practices-1.1/#combobox). See the [text field component](https://polaris.shopify.com/components/forms/text-field) for information on implementing the autocomplete component with a text field.
+The autocomplete component is based on the [ARIA 1.2 combobox pattern](https://www.w3.org/TR/wai-aria-practices-1.1/#combobox) and the [Aria 1.2 ListBox pattern](https://www.w3.org/TR/wai-aria-practices-1.2/#Listbox).
 
 The autocomplete list displays below the text field or other control by default so it is easy for merchants to discover and use. However, you can change the position with the `preferredPosition` prop.
 
diff --git a/src/components/Autocomplete/components/ComboBox/ComboBox.scss b/src/components/Autocomplete/components/ComboBox/ComboBox.scss
deleted file mode 100644
index 36779ad0060..00000000000
--- a/src/components/Autocomplete/components/ComboBox/ComboBox.scss
+++ /dev/null
@@ -1,5 +0,0 @@
-@import '../../../../styles/common';
-
-.EmptyState {
-  padding: spacing(tight) spacing();
-}
diff --git a/src/components/Autocomplete/components/ComboBox/ComboBox.tsx b/src/components/Autocomplete/components/ComboBox/ComboBox.tsx
deleted file mode 100644
index 0de83583d7f..00000000000
--- a/src/components/Autocomplete/components/ComboBox/ComboBox.tsx
+++ /dev/null
@@ -1,378 +0,0 @@
-import React, {useState, useEffect, useCallback} from 'react';
-
-import {useUniqueId} from '../../../../utilities/unique-id';
-import {useToggle} from '../../../../utilities/use-toggle';
-import {OptionList, OptionDescriptor} from '../../../OptionList';
-import {ActionList} from '../../../ActionList';
-import {Popover, PopoverProps} from '../../../Popover';
-import {ActionListItemDescriptor, Key} from '../../../../types';
-import {KeypressListener} from '../../../KeypressListener';
-import {EventListener} from '../../../EventListener';
-import {useIsomorphicLayoutEffect} from '../../../../utilities/use-isomorphic-layout-effect';
-
-import {ComboBoxContext} from './context';
-import styles from './ComboBox.scss';
-
-export interface ComboBoxProps {
-  /** A unique identifier for the ComboBox */
-  id?: string;
-  /** Collection of options to be listed */
-  options: OptionDescriptor[];
-  /** The selected options */
-  selected: string[];
-  /** The text field component attached to the list of options */
-  textField: React.ReactElement;
-  /** The preferred direction to open the popover */
-  preferredPosition?: PopoverProps['preferredPosition'];
-  /** Title of the list of options */
-  listTitle?: string;
-  /** Allow more than one option to be selected */
-  allowMultiple?: boolean;
-  /** Actions to be displayed before the list of options */
-  actionsBefore?: ActionListItemDescriptor[];
-  /** Actions to be displayed after the list of options */
-  actionsAfter?: ActionListItemDescriptor[];
-  /** Content to be displayed before the list of options */
-  contentBefore?: React.ReactNode;
-  /** Content to be displayed after the list of options */
-  contentAfter?: React.ReactNode;
-  /** Is rendered when there are no options */
-  emptyState?: React.ReactNode;
-  /** Callback when the selection of options is changed */
-  onSelect(selected: string[]): void;
-  /** Callback when the end of the list is reached */
-  onEndReached?(): void;
-}
-
-export function ComboBox({
-  id: idProp,
-  options,
-  selected,
-  textField,
-  preferredPosition,
-  listTitle,
-  allowMultiple,
-  actionsBefore,
-  actionsAfter,
-  contentBefore,
-  contentAfter,
-  emptyState,
-  onSelect,
-  onEndReached,
-}: ComboBoxProps) {
-  const [selectedIndex, setSelectedIndex] = useState(-1);
-  const [selectedOptions, setSelectedOptions] = useState(selected);
-  const [navigableOptions, setNavigableOptions] = useState<
-    (OptionDescriptor | ActionListItemDescriptor)[]
-  >([]);
-  const {
-    value: popoverActive,
-    setTrue: forcePopoverActiveTrue,
-    setFalse: forcePopoverActiveFalse,
-  } = useToggle(false);
-
-  const id = useUniqueId('ComboBox', idProp);
-
-  const getActionsWithIds = useCallback(
-    (actions: ActionListItemDescriptor[], before?: boolean) => {
-      if (before) {
-        return navigableOptions.slice(0, actions.length);
-      }
-      return navigableOptions.slice(-actions.length);
-    },
-    [navigableOptions],
-  );
-
-  const visuallyUpdateSelectedOption = useCallback(
-    (
-      newOption: OptionDescriptor | ActionListItemDescriptor,
-      oldOption: OptionDescriptor | ActionListItemDescriptor | undefined,
-    ) => {
-      if (oldOption) {
-        oldOption.active = false;
-      }
-      if (newOption) {
-        newOption.active = true;
-      }
-    },
-    [],
-  );
-
-  const resetVisuallySelectedOptions = useCallback(() => {
-    setSelectedIndex(-1);
-    navigableOptions.forEach((option) => {
-      option.active = false;
-    });
-  }, [navigableOptions]);
-
-  const selectOptionAtIndex = useCallback(
-    (newOptionIndex: number) => {
-      if (navigableOptions.length === 0) {
-        return;
-      }
-
-      const oldSelectedOption = navigableOptions[selectedIndex];
-      const newSelectedOption = navigableOptions[newOptionIndex];
-
-      visuallyUpdateSelectedOption(newSelectedOption, oldSelectedOption);
-
-      setSelectedIndex(newOptionIndex);
-    },
-    [navigableOptions, selectedIndex, visuallyUpdateSelectedOption],
-  );
-
-  const selectNextOption = useCallback(() => {
-    if (navigableOptions.length === 0) {
-      return;
-    }
-
-    let newIndex = selectedIndex;
-
-    if (selectedIndex + 1 >= navigableOptions.length) {
-      newIndex = 0;
-    } else {
-      newIndex++;
-    }
-
-    selectOptionAtIndex(newIndex);
-  }, [navigableOptions, selectOptionAtIndex, selectedIndex]);
-
-  const selectPreviousOption = useCallback(() => {
-    if (navigableOptions.length === 0) {
-      return;
-    }
-
-    let newIndex = selectedIndex;
-
-    if (selectedIndex <= 0) {
-      newIndex = navigableOptions.length - 1;
-    } else {
-      newIndex--;
-    }
-
-    selectOptionAtIndex(newIndex);
-  }, [navigableOptions, selectOptionAtIndex, selectedIndex]);
-
-  const selectOptions = useCallback(
-    (selected: string[]) => {
-      selected && onSelect(selected);
-      if (!allowMultiple) {
-        resetVisuallySelectedOptions();
-        forcePopoverActiveFalse();
-      }
-    },
-    [
-      allowMultiple,
-      forcePopoverActiveFalse,
-      onSelect,
-      resetVisuallySelectedOptions,
-    ],
-  );
-
-  const handleSelection = useCallback(
-    (newSelected: string) => {
-      let newlySelectedOptions = selected;
-      if (selected.includes(newSelected)) {
-        newlySelectedOptions.splice(
-          newlySelectedOptions.indexOf(newSelected),
-          1,
-        );
-      } else if (allowMultiple) {
-        newlySelectedOptions.push(newSelected);
-      } else {
-        newlySelectedOptions = [newSelected];
-      }
-
-      selectOptions(newlySelectedOptions);
-    },
-    [allowMultiple, selectOptions, selected],
-  );
-
-  const handleEnter = useCallback(
-    (event: KeyboardEvent) => {
-      if (event.keyCode !== Key.Enter) {
-        return;
-      }
-
-      if (popoverActive && selectedIndex > -1) {
-        const selectedOption = navigableOptions[selectedIndex];
-        if (isOption(selectedOption)) {
-          event.preventDefault();
-          handleSelection(selectedOption.value);
-        } else {
-          selectedOption.onAction && selectedOption.onAction();
-        }
-      }
-    },
-    [handleSelection, navigableOptions, popoverActive, selectedIndex],
-  );
-
-  const handleBlur = useCallback(() => {
-    forcePopoverActiveFalse();
-    resetVisuallySelectedOptions();
-  }, [forcePopoverActiveFalse, resetVisuallySelectedOptions]);
-
-  const activatePopover = useCallback(() => {
-    !popoverActive && forcePopoverActiveTrue();
-  }, [forcePopoverActiveTrue, popoverActive]);
-
-  const updateIndexOfSelectedOption = useCallback(
-    (newOptions: (OptionDescriptor | ActionListItemDescriptor)[]) => {
-      const selectedOption = navigableOptions[selectedIndex];
-      if (selectedOption && newOptions.includes(selectedOption)) {
-        selectOptionAtIndex(newOptions.indexOf(selectedOption));
-      } else if (selectedIndex > newOptions.length - 1) {
-        resetVisuallySelectedOptions();
-      } else {
-        selectOptionAtIndex(selectedIndex);
-      }
-    },
-    [
-      navigableOptions,
-      resetVisuallySelectedOptions,
-      selectOptionAtIndex,
-      selectedIndex,
-    ],
-  );
-
-  useEffect(() => {
-    if (selectedOptions !== selected) {
-      setSelectedOptions(selected);
-    }
-  }, [selected, selectedOptions]);
-
-  useIsomorphicLayoutEffect(() => {
-    let newNavigableOptions: (
-      | OptionDescriptor
-      | ActionListItemDescriptor
-    )[] = [];
-    if (actionsBefore) {
-      newNavigableOptions = newNavigableOptions.concat(actionsBefore);
-    }
-    if (options) {
-      newNavigableOptions = newNavigableOptions.concat(options);
-    }
-    if (actionsAfter) {
-      newNavigableOptions = newNavigableOptions.concat(actionsAfter);
-    }
-    newNavigableOptions = assignOptionIds(newNavigableOptions, id);
-    setNavigableOptions(newNavigableOptions);
-  }, [actionsAfter, actionsBefore, id, options]);
-
-  useEffect(() => {
-    updateIndexOfSelectedOption(navigableOptions);
-  }, [navigableOptions, updateIndexOfSelectedOption]);
-
-  let actionsBeforeMarkup: JSX.Element | undefined;
-  if (actionsBefore && actionsBefore.length > 0) {
-    actionsBeforeMarkup = (
-      <ActionList
-        actionRole="option"
-        items={getActionsWithIds(actionsBefore, true)}
-      />
-    );
-  }
-
-  let actionsAfterMarkup: JSX.Element | undefined;
-  if (actionsAfter && actionsAfter.length > 0) {
-    actionsAfterMarkup = (
-      <ActionList actionRole="option" items={getActionsWithIds(actionsAfter)} />
-    );
-  }
-
-  const optionsMarkup = options.length > 0 && (
-    <OptionList
-      role="presentation"
-      optionRole="option"
-      options={filterForOptions(navigableOptions)}
-      onChange={selectOptions}
-      selected={selectedOptions}
-      title={listTitle}
-      allowMultiple={allowMultiple}
-    />
-  );
-
-  const emptyStateMarkup = !actionsAfter &&
-    !actionsBefore &&
-    !contentAfter &&
-    !contentBefore &&
-    options.length === 0 &&
-    emptyState && <div className={styles.EmptyState}>{emptyState}</div>;
-
-  const selectedOptionId =
-    selectedIndex > -1 ? `${id}-${selectedIndex}` : undefined;
-
-  const context = {
-    id,
-    selectedOptionId,
-  };
-
-  return (
-    <ComboBoxContext.Provider value={context}>
-      <div
-        onClick={activatePopover}
-        onKeyDown={activatePopover}
-        aria-expanded={popoverActive}
-        aria-owns={id}
-        aria-controls={id}
-        aria-haspopup
-        onFocus={forcePopoverActiveTrue}
-        onBlur={handleBlur}
-        // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
-        tabIndex={options.length === 0 ? -1 : 0}
-      >
-        <KeypressListener keyCode={Key.DownArrow} handler={selectNextOption} />
-        <KeypressListener
-          keyCode={Key.UpArrow}
-          handler={selectPreviousOption}
-        />
-        <EventListener event="keydown" handler={handleEnter} />
-        <KeypressListener
-          keyCode={Key.Escape}
-          handler={forcePopoverActiveFalse}
-        />
-        <Popover
-          activator={textField}
-          active={popoverActive}
-          onClose={forcePopoverActiveFalse}
-          preferredPosition={preferredPosition}
-          fullWidth
-          autofocusTarget="none"
-        >
-          <Popover.Pane onScrolledToBottom={onEndReached}>
-            <div id={id} role="listbox" aria-multiselectable={allowMultiple}>
-              {contentBefore}
-              {actionsBeforeMarkup}
-              {optionsMarkup}
-              {actionsAfterMarkup}
-              {contentAfter}
-              {emptyStateMarkup}
-            </div>
-          </Popover.Pane>
-        </Popover>
-      </div>
-    </ComboBoxContext.Provider>
-  );
-}
-
-function assignOptionIds(
-  options: (OptionDescriptor | ActionListItemDescriptor)[],
-  id: string,
-): OptionDescriptor[] | ActionListItemDescriptor[] {
-  return options.map((option, optionIndex) => ({
-    ...option,
-    id: `${id}-${optionIndex}`,
-  }));
-}
-
-function isOption(
-  navigableOption: OptionDescriptor | ActionListItemDescriptor,
-): navigableOption is OptionDescriptor {
-  return 'value' in navigableOption && navigableOption.value !== undefined;
-}
-
-function filterForOptions(
-  mixedArray: (ActionListItemDescriptor | OptionDescriptor)[],
-): OptionDescriptor[] {
-  return mixedArray.filter(isOption);
-}
diff --git a/src/components/Autocomplete/components/ComboBox/context.tsx b/src/components/Autocomplete/components/ComboBox/context.tsx
deleted file mode 100644
index f4a7c72edb3..00000000000
--- a/src/components/Autocomplete/components/ComboBox/context.tsx
+++ /dev/null
@@ -1,8 +0,0 @@
-import {createContext} from 'react';
-
-interface ComboBoxContextType {
-  comboBoxId?: string;
-  selectedOptionId?: string;
-}
-
-export const ComboBoxContext = createContext<ComboBoxContextType>({});
diff --git a/src/components/Autocomplete/components/ComboBox/index.ts b/src/components/Autocomplete/components/ComboBox/index.ts
deleted file mode 100644
index d122f03ba63..00000000000
--- a/src/components/Autocomplete/components/ComboBox/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './ComboBox';
diff --git a/src/components/Autocomplete/components/ComboBox/tests/ComboBox.test.tsx b/src/components/Autocomplete/components/ComboBox/tests/ComboBox.test.tsx
deleted file mode 100644
index 44e5be9514b..00000000000
--- a/src/components/Autocomplete/components/ComboBox/tests/ComboBox.test.tsx
+++ /dev/null
@@ -1,639 +0,0 @@
-import React from 'react';
-import {OptionList, ActionList, Popover} from 'components';
-import {mountWithApp} from 'test-utilities';
-// eslint-disable-next-line no-restricted-imports
-import {mountWithAppProvider, act} from 'test-utilities/legacy';
-
-import {TextField} from '../../TextField';
-import {Key} from '../../../../../types';
-import {ComboBox} from '../ComboBox';
-
-describe('<ComboBox/>', () => {
-  const options = [
-    {value: 'cheese_pizza', label: 'Cheese Pizza'},
-    {value: 'macaroni_pizza', label: 'Macaroni Pizza'},
-    {value: 'pepperoni_pizza', label: 'Pepperoni Pizza'},
-  ];
-
-  const action = [
-    {
-      content: 'Add tag',
-      onAction: noop,
-    },
-  ];
-
-  describe('options', () => {
-    it('passes options to OptionList', () => {
-      const comboBox = mountWithAppProvider(
-        <ComboBox
-          options={options}
-          selected={[]}
-          textField={renderTextField()}
-          onSelect={noop}
-        />,
-      );
-
-      comboBox.simulate('click');
-
-      const optionListOptions = comboBox.find(OptionList).prop('options') || [
-        {
-          value: '',
-          label: '',
-        },
-      ];
-
-      expect(optionListOptions[0].value).toBe('cheese_pizza');
-      expect(optionListOptions[0].label).toBe('Cheese Pizza');
-      expect(optionListOptions[1].value).toBe('macaroni_pizza');
-      expect(optionListOptions[1].label).toBe('Macaroni Pizza');
-    });
-
-    it.each([
-      [options, 0],
-      [[], -1],
-    ])('sets tabIndex depending of number of options', (options, tabIndex) => {
-      const comboBox = mountWithApp(
-        <ComboBox
-          options={options}
-          selected={[]}
-          textField={renderTextField()}
-          onSelect={noop}
-        />,
-      );
-
-      expect(comboBox.find('div')).toHaveReactProps({
-        tabIndex,
-      });
-    });
-  });
-
-  describe('contentBefore and contentAfter', () => {
-    it('renders content passed into contentBefore', () => {
-      const comboBox = mountWithAppProvider(
-        <ComboBox
-          options={options}
-          selected={[]}
-          textField={renderTextField()}
-          onSelect={noop}
-          contentBefore={renderNodeWithId()}
-        />,
-      );
-      comboBox.simulate('click');
-      expect(comboBox.find('#CustomNode')).toHaveLength(1);
-    });
-
-    it('renders content passed into contentAfter', () => {
-      const comboBox = mountWithAppProvider(
-        <ComboBox
-          options={options}
-          selected={[]}
-          textField={renderTextField()}
-          onSelect={noop}
-          contentAfter={renderNodeWithId()}
-        />,
-      );
-      comboBox.simulate('click');
-      expect(comboBox.find('#CustomNode')).toHaveLength(1);
-    });
-  });
-
-  describe('actionsBefore and actionsAfter', () => {
-    const comboBox = mountWithAppProvider(
-      <ComboBox
-        options={options}
-        selected={[]}
-        textField={renderTextField()}
-        onSelect={noop}
-        actionsBefore={[{image: '../image/path', role: 'option'}]}
-        actionsAfter={[{image: '../image/path', role: 'option'}]}
-      />,
-    );
-
-    it('passes actionsBefore to the options in the first ActionList', () => {
-      comboBox.simulate('click');
-
-      const actionListItems = comboBox
-        .find(ActionList)
-        .first()
-        .prop('items') || [
-        {
-          image: '',
-          role: '',
-        },
-      ];
-
-      expect(actionListItems[0].image).toBe('../image/path');
-      expect(actionListItems[0].role).toBe('option');
-    });
-
-    it('passes actionsAfter to the options in the second ActionList', () => {
-      comboBox.simulate('click');
-
-      const actionListItems = comboBox
-        .find(ActionList)
-        .last()
-        .prop('items') || [
-        {
-          image: '',
-          role: '',
-        },
-      ];
-
-      expect(actionListItems[0].image).toBe('../image/path');
-      expect(actionListItems[0].role).toBe('option');
-    });
-  });
-
-  describe('ids', () => {
-    it('passes an id to the options in OptionList', () => {
-      const comboBox = mountWithAppProvider(
-        <ComboBox
-          id="TestId"
-          options={options}
-          selected={[]}
-          textField={renderTextField()}
-          onSelect={noop}
-        />,
-      );
-      comboBox.simulate('click');
-      expect(comboBox.find('button').at(0).prop('id')).toBe('TestId-0');
-    });
-
-    it('passes an id to the actions in ActionList', () => {
-      const comboBox = mountWithAppProvider(
-        <ComboBox
-          id="TestId"
-          options={options}
-          selected={[]}
-          textField={renderTextField()}
-          onSelect={noop}
-          actionsBefore={action}
-        />,
-      );
-      comboBox.simulate('click');
-      expect(comboBox.find('button').at(0).prop('id')).toBe('TestId-0');
-    });
-  });
-
-  describe('actions', () => {
-    it('renders an action in actionsBefore', () => {
-      const comboBox = mountWithAppProvider(
-        <ComboBox
-          options={options}
-          selected={[]}
-          textField={renderTextField()}
-          onSelect={noop}
-          actionsBefore={action}
-        />,
-      );
-
-      comboBox.simulate('click');
-
-      expect(comboBox.find('button').at(0).text()).toBe('Add tag');
-    });
-
-    it('renders an action in actionsAfter', () => {
-      const comboBox = mountWithAppProvider(
-        <ComboBox
-          options={options}
-          selected={[]}
-          textField={renderTextField()}
-          onSelect={noop}
-          actionsAfter={action}
-        />,
-      );
-      comboBox.simulate('click');
-      expect(comboBox.find('button').at(3).text()).toBe('Add tag');
-    });
-  });
-
-  describe('select', () => {
-    it('passes the selected options to OptionList', () => {
-      const comboBox = mountWithAppProvider(
-        <ComboBox
-          options={options}
-          selected={['cheese_pizza']}
-          textField={renderTextField()}
-          onSelect={noop}
-          actionsAfter={action}
-        />,
-      );
-
-      comboBox.simulate('click');
-      expect(comboBox.find(OptionList).prop('selected')).toStrictEqual([
-        'cheese_pizza',
-      ]);
-    });
-  });
-
-  describe('listTitle', () => {
-    it('passes the listTitle as title to OptionList', () => {
-      const comboBox = mountWithAppProvider(
-        <ComboBox
-          options={options}
-          selected={[]}
-          textField={renderTextField()}
-          onSelect={noop}
-          listTitle="List title"
-        />,
-      );
-
-      comboBox.simulate('click');
-      expect(comboBox.find(OptionList).prop('title')).toBe('List title');
-    });
-  });
-
-  describe('<TextField />', () => {
-    it('renders TextField by default', () => {
-      const comboBox = mountWithAppProvider(
-        <ComboBox
-          options={options}
-          selected={[]}
-          textField={renderTextField()}
-          onSelect={noop}
-        />,
-      );
-      expect(comboBox.find(TextField)).toHaveLength(1);
-    });
-
-    it('renders a custom given input', () => {
-      const comboBox = mountWithAppProvider(
-        <ComboBox
-          options={options}
-          selected={[]}
-          textField={<input type="text" />}
-          onSelect={noop}
-        />,
-      );
-      expect(comboBox.find('input')).toHaveLength(1);
-      expect(comboBox.find(TextField)).toHaveLength(0);
-    });
-
-    it('is passed to Popover as the activator', () => {
-      const comboBox = mountWithAppProvider(
-        <ComboBox
-          options={options}
-          selected={[]}
-          textField={renderTextField()}
-          onSelect={noop}
-        />,
-      );
-
-      expect(comboBox.find(Popover).find(TextField)).toHaveLength(1);
-    });
-  });
-
-  describe('<Popover />', () => {
-    const comboBox = mountWithAppProvider(
-      <ComboBox
-        options={options}
-        selected={[]}
-        textField={renderTextField()}
-        onSelect={noop}
-        preferredPosition="above"
-      />,
-    );
-
-    it('does not set Popover to active before being clicked', () => {
-      expect(comboBox.find(Popover).prop('active')).toBe(false);
-    });
-
-    it('sets Popover to active when clicked', () => {
-      comboBox.simulate('click');
-      expect(comboBox.find(Popover).prop('active')).toBe(true);
-    });
-
-    it('sets Popover to active on keyDown', () => {
-      comboBox.simulate('keydown');
-      expect(comboBox.find(Popover).prop('active')).toBe(true);
-    });
-
-    it('sets Popover to fullWidth', () => {
-      expect(comboBox.find(Popover).prop('fullWidth')).toBe(true);
-    });
-
-    it('prevents autofocus on Popover', () => {
-      expect(comboBox.find(Popover).prop('autofocusTarget')).toBe('none');
-    });
-
-    it('passes the preferredPosition to Popover', () => {
-      expect(comboBox.find(Popover).prop('preferredPosition')).toBe('above');
-    });
-  });
-
-  describe('allowMultiple', () => {
-    it('renders a button if the prop is false', () => {
-      const comboBox = mountWithAppProvider(
-        <ComboBox
-          options={options}
-          selected={[]}
-          textField={renderTextField()}
-          onSelect={noop}
-          allowMultiple={false}
-        />,
-      );
-      comboBox.simulate('click');
-      expect(comboBox.find('button')).toHaveLength(options.length);
-    });
-
-    it('renders a checkbox if the prop is set to true', () => {
-      const comboBox = mountWithAppProvider(
-        <ComboBox
-          options={options}
-          selected={[]}
-          textField={renderTextField()}
-          onSelect={noop}
-          allowMultiple
-        />,
-      );
-      comboBox.simulate('click');
-      expect(comboBox.find('input[type="checkbox"]')).toHaveLength(
-        options.length,
-      );
-    });
-  });
-
-  describe('onSelect', () => {
-    it('gets called when an item is clicked', () => {
-      const spy = jest.fn();
-      const comboBox = mountWithAppProvider(
-        <ComboBox
-          options={options}
-          selected={[]}
-          textField={renderTextField()}
-          onSelect={spy}
-        />,
-      );
-      comboBox.simulate('click');
-      comboBox.find('button').at(0).simulate('click');
-      expect(spy).toHaveBeenCalledTimes(1);
-    });
-
-    it('gets called when a checkbox is changed', () => {
-      const spy = jest.fn();
-      const comboBox = mountWithAppProvider(
-        <ComboBox
-          options={options}
-          selected={[]}
-          textField={renderTextField()}
-          onSelect={spy}
-          allowMultiple
-        />,
-      );
-      comboBox.simulate('click');
-      comboBox
-        .find('input[type="checkbox"]')
-        .at(0)
-        .simulate('change', {target: {checked: true}});
-      expect(spy).toHaveBeenCalledTimes(1);
-    });
-  });
-
-  describe('onEndReached', () => {
-    it('gets called when the end of the option list is reached', () => {
-      const spy = jest.fn();
-      const comboBox = mountWithApp(
-        <ComboBox
-          options={options}
-          selected={[]}
-          textField={renderTextField()}
-          onSelect={noop}
-          onEndReached={spy}
-        />,
-      );
-
-      // Focus the combobox so that the popover pane is rendered
-      comboBox.find('div')!.trigger('onFocus');
-
-      comboBox.find(Popover.Pane)!.trigger('onScrolledToBottom');
-      expect(spy).toHaveBeenCalledTimes(1);
-    });
-  });
-
-  describe('keypress events', () => {
-    // Jest 25 / JSDOM 16 causes this test case to go into an infinite loop and
-    // never recover. Skip for now till we can find a fix
-    // eslint-disable-next-line jest/no-disabled-tests
-    it.skip('handles key events when there are no previous options', () => {
-      const spy = jest.fn();
-      const options: {value: string; label: string}[] = [];
-      const comboBox = mountWithAppProvider(
-        <ComboBox
-          options={options}
-          selected={[]}
-          textField={renderTextField()}
-          onSelect={spy}
-        />,
-      );
-      comboBox.find(TextField).simulate('click');
-      act(() => {
-        dispatchKeyup(Key.DownArrow);
-      });
-      act(() => {
-        dispatchKeydown(Key.Enter);
-      });
-      expect(spy).not.toHaveBeenCalled();
-
-      comboBox.setProps({
-        options: [
-          {value: 'cheese_pizza', label: 'Cheese Pizza'},
-          {value: 'macaroni_pizza', label: 'Macaroni Pizza'},
-          {value: 'pepperoni_pizza', label: 'Pepperoni Pizza'},
-        ],
-      });
-      comboBox.update();
-      comboBox.find(TextField).simulate('click');
-      act(() => {
-        dispatchKeyup(Key.DownArrow);
-      });
-      act(() => {
-        dispatchKeydown(Key.Enter);
-      });
-      expect(spy).toHaveBeenCalledWith(['cheese_pizza']);
-    });
-
-    // Jest 25 / JSDOM 16 causes this test case to go into an infinite loop and
-    // never recover. Skip for now till we can find a fix
-    // eslint-disable-next-line jest/no-disabled-tests
-    it.skip('adds to selected options when the down arrow and enter keys are pressed', () => {
-      const spy = jest.fn();
-      const comboBox = mountWithAppProvider(
-        <ComboBox
-          options={options}
-          selected={[]}
-          textField={renderTextField()}
-          onSelect={spy}
-        />,
-      );
-      comboBox.find(TextField).simulate('click');
-      act(() => {
-        dispatchKeyup(Key.DownArrow);
-      });
-      act(() => {
-        dispatchKeydown(Key.Enter);
-      });
-      expect(spy).toHaveBeenCalledWith(['cheese_pizza']);
-    });
-
-    // Jest 25 / JSDOM 16 causes this test case to go into an infinite loop and
-    // never recover. Skip for now till we can find a fix
-    // eslint-disable-next-line jest/no-disabled-tests
-    it.skip('does not add to selected options when the down arrow and key other than enter is pressed', () => {
-      const spy = jest.fn();
-      const comboBox = mountWithAppProvider(
-        <ComboBox
-          options={options}
-          selected={[]}
-          textField={renderTextField()}
-          onSelect={spy}
-        />,
-      );
-      comboBox.find(TextField).simulate('click');
-      act(() => {
-        dispatchKeyup(Key.DownArrow);
-      });
-      act(() => {
-        dispatchKeydown(Key.RightArrow);
-      });
-      expect(spy).not.toHaveBeenCalled();
-    });
-
-    it('activates the popover when the combobox is focused', () => {
-      const comboBox = mountWithAppProvider(
-        <ComboBox
-          options={options}
-          selected={[]}
-          textField={renderTextField()}
-          onSelect={noop}
-        />,
-      );
-
-      comboBox.simulate('focus');
-      expect(comboBox.find(Popover).prop('active')).toBe(true);
-    });
-
-    it('deactivates the popover when the escape key is pressed', () => {
-      const comboBox = mountWithAppProvider(
-        <ComboBox
-          options={options}
-          selected={[]}
-          textField={renderTextField()}
-          onSelect={noop}
-        />,
-      );
-
-      comboBox.find(TextField).simulate('click');
-      expect(comboBox.find(Popover).prop('active')).toBe(true);
-
-      act(() => {
-        dispatchKeyup(Key.Escape);
-      });
-
-      comboBox.update();
-      expect(comboBox.find(Popover).prop('active')).toBe(false);
-    });
-  });
-
-  describe('empty state', () => {
-    const EmptyState = () => <div>No results</div>;
-
-    it('renders an empty state when no options are passed in', () => {
-      const comboBox = mountWithAppProvider(
-        <ComboBox
-          options={[]}
-          selected={[]}
-          textField={renderTextField()}
-          onSelect={noop}
-          emptyState={<EmptyState />}
-        />,
-      );
-
-      comboBox.simulate('click');
-      expect(comboBox.find(EmptyState)).toHaveLength(1);
-    });
-
-    it('does not render empty state if actionsBefore exist', () => {
-      const comboBox = mountWithAppProvider(
-        <ComboBox
-          options={[]}
-          selected={[]}
-          textField={renderTextField()}
-          onSelect={noop}
-          actionsBefore={[{image: '../image/path', role: 'option'}]}
-          emptyState={<EmptyState />}
-        />,
-      );
-
-      comboBox.simulate('click');
-      expect(comboBox.find(EmptyState)).toHaveLength(0);
-    });
-
-    it('does not render empty state if actionsAfter exist', () => {
-      const comboBox = mountWithAppProvider(
-        <ComboBox
-          options={[]}
-          selected={[]}
-          textField={renderTextField()}
-          onSelect={noop}
-          actionsAfter={[{image: '../image/path', role: 'option'}]}
-          emptyState={<EmptyState />}
-        />,
-      );
-
-      comboBox.simulate('click');
-      expect(comboBox.find(EmptyState)).toHaveLength(0);
-    });
-
-    it('does not render empty state if contentAfter exist', () => {
-      const comboBox = mountWithAppProvider(
-        <ComboBox
-          options={[]}
-          selected={[]}
-          textField={renderTextField()}
-          onSelect={noop}
-          contentAfter={<div>Content after</div>}
-          emptyState={<EmptyState />}
-        />,
-      );
-
-      comboBox.simulate('click');
-      expect(comboBox.find(EmptyState)).toHaveLength(0);
-    });
-
-    it('does not render empty state if contentBefore exist', () => {
-      const comboBox = mountWithAppProvider(
-        <ComboBox
-          options={[]}
-          selected={[]}
-          textField={renderTextField()}
-          onSelect={noop}
-          contentBefore={<div>Content before</div>}
-          emptyState={<EmptyState />}
-        />,
-      );
-
-      comboBox.simulate('click');
-      expect(comboBox.find(EmptyState)).toHaveLength(0);
-    });
-  });
-});
-
-function noop() {}
-
-function renderTextField() {
-  return <TextField label="" onChange={noop} autoComplete="off" />;
-}
-
-function renderNodeWithId() {
-  return <div id="CustomNode" />;
-}
-
-function dispatchKeyup(key: Key) {
-  const event: KeyboardEventInit & {keyCode: Key} = {keyCode: key};
-  document.dispatchEvent(new KeyboardEvent('keyup', event));
-}
-
-function dispatchKeydown(key: Key) {
-  const event: KeyboardEventInit & {keyCode: Key} = {keyCode: key};
-  window.dispatchEvent(new KeyboardEvent('keydown', event));
-}
diff --git a/src/components/Autocomplete/components/MappedAction/MappedAction.scss b/src/components/Autocomplete/components/MappedAction/MappedAction.scss
new file mode 100644
index 00000000000..3094c223bd4
--- /dev/null
+++ b/src/components/Autocomplete/components/MappedAction/MappedAction.scss
@@ -0,0 +1,112 @@
+@import '../../../../styles/common';
+
+$image-size: rem(20px);
+$item-min-height: rem(40px);
+$item-vertical-padding: ($item-min-height - line-height(body)) / 2;
+
+.ActionContainer {
+  margin-bottom: spacing(base-tight);
+}
+
+[data-focused] {
+  .Action {
+    @include recolor-icon(var(--p-interactive));
+
+    &.destructive {
+      background-color: var(--p-surface-critical-subdued-pressed);
+    }
+  }
+}
+
+.Action {
+  @include focus-ring;
+  display: block;
+  width: 100%;
+  min-height: $item-min-height;
+  text-align: left;
+  cursor: pointer;
+  padding: $item-vertical-padding spacing(tight);
+  border-radius: var(--p-border-radius-base);
+  border-top: 1px solid var(--p-surface); // 1px gap between elements
+
+  &:hover {
+    background-color: var(--p-surface-hovered);
+    text-decoration: none;
+
+    @media (-ms-high-contrast: active) {
+      outline: 1px solid ms-high-contrast-color('text');
+    }
+  }
+
+  &.selected {
+    @include recolor-icon(var(--p-interactive));
+    background-color: var(--p-surface-selected);
+  }
+
+  &:active {
+    @include recolor-icon(var(--p-interactive));
+    background-color: var(--p-surface-pressed);
+  }
+
+  &:focus:not(:active) {
+    @include focus-ring($style: 'focused');
+  }
+
+  &.destructive {
+    @include recolor-icon(var(--p-icon-critical));
+    color: var(--p-interactive-critical);
+
+    &:hover {
+      background-color: var(--p-surface-critical-subdued-hovered);
+    }
+
+    // stylelint-disable-next-line selector-max-class
+    &:active,
+    &.selected {
+      background-color: var(--p-surface-critical-subdued-pressed);
+    }
+  }
+
+  &.disabled {
+    background-image: none;
+    color: var(--p-text-disabled);
+
+    // stylelint-disable-next-line selector-max-class
+    .Prefix,
+    .Suffix {
+      @include recolor-icon(var(--p-icon-disabled));
+    }
+  }
+}
+
+.Content {
+  display: flex;
+  align-items: center;
+}
+
+.Prefix {
+  @include recolor-icon(var(--p-icon));
+  display: flex;
+  flex: 0 0 auto;
+  justify-content: center;
+  align-items: center;
+  height: $image-size;
+  width: $image-size;
+  border-radius: border-radius();
+
+  // We need the negative margin to ensure that the image does not set
+  // the minimum height of the action item.
+  margin: (-0.5 * $image-size) spacing() (-0.5 * $image-size) 0;
+  background-size: cover;
+  background-position: center center;
+}
+
+.Suffix {
+  @include recolor-icon(var(--p-icon));
+  margin-left: spacing();
+}
+
+.Text {
+  @include layout-flex-fix;
+  flex: 1 1 auto;
+}
diff --git a/src/components/Autocomplete/components/MappedAction/MappedAction.tsx b/src/components/Autocomplete/components/MappedAction/MappedAction.tsx
new file mode 100644
index 00000000000..86d42218f68
--- /dev/null
+++ b/src/components/Autocomplete/components/MappedAction/MappedAction.tsx
@@ -0,0 +1,122 @@
+import React, {useMemo} from 'react';
+
+import type {ActionListItemDescriptor} from '../../../../types';
+import {Badge} from '../../../Badge';
+import {classNames} from '../../../../utilities/css';
+import {MappedActionContext} from '../../../../utilities/autocomplete';
+import {ListBox} from '../../../ListBox';
+import {Icon} from '../../../Icon';
+import {TextStyle} from '../../../TextStyle';
+import {useI18n} from '../../../../utilities/i18n';
+
+import styles from './MappedAction.scss';
+
+interface MappedAction extends ActionListItemDescriptor {}
+
+export function MappedAction({
+  active,
+  content,
+  disabled,
+  icon,
+  image,
+  prefix,
+  suffix,
+  ellipsis,
+  role,
+  url,
+  external,
+  onAction,
+  destructive,
+  badge,
+  helpText,
+}: MappedAction) {
+  const i18n = useI18n();
+
+  let prefixMarkup: React.ReactNode | null = null;
+
+  if (prefix) {
+    prefixMarkup = <div className={styles.Prefix}>{prefix}</div>;
+  } else if (icon) {
+    prefixMarkup = (
+      <div className={styles.Prefix}>
+        <Icon source={icon} />
+      </div>
+    );
+  } else if (image) {
+    prefixMarkup = (
+      <div
+        role="presentation"
+        className={styles.Prefix}
+        style={{backgroundImage: `url(${image}`}}
+      />
+    );
+  }
+
+  const badgeMarkup = badge && (
+    <span className={styles.Suffix}>
+      <Badge status={badge.status}>{badge.content}</Badge>
+    </span>
+  );
+
+  const suffixMarkup = suffix && (
+    <span className={styles.Suffix}>{suffix}</span>
+  );
+
+  const contentText =
+    ellipsis && content
+      ? i18n.translate('Polaris.Autocomplete.ellipsis', {content})
+      : content;
+
+  const contentMarkup = (
+    <div className={styles.Text}>
+      {helpText ? (
+        <>
+          <div>{contentText}</div>
+          <TextStyle variation="subdued">{helpText}</TextStyle>
+        </>
+      ) : (
+        contentText
+      )}
+    </div>
+  );
+
+  const context = useMemo(
+    () => ({
+      role,
+      url,
+      external,
+      onAction,
+      destructive,
+      isAction: true,
+    }),
+    [role, url, external, onAction, destructive],
+  );
+
+  const actionClassNames = classNames(
+    styles.Action,
+    disabled && styles.disabled,
+    destructive && styles.destructive,
+    active && styles.selected,
+  );
+
+  return (
+    <MappedActionContext.Provider value={context}>
+      <div className={styles.ActionContainer}>
+        <ListBox.Action
+          selected={active}
+          disabled={disabled}
+          value={content || ''}
+        >
+          <div className={actionClassNames}>
+            <div className={styles.Content}>
+              {prefixMarkup}
+              {contentMarkup}
+              {badgeMarkup}
+              {suffixMarkup}
+            </div>
+          </div>
+        </ListBox.Action>
+      </div>
+    </MappedActionContext.Provider>
+  );
+}
diff --git a/src/components/Autocomplete/components/MappedAction/index.ts b/src/components/Autocomplete/components/MappedAction/index.ts
new file mode 100644
index 00000000000..a4230c37cdf
--- /dev/null
+++ b/src/components/Autocomplete/components/MappedAction/index.ts
@@ -0,0 +1 @@
+export * from './MappedAction';
diff --git a/src/components/Autocomplete/components/MappedAction/tests/MappedAction.test.tsx b/src/components/Autocomplete/components/MappedAction/tests/MappedAction.test.tsx
new file mode 100644
index 00000000000..cbd2256e83e
--- /dev/null
+++ b/src/components/Autocomplete/components/MappedAction/tests/MappedAction.test.tsx
@@ -0,0 +1,184 @@
+import React from 'react';
+import {mountWithListBoxProvider} from 'test-utilities/list-box';
+
+import {ListBox} from '../../../../ListBox';
+import {MappedAction} from '../MappedAction';
+import {MappedActionContext} from '../../../../../utilities/autocomplete';
+import {Badge} from '../../../../Badge';
+import {Icon} from '../../../../Icon';
+
+describe('MappedAction', () => {
+  it('renders badge when provided', () => {
+    const badge = {
+      status: 'new' as const,
+      content: 'new',
+    };
+    const mappedAction = mountWithListBoxProvider(
+      <MappedAction badge={badge} />,
+    );
+
+    expect(mappedAction).toContainReactComponent(Badge, {
+      status: badge.status,
+      children: badge.content,
+    });
+  });
+
+  it('renders suffix when provided', () => {
+    const mappedAction = mountWithListBoxProvider(
+      <MappedAction suffix={<MockComponent />} />,
+    );
+
+    expect(mappedAction).toContainReactComponent(MockComponent);
+  });
+
+  it('renders helpText when provided', () => {
+    const helpText = 'help text';
+    const mappedAction = mountWithListBoxProvider(
+      <MappedAction helpText={helpText} />,
+    );
+
+    expect(mappedAction).toContainReactText(helpText);
+  });
+
+  it('renders ellipsis when true', () => {
+    const mappedAction = mountWithListBoxProvider(
+      <MappedAction ellipsis content="content for ellipsis" />,
+    );
+
+    expect(mappedAction).toContainReactText('…');
+  });
+
+  it('renders MappedActionContext provider with values', () => {
+    const props = {
+      role: 'role',
+      url: 'url',
+      external: false,
+      onAction: () => {},
+      destructive: false,
+    };
+    const mappedAction = mountWithListBoxProvider(<MappedAction {...props} />);
+
+    expect(mappedAction).toContainReactComponent(MappedActionContext.Provider, {
+      value: {
+        ...props,
+        isAction: true,
+      },
+    });
+  });
+
+  describe('ListBox.Action', () => {
+    it('renders', () => {
+      const mappedAction = mountWithListBoxProvider(<MappedAction />);
+
+      expect(mappedAction).toContainReactComponent(ListBox.Action);
+    });
+
+    it('passes active', () => {
+      const mappedAction = mountWithListBoxProvider(<MappedAction active />);
+
+      expect(mappedAction).toContainReactComponent(ListBox.Action, {
+        selected: true,
+      });
+    });
+
+    it('passes disabled', () => {
+      const disabled = true;
+      const mappedAction = mountWithListBoxProvider(
+        <MappedAction disabled={disabled} />,
+      );
+
+      expect(mappedAction).toContainReactComponent(ListBox.Action, {
+        disabled,
+      });
+    });
+
+    it('passes value', () => {
+      const value = 'value';
+      const mappedAction = mountWithListBoxProvider(
+        <MappedAction content={value} />,
+      );
+
+      expect(mappedAction).toContainReactComponent(ListBox.Action, {
+        value,
+      });
+    });
+
+    it('defaults value to an empty string', () => {
+      const value = '';
+      const mappedAction = mountWithListBoxProvider(<MappedAction />);
+
+      expect(mappedAction).toContainReactComponent(ListBox.Action, {
+        value,
+      });
+    });
+  });
+
+  describe('prefix markup', () => {
+    it('renders images', () => {
+      const image = 'image';
+      const mappedAction = mountWithListBoxProvider(
+        <MappedAction image={image} />,
+      );
+
+      expect(mappedAction).toContainReactComponent('div', {
+        role: 'presentation',
+      });
+    });
+
+    it('renders icon', () => {
+      const source = 'icon';
+      const mappedAction = mountWithListBoxProvider(
+        <MappedAction icon={source} />,
+      );
+
+      expect(mappedAction).toContainReactComponent(Icon, {source});
+    });
+
+    it('renders prefix', () => {
+      const mappedAction = mountWithListBoxProvider(
+        <MappedAction prefix={<MockComponent />} />,
+      );
+
+      expect(mappedAction).toContainReactComponent(MockComponent);
+    });
+
+    it('renders icon instead of image', () => {
+      const source = 'icon';
+      const image = 'image';
+      const mappedAction = mountWithListBoxProvider(
+        <MappedAction icon={source} image={image} />,
+      );
+
+      expect(mappedAction).toContainReactComponent(Icon, {source});
+      expect(mappedAction).not.toContainReactComponent('div', {
+        role: 'presentation',
+      });
+    });
+
+    it('renders prefix instead of image', () => {
+      const image = 'image';
+      const mappedAction = mountWithListBoxProvider(
+        <MappedAction prefix={<MockComponent />} image={image} />,
+      );
+
+      expect(mappedAction).toContainReactComponent(MockComponent);
+      expect(mappedAction).not.toContainReactComponent('div', {
+        role: 'presentation',
+      });
+    });
+
+    it('renders prefix instead of icon', () => {
+      const source = 'icon';
+      const mappedAction = mountWithListBoxProvider(
+        <MappedAction prefix={<MockComponent />} icon={source} />,
+      );
+
+      expect(mappedAction).toContainReactComponent(MockComponent);
+      expect(mappedAction).not.toContainReactComponent(Icon, {source});
+    });
+  });
+});
+
+function MockComponent() {
+  return null;
+}
diff --git a/src/components/Autocomplete/components/MappedOption/MappedOption.scss b/src/components/Autocomplete/components/MappedOption/MappedOption.scss
new file mode 100644
index 00000000000..6cbdbc342e0
--- /dev/null
+++ b/src/components/Autocomplete/components/MappedOption/MappedOption.scss
@@ -0,0 +1,22 @@
+@import '../../../../styles/common';
+
+.Content {
+  display: flex;
+  flex: 1;
+}
+
+.Media {
+  @include recolor-icon(var(--p-icon, color('ink', 'light')), color('white'));
+  padding: 0 spacing(tight);
+}
+
+.singleSelectionMedia {
+  padding: 0 spacing(tight) 0 0;
+}
+
+.disabledMedia {
+  @include recolor-icon(
+    var(--p-icon-disabled, color('ink', 'lightest')),
+    color('white')
+  );
+}
diff --git a/src/components/Autocomplete/components/MappedOption/MappedOption.tsx b/src/components/Autocomplete/components/MappedOption/MappedOption.tsx
new file mode 100644
index 00000000000..dec94df5197
--- /dev/null
+++ b/src/components/Autocomplete/components/MappedOption/MappedOption.tsx
@@ -0,0 +1,51 @@
+import React, {memo} from 'react';
+
+import {ListBox} from '../../../ListBox';
+import type {OptionDescriptor} from '../../../OptionList';
+import type {ArrayElement} from '../../../../types';
+import {classNames} from '../../../../utilities/css';
+
+import styles from './MappedOption.scss';
+
+type MappedOption = ArrayElement<OptionDescriptor[]> & {
+  selected: boolean;
+  singleSelection: boolean;
+};
+
+export const MappedOption = memo(function MappedOption({
+  label,
+  value,
+  disabled,
+  media,
+  selected,
+  singleSelection,
+}: MappedOption) {
+  const mediaClassNames = classNames(
+    styles.Media,
+    disabled && styles.disabledMedia,
+    singleSelection && styles.singleSelectionMedia,
+  );
+
+  const mediaMarkup = media ? (
+    <div className={mediaClassNames}>{media}</div>
+  ) : null;
+
+  const accessibilityLabel = typeof label === 'string' ? label : undefined;
+
+  return (
+    <ListBox.Option
+      accessibilityLabel={accessibilityLabel}
+      key={value}
+      selected={selected}
+      value={value}
+      disabled={disabled}
+    >
+      <ListBox.TextOption selected={selected} disabled={disabled}>
+        <div className={styles.Content}>
+          {mediaMarkup}
+          {label}
+        </div>
+      </ListBox.TextOption>
+    </ListBox.Option>
+  );
+});
diff --git a/src/components/Autocomplete/components/MappedOption/index.ts b/src/components/Autocomplete/components/MappedOption/index.ts
new file mode 100644
index 00000000000..58a02ae72a3
--- /dev/null
+++ b/src/components/Autocomplete/components/MappedOption/index.ts
@@ -0,0 +1 @@
+export * from './MappedOption';
diff --git a/src/components/Autocomplete/components/MappedOption/tests/MappedOption.test.tsx b/src/components/Autocomplete/components/MappedOption/tests/MappedOption.test.tsx
new file mode 100644
index 00000000000..1d5ec593c8d
--- /dev/null
+++ b/src/components/Autocomplete/components/MappedOption/tests/MappedOption.test.tsx
@@ -0,0 +1,92 @@
+import React from 'react';
+import {mountWithListBoxProvider} from 'test-utilities/list-box';
+
+import {ListBox} from '../../../../ListBox';
+import {MappedOption} from '../MappedOption';
+
+describe('MappedOption', () => {
+  const defaultProps = {
+    value: 'value',
+    label: 'label',
+    selected: false,
+    singleSelection: false,
+  };
+
+  it('renders label markup', () => {
+    const label = 'Test label';
+    const mappedOption = mountWithListBoxProvider(
+      <MappedOption {...defaultProps} label={label} />,
+    );
+
+    expect(mappedOption).toContainReactText(label);
+  });
+
+  describe('accessibility', () => {
+    it('does not apply an accessibility label when label is not a string', () => {
+      const label = <div>test label</div>;
+      const mappedOption = mountWithListBoxProvider(
+        <MappedOption {...defaultProps} label={label} />,
+      );
+
+      expect(mappedOption).toContainReactComponent(ListBox.Option, {
+        accessibilityLabel: undefined,
+      });
+    });
+  });
+
+  describe('ListBox', () => {
+    it('renders ListBox.Option', () => {
+      const mappedOption = mountWithListBoxProvider(
+        <MappedOption {...defaultProps} />,
+      );
+
+      expect(mappedOption).toContainReactComponent(ListBox.Option);
+    });
+
+    it('renders ListBox.TextOption', () => {
+      const mappedOption = mountWithListBoxProvider(
+        <MappedOption {...defaultProps} />,
+      );
+
+      expect(mappedOption).toContainReactComponent(ListBox.TextOption);
+    });
+  });
+
+  describe('media', () => {
+    it('renders markup when provided', () => {
+      const mappedOption = mountWithListBoxProvider(
+        <MappedOption {...defaultProps} media={<MockComponent />} />,
+      );
+
+      expect(mappedOption).toContainReactComponent(MockComponent);
+    });
+
+    it('renders with disabled styles when disabled', () => {
+      const mappedOption = mountWithListBoxProvider(
+        <MappedOption {...defaultProps} disabled media={<MockComponent />} />,
+      );
+
+      expect(mappedOption).toContainReactComponent('div', {
+        className: 'Media disabledMedia',
+      });
+    });
+
+    it('renders with single selection styles when singleSelection is true', () => {
+      const mappedOption = mountWithListBoxProvider(
+        <MappedOption
+          {...defaultProps}
+          singleSelection
+          media={<MockComponent />}
+        />,
+      );
+
+      expect(mappedOption).toContainReactComponent('div', {
+        className: 'Media singleSelectionMedia',
+      });
+    });
+  });
+});
+
+function MockComponent() {
+  return null;
+}
diff --git a/src/components/Autocomplete/components/TextField/TextField.tsx b/src/components/Autocomplete/components/TextField/TextField.tsx
deleted file mode 100644
index 880fe3513da..00000000000
--- a/src/components/Autocomplete/components/TextField/TextField.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import React from 'react';
-
-// eslint-disable-next-line @shopify/strict-component-boundaries
-import {ComboBoxContext} from '../ComboBox/context';
-import {TextField as BaseTextField, TextFieldProps} from '../../../TextField';
-
-export function TextField(props: TextFieldProps) {
-  return (
-    <ComboBoxContext.Consumer>
-      {({selectedOptionId, comboBoxId}) => (
-        <BaseTextField
-          {...props}
-          role="combobox"
-          autoComplete="off"
-          ariaAutocomplete="list"
-          ariaActiveDescendant={selectedOptionId}
-          ariaControls={comboBoxId}
-        />
-      )}
-    </ComboBoxContext.Consumer>
-  );
-}
diff --git a/src/components/Autocomplete/components/TextField/index.ts b/src/components/Autocomplete/components/TextField/index.ts
deleted file mode 100644
index 665fa3cb54f..00000000000
--- a/src/components/Autocomplete/components/TextField/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './TextField';
diff --git a/src/components/Autocomplete/components/index.ts b/src/components/Autocomplete/components/index.ts
index c8e78f10ae4..42e65fc4cbf 100644
--- a/src/components/Autocomplete/components/index.ts
+++ b/src/components/Autocomplete/components/index.ts
@@ -1,3 +1,2 @@
-export * from './ComboBox';
-
-export * from './TextField';
+export * from './MappedOption';
+export * from './MappedAction';
diff --git a/src/components/Autocomplete/tests/Autocomplete.test.tsx b/src/components/Autocomplete/tests/Autocomplete.test.tsx
index 95f141d0988..51d2034d634 100644
--- a/src/components/Autocomplete/tests/Autocomplete.test.tsx
+++ b/src/components/Autocomplete/tests/Autocomplete.test.tsx
@@ -1,22 +1,33 @@
 import React from 'react';
-import {CirclePlusMinor} from '@shopify/polaris-icons';
-// eslint-disable-next-line no-restricted-imports
-import {mountWithAppProvider, trigger} from 'test-utilities/legacy';
-import {Spinner} from 'components';
+import {mountWithApp, ReactTestingElement, CustomRoot} from 'test-utilities';
+import {KeypressListener} from 'components';
 
+import {TextField} from '../../TextField';
 import {Key} from '../../../types';
-import {ComboBox} from '../components';
+import {MappedOption, MappedAction} from '../components';
+import {ComboBoxTextFieldContext} from '../../../utilities/combo-box';
 import {Autocomplete} from '../Autocomplete';
+import {ComboBox} from '../../ComboBox';
+import type {ComboBoxProps} from '../../ComboBox';
+import {ListBox} from '../../ListBox';
 
 describe('<Autocomplete/>', () => {
   const options = [
-    {value: 'cheese_pizza', label: 'Cheese Pizza'},
-    {value: 'macaroni_pizza', label: 'Macaroni Pizza'},
-    {value: 'pepperoni_pizza', label: 'Pepperoni Pizza'},
+    {value: 'cheese_pizza', label: 'Cheese Pizza', id: '1'},
+    {value: 'macaroni_pizza', label: 'Macaroni Pizza', id: '2'},
+    {value: 'pepperoni_pizza', label: 'Pepperoni Pizza', id: '3'},
   ];
+  const defaultProps = {
+    options,
+    selected: [],
+    textField: (
+      <ComboBox.TextField label="" onChange={noop} autoComplete="off" />
+    ),
+    onSelect: noop,
+  };
 
   it('mounts', () => {
-    const autocomplete = mountWithAppProvider(
+    const autocomplete = mountWithApp(
       <Autocomplete
         options={options}
         selected={[]}
@@ -24,11 +35,11 @@ describe('<Autocomplete/>', () => {
         onSelect={noop}
       />,
     );
-    expect(autocomplete.find(Autocomplete).exists()).toBe(true);
+    expect(autocomplete).toContainReactComponent(ComboBox);
   });
 
   it('displays a spinner when loading is true', () => {
-    const autocomplete = mountWithAppProvider(
+    const autocomplete = mountWithApp(
       <Autocomplete
         options={options}
         selected={[]}
@@ -37,62 +48,385 @@ describe('<Autocomplete/>', () => {
         loading
       />,
     );
-    autocomplete.simulate('click');
-    expect(autocomplete.find(Spinner).exists()).toBe(true);
+
+    triggerFocus(autocomplete.find(ComboBox));
+
+    expect(autocomplete).toContainReactComponent(ListBox.Loading);
   });
 
   describe('<Combobox />', () => {
-    it('passes props to ComboBox', () => {
-      const actionBefore = {
-        content: "Add 'f'",
-        icon: CirclePlusMinor,
-        id: 'ComboBox3-0',
-      };
+    describe('props', () => {
+      describe('id', () => {
+        // id is a noop in the new implementation - test is to ensure we keep the id prop
+        it('does nothing', () => {
+          const id = 'unique_id_Jf939sjf8js8NNsJ8';
+          const autocomplete = mountWithApp(
+            <Autocomplete {...defaultProps} id={id} />,
+          );
 
-      const EmptyState = () => <span>No results</span>;
+          expect(autocomplete).not.toContainReactHtml(id);
+        });
+      });
 
-      const autocomplete = mountWithAppProvider(
-        <Autocomplete
-          id="Autocomplete-ID"
-          options={options}
-          selected={['cheese_pizza']}
-          textField={renderTextField()}
-          preferredPosition="mostSpace"
-          listTitle="List title"
-          allowMultiple
-          actionBefore={actionBefore}
-          onSelect={handleOnSelect}
-          emptyState={<EmptyState />}
-        />,
-      );
+      describe('options', () => {
+        it('renders a ListBox.Option for each option', () => {
+          const options = [
+            {value: 'cheese_pizza', label: 'Cheese Pizza'},
+            {value: 'macaroni_pizza', label: 'Macaroni Pizza'},
+            {value: 'pepperoni_pizza', label: 'Pepperoni Pizza'},
+            {value: 'other_pizza', label: 'Other Pizza'},
+          ];
+          const autocomplete = mountWithApp(
+            <Autocomplete {...defaultProps} options={options} />,
+          );
 
-      expect(autocomplete.find(ComboBox).prop('id')).toBe('Autocomplete-ID');
-      expect(autocomplete.find(ComboBox).prop('options')).toBe(options);
-      expect(autocomplete.find(ComboBox).prop('selected')).toStrictEqual([
-        'cheese_pizza',
-      ]);
-      expect(autocomplete.find(ComboBox).prop('textField')).toStrictEqual(
-        renderTextField(),
-      );
-      expect(autocomplete.find(ComboBox).prop('preferredPosition')).toBe(
-        'mostSpace',
-      );
-      expect(autocomplete.find(ComboBox).prop('listTitle')).toBe('List title');
-      expect(autocomplete.find(ComboBox).prop('allowMultiple')).toBe(true);
-      expect(autocomplete.find(ComboBox).prop('actionsBefore')).toStrictEqual([
-        actionBefore,
-      ]);
-      expect(autocomplete.find(ComboBox).prop('onSelect')).toBe(handleOnSelect);
-      expect(autocomplete.find(ComboBox).prop('emptyState')).toStrictEqual(
-        <EmptyState />,
-      );
+          triggerFocus(autocomplete.find(ComboBox));
+
+          expect(autocomplete).toContainReactComponentTimes(
+            ListBox.Option,
+            options.length,
+          );
+        });
+
+        it('passes selected to ListBox.Option', () => {
+          const selected = 'cheese_pizza';
+          const options = [
+            {value: selected, label: 'Cheese Pizza'},
+            {value: 'macaroni_pizza', label: 'Macaroni Pizza'},
+            {value: 'pepperoni_pizza', label: 'Pepperoni Pizza'},
+            {value: 'other_pizza', label: 'Other Pizza'},
+          ];
+          const autocomplete = mountWithApp(
+            <Autocomplete
+              {...defaultProps}
+              options={options}
+              selected={[selected]}
+            />,
+          );
+
+          triggerFocus(autocomplete.find(ComboBox));
+
+          expect(autocomplete).toContainReactComponent(MappedOption, {
+            ...options[0],
+            selected: true,
+          });
+        });
+      });
+
+      describe('selected', () => {
+        it('renders selected values on options', () => {
+          const selectedOption = {
+            value: 'cheese_pizza',
+            label: 'Cheese Pizza',
+            id: '1',
+          };
+          const options = [
+            selectedOption,
+            {value: 'macaroni_pizza', label: 'Macaroni Pizza', id: '2'},
+            {value: 'pepperoni_pizza', label: 'Pepperoni Pizza', id: '3'},
+            {value: 'other_pizza', label: 'Other Pizza', id: '4'},
+          ];
+          const autocomplete = mountWithApp(
+            <Autocomplete
+              {...defaultProps}
+              options={options}
+              selected={[selectedOption.value]}
+            />,
+          );
+
+          triggerFocus(autocomplete.find(ComboBox));
+
+          expect(autocomplete).toContainReactComponent(MappedOption, {
+            ...selectedOption,
+            selected: true,
+          });
+        });
+      });
+
+      describe('textField', () => {
+        it('is passed to ComboBox', () => {
+          const textField = (
+            <ComboBox.TextField
+              label="label"
+              onChange={noop}
+              autoComplete="off"
+            />
+          );
+          const autocomplete = mountWithApp(
+            <Autocomplete {...defaultProps} textField={textField} />,
+          );
+
+          expect(autocomplete).toContainReactComponent(ComboBox, {
+            activator: textField,
+          });
+        });
+      });
+
+      describe('preferredPosition', () => {
+        it('is passed to ComboBox', () => {
+          const preferredPosition = 'above';
+          const autocomplete = mountWithApp(
+            <Autocomplete
+              {...defaultProps}
+              preferredPosition={preferredPosition}
+            />,
+          );
+
+          expect(autocomplete).toContainReactComponent(ComboBox, {
+            preferredPosition,
+          });
+        });
+      });
+
+      describe('listTitle', () => {
+        it('renders a ListBoxSection with a ListBoxHeader', () => {
+          const listTitle = 'title';
+          const autocomplete = mountWithApp(
+            <Autocomplete {...defaultProps} listTitle={listTitle} />,
+          );
+
+          triggerFocus(autocomplete.find(ComboBox));
+
+          expect(autocomplete).toContainReactComponent(ListBox.Section, {
+            divider: false,
+          });
+        });
+      });
+
+      describe('allowMultiple', () => {
+        it('is passed to ComboBox', () => {
+          const allowMultiple = true;
+          const autocomplete = mountWithApp(
+            <Autocomplete {...defaultProps} allowMultiple={allowMultiple} />,
+          );
+
+          expect(autocomplete).toContainReactComponent(ComboBox, {
+            allowMultiple,
+          });
+        });
+      });
+
+      describe('actionBefore', () => {
+        it('renders MappedAction', () => {
+          const actionBefore = {
+            accessibilityLabel: 'label',
+            helpText: 'help text',
+            image: '',
+            prefix: null,
+            suffix: null,
+            ellipsis: false,
+            active: false,
+            role: 'option',
+            icon: 'icon',
+            disabled: false,
+            destructive: true,
+            badge: {
+              status: 'new' as const,
+              content: 'new',
+            },
+          };
+          const autocomplete = mountWithApp(
+            <Autocomplete {...defaultProps} actionBefore={actionBefore} />,
+          );
+
+          triggerFocus(autocomplete.find(ComboBox));
+
+          expect(autocomplete).toContainReactComponent(MappedAction);
+        });
+      });
+
+      describe('loading', () => {
+        it('renders ListBox.Loading', () => {
+          const autocomplete = mountWithApp(
+            <Autocomplete {...defaultProps} loading />,
+          );
+
+          triggerFocus(autocomplete.find(ComboBox));
+
+          expect(autocomplete).toContainReactComponent(ListBox.Loading);
+        });
+      });
+
+      describe('willLoadMoreResults', () => {
+        it('renders options while loading', () => {
+          const options = [
+            {value: 'cheese_pizza', label: 'Cheese Pizza'},
+            {value: 'macaroni_pizza', label: 'Macaroni Pizza'},
+            {value: 'pepperoni_pizza', label: 'Pepperoni Pizza'},
+            {value: 'other_pizza', label: 'Other Pizza'},
+          ];
+          const autocomplete = mountWithApp(
+            <Autocomplete
+              {...defaultProps}
+              loading
+              willLoadMoreResults
+              options={options}
+            />,
+          );
+
+          triggerFocus(autocomplete.find(ComboBox));
+
+          expect(autocomplete).toContainReactComponentTimes(
+            ListBox.Option,
+            options.length,
+          );
+        });
+      });
+
+      describe('emptyState', () => {
+        function EmptyState() {
+          return null;
+        }
+
+        it('does not render if an action exists', () => {
+          const autocomplete = mountWithApp(
+            <Autocomplete
+              {...defaultProps}
+              actionBefore={{content: 'action'}}
+            />,
+          );
+
+          triggerFocus(autocomplete.find(ComboBox));
+
+          expect(autocomplete).not.toContainReactComponent(EmptyState);
+        });
+
+        it('does not render when options exists', () => {
+          const emptyState = <EmptyState />;
+          const options = [{value: 'cheese_pizza', label: 'Cheese Pizza'}];
+          const autocomplete = mountWithApp(
+            <Autocomplete
+              {...defaultProps}
+              options={options}
+              emptyState={emptyState}
+            />,
+          );
+
+          triggerFocus(autocomplete.find(ComboBox));
+
+          expect(autocomplete).not.toContainReactComponent(EmptyState);
+        });
+
+        it('does not render when loading is true', () => {
+          const emptyState = <EmptyState />;
+          const autocomplete = mountWithApp(
+            <Autocomplete {...defaultProps} loading emptyState={emptyState} />,
+          );
+
+          triggerFocus(autocomplete.find(ComboBox));
+
+          expect(autocomplete).not.toContainReactComponent(EmptyState);
+        });
+
+        it("renders while loading is false and options don't exists", () => {
+          const emptyState = <EmptyState />;
+          const autocomplete = mountWithApp(
+            <Autocomplete
+              {...defaultProps}
+              loading={false}
+              options={[]}
+              emptyState={emptyState}
+            />,
+          );
+
+          triggerFocus(autocomplete.find(ComboBox));
+
+          expect(autocomplete).toContainReactComponent(EmptyState);
+        });
+      });
+
+      describe('onSelect', () => {
+        it('is called when the newly selected value', () => {
+          const onSelectSpy = jest.fn();
+          const options = [
+            {value: 'cheese_pizza', label: 'Cheese Pizza'},
+            {value: 'macaroni_pizza', label: 'Macaroni Pizza'},
+          ];
+          const value = options[0].value;
+          const autocomplete = mountWithApp(
+            <Autocomplete
+              {...defaultProps}
+              options={options}
+              onSelect={onSelectSpy}
+            />,
+          );
+
+          triggerFocus(autocomplete.find(ComboBox));
+          triggerOnSelect(autocomplete, value);
+
+          expect(onSelectSpy).toHaveBeenLastCalledWith([value]);
+        });
+
+        it('is not called with the deselected value when allowMultiple is true', () => {
+          const onSelectSpy = jest.fn();
+          const options = [
+            {value: 'cheese_pizza', label: 'Cheese Pizza'},
+            {value: 'macaroni_pizza', label: 'Macaroni Pizza'},
+          ];
+          const value = options[0].value;
+          const autocomplete = mountWithApp(
+            <Autocomplete
+              {...defaultProps}
+              options={options}
+              onSelect={onSelectSpy}
+              selected={[value]}
+              allowMultiple
+            />,
+          );
+
+          triggerFocus(autocomplete.find(ComboBox));
+          triggerOnSelect(autocomplete, value);
+
+          expect(onSelectSpy).toHaveBeenLastCalledWith([]);
+        });
+
+        it('is called with multiple values when allowMultiple is true', () => {
+          const onSelectSpy = jest.fn();
+          const options = [
+            {value: 'cheese_pizza', label: 'Cheese Pizza'},
+            {value: 'macaroni_pizza', label: 'Macaroni Pizza'},
+          ];
+          const valueOne = options[0].value;
+          const valueTwo = options[1].value;
+          const autocomplete = mountWithApp(
+            <Autocomplete
+              {...defaultProps}
+              options={options}
+              onSelect={onSelectSpy}
+              selected={[valueOne]}
+              allowMultiple
+            />,
+          );
+
+          triggerFocus(autocomplete.find(ComboBox));
+          triggerOnSelect(autocomplete, valueTwo);
+
+          expect(onSelectSpy).toHaveBeenLastCalledWith([valueOne, valueTwo]);
+        });
+      });
+
+      describe('onLoadMoreResults', () => {
+        it('is passed to ComboBox', () => {
+          const onLoadMoreResults = jest.fn();
+          const autocomplete = mountWithApp(
+            <Autocomplete
+              {...defaultProps}
+              onLoadMoreResults={onLoadMoreResults}
+            />,
+          );
+
+          expect(autocomplete).toContainReactComponent(ComboBox, {
+            onScrolledToBottom: onLoadMoreResults,
+          });
+        });
+      });
     });
 
-    it('`Enter` keypress in <Autocomplete/> does not trigger `onSubmit` when wrapped in a <form>', () => {
-      const spy = jest.fn();
+    it('`Enter` keypress in <Autocomplete/> prevents default to stop `onSubmit` from being called when wrapped in a <form>', () => {
+      const preventDefaultSpy = jest.fn();
 
-      const autocomplete = mountWithAppProvider(
-        <form style={{height: '225px'}} onSubmit={spy}>
+      const autocomplete = mountWithApp(
+        <form>
           <Autocomplete
             options={options}
             selected={[]}
@@ -103,18 +437,25 @@ describe('<Autocomplete/>', () => {
         </form>,
       );
 
-      autocomplete.find(Autocomplete).simulate('click');
+      triggerFocus(autocomplete.find(ComboBox));
+      autocomplete
+        .find(ComboBox.TextField)
+        ?.find(TextField)
+        ?.trigger('onFocus');
       autocomplete
-        .find(Autocomplete)
-        .simulate('keyup', {keyCode: Key.DownArrow});
-      autocomplete.find(Autocomplete).simulate('keyDown', {keyCode: Key.Enter});
-      expect(spy).not.toHaveBeenCalled();
+        .find(KeypressListener, {keyCode: Key.Enter})!
+        .trigger('handler', {
+          preventDefault: preventDefaultSpy,
+          stopPropagation: noop,
+        });
+
+      expect(preventDefaultSpy).toHaveBeenCalled();
     });
   });
 
   describe('loading', () => {
-    it('passes an empty array as options and contentAfter to ComboBox when loading is true', () => {
-      const autocomplete = mountWithAppProvider(
+    it('does not render options when loading is true', () => {
+      const autocomplete = mountWithApp(
         <Autocomplete
           options={options}
           selected={[]}
@@ -123,15 +464,15 @@ describe('<Autocomplete/>', () => {
           loading
         />,
       );
-      expect(autocomplete.find(ComboBox).prop('options')).toStrictEqual([]);
-      expect(autocomplete.find(ComboBox).prop('contentAfter')).not.toBeNull();
+
+      expect(autocomplete).not.toContainReactComponent(ListBox.Option);
     });
   });
 
   describe('onLoadMoreResults', () => {
     it('gets called when then end of the option list is reached', () => {
       const spy = jest.fn();
-      const autocomplete = mountWithAppProvider(
+      const autocomplete = mountWithApp(
         <Autocomplete
           options={options}
           selected={[]}
@@ -141,8 +482,7 @@ describe('<Autocomplete/>', () => {
         />,
       );
 
-      const comboBox = autocomplete.find(ComboBox);
-      trigger(comboBox, 'onEndReached');
+      autocomplete.find(ComboBox)?.trigger('onScrolledToBottom');
 
       expect(spy).toHaveBeenCalledTimes(1);
     });
@@ -155,18 +495,19 @@ describe('<Autocomplete/>', () => {
       <Autocomplete.TextField label="" onChange={noop} autoComplete="off" />
     );
   }
-
-  function handleOnSelect(this: any, updatedSelection: string[]) {
-    const selectedText = updatedSelection.map((selectedItem: string) => {
-      const matchedOption = this.options.filter((option: any) => {
-        return option.value.match(selectedItem);
-      });
-      return matchedOption[0] && matchedOption[0].label;
-    });
-    if (this.ALLOW_MULTIPLE) {
-      this.setState({selected: updatedSelection});
-    } else {
-      this.setState({selected: selectedText, inputText: selectedText});
-    }
-  }
 });
+
+function triggerFocus(combobox: ReactTestingElement<ComboBoxProps> | null) {
+  combobox &&
+    combobox
+      .find(ComboBoxTextFieldContext.Provider)!
+      .triggerKeypath('value.onTextFieldFocus');
+}
+
+function triggerOnSelect(
+  autocomplete: CustomRoot<unknown, any> | null,
+  values: string,
+) {
+  const listbox = autocomplete!.find(ListBox);
+  listbox!.trigger('onSelect', values);
+}
diff --git a/src/components/Checkbox/Checkbox.tsx b/src/components/Checkbox/Checkbox.tsx
index f4eb6156109..dd5f25296eb 100644
--- a/src/components/Checkbox/Checkbox.tsx
+++ b/src/components/Checkbox/Checkbox.tsx
@@ -1,4 +1,10 @@
-import React, {forwardRef, useRef, useImperativeHandle, useState} from 'react';
+import React, {
+  forwardRef,
+  useRef,
+  useImperativeHandle,
+  useState,
+  useContext,
+} from 'react';
 import {MinusMinor, TickSmallMinor} from '@shopify/polaris-icons';
 
 import {classNames} from '../../utilities/css';
@@ -8,6 +14,7 @@ import {Choice, helpTextID} from '../Choice';
 import {errorTextID} from '../InlineError';
 import {Icon} from '../Icon';
 import {Error, Key, CheckboxHandles} from '../../types';
+import {WithinListBoxContext} from '../../utilities/list-box/context';
 
 import styles from './Checkbox.scss';
 
@@ -67,6 +74,7 @@ export const Checkbox = forwardRef<CheckboxHandles, CheckboxProps>(
       setFalse: handleMouseOut,
     } = useToggle(false);
     const [keyFocused, setKeyFocused] = useState(false);
+    const isWithinListBox = useContext(WithinListBoxContext);
 
     useImperativeHandle(ref, () => ({
       focus: () => {
@@ -134,7 +142,6 @@ export const Checkbox = forwardRef<CheckboxHandles, CheckboxProps>(
     );
 
     return (
-      /* eslint-disable jsx-a11y/no-redundant-roles */
       <Choice
         id={id}
         label={label}
@@ -163,7 +170,7 @@ export const Checkbox = forwardRef<CheckboxHandles, CheckboxProps>(
             onChange={noop}
             aria-invalid={error != null}
             aria-describedby={ariaDescribedBy}
-            role="checkbox"
+            role={isWithinListBox ? 'presentation' : 'checkbox'}
             {...indeterminateAttributes}
           />
           <span className={backdropClassName} />
@@ -172,7 +179,6 @@ export const Checkbox = forwardRef<CheckboxHandles, CheckboxProps>(
           </span>
         </span>
       </Choice>
-      /* eslint-enable jsx-a11y/no-redundant-roles */
     );
   },
 );
diff --git a/src/components/ComboBox/ComboBox.scss b/src/components/ComboBox/ComboBox.scss
new file mode 100644
index 00000000000..977141bcbff
--- /dev/null
+++ b/src/components/ComboBox/ComboBox.scss
@@ -0,0 +1,6 @@
+@import '../../styles/common';
+
+.ListBox {
+  padding: spacing(tight) 0;
+  overflow: visible;
+}
diff --git a/src/components/ComboBox/ComboBox.tsx b/src/components/ComboBox/ComboBox.tsx
new file mode 100644
index 00000000000..1941e903b91
--- /dev/null
+++ b/src/components/ComboBox/ComboBox.tsx
@@ -0,0 +1,153 @@
+import React, {useState, useCallback, useMemo, Children} from 'react';
+
+import {Popover} from '../Popover';
+import type {PopoverProps} from '../Popover';
+import type {TextFieldProps} from '../TextField';
+import type {ListBoxProps} from '../ListBox';
+import {
+  ComboBoxTextFieldContext,
+  ComboBoxTextFieldType,
+  ComboBoxListBoxContext,
+  ComboBoxListBoxType,
+  ComboBoxListBoxOptionType,
+  ComboBoxListBoxOptionContext,
+} from '../../utilities/combo-box';
+
+import styles from './ComboBox.scss';
+import {TextField} from './components';
+
+export interface ComboBoxProps {
+  children?: React.ReactElement<ListBoxProps> | null;
+  activator: React.ReactElement<TextFieldProps>;
+  allowMultiple?: boolean;
+  onScrolledToBottom?(): void;
+  preferredPosition?: PopoverProps['preferredPosition'];
+}
+
+export function ComboBox({
+  children,
+  activator,
+  allowMultiple,
+  onScrolledToBottom,
+  preferredPosition = 'below',
+}: ComboBoxProps) {
+  const [popoverActive, setPopoverActive] = useState(false);
+  const [activeOptionId, setActiveOptionId] = useState<string>();
+  const [textFieldLabelId, setTextFieldLabelId] = useState<string>();
+  const [listBoxId, setListBoxId] = useState<string>();
+  const [textFieldFocused, setTextFieldFocused] = useState<boolean>(false);
+  const shouldOpen = Boolean(!popoverActive && Children.count(children) > 0);
+
+  const onOptionSelected = useCallback(() => {
+    if (!allowMultiple) {
+      setPopoverActive(false);
+      setActiveOptionId(undefined);
+    }
+  }, [allowMultiple]);
+
+  const handleClose = useCallback(() => {
+    setPopoverActive(false);
+    setActiveOptionId(undefined);
+  }, []);
+
+  const handleFocus = useCallback(() => {
+    if (shouldOpen) {
+      setPopoverActive(true);
+    }
+  }, [shouldOpen]);
+
+  const handleChange = useCallback(() => {
+    if (shouldOpen) {
+      setPopoverActive(true);
+    }
+  }, [shouldOpen]);
+
+  const handleBlur = useCallback(() => {
+    if (popoverActive) {
+      setPopoverActive(false);
+      setActiveOptionId(undefined);
+    }
+  }, [popoverActive]);
+
+  const textFieldContextValue: ComboBoxTextFieldType = useMemo(
+    () => ({
+      activeOptionId,
+      expanded: popoverActive,
+      listBoxId,
+      setTextFieldFocused,
+      setTextFieldLabelId,
+      onTextFieldFocus: handleFocus,
+      onTextFieldChange: handleChange,
+      onTextFieldBlur: handleBlur,
+    }),
+    [
+      activeOptionId,
+      popoverActive,
+      listBoxId,
+      setTextFieldFocused,
+      setTextFieldLabelId,
+      handleFocus,
+      handleChange,
+      handleBlur,
+    ],
+  );
+
+  const listBoxOptionContextValue: ComboBoxListBoxOptionType = useMemo(
+    () => ({
+      allowMultiple,
+    }),
+    [allowMultiple],
+  );
+
+  const listBoxContextValue: ComboBoxListBoxType = useMemo(
+    () => ({
+      setActiveOptionId,
+      setListBoxId,
+      listBoxId,
+      textFieldLabelId,
+      onOptionSelected,
+      textFieldFocused,
+      onKeyToBottom: onScrolledToBottom,
+    }),
+    [
+      setActiveOptionId,
+      setListBoxId,
+      listBoxId,
+      textFieldLabelId,
+      onOptionSelected,
+      textFieldFocused,
+      onScrolledToBottom,
+    ],
+  );
+
+  return (
+    <Popover
+      active={popoverActive}
+      onClose={handleClose}
+      activator={
+        <ComboBoxTextFieldContext.Provider value={textFieldContextValue}>
+          {activator}
+        </ComboBoxTextFieldContext.Provider>
+      }
+      autofocusTarget="none"
+      preventFocusOnClose
+      fullWidth
+      preferInputActivator={false}
+      preferredPosition={preferredPosition}
+    >
+      <Popover.Pane onScrolledToBottom={onScrolledToBottom}>
+        {Children.count(children) > 0 ? (
+          <ComboBoxListBoxContext.Provider value={listBoxContextValue}>
+            <ComboBoxListBoxOptionContext.Provider
+              value={listBoxOptionContextValue}
+            >
+              <div className={styles.ListBox}>{children}</div>
+            </ComboBoxListBoxOptionContext.Provider>
+          </ComboBoxListBoxContext.Provider>
+        ) : null}
+      </Popover.Pane>
+    </Popover>
+  );
+}
+
+ComboBox.TextField = TextField;
diff --git a/src/components/ComboBox/README.md b/src/components/ComboBox/README.md
new file mode 100644
index 00000000000..b6e8c0cfd4e
--- /dev/null
+++ b/src/components/ComboBox/README.md
@@ -0,0 +1,420 @@
+---
+name: ComboBox
+category: Forms
+keywords:
+  - autocomplete
+  - searchable
+  - typeahead
+  - combobox
+  - listbox
+---
+
+# ComboBox
+
+The `ComboBox` component implements part of the [Aria 1.2 combobox](https://www.w3.org/TR/wai-aria-practices-1.2/#combobox) specs on a TextField and a popover containing a ListBox. Like `Autocomplete`, `ComboBox` allows merchants to quickly search through and select from large collections of options.
+
+---
+
+## Best practices
+
+The `ComboBox` component should:
+
+- Be clearly labeled so it’s noticeable to the merchant what type of options will be available
+- Not be used within a popover
+- Indicate a loading state to the merchant while option data is being populated
+
+---
+
+## Content guidelines
+
+The input field for `ComboBox` should follow the [content guidelines](https://polaris.shopify.com/components/forms/text-field) for text fields.
+
+---
+
+## Examples
+
+### Basic autocomplete
+
+Use to help merchants complete text input quickly from a list of options.
+
+```jsx
+function ComboboxExample() {
+  const deselectedOptions = useMemo(
+    () => [
+      {value: 'rustic', label: 'Rustic'},
+      {value: 'antique', label: 'Antique'},
+      {value: 'vinyl', label: 'Vinyl'},
+      {value: 'vintage', label: 'Vintage'},
+      {value: 'refurbished', label: 'Refurbished'},
+    ],
+    [],
+  );
+
+  const [selectedOption, setSelectedOption] = useState();
+  const [inputValue, setInputValue] = useState('');
+  const [options, setOptions] = useState(deselectedOptions);
+
+  const updateText = useCallback(
+    (value) => {
+      setInputValue(value);
+
+      if (value === '') {
+        setOptions(deselectedOptions);
+        return;
+      }
+
+      const filterRegex = new RegExp(value, 'i');
+      const resultOptions = deselectedOptions.filter((option) =>
+        option.label.match(filterRegex),
+      );
+      setOptions(resultOptions);
+    },
+    [deselectedOptions],
+  );
+
+  const updateSelection = useCallback(
+    (selected) => {
+      const matchedOption = options.find((option) => {
+        return option.value.match(selected);
+      });
+
+      setSelectedOption(selected);
+      setInputValue((matchedOption && matchedOption.label) || '');
+    },
+    [options],
+  );
+
+  const optionsMarkup =
+    options.length > 0
+      ? options.map((option) => {
+          const {label, value} = option;
+
+          return (
+            <ListBox.Option
+              key={`${value}`}
+              value={value}
+              selected={selectedOption === value}
+              accessibilityLabel={label}
+            >
+              {label}
+            </ListBox.Option>
+          );
+        })
+      : null;
+
+  return (
+    <div style={{height: '225px'}}>
+      <ComboBox
+        activator={
+          <ComboBox.TextField
+            prefix={<Icon source={SearchMinor} color="inkLighter" />}
+            onChange={updateText}
+            label="Search customers"
+            labelHidden
+            value={inputValue}
+            placeholder="Search customers"
+          />
+        }
+      >
+        {options.length > 0 ? (
+          <ListBox onSelect={updateSelection}>{optionsMarkup}</ListBox>
+        ) : null}
+      </ComboBox>
+    </div>
+  );
+}
+```
+
+### Multiple tags autocomplete
+
+Use to help merchants select multiple options from a list curated by the text input.
+
+```jsx
+function MultiComboboxExample() {
+  const deselectedOptions = useMemo(
+    () => [
+      {value: 'rustic', label: 'Rustic'},
+      {value: 'antique', label: 'Antique'},
+      {value: 'vinyl', label: 'Vinyl'},
+      {value: 'vintage', label: 'Vintage'},
+      {value: 'refurbished', label: 'Refurbished'},
+    ],
+    [],
+  );
+
+  const [selectedOptions, setSelectedOptions] = useState([]);
+  const [inputValue, setInputValue] = useState('');
+  const [options, setOptions] = useState(deselectedOptions);
+
+  const updateText = useCallback(
+    (value) => {
+      setInputValue(value);
+
+      if (value === '') {
+        setOptions(deselectedOptions);
+        return;
+      }
+
+      const filterRegex = new RegExp(value, 'i');
+      const resultOptions = deselectedOptions.filter((option) =>
+        option.label.match(filterRegex),
+      );
+      setOptions(resultOptions);
+    },
+    [deselectedOptions],
+  );
+
+  const updateSelection = useCallback(
+    (selected) => {
+      if (selectedOptions.includes(selected)) {
+        setSelectedOptions(
+          selectedOptions.filter((option) => option !== selected),
+        );
+      } else {
+        setSelectedOptions([...selectedOptions, selected]);
+      }
+
+      const matchedOption = options.find((option) => {
+        return option.value.match(selected);
+      });
+      setInputValue((matchedOption && matchedOption.label) || '');
+    },
+    [options, selectedOptions],
+  );
+
+  const removeTag = useCallback(
+    (tag) => () => {
+      const options = [...selectedOptions];
+      options.splice(options.indexOf(tag), 1);
+      setSelectedOptions(options);
+    },
+    [selectedOptions],
+  );
+
+  const tagsMarkup = selectedOptions.map((option) => {
+    let tagLabel = '';
+    tagLabel = option.replace('_', ' ');
+    tagLabel = titleCase(tagLabel);
+    return (
+      <Tag key={`option${option}`} onRemove={removeTag(option)}>
+        {tagLabel}
+      </Tag>
+    );
+  });
+
+  const optionsMarkup =
+    options.length > 0
+      ? options.map((option) => {
+          const {label, value} = option;
+
+          return (
+            <ListBox.Option
+              key={`${value}`}
+              value={value}
+              selected={selectedOptions.includes(value)}
+              accessibilityLabel={label}
+            >
+              {label}
+            </ListBox.Option>
+          );
+        })
+      : null;
+
+  return (
+    <div style={{height: '225px'}}>
+      <ComboBox
+        allowMultiple
+        activator={
+          <ComboBox.TextField
+            prefix={<Icon source={SearchMinor} color="inkLighter" />}
+            onChange={updateText}
+            label="Search customers"
+            labelHidden
+            value={inputValue}
+            placeholder="Search customers"
+          />
+        }
+      >
+        {optionsMarkup ? (
+          <ListBox onSelect={updateSelection}>{optionsMarkup}</ListBox>
+        ) : null}
+      </ComboBox>
+      <TextContainer>
+        <Stack>{tagsMarkup}</Stack>
+      </TextContainer>
+    </div>
+  );
+
+  function titleCase(string) {
+    return string
+      .toLowerCase()
+      .split(' ')
+      .map((word) => word.replace(word[0], word[0].toUpperCase()))
+      .join('');
+  }
+}
+```
+
+### Autocomplete with loading
+
+Use to indicate loading state to merchants while option data is processing.
+
+```jsx
+function LoadingAutocompleteExample() {
+  const deselectedOptions = useMemo(
+    () => [
+      {value: 'rustic', label: 'Rustic'},
+      {value: 'antique', label: 'Antique'},
+      {value: 'vinyl', label: 'Vinyl'},
+      {value: 'vintage', label: 'Vintage'},
+      {value: 'refurbished', label: 'Refurbished'},
+    ],
+    [],
+  );
+
+  const [selectedOption, setSelectedOption] = useState();
+  const [inputValue, setInputValue] = useState('');
+  const [options, setOptions] = useState(deselectedOptions);
+  const [loading, setLoading] = useState(false);
+
+  const updateText = useCallback(
+    (value) => {
+      setInputValue(value);
+
+      if (!loading) {
+        setLoading(true);
+      }
+
+      setTimeout(() => {
+        if (value === '') {
+          setOptions(deselectedOptions);
+          setLoading(false);
+          return;
+        }
+        const filterRegex = new RegExp(value, 'i');
+        const resultOptions = options.filter((option) =>
+          option.label.match(filterRegex),
+        );
+        setOptions(resultOptions);
+        setLoading(false);
+      }, 300);
+    },
+    [deselectedOptions, loading, options],
+  );
+
+  const updateSelection = useCallback(
+    (selected) => {
+      const matchedOption = options.find((option) => {
+        return option.value.match(selected);
+      });
+
+      setSelectedOption(selected);
+      setInputValue((matchedOption && matchedOption.label) || '');
+    },
+    [options],
+  );
+
+  const optionsMarkup =
+    options.length > 0
+      ? options.map((option) => {
+          const {label, value} = option;
+
+          return (
+            <ListBox.Option
+              key={`${value}`}
+              value={value}
+              selected={selectedOption === value}
+              accessibilityLabel={label}
+            >
+              {label}
+            </ListBox.Option>
+          );
+        })
+      : null;
+
+  const loadingMarkup = loading ? <ListBox.Loading /> : null;
+
+  const listBoxMarkup =
+    optionsMarkup || loadingMarkup ? (
+      <ListBox onSelect={updateSelection}>
+        {optionsMarkup && !loading ? optionsMarkup : null}
+        {loadingMarkup}
+      </ListBox>
+    ) : null;
+
+  return (
+    <ComboBox
+      activator={
+        <ComboBox.TextField
+          prefix={<Icon source={SearchMinor} color="inkLighter" />}
+          onChange={updateText}
+          label="Search customers"
+          labelHidden
+          value={inputValue}
+          placeholder="Search customers"
+        />
+      }
+    >
+      {listBoxMarkup}
+    </ComboBox>
+  );
+}
+```
+
+---
+
+## Related components
+
+- For an input field without suggested options, [use the text field component](https://polaris.shopify.com/components/forms/text-field)
+- For a list of selectable options not linked to an input field, [use the list box component](https://polaris.shopify.com/components/lists-and-tables/list-box)
+- [Autocomplete](https://polaris.shopify.com/components/forms/autocomplete) can be used as a convenience wrapper in lieu of `ComboBox` and `ListBox`.
+
+---
+
+## Accessibility
+
+<!-- content-for: android -->
+
+See Material Design and development documentation about accessibility for Android:
+
+- [Accessible design on Android](https://material.io/design/usability/accessibility.html)
+- [Accessible development on Android](https://developer.android.com/guide/topics/ui/accessibility/)
+
+<!-- /content-for -->
+
+<!-- content-for: ios -->
+
+See Apple’s Human Interface Guidelines and API documentation about accessibility for iOS:
+
+- [Accessible design on iOS](https://developer.apple.com/design/human-interface-guidelines/ios/app-architecture/accessibility/)
+- [Accessible development on iOS](https://developer.apple.com/accessibility/ios/)
+
+<!-- /content-for -->
+
+<!-- content-for: web -->
+
+### Structure
+
+The `ComboBox` component is based on the [ARIA 1.2 combobox pattern](https://www.w3.org/TR/wai-aria-practices-1.1/#combobox). It is a combination of a single-line `TextField` and a `Popover`. The current implementation expects a [`ListBox`] component to be used.
+
+The `ComboBox` popover displays below the text field or other control by default so it is easy for merchants to discover and use. However, you can change the position with the `preferredPosition` prop.
+
+`ComboBox` features can be challenging for merchants with visual, motor, and cognitive disabilities. Even when they’re built using best practices, these features can be difficult to use with some assistive technologies. Merchants should always be able to search, enter data, or perform other activities without relying on the combobox.
+
+<!-- usageblock -->
+
+#### Do
+
+- Use combobox as progressive enhancement to make the interface easier to use for most merchants.
+
+#### Don’t
+
+- Require that merchants make a selection from the combobox to complete a task.
+
+<!-- end -->
+
+### Keyboard support
+
+- Give the combobox's text input keyboard focus with the <kbd>tab</kbd> key (or <kbd>shift</kbd> + <kbd>tab</kbd> when tabbing backwards)
+
+<!-- /content-for -->
diff --git a/src/components/ComboBox/components/TextField/TextField.tsx b/src/components/ComboBox/components/TextField/TextField.tsx
new file mode 100644
index 00000000000..14c9831b492
--- /dev/null
+++ b/src/components/ComboBox/components/TextField/TextField.tsx
@@ -0,0 +1,78 @@
+import React, {useMemo, useCallback, useEffect} from 'react';
+
+import {labelID} from '../../../Label';
+import {useUniqueId} from '../../../../utilities/unique-id';
+import {TextField as PolarisTextField} from '../../../TextField';
+import type {TextFieldProps} from '../../../TextField';
+import {useComboBoxTextField} from '../../../../utilities/combo-box';
+
+export function TextField({
+  value,
+  id: idProp,
+  onFocus,
+  onBlur,
+  onChange,
+  ...rest
+}: TextFieldProps) {
+  const comboboxTextFieldContext = useComboBoxTextField();
+
+  const {
+    activeOptionId,
+    listBoxId,
+    expanded,
+    setTextFieldFocused,
+    setTextFieldLabelId,
+    onTextFieldFocus,
+    onTextFieldChange,
+    onTextFieldBlur,
+  } = comboboxTextFieldContext;
+
+  const uniqueId = useUniqueId('ComboBoxTextField');
+  const textFieldId = useMemo(() => idProp || uniqueId, [uniqueId, idProp]);
+
+  const labelId = useMemo(() => labelID(idProp || uniqueId), [
+    uniqueId,
+    idProp,
+  ]);
+
+  useEffect(() => {
+    if (setTextFieldLabelId) setTextFieldLabelId(labelId);
+  }, [labelId, setTextFieldLabelId]);
+
+  const handleFocus = useCallback(() => {
+    if (onFocus) onFocus();
+    if (onTextFieldFocus) onTextFieldFocus();
+    if (setTextFieldFocused) setTextFieldFocused(true);
+  }, [onFocus, onTextFieldFocus, setTextFieldFocused]);
+
+  const handleBlur = useCallback(() => {
+    if (onBlur) onBlur();
+    if (onTextFieldBlur) onTextFieldBlur();
+    if (setTextFieldFocused) setTextFieldFocused(false);
+  }, [onBlur, onTextFieldBlur, setTextFieldFocused]);
+
+  const handleChange = useCallback(
+    (value: string, id: string) => {
+      if (onChange) onChange(value, id);
+      if (onTextFieldChange) onTextFieldChange();
+    },
+    [onChange, onTextFieldChange],
+  );
+
+  return (
+    <PolarisTextField
+      {...rest}
+      value={value}
+      id={textFieldId}
+      onFocus={handleFocus}
+      onBlur={handleBlur}
+      onChange={handleChange}
+      ariaAutocomplete="list"
+      aria-haspopup="listbox"
+      ariaActiveDescendant={activeOptionId}
+      ariaControls={listBoxId}
+      role="combobox"
+      ariaExpanded={expanded}
+    />
+  );
+}
diff --git a/src/components/ComboBox/components/TextField/index.ts b/src/components/ComboBox/components/TextField/index.ts
new file mode 100644
index 00000000000..35e9e6ed312
--- /dev/null
+++ b/src/components/ComboBox/components/TextField/index.ts
@@ -0,0 +1 @@
+export {TextField} from './TextField';
diff --git a/src/components/ComboBox/components/TextField/tests/TextField.test.tsx b/src/components/ComboBox/components/TextField/tests/TextField.test.tsx
new file mode 100644
index 00000000000..3f3ca4b9fc9
--- /dev/null
+++ b/src/components/ComboBox/components/TextField/tests/TextField.test.tsx
@@ -0,0 +1,254 @@
+import React from 'react';
+import {mountWithApp} from 'test-utilities';
+
+import {TextField as PolarisTextField} from '../../../../TextField';
+import type {TextFieldProps} from '../../../../TextField';
+import {TextField} from '../TextField';
+import {labelID} from '../../../../Label';
+import {
+  ComboBoxTextFieldContext,
+  ComboBoxTextFieldType,
+} from '../../../../../utilities/combo-box';
+
+const textFieldContextDefaultValue = {
+  activeOptionId: undefined,
+  listBoxId: undefined,
+  expanded: false,
+  setTextFieldLabelId: noop,
+  setTextFieldFocused: noop,
+  onTextFieldFocus: noop,
+  onTextFieldBlur: noop,
+  onTextFieldChange: noop,
+};
+
+function mountWithProvider(
+  props: {
+    textFieldProps?: Partial<TextFieldProps>;
+    textFieldProviderValue?: Partial<ComboBoxTextFieldType>;
+  } = {},
+) {
+  const providerValue = {
+    ...textFieldContextDefaultValue,
+    ...props.textFieldProviderValue,
+  };
+
+  const textField = mountWithApp(
+    <ComboBoxTextFieldContext.Provider value={providerValue}>
+      <TextField
+        label="label"
+        onChange={noop}
+        {...props.textFieldProps}
+        autoComplete="off"
+      />
+    </ComboBoxTextFieldContext.Provider>,
+  );
+
+  return textField;
+}
+
+describe('ComboBox.TextField', () => {
+  it('throws if not wrapped in ComboBoxTextFieldContext', () => {
+    const consoleErrorSpy = jest
+      .spyOn(console, 'error')
+      .mockImplementation(() => {});
+
+    expect(() =>
+      mountWithApp(
+        <TextField label="label" onChange={noop} autoComplete="off" />,
+      ),
+    ).toThrow('No ComboBox was provided.');
+
+    consoleErrorSpy.mockRestore();
+  });
+
+  it('renders a PolarisTextField', () => {
+    const combobox = mountWithProvider({
+      textFieldProps: {
+        value: 'value',
+        id: 'textFieldId',
+      },
+    });
+
+    expect(combobox).toContainReactComponent(PolarisTextField, {
+      value: 'value',
+      autoComplete: 'off',
+      id: 'textFieldId',
+      onFocus: expect.any(Function),
+      onBlur: expect.any(Function),
+      onChange: expect.any(Function),
+      ariaAutocomplete: 'list',
+      ariaActiveDescendant: undefined,
+      ariaControls: undefined,
+      role: 'combobox',
+      ariaExpanded: false,
+    });
+  });
+
+  it('passes the activeOptionId to the aria-activedescendant of the PolarisTextField', () => {
+    const activeOptionId = 'activeOptionId';
+    const combobox = mountWithProvider({
+      textFieldProviderValue: {
+        activeOptionId,
+      },
+    });
+
+    expect(combobox).toContainReactComponent(PolarisTextField, {
+      ariaActiveDescendant: activeOptionId,
+    });
+  });
+
+  it('passes the listBoxId to the aria-controls of the PolarisTextField', () => {
+    const listBoxId = 'listBoxId';
+    const combobox = mountWithProvider({
+      textFieldProviderValue: {
+        listBoxId,
+      },
+    });
+
+    expect(combobox).toContainReactComponent(PolarisTextField, {
+      ariaControls: listBoxId,
+    });
+  });
+
+  it('passes the expanded to the aria-expanded of the PolarisTextField', () => {
+    const combobox = mountWithProvider({
+      textFieldProviderValue: {
+        expanded: true,
+      },
+    });
+
+    expect(combobox).toContainReactComponent(PolarisTextField, {
+      ariaExpanded: true,
+    });
+  });
+
+  it('calls setTextFieldLabelId with the expected ID', () => {
+    const textFieldId = 'textFieldId';
+    const setTextFieldLabelIdSpy = jest.fn();
+    const expectedId = labelID(textFieldId);
+    mountWithProvider({
+      textFieldProps: {
+        id: textFieldId,
+      },
+      textFieldProviderValue: {
+        setTextFieldLabelId: setTextFieldLabelIdSpy,
+      },
+    });
+
+    expect(setTextFieldLabelIdSpy).toHaveBeenCalledWith(expectedId);
+  });
+
+  describe('onFocus', () => {
+    it('calls the onFocus prop on focus', () => {
+      const onFocusSpy = jest.fn();
+      const combobox = mountWithProvider({
+        textFieldProps: {
+          value: 'value',
+          id: 'textFieldId',
+          onFocus: onFocusSpy,
+        },
+      });
+      combobox.find(PolarisTextField)!.trigger('onFocus');
+
+      expect(onFocusSpy).toHaveBeenCalled();
+    });
+
+    it('calls the onTextFieldFocus on Context', () => {
+      const onTextFieldFocusSpy = jest.fn();
+      const combobox = mountWithProvider({
+        textFieldProps: {
+          value: 'value',
+          id: 'textFieldId',
+        },
+        textFieldProviderValue: {
+          onTextFieldFocus: onTextFieldFocusSpy,
+        },
+      });
+      combobox.find(PolarisTextField)!.trigger('onFocus');
+
+      expect(onTextFieldFocusSpy).toHaveBeenCalled();
+    });
+
+    it('calls the setTextFieldFocused on Context', () => {
+      const setTextFieldFocusSpy = jest.fn();
+      const combobox = mountWithProvider({
+        textFieldProps: {
+          value: 'value',
+          id: 'textFieldId',
+        },
+        textFieldProviderValue: {
+          setTextFieldFocused: setTextFieldFocusSpy,
+        },
+      });
+      combobox.find(PolarisTextField)!.trigger('onFocus');
+
+      expect(setTextFieldFocusSpy).toHaveBeenCalled();
+    });
+  });
+
+  describe('onBlur', () => {
+    it('calls the onBlur prop', () => {
+      const onBlurSpy = jest.fn();
+      const combobox = mountWithProvider({
+        textFieldProps: {
+          value: 'value',
+          id: 'textFieldId',
+          onBlur: onBlurSpy,
+        },
+      });
+      combobox.find(PolarisTextField)!.trigger('onBlur');
+
+      expect(onBlurSpy).toHaveBeenCalled();
+    });
+
+    it('calls the onTextFieldBlur on Context', () => {
+      const onTextFieldBlurSpy = jest.fn();
+      const combobox = mountWithProvider({
+        textFieldProps: {
+          value: 'value',
+          id: 'textFieldId',
+        },
+        textFieldProviderValue: {
+          onTextFieldBlur: onTextFieldBlurSpy,
+        },
+      });
+      combobox.find(PolarisTextField)!.trigger('onBlur');
+
+      expect(onTextFieldBlurSpy).toHaveBeenCalled();
+    });
+  });
+
+  describe('onChange', () => {
+    it('calls the onChange prop', () => {
+      const onChangeSpy = jest.fn();
+      const combobox = mountWithProvider({
+        textFieldProps: {
+          value: 'value',
+          id: 'textFieldId',
+          onChange: onChangeSpy,
+        },
+      });
+      combobox.find(PolarisTextField)!.trigger('onChange');
+
+      expect(onChangeSpy).toHaveBeenCalled();
+    });
+
+    it('calls the onTextFieldChange on Context', () => {
+      const onTextFieldChangeSpy = jest.fn();
+      const combobox = mountWithProvider({
+        textFieldProps: {
+          value: 'value',
+          id: 'textFieldId',
+        },
+        textFieldProviderValue: {
+          onTextFieldChange: onTextFieldChangeSpy,
+        },
+      });
+      combobox.find(PolarisTextField)!.trigger('onChange');
+
+      expect(onTextFieldChangeSpy).toHaveBeenCalled();
+    });
+  });
+});
+
+function noop() {}
diff --git a/src/components/ComboBox/components/index.ts b/src/components/ComboBox/components/index.ts
new file mode 100644
index 00000000000..35e9e6ed312
--- /dev/null
+++ b/src/components/ComboBox/components/index.ts
@@ -0,0 +1 @@
+export {TextField} from './TextField';
diff --git a/src/components/ComboBox/index.ts b/src/components/ComboBox/index.ts
new file mode 100644
index 00000000000..f50eeedf616
--- /dev/null
+++ b/src/components/ComboBox/index.ts
@@ -0,0 +1,2 @@
+export * from './ComboBox';
+export {TextField as ComboBoxTextField} from './components';
diff --git a/src/components/ComboBox/tests/ComboBox.test.tsx b/src/components/ComboBox/tests/ComboBox.test.tsx
new file mode 100644
index 00000000000..e98356ff697
--- /dev/null
+++ b/src/components/ComboBox/tests/ComboBox.test.tsx
@@ -0,0 +1,373 @@
+import React from 'react';
+import {mountWithApp} from 'test-utilities';
+
+import {TextField} from '../../TextField';
+import {ComboBox} from '../ComboBox';
+import {ListBox} from '../../ListBox';
+import {Popover} from '../../Popover';
+import {
+  ComboBoxTextFieldContext,
+  ComboBoxListBoxContext,
+} from '../../../utilities/combo-box';
+import {Key} from '../../../types';
+
+describe('<ComboBox />', () => {
+  const activator = (
+    <TextField onChange={noop} label="" value="" autoComplete="off" />
+  );
+  const listBox = (
+    <ListBox>
+      <ListBox.Option accessibilityLabel="Option 1" value="option1" />
+    </ListBox>
+  );
+
+  it('renders a Popover in the providers', () => {
+    const combobox = mountWithApp(
+      <ComboBox activator={activator}>{listBox}</ComboBox>,
+    );
+
+    expect(combobox).toContainReactComponent(Popover, {
+      active: false,
+      onClose: expect.any(Function),
+      autofocusTarget: 'none',
+      fullWidth: true,
+      preferInputActivator: false,
+    });
+  });
+
+  it('renders the activator in ComboBoxTextFieldContext provider', () => {
+    const combobox = mountWithApp(
+      <ComboBox activator={activator}>{listBox}</ComboBox>,
+    );
+
+    expect(combobox.find(ComboBoxTextFieldContext.Provider)).toHaveReactProps({
+      children: activator,
+    });
+  });
+
+  it('renders the popover children in a ComboBoxListBoxContext provider', () => {
+    const combobox = mountWithApp(
+      <ComboBox activator={activator}>{listBox}</ComboBox>,
+    );
+
+    triggerFocus(combobox);
+
+    expect(
+      combobox.find(ComboBoxListBoxContext.Provider),
+    ).toContainReactComponent(ListBox);
+  });
+
+  it('does not open Popover when the ComboBoxTextFieldContext onTextFieldFocus and there are no children', () => {
+    const combobox = mountWithApp(<ComboBox activator={activator} />);
+
+    triggerFocus(combobox);
+
+    expect(combobox).toContainReactComponent(Popover, {
+      active: false,
+    });
+  });
+
+  it('renders an active Popover when the activator is focused and there are children', () => {
+    const combobox = mountWithApp(
+      <ComboBox activator={activator}>
+        <ListBox>
+          <ListBox.Option accessibilityLabel="Option 1" value="option1" />
+        </ListBox>
+      </ComboBox>,
+    );
+
+    triggerFocus(combobox);
+
+    expect(combobox).toContainReactComponent(Popover, {
+      active: true,
+    });
+  });
+
+  it('closes the Popover when onOptionSelected is triggered and allowMultiple is false', () => {
+    const combobox = mountWithApp(
+      <ComboBox activator={activator}>
+        <ListBox>
+          <ListBox.Option accessibilityLabel="Option 1" value="option1" />
+        </ListBox>
+      </ComboBox>,
+    );
+
+    triggerFocus(combobox);
+
+    expect(combobox).toContainReactComponent(Popover, {
+      active: true,
+    });
+
+    triggerOptionSelected(combobox);
+
+    expect(combobox).toContainReactComponent(Popover, {
+      active: false,
+    });
+  });
+
+  it('does not close the Popover when onOptionSelected is triggered and allowMultiple is true and there are children', () => {
+    const combobox = mountWithApp(
+      <ComboBox activator={activator} allowMultiple>
+        <ListBox>
+          <ListBox.Option accessibilityLabel="Option 1" value="option1" />
+        </ListBox>
+      </ComboBox>,
+    );
+
+    triggerFocus(combobox);
+
+    expect(combobox).toContainReactComponent(Popover, {
+      active: true,
+    });
+
+    combobox
+      .find(ComboBoxListBoxContext.Provider)!
+      .triggerKeypath('value.onOptionSelected');
+
+    expect(combobox).toContainReactComponent(Popover, {
+      active: true,
+    });
+  });
+
+  it('calls the onScrolledToBottom when the Popovers onScrolledToBottom is triggered', () => {
+    const onScrolledToBottomSpy = jest.fn();
+    const combobox = mountWithApp(
+      <ComboBox
+        onScrolledToBottom={onScrolledToBottomSpy}
+        activator={activator}
+        allowMultiple
+      >
+        <ListBox>
+          <ListBox.Option accessibilityLabel="Option 1" value="option1" />
+        </ListBox>
+      </ComboBox>,
+    );
+
+    triggerFocus(combobox);
+
+    combobox.find(Popover.Pane)!.trigger('onScrolledToBottom');
+
+    expect(onScrolledToBottomSpy).toHaveBeenCalled();
+  });
+
+  it('closes the Popover when onClose is called', () => {
+    const combobox = mountWithApp(
+      <ComboBox activator={activator}>
+        <ListBox>
+          <ListBox.Option accessibilityLabel="Option 1" value="option1" />
+        </ListBox>
+      </ComboBox>,
+    );
+
+    triggerFocus(combobox);
+    combobox.find(Popover)?.trigger('onClose');
+
+    expect(combobox).toContainReactComponent(Popover, {
+      active: false,
+    });
+  });
+
+  it('opens the Popover when the TextField activator is changed', () => {
+    const activator = (
+      <ComboBox.TextField
+        onChange={noop}
+        label=""
+        value=""
+        autoComplete="off"
+      />
+    );
+    const combobox = mountWithApp(
+      <ComboBox activator={activator}>
+        <ListBox>
+          <ListBox.Option accessibilityLabel="Option 1" value="option1" />
+        </ListBox>
+      </ComboBox>,
+    );
+
+    combobox.find(TextField)?.trigger('onChange');
+
+    expect(combobox).toContainReactComponent(Popover, {
+      active: true,
+    });
+  });
+
+  it('closes the Popover when TextField is blurred', () => {
+    const activator = (
+      <ComboBox.TextField
+        onChange={noop}
+        label=""
+        value=""
+        autoComplete="off"
+      />
+    );
+    const combobox = mountWithApp(
+      <ComboBox activator={activator}>
+        <ListBox>
+          <ListBox.Option accessibilityLabel="Option 1" value="option1" />
+        </ListBox>
+      </ComboBox>,
+    );
+
+    triggerFocus(combobox);
+    combobox.find(TextField)?.trigger('onBlur');
+
+    expect(combobox).toContainReactComponent(Popover, {
+      active: false,
+    });
+  });
+
+  describe('popover', () => {
+    it('defaults active to false', () => {
+      const combobox = mountWithApp(<ComboBox activator={activator} />);
+
+      expect(combobox).toContainReactComponent(Popover, {
+        active: false,
+      });
+    });
+
+    it('has fullWidth', () => {
+      const combobox = mountWithApp(<ComboBox activator={activator} />);
+
+      expect(combobox).toContainReactComponent(Popover, {
+        fullWidth: true,
+      });
+    });
+
+    it('has autofocusTarget of none', () => {
+      const combobox = mountWithApp(<ComboBox activator={activator} />);
+
+      expect(combobox).toContainReactComponent(Popover, {
+        autofocusTarget: 'none',
+      });
+    });
+
+    it('sets active to false when escape is pressed', () => {
+      const activator = (
+        <ComboBox.TextField
+          onChange={noop}
+          label=""
+          value=""
+          autoComplete="off"
+        />
+      );
+      const combobox = mountWithApp(
+        <ComboBox activator={activator}>
+          <ListBox>
+            <ListBox.Option accessibilityLabel="Option 1" value="option1" />
+          </ListBox>
+        </ComboBox>,
+      );
+
+      triggerFocus(combobox);
+
+      combobox.act(() => {
+        dispatchKeyup(Key.Escape);
+      });
+
+      expect(combobox).toContainReactComponent(Popover, {
+        active: false,
+      });
+    });
+
+    it('passes the preferredPosition', () => {
+      const preferredPosition = 'above';
+      const combobox = mountWithApp(
+        <ComboBox
+          activator={activator}
+          preferredPosition={preferredPosition}
+        />,
+      );
+
+      expect(combobox).toContainReactComponent(Popover, {
+        preferredPosition,
+      });
+    });
+  });
+
+  describe('Context', () => {
+    it('sets expanded to true on the ComboBoxTextFieldContext when the popover is active', () => {
+      const combobox = mountWithApp(
+        <ComboBox activator={activator}>
+          <ListBox>
+            <ListBox.Option accessibilityLabel="Option 1" value="option1" />
+          </ListBox>
+        </ComboBox>,
+      );
+
+      triggerFocus(combobox);
+
+      expect(
+        combobox.find(ComboBoxTextFieldContext.Provider)!.prop('value')!
+          .expanded,
+      ).toBe(true);
+    });
+
+    it('sets expanded to false on the ComboBoxTextFieldContext when the popover is not active', () => {
+      const combobox = mountWithApp(
+        <ComboBox activator={activator}>
+          <ListBox>
+            <ListBox.Option accessibilityLabel="Option 1" value="option1" />
+          </ListBox>
+        </ComboBox>,
+      );
+
+      triggerFocus(combobox);
+
+      combobox
+        .find(ComboBoxListBoxContext.Provider)!
+        .triggerKeypath('value.onOptionSelected');
+
+      expect(
+        combobox.find(ComboBoxTextFieldContext.Provider)!.prop('value')!
+          .expanded,
+      ).toBe(false);
+    });
+
+    it('sets the activeOptionId on the ComboBoxTextFieldContext to undefined the popover is not closed', () => {
+      const combobox = mountWithApp(
+        <ComboBox activator={activator}>
+          <ListBox>
+            <ListBox.Option accessibilityLabel="Option 1" value="option1" />
+          </ListBox>
+        </ComboBox>,
+      );
+
+      triggerFocus(combobox);
+
+      combobox
+        .find(ComboBoxListBoxContext.Provider)!
+        .triggerKeypath('value.setActiveOptionId', 'id');
+
+      expect(
+        combobox.find(ComboBoxTextFieldContext.Provider)!.prop('value')!
+          .activeOptionId,
+      ).toBe('id');
+
+      triggerOptionSelected(combobox);
+
+      expect(
+        combobox.find(ComboBoxTextFieldContext.Provider)!.prop('value')!
+          .activeOptionId,
+      ).toBeUndefined();
+    });
+  });
+});
+
+function triggerFocus(combobox: any) {
+  combobox
+    .find(ComboBoxTextFieldContext.Provider)!
+    .triggerKeypath('value.onTextFieldFocus');
+}
+
+function triggerOptionSelected(combobox: any) {
+  combobox
+    .find(ComboBoxListBoxContext.Provider)!
+    .triggerKeypath('value.onOptionSelected');
+}
+
+function noop() {}
+
+function dispatchKeyup(key: Key) {
+  const event: KeyboardEventInit & {keyCode: Key} = {keyCode: key};
+  document.dispatchEvent(new KeyboardEvent('keyup', event));
+}
diff --git a/src/components/ListBox/ListBox.scss b/src/components/ListBox/ListBox.scss
new file mode 100644
index 00000000000..7355fd7b068
--- /dev/null
+++ b/src/components/ListBox/ListBox.scss
@@ -0,0 +1,10 @@
+.ListBox {
+  padding: 0;
+  margin: 0;
+  list-style: none;
+  max-width: 100%;
+
+  &:focus {
+    outline: none;
+  }
+}
diff --git a/src/components/ListBox/ListBox.tsx b/src/components/ListBox/ListBox.tsx
new file mode 100644
index 00000000000..c2b062c6482
--- /dev/null
+++ b/src/components/ListBox/ListBox.tsx
@@ -0,0 +1,330 @@
+import React, {
+  useState,
+  useRef,
+  useEffect,
+  useCallback,
+  ReactNode,
+  useMemo,
+} from 'react';
+import debounce from 'lodash/debounce';
+
+import {classNames} from '../../utilities/css';
+import {useToggle} from '../../utilities/use-toggle';
+import {useUniqueId} from '../../utilities/unique-id';
+import {Key} from '../../types';
+import {KeypressListener} from '../KeypressListener';
+import {VisuallyHidden} from '../VisuallyHidden';
+import {useComboBoxListBox} from '../../utilities/combo-box';
+import {closestParentMatch} from '../../utilities/closest-parent-match';
+import {scrollIntoView} from '../../utilities/scroll-into-view';
+import {ListBoxContext, WithinListBoxContext} from '../../utilities/list-box';
+import type {NavigableOption} from '../../utilities/list-box';
+
+import {
+  Option,
+  Section,
+  Header,
+  Action,
+  Loading,
+  TextOption,
+  listBoxSectionDataSelector,
+} from './components';
+import styles from './ListBox.scss';
+
+export interface ListBoxProps {
+  /** Inner content of the listbox */
+  children: ReactNode;
+  /** Explicitly enable keyboard control */
+  enableKeyboardControl?: boolean;
+  /** Visually hidden text for screen readers */
+  accessibilityLabel?: string;
+  /** Callback when an option is selected */
+  onSelect?(value: string): void;
+}
+
+export type ArrowKeys = 'up' | 'down';
+
+export const scrollable = {
+  props: {'data-polaris-scrollable': true},
+  selector: '[data-polaris-scrollable]',
+};
+
+const LISTBOX_OPTION_SELECTOR = '[data-listbox-option]';
+const LISTBOX_OPTION_VALUE_ATTRIBUTE = 'data-listbox-option-value';
+
+const DATA_ATTRIBUTE = 'data-focused';
+
+export function ListBox({
+  children,
+  enableKeyboardControl,
+  accessibilityLabel,
+  onSelect,
+}: ListBoxProps) {
+  const listBoxClassName = classNames(styles.ListBox);
+  const {
+    value: keyboardEventsEnabled,
+    setTrue: enableKeyboardEvents,
+    setFalse: disableKeyboardEvents,
+  } = useToggle(Boolean(enableKeyboardControl));
+  const listId = useUniqueId('ListBox');
+  const scrollableRef = useRef<HTMLElement | null>(null);
+  const listBoxRef = useRef<HTMLUListElement>(null);
+  const [loading, setLoading] = useState<string>();
+  const [currentActiveOption, setCurrentActiveOption] = useState<
+    NavigableOption
+  >();
+  const {
+    setActiveOptionId,
+    setListBoxId,
+    listBoxId,
+    textFieldLabelId,
+    onOptionSelected,
+    onKeyToBottom,
+    textFieldFocused,
+  } = useComboBoxListBox();
+
+  const inComboBox = Boolean(setActiveOptionId);
+
+  useEffect(() => {
+    if (setListBoxId && !listBoxId) {
+      setListBoxId(listId);
+    }
+  }, [setListBoxId, listBoxId, listId]);
+
+  useEffect(() => {
+    if (!currentActiveOption || !setActiveOptionId) return;
+    setActiveOptionId(currentActiveOption.domId);
+  }, [currentActiveOption, setActiveOptionId]);
+
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  const handleScrollIntoView = useCallback(
+    debounce((option: NavigableOption, first: boolean) => {
+      if (scrollableRef.current) {
+        const {element} = option;
+        const focusTarget = first
+          ? closestParentMatch(element, listBoxSectionDataSelector.selector) ||
+            element
+          : element;
+
+        scrollIntoView(focusTarget, scrollableRef.current);
+      }
+    }, 15),
+    [],
+  );
+
+  const handleChangeActiveOption = useCallback(
+    (nextOption?: NavigableOption) => {
+      setCurrentActiveOption((currentActiveOption) => {
+        if (currentActiveOption) {
+          currentActiveOption.element.removeAttribute(DATA_ATTRIBUTE);
+        }
+
+        if (nextOption) {
+          nextOption.element.setAttribute(DATA_ATTRIBUTE, 'true');
+          if (scrollableRef.current) {
+            const first =
+              getNavigableOptions().findIndex(
+                (element) => element.id === nextOption.element.id,
+              ) === 0;
+
+            handleScrollIntoView(nextOption, first);
+          }
+          return nextOption;
+        } else {
+          return undefined;
+        }
+      });
+    },
+    [handleScrollIntoView],
+  );
+
+  useEffect(() => {
+    if (listBoxRef.current) {
+      scrollableRef.current = listBoxRef.current.closest(scrollable.selector);
+    }
+  }, []);
+
+  useEffect(() => {
+    if (enableKeyboardControl && !keyboardEventsEnabled) {
+      enableKeyboardEvents();
+    }
+  }, [enableKeyboardControl, keyboardEventsEnabled, enableKeyboardEvents]);
+
+  const onOptionSelect = useCallback(
+    (option: NavigableOption) => {
+      handleChangeActiveOption(option);
+
+      if (onOptionSelected) {
+        onOptionSelected();
+      }
+      if (onSelect) onSelect(option.value);
+    },
+    [handleChangeActiveOption, onSelect, onOptionSelected],
+  );
+
+  const listBoxContext = useMemo(
+    () => ({
+      onOptionSelect,
+      setLoading,
+    }),
+    [onOptionSelect],
+  );
+
+  function findNextValidOption(type: ArrowKeys) {
+    const isUp = type === 'up';
+    const navItems = getNavigableOptions();
+    let nextElement: HTMLElement | null | undefined =
+      currentActiveOption?.element;
+    let count = -1;
+
+    while (count++ < navItems.length) {
+      let nextIndex;
+      if (nextElement) {
+        const currentId = nextElement?.id;
+        const currentIndex = navItems.findIndex(
+          (currentNavItem) => currentNavItem.id === currentId,
+        );
+
+        let increment = isUp ? -1 : 1;
+        if (currentIndex === 0 && isUp) {
+          increment = navItems.length - 1;
+        } else if (currentIndex === navItems.length - 1 && !isUp) {
+          increment = -(navItems.length - 1);
+        }
+
+        nextIndex = currentIndex + increment;
+        nextElement = navItems[nextIndex];
+      } else {
+        nextIndex = isUp ? navItems.length - 1 : 0;
+        nextElement = navItems[nextIndex];
+      }
+
+      if (nextElement?.getAttribute('aria-disabled') === 'true') continue;
+
+      if (nextIndex === navItems.length - 1 && onKeyToBottom) {
+        onKeyToBottom();
+      }
+      return nextElement;
+    }
+
+    return null;
+  }
+
+  function handleArrow(type: ArrowKeys, evt: KeyboardEvent) {
+    evt.preventDefault();
+
+    const nextValidElement = findNextValidOption(type);
+
+    if (!nextValidElement) return;
+
+    const nextOption = {
+      domId: nextValidElement.id,
+      value:
+        nextValidElement.getAttribute(LISTBOX_OPTION_VALUE_ATTRIBUTE) || '',
+      element: nextValidElement,
+      disabled: nextValidElement.getAttribute('aria-disabled') === 'true',
+    };
+
+    handleChangeActiveOption(nextOption);
+  }
+
+  function handleDownArrow(evt: KeyboardEvent) {
+    handleArrow('down', evt);
+  }
+
+  function handleUpArrow(evt: KeyboardEvent) {
+    handleArrow('up', evt);
+  }
+
+  function handleEnter(evt: KeyboardEvent) {
+    evt.preventDefault();
+    evt.stopPropagation();
+    if (currentActiveOption) {
+      onOptionSelect(currentActiveOption);
+    }
+  }
+
+  function handleFocus() {
+    if (enableKeyboardControl) return;
+    enableKeyboardEvents();
+  }
+
+  function handleBlur(event: React.FocusEvent) {
+    event.stopPropagation();
+    if (keyboardEventsEnabled) {
+      handleChangeActiveOption();
+    }
+    if (enableKeyboardControl) return;
+    disableKeyboardEvents();
+  }
+
+  const listeners =
+    keyboardEventsEnabled || textFieldFocused ? (
+      <>
+        <KeypressListener
+          keyEvent="keydown"
+          keyCode={Key.DownArrow}
+          handler={handleDownArrow}
+        />
+        <KeypressListener
+          keyEvent="keydown"
+          keyCode={Key.UpArrow}
+          handler={handleUpArrow}
+        />
+        <KeypressListener
+          keyEvent="keydown"
+          keyCode={Key.Enter}
+          handler={handleEnter}
+        />
+      </>
+    ) : null;
+
+  return (
+    <>
+      {listeners}
+      <VisuallyHidden>
+        <div aria-live="polite">{loading ? loading : null}</div>
+      </VisuallyHidden>
+      <ListBoxContext.Provider value={listBoxContext}>
+        <WithinListBoxContext.Provider value>
+          {children ? (
+            <ul
+              tabIndex={0}
+              role="listbox"
+              className={listBoxClassName}
+              aria-label={inComboBox ? undefined : accessibilityLabel}
+              aria-labelledby={textFieldLabelId}
+              aria-busy={Boolean(loading)}
+              aria-activedescendant={
+                currentActiveOption && currentActiveOption.domId
+              }
+              id={listId}
+              onFocus={inComboBox ? undefined : handleFocus}
+              onBlur={inComboBox ? undefined : handleBlur}
+              ref={listBoxRef}
+            >
+              {children}
+            </ul>
+          ) : null}
+        </WithinListBoxContext.Provider>
+      </ListBoxContext.Provider>
+    </>
+  );
+
+  function getNavigableOptions() {
+    return [
+      ...new Set(
+        listBoxRef.current?.querySelectorAll<HTMLElement>(
+          LISTBOX_OPTION_SELECTOR,
+        ),
+      ),
+    ];
+  }
+}
+
+ListBox.Option = Option;
+ListBox.TextOption = TextOption;
+ListBox.Loading = Loading;
+ListBox.Section = Section;
+ListBox.Header = Header;
+ListBox.Action = Action;
diff --git a/src/components/ListBox/README.md b/src/components/ListBox/README.md
new file mode 100644
index 00000000000..c742a952b6c
--- /dev/null
+++ b/src/components/ListBox/README.md
@@ -0,0 +1,180 @@
+---
+name: ListBox
+category: Lists and tables
+keywords:
+  - list
+  - listbox
+  - interactive list
+---
+
+# ListBox
+
+The `ListBox` component is a list component that implements part of the [Aria 1.2 ListBox specs](https://www.w3.org/TR/wai-aria-practices-1.2/#Listbox). It presents a list of options and allows users to select one or more of them. If you need more structure than the standard component offers, use composition to customize the presentation of these lists by using headers or custom elements.
+
+---
+
+## Best practices
+
+Listboxes should:
+
+- Be clearly labeled so it’s noticeable to the merchant what type of options will be available
+- Limit the number of options displayed at once
+- Indicate a loading state to the merchant while option data is being populated
+
+---
+
+## Content guidelines
+
+### Option lists
+
+Each item in a `ListBox` should be clear and descriptive.
+
+<!-- usagelist -->
+
+#### Do
+
+- Traffic referrer source
+
+#### Don’t
+
+- Source
+
+<!-- end -->
+
+---
+
+## Examples
+
+### Basic ListBox
+
+Basic implementation of a control element used to let merchants select options
+
+```jsx
+function BaseListBoxExample() {
+  return (
+    <ListBox accessibilityLabel="Basic ListBox example">
+      <ListBox.Option value="UniqueValue-1">Item 1</ListBox.Option>
+      <ListBox.Option value="UniqueValue-2">Item 2</ListBox.Option>
+      <ListBox.Option value="UniqueValue-3">Item 3</ListBox.Option>
+    </ListBox>
+  );
+}
+```
+
+### ListBox with Loading
+
+Implementation of a control element showing a loading indicator to let merchants know more options are being loaded
+
+```jsx
+function ListBoxWithLoadingExample() {
+  return (
+    <ListBox accessibilityLabel="ListBox with loading example">
+      <ListBox.Option value="UniqueValue-1">Item 1</ListBox.Option>
+      <ListBox.Option value="UniqueValue-2">Item 2</ListBox.Option>
+      <ListBox.Option value="UniqueValue-3">Item 3</ListBox.Option>
+      <ListBox.Loading />
+    </ListBox>
+  );
+}
+```
+
+### ListBox with Action
+
+Implementation of a control element used to let merchants take an action
+
+```jsx
+function ListBoxWithActionExample() {
+  return (
+    <ListBox accessibilityLabel="ListBox with Action example">
+      <ListBox.Action value="ActionValue" divider>
+        <div>Add item</div>
+      </ListBox.Action>
+      <ListBox.Option value="UniqueValue-1">Item 1</ListBox.Option>
+      <ListBox.Option value="UniqueValue-2">Item 2</ListBox.Option>
+    </ListBox>
+  );
+}
+```
+
+### ListBox with custom element
+
+Implementation of a control with custom rendering of options
+
+```jsx
+function ListBoxWithCustomElementExample() {
+  return (
+    <ListBox accessibilityLabel="ListBox with custom element example">
+      <ListBox.Action value="ActionValue" divider>
+        Add item
+      </ListBox.Action>
+      <ListBox.Option value="UniqueValue-1">
+        <div>Item 1</div>
+      </ListBox.Option>
+      <ListBox.Option value="UniqueValue-2">
+        <div>Item 2</div>
+      </ListBox.Option>
+      <ListBox.Option value="UniqueValue-3">
+        <div>Item 3</div>
+      </ListBox.Option>
+      <ListBox.Loading accessibilityLabel="items are loading" />
+    </ListBox>
+  );
+}
+```
+
+---
+
+## Related components
+
+- For a text field and popover container, [use the combobox component](https://polaris.shopify.com/components/forms/combobox)
+- [Autocomplete](https://polaris.shopify.com/components/forms/autocomplete) can be used as a convenience wrapper in lieu of ComboBox and ListBox.
+
+---
+
+## Accessibility
+
+<!-- content-for: android -->
+
+See Material Design and development documentation about accessibility for Android:
+
+- [Accessible design on Android](https://material.io/design/usability/accessibility.html)
+- [Accessible development on Android](https://developer.android.com/guide/topics/ui/accessibility/)
+
+<!-- /content-for -->
+
+<!-- content-for: ios -->
+
+See Apple’s Human Interface Guidelines and API documentation about accessibility for iOS:
+
+- [Accessible design on iOS](https://developer.apple.com/design/human-interface-guidelines/ios/app-architecture/accessibility/)
+- [Accessible development on iOS](https://developer.apple.com/accessibility/ios/)
+
+<!-- /content-for -->
+
+<!-- content-for: web -->
+
+### Structure
+
+The `ListBox` component is based on the [Aria 1.2 ListBox pattern](https://www.w3.org/TR/wai-aria-practices-1.2/#Listbox).
+
+It is important to not present interactive elements inside of list box options as they can interfere with navigation
+for assistive technology users.
+
+<!-- usagelist -->
+
+#### Do
+
+- Use labels
+
+#### Don’t
+
+- Use interactive elements inside the list
+
+<!-- end -->
+
+### Keyboard support
+
+- Access the list of options with the up and down arrow keys
+- Select an option that has focus with the <kbd>enter</kbd>/<kbd>return</kbd> key
+
+<!-- /content-for -->
diff --git a/src/components/ListBox/components/Action/Action.scss b/src/components/ListBox/components/Action/Action.scss
new file mode 100644
index 00000000000..4a896235601
--- /dev/null
+++ b/src/components/ListBox/components/Action/Action.scss
@@ -0,0 +1,10 @@
+@import '../../../../styles/common';
+
+.Action {
+  display: flex;
+  flex: 1;
+}
+
+.Icon {
+  padding-right: spacing(tight);
+}
diff --git a/src/components/ListBox/components/Action/Action.tsx b/src/components/ListBox/components/Action/Action.tsx
new file mode 100644
index 00000000000..9494eb969fc
--- /dev/null
+++ b/src/components/ListBox/components/Action/Action.tsx
@@ -0,0 +1,33 @@
+import React from 'react';
+
+import {Icon} from '../../../Icon';
+import type {IconProps} from '../../../Icon';
+import {Option, OptionProps} from '../Option';
+import {TextOption} from '../TextOption';
+
+import styles from './Action.scss';
+
+interface ActionProps extends OptionProps {
+  icon?: IconProps['source'];
+}
+
+export function Action(props: ActionProps) {
+  const {selected, disabled, children, icon} = props;
+
+  const iconMarkup = icon && (
+    <div className={styles.Icon}>
+      <Icon color="subdued" source={icon} />
+    </div>
+  );
+
+  return (
+    <Option {...props}>
+      <TextOption selected={selected} disabled={disabled}>
+        <div className={styles.Action}>
+          {iconMarkup}
+          {children}
+        </div>
+      </TextOption>
+    </Option>
+  );
+}
diff --git a/src/components/ListBox/components/Action/index.ts b/src/components/ListBox/components/Action/index.ts
new file mode 100644
index 00000000000..b9a68fea5ab
--- /dev/null
+++ b/src/components/ListBox/components/Action/index.ts
@@ -0,0 +1 @@
+export {Action} from './Action';
diff --git a/src/components/ListBox/components/Action/tests/Action.test.tsx b/src/components/ListBox/components/Action/tests/Action.test.tsx
new file mode 100644
index 00000000000..4f6cdbc6da1
--- /dev/null
+++ b/src/components/ListBox/components/Action/tests/Action.test.tsx
@@ -0,0 +1,61 @@
+import React from 'react';
+import {CirclePlusMinor, AddMajor} from '@shopify/polaris-icons';
+import {mountWithListBoxProvider} from 'test-utilities/list-box';
+
+import {Action} from '../Action';
+import {Option} from '../../Option';
+import {TextOption} from '../../TextOption';
+import {Icon} from '../../../../Icon';
+
+describe('Action', () => {
+  const defaultProps = {
+    value: 'value',
+    selected: false,
+    disabled: false,
+    accessibilityLabel: 'accessibility label',
+  };
+
+  it('passes props to Option', () => {
+    const action = mountWithListBoxProvider(<Action {...defaultProps} />);
+
+    expect(action).toContainReactComponent(Option, defaultProps);
+  });
+
+  it('passes select, disabled from props to text option', () => {
+    const action = mountWithListBoxProvider(
+      <Action {...defaultProps} selected disabled />,
+    );
+
+    expect(action).toContainReactComponent(TextOption, {
+      selected: true,
+      disabled: true,
+    });
+  });
+
+  it('does not renders a default Icon', () => {
+    const action = mountWithListBoxProvider(<Action {...defaultProps} />);
+
+    expect(action).not.toContainReactComponent(Icon, {
+      source: CirclePlusMinor,
+    });
+  });
+
+  it('renders the Icon from the prop', () => {
+    const action = mountWithListBoxProvider(
+      <Action {...defaultProps} icon={AddMajor} />,
+    );
+
+    expect(action).toContainReactComponent(Icon, {
+      source: AddMajor,
+    });
+  });
+
+  it('renders the children', () => {
+    const label = 'test label';
+    const action = mountWithListBoxProvider(
+      <Action {...defaultProps}>{label}</Action>,
+    );
+
+    expect(action).toContainReactText(label);
+  });
+});
diff --git a/src/components/ListBox/components/Header/Header.scss b/src/components/ListBox/components/Header/Header.scss
new file mode 100644
index 00000000000..ed0b9fa754d
--- /dev/null
+++ b/src/components/ListBox/components/Header/Header.scss
@@ -0,0 +1,7 @@
+@import '../../../../styles/common';
+
+.Header {
+  @include text-style-subheading;
+  padding: spacing(tight) spacing(base);
+  color: var(--p-text-subdued);
+}
diff --git a/src/components/ListBox/components/Header/Header.tsx b/src/components/ListBox/components/Header/Header.tsx
new file mode 100644
index 00000000000..a2b1418c3c7
--- /dev/null
+++ b/src/components/ListBox/components/Header/Header.tsx
@@ -0,0 +1,26 @@
+import React, {ReactNode} from 'react';
+
+import {useSection} from '../Section';
+
+import styles from './Header.scss';
+
+interface HeaderProps {
+  children: ReactNode;
+}
+
+export function Header({children}: HeaderProps) {
+  const sectionId = useSection() || '';
+
+  const content =
+    typeof children === 'string' ? (
+      <div className={styles.Header}>{children}</div>
+    ) : (
+      children
+    );
+
+  return (
+    <div aria-hidden id={sectionId}>
+      {content}
+    </div>
+  );
+}
diff --git a/src/components/ListBox/components/Header/index.ts b/src/components/ListBox/components/Header/index.ts
new file mode 100644
index 00000000000..5e4d6a204ba
--- /dev/null
+++ b/src/components/ListBox/components/Header/index.ts
@@ -0,0 +1 @@
+export {Header} from './Header';
diff --git a/src/components/ListBox/components/Header/tests/Header.test.tsx b/src/components/ListBox/components/Header/tests/Header.test.tsx
new file mode 100644
index 00000000000..9a279ab43a1
--- /dev/null
+++ b/src/components/ListBox/components/Header/tests/Header.test.tsx
@@ -0,0 +1,55 @@
+import React from 'react';
+import {mountWithApp} from 'test-utilities';
+
+import {Header} from '../Header';
+import {Section} from '../../Section';
+
+jest.mock('../../Section', () => ({
+  ...jest.requireActual('../../Section'),
+  useSection: jest.fn(),
+}));
+
+describe('Header', () => {
+  afterEach(() => {
+    mockUseSection('');
+  });
+
+  it('renders an element with aria hidden', () => {
+    const header = mountWithApp(<Header>Header</Header>);
+
+    expect(header).toContainReactComponent('div', {'aria-hidden': true});
+  });
+
+  it('renders string headers with standard styling', () => {
+    const header = mountWithApp(<Header>Header</Header>);
+
+    expect(header).toContainReactComponent('div', {className: 'Header'});
+  });
+
+  it('renders headers without default wrapper when not type string', () => {
+    const header = mountWithApp(
+      <Header>
+        <button>header</button>
+      </Header>,
+    );
+
+    expect(header).toContainReactComponent('button');
+    expect(header).not.toContainReactComponent('div', {className: 'Header'});
+  });
+
+  it('renders an element with id from Section', () => {
+    const id = 'mock-id';
+    mockUseSection(id);
+    const section = mountWithApp(<Section title={<Header>Header</Header>} />);
+
+    expect(section).toContainReactComponent('div', {
+      id,
+    });
+  });
+});
+
+function mockUseSection(id: string) {
+  const useSection: jest.Mock = jest.requireMock('../../Section').useSection;
+
+  useSection.mockReturnValue(id);
+}
diff --git a/src/components/ListBox/components/Loading/Loading.scss b/src/components/ListBox/components/Loading/Loading.scss
new file mode 100644
index 00000000000..7bc69025c17
--- /dev/null
+++ b/src/components/ListBox/components/Loading/Loading.scss
@@ -0,0 +1,14 @@
+@import '../../../../styles/common';
+
+$item-min-height: rem(40px);
+
+.ListItem {
+  padding: 0;
+  margin: 0;
+}
+
+.Loading {
+  padding: spacing(tight) spacing();
+  display: grid;
+  place-items: center;
+}
diff --git a/src/components/ListBox/components/Loading/Loading.tsx b/src/components/ListBox/components/Loading/Loading.tsx
new file mode 100644
index 00000000000..1e0f43c8160
--- /dev/null
+++ b/src/components/ListBox/components/Loading/Loading.tsx
@@ -0,0 +1,37 @@
+import React, {memo, useEffect} from 'react';
+
+import {Spinner} from '../../../Spinner';
+import {useListBox} from '../../../../utilities/list-box';
+
+import styles from './Loading.scss';
+
+export interface LoadingProps {
+  children?: React.ReactNode;
+  accessibilityLabel: string;
+}
+
+export const Loading = memo(function LoadingOption({
+  children,
+  accessibilityLabel: label,
+}: LoadingProps) {
+  const {setLoading} = useListBox();
+
+  useEffect(() => {
+    setLoading(label);
+    return () => {
+      setLoading(undefined);
+    };
+  }, [label, setLoading]);
+
+  return (
+    <li className={styles.ListItem} role="presentation">
+      {children ? (
+        children
+      ) : (
+        <div className={styles.Loading}>
+          <Spinner size="small" accessibilityLabel={label} />
+        </div>
+      )}
+    </li>
+  );
+});
diff --git a/src/components/ListBox/components/Loading/index.ts b/src/components/ListBox/components/Loading/index.ts
new file mode 100644
index 00000000000..b32e0f6f8fd
--- /dev/null
+++ b/src/components/ListBox/components/Loading/index.ts
@@ -0,0 +1 @@
+export {Loading} from './Loading';
diff --git a/src/components/ListBox/components/Loading/tests/Loading.test.tsx b/src/components/ListBox/components/Loading/tests/Loading.test.tsx
new file mode 100644
index 00000000000..7e56192d8c1
--- /dev/null
+++ b/src/components/ListBox/components/Loading/tests/Loading.test.tsx
@@ -0,0 +1,98 @@
+import React from 'react';
+import {mountWithApp} from 'test-utilities';
+
+import {ListBoxContext} from '../../../../../utilities/list-box';
+import {Loading} from '../Loading';
+import {Spinner} from '../../../../Spinner';
+
+const listBoxContext = {
+  addNavigableOption: noop,
+  updateNavigableOption: noop,
+  removeNavigableOption: noop,
+  onOptionSelect: noop,
+  setLoading: noop,
+};
+
+describe('Loading', () => {
+  const defaultProps = {accessibilityLabel: 'accessibility label'};
+
+  it('throws if not inside a listBox Context', () => {
+    const consoleErrorSpy = jest
+      .spyOn(console, 'error')
+      .mockImplementation(() => {});
+
+    expect(() => mountWithApp(<Loading {...defaultProps} />)).toThrow(
+      'No ListBox was provided. ListBox components must be wrapped in a Listbox',
+    );
+
+    consoleErrorSpy.mockRestore();
+  });
+
+  it('renders children instead of default spinner when passed', () => {
+    const accessibilityLabel = 'label';
+    const customLoadingState = 'customLoadingState';
+    const loading = mountWithApp(
+      <ListBoxContext.Provider value={listBoxContext}>
+        <Loading accessibilityLabel={accessibilityLabel}>
+          <div>{customLoadingState}</div>
+        </Loading>
+      </ListBoxContext.Provider>,
+    );
+
+    expect(loading).toContainReactComponent('div', {
+      children: customLoadingState,
+    });
+    expect(loading).not.toContainReactComponent(Spinner);
+  });
+
+  it('calls setLoading on context with the default loading text if there is no accessibilityLabel', () => {
+    const accessibilityLabel = 'label';
+    const setLoadingSpy = jest.fn();
+    const contextValue = {
+      ...listBoxContext,
+      setLoading: setLoadingSpy,
+    };
+    mountWithApp(
+      <ListBoxContext.Provider value={contextValue}>
+        <Loading accessibilityLabel={accessibilityLabel} />
+      </ListBoxContext.Provider>,
+    );
+
+    expect(setLoadingSpy).toHaveBeenCalledWith(accessibilityLabel);
+  });
+
+  it('calls setLoading on context with the accessibilityLabel', () => {
+    const accessibilityLabel = 'label';
+    const setLoadingSpy = jest.fn();
+    const contextValue = {
+      ...listBoxContext,
+      setLoading: setLoadingSpy,
+    };
+    mountWithApp(
+      <ListBoxContext.Provider value={contextValue}>
+        <Loading accessibilityLabel={accessibilityLabel} />
+      </ListBoxContext.Provider>,
+    );
+
+    expect(setLoadingSpy).toHaveBeenCalledWith(accessibilityLabel);
+  });
+
+  it('calls setLoading with undefined when it unmounts', () => {
+    const setLoadingSpy = jest.fn();
+    const contextValue = {
+      ...listBoxContext,
+      setLoading: setLoadingSpy,
+    };
+    const listbox = mountWithApp(
+      <ListBoxContext.Provider value={contextValue}>
+        <Loading {...defaultProps} />
+      </ListBoxContext.Provider>,
+    );
+
+    listbox.find(Loading)!.root.unmount();
+
+    expect(setLoadingSpy).toHaveBeenCalledWith(undefined);
+  });
+});
+
+function noop() {}
diff --git a/src/components/ListBox/components/Option/Option.scss b/src/components/ListBox/components/Option/Option.scss
new file mode 100644
index 00000000000..4a033a3785a
--- /dev/null
+++ b/src/components/ListBox/components/Option/Option.scss
@@ -0,0 +1,15 @@
+@import '../../../../styles/common';
+
+.Option {
+  display: flex;
+  margin: 0;
+  padding: 0;
+
+  &:focus {
+    outline: none;
+  }
+}
+
+.divider {
+  border-bottom: border('divider');
+}
diff --git a/src/components/ListBox/components/Option/Option.tsx b/src/components/ListBox/components/Option/Option.tsx
new file mode 100644
index 00000000000..d8a6b0d2e04
--- /dev/null
+++ b/src/components/ListBox/components/Option/Option.tsx
@@ -0,0 +1,110 @@
+import React, {useRef, useCallback, memo, useContext} from 'react';
+
+import {classNames} from '../../../../utilities/css';
+import {useUniqueId} from '../../../../utilities/unique-id';
+import {useListBox} from '../../../../utilities/list-box';
+import {useSection, listBoxWithinSectionDataSelector} from '../Section';
+import {TextOption} from '../TextOption';
+import {UnstyledLink} from '../../../UnstyledLink';
+import {MappedActionContext} from '../../../../utilities/autocomplete';
+
+import styles from './Option.scss';
+
+export interface OptionProps {
+  // Unique item value
+  value: string;
+  // Visually hidden text for screen readers
+  accessibilityLabel?: string;
+  // Children. When a string, children are rendered in a styled TextOption
+  children?: string | React.ReactNode;
+  // Option is selected
+  selected?: boolean;
+  // Option is disabled
+  disabled?: boolean;
+  // Adds a border-bottom to the Option
+  divider?: boolean;
+}
+
+export const Option = memo(function Option({
+  value,
+  children,
+  selected,
+  disabled = false,
+  accessibilityLabel,
+  divider,
+}: OptionProps) {
+  const {onOptionSelect} = useListBox();
+  const {role, url, external, onAction, destructive, isAction} = useContext(
+    MappedActionContext,
+  );
+  const listItemRef = useRef<HTMLLIElement>(null);
+  const domId = useUniqueId('ListBoxOption');
+  const sectionId = useSection();
+  const isWithinSection = Boolean(sectionId);
+
+  const handleOptionClick = useCallback(
+    (evt: React.MouseEvent) => {
+      evt.preventDefault();
+      onAction && onAction();
+      if (onOptionSelect && listItemRef.current && !isAction) {
+        onOptionSelect({
+          domId,
+          value,
+          element: listItemRef.current,
+          disabled,
+        });
+      }
+    },
+    [domId, onOptionSelect, value, disabled, onAction, isAction],
+  );
+
+  // prevents lost of focus on Textfield
+  const handleMouseDown = (evt: React.MouseEvent) => {
+    evt.preventDefault();
+  };
+
+  const content =
+    typeof children === 'string' ? (
+      <TextOption selected={selected} disabled={disabled}>
+        {children}
+      </TextOption>
+    ) : (
+      children
+    );
+
+  const sectionAttributes = {
+    [listBoxWithinSectionDataSelector.attribute]: isWithinSection,
+  };
+
+  const legacyRoleSupport = role || 'option';
+
+  const contentMarkup = url ? (
+    <UnstyledLink url={url} external={external}>
+      {content}
+    </UnstyledLink>
+  ) : (
+    content
+  );
+
+  return (
+    <li
+      {...sectionAttributes}
+      data-within-section={isWithinSection}
+      data-listbox-option-value={value}
+      data-listbox-option-destructive={destructive}
+      className={classNames(styles.Option, divider && styles.divider)}
+      id={domId}
+      ref={listItemRef}
+      tabIndex={-1}
+      onMouseDown={handleMouseDown}
+      aria-disabled={disabled}
+      onClick={disabled ? undefined : handleOptionClick}
+      role={legacyRoleSupport}
+      aria-label={accessibilityLabel}
+      aria-selected={selected}
+      data-listbox-option
+    >
+      {contentMarkup}
+    </li>
+  );
+});
diff --git a/src/components/ListBox/components/Option/index.ts b/src/components/ListBox/components/Option/index.ts
new file mode 100644
index 00000000000..e149829a484
--- /dev/null
+++ b/src/components/ListBox/components/Option/index.ts
@@ -0,0 +1 @@
+export * from './Option';
diff --git a/src/components/ListBox/components/Option/tests/Option.test.tsx b/src/components/ListBox/components/Option/tests/Option.test.tsx
new file mode 100644
index 00000000000..4459b816904
--- /dev/null
+++ b/src/components/ListBox/components/Option/tests/Option.test.tsx
@@ -0,0 +1,380 @@
+import React from 'react';
+import {mount} from 'test-utilities';
+import {mountWithListBoxProvider} from 'test-utilities/list-box';
+
+import type {ListBoxContext} from '../../../../../utilities/list-box';
+import {Option} from '../Option';
+import {TextOption} from '../../TextOption';
+import {MappedActionContext} from '../../../../../utilities/autocomplete';
+import {UnstyledLink} from '../../../../UnstyledLink';
+
+jest.mock('components', () => ({
+  ...jest.requireActual('components'),
+  Icon() {
+    return null;
+  },
+}));
+
+const defaultProps = {
+  accessibilityLabel: 'label',
+  value: 'value',
+};
+
+const defaultContext: React.ContextType<typeof ListBoxContext> = {
+  onOptionSelect: noop,
+  setLoading: noop,
+};
+
+describe('Option', () => {
+  it("throws when the Option does not have 'ListBoxContext'", () => {
+    const consoleErrorSpy = jest
+      .spyOn(console, 'error')
+      .mockImplementation(() => {});
+
+    const attemptMount = () => {
+      mount(<Option accessibilityLabel="label" value="value" />);
+    };
+
+    // eslint-disable-next-line jest/require-to-throw-message
+    expect(attemptMount).toThrow();
+
+    consoleErrorSpy.mockRestore();
+  });
+
+  it('renders a li with a the necessary attributes', () => {
+    const expectedProps = {
+      id: expect.any(String),
+      role: 'option',
+      'data-listbox-option-value': defaultProps.value,
+      onMouseDown: expect.any(Function),
+      onClick: expect.any(Function),
+    };
+
+    const option = mountWithListBoxProvider(<Option {...defaultProps} />, {
+      ...defaultContext,
+    });
+
+    expect(option).toContainReactComponent('li', {
+      ...expectedProps,
+    });
+  });
+
+  it('calls the `onOptionSelect` on context with the DOM ID, value and option div Ref when the option div is clicked', () => {
+    const onOptionSelectSpy = jest.fn();
+    const context: React.ContextType<typeof ListBoxContext> = {
+      ...defaultContext,
+      onOptionSelect: onOptionSelectSpy,
+    };
+
+    const option = mountWithListBoxProvider(<Option {...defaultProps} />, {
+      ...context,
+    });
+
+    const optionElement = option.find('li', {
+      role: 'option',
+    });
+    const domId = optionElement?.prop('id');
+
+    optionElement!.trigger('onClick', {preventDefault: () => {}});
+
+    expect(onOptionSelectSpy).toHaveBeenCalledTimes(1);
+    expect(onOptionSelectSpy).toHaveBeenCalledWith({
+      domId,
+      value: defaultProps.value,
+      element: expect.any(Object),
+      disabled: false,
+    });
+
+    onOptionSelectSpy.mockRestore();
+  });
+
+  it('renders its children inside the option div', () => {
+    function Children() {
+      return <div>child</div>;
+    }
+
+    const option = mountWithListBoxProvider(
+      <Option {...defaultProps}>
+        <Children />
+      </Option>,
+      {
+        ...defaultContext,
+      },
+    );
+
+    expect(option.find('li', {role: 'option'})).toContainReactComponent(
+      Children,
+    );
+  });
+
+  it('renders a TextOption with children when it is a string', () => {
+    const option = mountWithListBoxProvider(
+      <Option {...defaultProps}>{defaultProps.accessibilityLabel}</Option>,
+      {
+        ...defaultContext,
+      },
+    );
+
+    const optionDiv = option.find('li', {role: 'option'});
+
+    expect(optionDiv).toContainReactComponent(TextOption, {
+      children: defaultProps.accessibilityLabel,
+    });
+  });
+
+  it('renders children in TextOption when it is a string', () => {
+    const children = 'Children';
+    const option = mountWithListBoxProvider(
+      <Option {...defaultProps}>{children}</Option>,
+      {
+        ...defaultContext,
+      },
+    );
+
+    expect(option).toContainReactComponent(TextOption, {
+      children,
+    });
+  });
+
+  it('prevents default on mouse down', () => {
+    const preventDefaultSpy = jest.fn();
+    const option = mountWithListBoxProvider(
+      <Option {...defaultProps}>{defaultProps.accessibilityLabel}</Option>,
+      {
+        ...defaultContext,
+      },
+    );
+
+    option
+      .find('li', {role: 'option'})!
+      .trigger('onMouseDown', {preventDefault: preventDefaultSpy});
+
+    expect(preventDefaultSpy).toHaveBeenCalledTimes(1);
+  });
+
+  describe('selected', () => {
+    it('is passed to the aria-selected prop of the option div if true', () => {
+      const option = mountWithListBoxProvider(
+        <Option {...defaultProps} selected />,
+        {
+          ...defaultContext,
+        },
+      );
+
+      expect(option).toContainReactComponent('li', {
+        role: 'option',
+        'aria-selected': true,
+      });
+    });
+
+    it('is not passed to the aria-selected prop of the option div if not defined', () => {
+      const option = mountWithListBoxProvider(<Option {...defaultProps} />, {
+        ...defaultContext,
+      });
+
+      expect(option).toContainReactComponent('li', {
+        role: 'option',
+        'aria-selected': undefined,
+      });
+    });
+
+    it('is passed to the TextOption selected prop when children is a string', () => {
+      const option = mountWithListBoxProvider(
+        <Option {...defaultProps} selected>
+          Child
+        </Option>,
+        {
+          ...defaultContext,
+        },
+      );
+
+      expect(option).toContainReactComponent(TextOption, {
+        selected: true,
+      });
+    });
+  });
+
+  describe('disabled', () => {
+    it('disables the onClick of the option div if true', () => {
+      const option = mountWithListBoxProvider(
+        <Option {...defaultProps} disabled />,
+        {
+          ...defaultContext,
+        },
+      );
+
+      expect(option).toContainReactComponent('li', {
+        role: 'option',
+        onClick: undefined,
+      });
+    });
+
+    it('is passed to the TextOption disabled prop when there children is a string', () => {
+      const option = mountWithListBoxProvider(
+        <Option {...defaultProps} disabled>
+          Child
+        </Option>,
+        {
+          ...defaultContext,
+        },
+      );
+
+      expect(option).toContainReactComponent(TextOption, {
+        disabled: true,
+      });
+    });
+  });
+
+  describe('label', () => {
+    it('is passed to the aria-label prop of option div', () => {
+      const option = mountWithListBoxProvider(<Option {...defaultProps} />, {
+        ...defaultContext,
+      });
+
+      expect(option).toContainReactComponent('li', {
+        role: 'option',
+        'aria-label': defaultProps.accessibilityLabel,
+      });
+    });
+  });
+
+  describe('role', () => {
+    it('defaults to option', () => {
+      const option = mountWithListBoxProvider(<Option {...defaultProps} />, {
+        ...defaultContext,
+      });
+
+      expect(option).toContainReactComponent('li', {
+        role: 'option',
+      });
+    });
+  });
+
+  describe('MappedAction', () => {
+    it('uses the role provided from MappedAction', () => {
+      const role = 'button';
+      const option = mountWithListBoxProvider(
+        <MappedActionContext.Provider
+          value={{
+            isAction: true,
+            role,
+          }}
+        >
+          <Option {...defaultProps} />
+        </MappedActionContext.Provider>,
+        {
+          ...defaultContext,
+        },
+      );
+
+      expect(option).toContainReactComponent('li', {
+        role,
+      });
+    });
+
+    it('renders an UnstyledLink when url is supplied', () => {
+      const option = mountWithListBoxProvider(
+        <MappedActionContext.Provider
+          value={{
+            isAction: true,
+            url: 'google.com',
+          }}
+        >
+          <Option {...defaultProps} />
+        </MappedActionContext.Provider>,
+        {
+          ...defaultContext,
+        },
+      );
+
+      expect(option).toContainReactComponent(UnstyledLink);
+    });
+
+    it('passes external to UnstyledLink', () => {
+      const option = mountWithListBoxProvider(
+        <MappedActionContext.Provider
+          value={{
+            isAction: true,
+            url: 'google.com',
+            external: true,
+          }}
+        >
+          <Option {...defaultProps} />
+        </MappedActionContext.Provider>,
+        {
+          ...defaultContext,
+        },
+      );
+
+      expect(option).toContainReactComponent(UnstyledLink, {external: true});
+    });
+
+    it('calls onAction when option clicked', () => {
+      const onActionSpy = jest.fn();
+      const option = mountWithListBoxProvider(
+        <MappedActionContext.Provider
+          value={{
+            isAction: true,
+            onAction: onActionSpy,
+          }}
+        >
+          <Option {...defaultProps} />
+        </MappedActionContext.Provider>,
+        {
+          ...defaultContext,
+        },
+      );
+
+      option
+        .find('li', {
+          role: 'option',
+        })!
+        .trigger('onClick', {preventDefault: () => {}});
+
+      expect(onActionSpy).toHaveBeenCalled();
+    });
+
+    it('does not invoke onOptionSelect during click events', () => {
+      const onOptionSelectSpy = jest.fn();
+      const option = mountWithListBoxProvider(
+        <MappedActionContext.Provider
+          value={{
+            isAction: true,
+          }}
+        >
+          <Option {...defaultProps} />
+        </MappedActionContext.Provider>,
+        {
+          ...defaultContext,
+          onOptionSelect: onOptionSelectSpy,
+        },
+      );
+
+      option
+        .find('li', {
+          role: 'option',
+        })!
+        .trigger('onClick', {preventDefault: () => {}});
+
+      expect(onOptionSelectSpy).not.toHaveBeenCalled();
+    });
+  });
+
+  describe('divider', () => {
+    it('renders an underline on the Option', () => {
+      const option = mountWithListBoxProvider(
+        <Option {...defaultProps} divider />,
+        {
+          ...defaultContext,
+        },
+      );
+
+      expect(option).toContainReactComponent('li', {
+        role: 'option',
+        className: 'Option divider',
+      });
+    });
+  });
+});
+
+function noop() {}
diff --git a/src/components/ListBox/components/Section/Section.scss b/src/components/ListBox/components/Section/Section.scss
new file mode 100644
index 00000000000..cb78debb671
--- /dev/null
+++ b/src/components/ListBox/components/Section/Section.scss
@@ -0,0 +1,12 @@
+@import '../../../../styles/common';
+
+.SectionGroup {
+  list-style-type: none;
+  padding: 0;
+  margin: 0;
+  border-bottom: border('divider');
+}
+
+.noDivider {
+  border-bottom: none;
+}
diff --git a/src/components/ListBox/components/Section/Section.tsx b/src/components/ListBox/components/Section/Section.tsx
new file mode 100644
index 00000000000..6b6d84d4f35
--- /dev/null
+++ b/src/components/ListBox/components/Section/Section.tsx
@@ -0,0 +1,36 @@
+import React, {ReactNode} from 'react';
+
+import {classNames} from '../../../../utilities/css';
+import {useUniqueId} from '../../../../utilities/unique-id';
+
+import {listBoxSectionDataSelector} from './selectors';
+import {SectionContext} from './context';
+import styles from './Section.scss';
+
+interface SectionProps {
+  divider?: boolean;
+  children?: ReactNode;
+  title: ReactNode;
+}
+
+export function Section({children, divider = true, title}: SectionProps) {
+  const sectionId = useUniqueId('ListBoxSection');
+
+  return (
+    <SectionContext.Provider value={sectionId}>
+      <li role="presentation" {...listBoxSectionDataSelector.props}>
+        {title}
+        <ul
+          role="group"
+          aria-labelledby={sectionId}
+          className={classNames(
+            styles.SectionGroup,
+            !divider && styles.noDivider,
+          )}
+        >
+          {children}
+        </ul>
+      </li>
+    </SectionContext.Provider>
+  );
+}
diff --git a/src/components/ListBox/components/Section/context.ts b/src/components/ListBox/components/Section/context.ts
new file mode 100644
index 00000000000..7c1e1c8dc72
--- /dev/null
+++ b/src/components/ListBox/components/Section/context.ts
@@ -0,0 +1,3 @@
+import {createContext} from 'react';
+
+export const SectionContext = createContext<string | null>(null);
diff --git a/src/components/ListBox/components/Section/hooks.ts b/src/components/ListBox/components/Section/hooks.ts
new file mode 100644
index 00000000000..55eacb36d9a
--- /dev/null
+++ b/src/components/ListBox/components/Section/hooks.ts
@@ -0,0 +1,8 @@
+import {useContext} from 'react';
+
+import {SectionContext} from './context';
+
+export function useSection() {
+  const context = useContext(SectionContext);
+  return context;
+}
diff --git a/src/components/ListBox/components/Section/index.ts b/src/components/ListBox/components/Section/index.ts
new file mode 100644
index 00000000000..81246a045e1
--- /dev/null
+++ b/src/components/ListBox/components/Section/index.ts
@@ -0,0 +1,3 @@
+export * from './Section';
+export * from './hooks';
+export * from './selectors';
diff --git a/src/components/ListBox/components/Section/selectors.ts b/src/components/ListBox/components/Section/selectors.ts
new file mode 100644
index 00000000000..21bd5e8ba75
--- /dev/null
+++ b/src/components/ListBox/components/Section/selectors.ts
@@ -0,0 +1,8 @@
+export const listBoxSectionDataSelector = {
+  props: {'data-polaris-list-box-section-item': true},
+  selector: '[data-polaris-list-box-section-item]',
+};
+
+export const listBoxWithinSectionDataSelector = {
+  attribute: 'data-polaris-list-box-within-section-item',
+};
diff --git a/src/components/ListBox/components/Section/tests/Section.test.tsx b/src/components/ListBox/components/Section/tests/Section.test.tsx
new file mode 100644
index 00000000000..31b0ace9ba2
--- /dev/null
+++ b/src/components/ListBox/components/Section/tests/Section.test.tsx
@@ -0,0 +1,67 @@
+import React from 'react';
+import {mountWithApp} from 'test-utilities';
+
+import {Section} from '../Section';
+import {SectionContext} from '../context';
+import {listBoxSectionDataSelector} from '../selectors';
+
+describe('Section', () => {
+  describe('context', () => {
+    it('renders SectionContextProvider with an id', () => {
+      const section = mountWithApp(<Section title="title" />);
+
+      expect(section).toContainReactComponent(SectionContext.Provider, {
+        value: expect.any(String),
+      });
+    });
+  });
+
+  describe('list item', () => {
+    it('renders a list item with role=presentation', () => {
+      const section = mountWithApp(<Section title="title" />);
+
+      expect(section).toContainReactComponent('li', {
+        role: 'presentation',
+      });
+    });
+
+    it('renders a list item with list box section data selector', () => {
+      const section = mountWithApp(<Section title="title" />);
+
+      expect(section).toContainReactComponent(
+        'li' as any,
+        listBoxSectionDataSelector.props,
+      );
+    });
+  });
+
+  describe('list', () => {
+    it('renders an unordered list with role="group', () => {
+      const section = mountWithApp(<Section title="title" />);
+
+      expect(section).toContainReactComponent('ul', {
+        role: 'group',
+      });
+    });
+
+    it('renders an unordered list with aria labelledby matching the context value', () => {
+      const section = mountWithApp(<Section title="title" />);
+
+      const contextValue = section.find(SectionContext.Provider)!.prop('value');
+      const ariaLabelledByValue = section.find('ul')!.prop('aria-labelledby');
+
+      expect(ariaLabelledByValue).toBe(contextValue);
+    });
+  });
+
+  it('renders children', () => {
+    const Child = () => <li>Child</li>;
+    const section = mountWithApp(
+      <Section title="title">
+        <Child />
+      </Section>,
+    );
+
+    expect(section).toContainReactComponent(Child);
+  });
+});
diff --git a/src/components/ListBox/components/TextOption/TextOption.scss b/src/components/ListBox/components/TextOption/TextOption.scss
new file mode 100644
index 00000000000..3390c1c0c18
--- /dev/null
+++ b/src/components/ListBox/components/TextOption/TextOption.scss
@@ -0,0 +1,71 @@
+@import '../../../../styles/common';
+
+.TextOption {
+  margin: spacing(extra-tight) spacing(tight) 0;
+  flex: 1;
+  border-radius: var(--p-border-radius-base);
+  padding: spacing(tight) spacing(tight);
+  cursor: pointer;
+  display: flex;
+  @include focus-ring;
+
+  &.allowMultiple {
+    margin: spacing(extra-tight) spacing(tight) 0;
+    padding: spacing(extra-tight) spacing(tight);
+  }
+
+  &.isAction {
+    padding: 0;
+    margin-top: 0;
+  }
+
+  &:hover {
+    background-color: var(--p-surface-hovered);
+  }
+
+  &:focus {
+    outline: none;
+  }
+
+  &:active {
+    background-color: var(--p-surface-pressed);
+  }
+
+  &.disabled {
+    background-color: var(--p-surface-disabled);
+    color: var(--p-text-disabled);
+    cursor: default;
+  }
+
+  &.selected {
+    background-color: var(--p-surface-selected);
+  }
+
+  &.selected::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: -1 * spacing(extra-tight);
+    height: 100%;
+    width: var(--p-border-radius-base);
+    background-color: var(--p-interactive);
+    border-top-right-radius: var(--p-border-radius-base);
+    border-bottom-right-radius: var(--p-border-radius-base);
+    transform: translateX(-100%);
+  }
+}
+
+[data-focused] .TextOption {
+  outline: none;
+  background-color: var(--p-surface-selected);
+}
+
+[data-focused]:not(:focus) .TextOption {
+  @include focus-ring($style: 'focused');
+}
+
+.Content {
+  flex: 1 1 auto;
+  display: flex;
+}
diff --git a/src/components/ListBox/components/TextOption/TextOption.tsx b/src/components/ListBox/components/TextOption/TextOption.tsx
new file mode 100644
index 00000000000..3e0da932c4d
--- /dev/null
+++ b/src/components/ListBox/components/TextOption/TextOption.tsx
@@ -0,0 +1,43 @@
+import React, {memo, useContext} from 'react';
+
+import {Checkbox} from '../../../Checkbox';
+import {classNames} from '../../../../utilities/css';
+import {ComboBoxListBoxOptionContext} from '../../../../utilities/combo-box/context';
+import {MappedActionContext} from '../../../../utilities/autocomplete';
+
+import styles from './TextOption.scss';
+
+export interface TextOptionProps {
+  children: React.ReactNode;
+  // Whether the option is selected
+  selected?: boolean;
+  // Whether the option is disabled
+  disabled?: boolean;
+}
+
+export const TextOption = memo(function TextOption({
+  children,
+  selected,
+  disabled,
+}: TextOptionProps) {
+  const {allowMultiple} = useContext(ComboBoxListBoxOptionContext);
+  const {isAction} = useContext(MappedActionContext);
+  const textOptionClassName = classNames(
+    styles.TextOption,
+    selected && !allowMultiple && styles.selected,
+    disabled && styles.disabled,
+    allowMultiple && styles.allowMultiple,
+    isAction && styles.isAction,
+  );
+  return (
+    <div className={textOptionClassName}>
+      <div className={styles.Content}>
+        {allowMultiple ? (
+          <Checkbox checked={selected} label={children} />
+        ) : (
+          children
+        )}
+      </div>
+    </div>
+  );
+});
diff --git a/src/components/ListBox/components/TextOption/index.ts b/src/components/ListBox/components/TextOption/index.ts
new file mode 100644
index 00000000000..ae687c576c3
--- /dev/null
+++ b/src/components/ListBox/components/TextOption/index.ts
@@ -0,0 +1 @@
+export {TextOption} from './TextOption';
diff --git a/src/components/ListBox/components/TextOption/tests/TextOption.test.tsx b/src/components/ListBox/components/TextOption/tests/TextOption.test.tsx
new file mode 100644
index 00000000000..b0c305c2371
--- /dev/null
+++ b/src/components/ListBox/components/TextOption/tests/TextOption.test.tsx
@@ -0,0 +1,51 @@
+import React from 'react';
+import {mount, mountWithApp} from 'test-utilities';
+
+import {TextOption} from '../TextOption';
+import {Checkbox} from '../../../../Checkbox';
+import {ComboBoxListBoxOptionContext} from '../../../../../utilities/combo-box/context';
+
+jest.mock('components', () => ({
+  ...jest.requireActual('components'),
+  Icon() {
+    return null;
+  },
+}));
+
+describe('TextOption', () => {
+  it('renders children', () => {
+    const child = 'child';
+    const textOption = mount(<TextOption>{child}</TextOption>);
+
+    expect(textOption).toContainReactText(child);
+  });
+
+  it('renders visually disabled text when disabled', () => {
+    const textOption = mount(<TextOption disabled>child</TextOption>);
+
+    expect(textOption).toContainReactComponent('div', {
+      className: 'TextOption disabled',
+    });
+  });
+
+  it('renders visually selected text when selected', () => {
+    const textOption = mount(<TextOption selected>child</TextOption>);
+
+    expect(textOption).toContainReactComponent('div', {
+      className: 'TextOption selected',
+    });
+  });
+
+  it('renders visual checkbox when allowMultiple is provided', () => {
+    const textOption = mountWithApp(
+      <ComboBoxListBoxOptionContext.Provider value={{allowMultiple: true}}>
+        <TextOption>child</TextOption>
+      </ComboBoxListBoxOptionContext.Provider>,
+      {
+        features: {newDesignLanguage: true},
+      },
+    );
+
+    expect(textOption).toContainReactComponent(Checkbox);
+  });
+});
diff --git a/src/components/ListBox/components/index.ts b/src/components/ListBox/components/index.ts
new file mode 100644
index 00000000000..459c7579fff
--- /dev/null
+++ b/src/components/ListBox/components/index.ts
@@ -0,0 +1,7 @@
+export {Option} from './Option';
+export type {OptionProps} from './Option';
+export {TextOption} from './TextOption';
+export {Loading} from './Loading';
+export * from './Section';
+export * from './Header';
+export * from './Action';
diff --git a/src/components/ListBox/index.ts b/src/components/ListBox/index.ts
new file mode 100644
index 00000000000..2908eba313a
--- /dev/null
+++ b/src/components/ListBox/index.ts
@@ -0,0 +1 @@
+export * from './ListBox';
diff --git a/src/components/ListBox/tests/ListBox.test.tsx b/src/components/ListBox/tests/ListBox.test.tsx
new file mode 100644
index 00000000000..dbebe161243
--- /dev/null
+++ b/src/components/ListBox/tests/ListBox.test.tsx
@@ -0,0 +1,669 @@
+import React, {useState} from 'react';
+import {mountWithApp} from 'test-utilities';
+import {animationFrame, timer} from '@shopify/jest-dom-mocks';
+import {Key} from 'types';
+import {
+  mountWithComboBoxListContext,
+  mountWithListBoxProvider,
+} from 'test-utilities/list-box';
+
+import {Button} from '../../Button';
+import {KeypressListener} from '../../KeypressListener';
+import {Scrollable} from '../../Scrollable';
+import {VisuallyHidden} from '../../VisuallyHidden';
+import {ListBox} from '../ListBox';
+import {ListBoxContext} from '../../../utilities/list-box';
+
+const MockComponent = ({enableKeyboardControl = true, ...props}: any) => {
+  const [optionState, setOptionState] = useState(false);
+  return (
+    <Scrollable>
+      <Button
+        onClick={() => {
+          setOptionState((optionState) => !optionState);
+        }}
+      >
+        Toggle
+      </Button>
+      <ListBox
+        onSelect={() => {}}
+        enableKeyboardControl={enableKeyboardControl}
+        {...props}
+      >
+        <ListBox.Option value="value 1" accessibilityLabel="one" selected>
+          Option 1
+        </ListBox.Option>
+        <ListBox.Option
+          value="value 2"
+          accessibilityLabel="two"
+          disabled={optionState}
+        >
+          Option 2
+        </ListBox.Option>
+        <ListBox.Option value="value 3" accessibilityLabel="three">
+          Option 3
+        </ListBox.Option>
+      </ListBox>
+    </Scrollable>
+  );
+};
+
+const keyDown = new KeyboardEvent('keydown', {
+  key: 'ArrowDown',
+  bubbles: true,
+});
+const keyUp = new KeyboardEvent('keydown', {
+  key: 'ArrowUp',
+  bubbles: true,
+});
+const keyEnter = new KeyboardEvent('keydown', {
+  key: 'Enter',
+  bubbles: true,
+});
+
+describe('<ListBox>', () => {
+  const defaultOptionProps = {value: 'value 1', accessibilityLabel: 'one'};
+  const defaultLoadingProps = {accessibilityLabel: 'accessibility label'};
+
+  beforeEach(() => {
+    timer.mock();
+  });
+
+  afterEach(() => {
+    timer.restore();
+  });
+
+  describe('ul', () => {
+    it('renders with tab index in order', () => {
+      const listBox = mountWithApp(<ListBox>Child</ListBox>);
+
+      expect(listBox).toContainReactComponent('ul', {tabIndex: 0});
+    });
+
+    it('renders with role="listbox"', () => {
+      const listBox = mountWithApp(<ListBox>Child</ListBox>);
+
+      expect(listBox).toContainReactComponent('ul', {role: 'listbox'});
+    });
+
+    it('renders with the accessibilityLabel prop as the aria label if not inside a combobox', () => {
+      const a11yLabel = 'some-label';
+      const listBox = mountWithApp(
+        <ListBox accessibilityLabel={a11yLabel}>Child</ListBox>,
+      );
+
+      expect(listBox).toContainReactComponentTimes('ul', 1, {
+        'aria-label': a11yLabel,
+      });
+    });
+
+    it('renders without aria label if inside a combobox', () => {
+      const accessibilityLabel = 'some-label';
+      const listBox = mountWithComboBoxListContext(
+        <ListBox accessibilityLabel={accessibilityLabel}>Child</ListBox>,
+      );
+
+      expect(listBox).toContainReactComponent('ul', {
+        'aria-label': undefined,
+      });
+    });
+
+    it('renders with aria labelledby with text field label id as the value when in a combobox', () => {
+      const textFieldLabelId = 'some-id';
+      const listBox = mountWithComboBoxListContext(<ListBox>Child</ListBox>, {
+        textFieldLabelId,
+      });
+
+      expect(listBox).toContainReactComponent('ul', {
+        'aria-labelledby': textFieldLabelId,
+      });
+    });
+
+    it('renders with aria busy equalling the loading status', () => {
+      const listBox = mountWithApp(
+        <ListBox>
+          <ListBox.Loading {...defaultLoadingProps} />
+        </ListBox>,
+      );
+
+      expect(listBox).toContainReactComponent('ul', {
+        'aria-busy': true,
+      });
+    });
+
+    it('renders with aria activedescendant with an id when an option is active', () => {
+      const listBox = mountWithApp(
+        <ListBox enableKeyboardControl>
+          <ListBox.Option {...defaultOptionProps}>Option 1</ListBox.Option>
+        </ListBox>,
+      );
+
+      triggerDown(listBox);
+
+      expect(listBox).toContainReactComponent('ul', {
+        'aria-activedescendant': expect.any(String),
+      });
+    });
+
+    it('renders with aria activedescendant with a value of false when an option is not active', () => {
+      const listBox = mountWithApp(
+        <ListBox enableKeyboardControl>
+          <ListBox.Option {...defaultOptionProps}>Option 1</ListBox.Option>
+        </ListBox>,
+      );
+
+      expect(listBox).toContainReactComponentTimes('ul', 1, {
+        'aria-activedescendant': undefined,
+      });
+    });
+
+    it('renders with id', () => {
+      const listBox = mountWithApp(<ListBox>Child</ListBox>);
+
+      expect(listBox).toContainReactComponent('ul', {
+        id: expect.any(String),
+      });
+    });
+
+    describe('focus', () => {
+      it('renders with onFocus when not inside a combobox', () => {
+        const listBox = mountWithApp(<ListBox>Child</ListBox>);
+
+        expect(listBox).toContainReactComponentTimes('ul', 1, {
+          onFocus: expect.any(Function),
+        });
+      });
+
+      it('renders without onFocus when inside a combobox', () => {
+        const listBox = mountWithComboBoxListContext(<ListBox>Child</ListBox>, {
+          setActiveOptionId: () => {},
+        });
+
+        expect(listBox).toContainReactComponent('ul', {
+          onFocus: undefined,
+        });
+      });
+
+      it('keeps keyboard events enable while focusing and keyboard events are already enabled', () => {
+        const listBox = mountWithApp(
+          <ListBox enableKeyboardControl>Child</ListBox>,
+        );
+
+        listBox.find('ul')!.trigger('onFocus');
+
+        expect(listBox).toContainReactComponentTimes(KeypressListener, 3);
+      });
+    });
+
+    describe('blur', () => {
+      it('renders with onblur when not inside a combobox', () => {
+        const listBox = mountWithApp(<ListBox>Child</ListBox>);
+
+        expect(listBox).toContainReactComponentTimes('ul', 1, {
+          onBlur: expect.any(Function),
+        });
+      });
+
+      it('renders without onblur when inside a combobox', () => {
+        const listBox = mountWithComboBoxListContext(<ListBox>Child</ListBox>, {
+          setActiveOptionId: () => {},
+        });
+
+        expect(listBox).toContainReactComponent('ul', {
+          onBlur: undefined,
+        });
+      });
+
+      it('resets current active option on blur if keyboard events are enabled outside a combobox', () => {
+        const listBox = mountWithApp(
+          <ListBox enableKeyboardControl>
+            <ListBox.Option {...defaultOptionProps}>Option 1</ListBox.Option>
+          </ListBox>,
+        );
+
+        triggerDown(listBox);
+
+        listBox.find('ul')!.trigger('onBlur', {stopPropagation: () => {}});
+
+        expect(listBox).toContainReactComponentTimes('ul', 1, {
+          'aria-activedescendant': undefined,
+        });
+      });
+    });
+  });
+
+  describe('loading', () => {
+    const loadingMessage = 'items are loading';
+
+    it('render a visually hidden container', () => {
+      const listBox = mountWithApp(<ListBox>Child</ListBox>);
+
+      expect(listBox).toContainReactComponentTimes(VisuallyHidden, 1);
+    });
+
+    it('render an aria-live="polite" container', () => {
+      const listBox = mountWithApp(<ListBox>Child</ListBox>);
+
+      expect(listBox.find(VisuallyHidden)).toContainReactComponent('div', {
+        'aria-live': 'polite',
+      });
+    });
+
+    it('renders an empty loading container by default', () => {
+      const listBox = mountWithApp(<ListBox>Child</ListBox>);
+
+      expect(listBox.find(VisuallyHidden)).not.toContainReactText(
+        loadingMessage,
+      );
+    });
+
+    it('renders a loading message when loading is true', () => {
+      const listBox = mountWithApp(
+        <ListBox>
+          <ListBox.Loading accessibilityLabel={loadingMessage} />
+        </ListBox>,
+      );
+
+      expect(listBox.find(VisuallyHidden)).toContainReactText(loadingMessage);
+    });
+  });
+
+  describe('listbox context', () => {
+    it('renders listBox provider', () => {
+      const listBox = mountWithApp(<ListBox>Child</ListBox>);
+
+      expect(listBox).toContainReactComponent(ListBoxContext.Provider);
+    });
+  });
+
+  it('calls setListBoxId on the combobox context with the list id', () => {
+    const setListBoxIdSpy = jest.fn();
+    mountWithComboBoxListContext(<ListBox>Child</ListBox>, {
+      setListBoxId: setListBoxIdSpy,
+    });
+
+    expect(setListBoxIdSpy).toHaveBeenCalledWith(expect.any(String));
+  });
+
+  it('passes `accessibilityLabel` to the lists aria-label attribute', () => {
+    const wrapper = mountWithApp(<MockComponent accessibilityLabel="test" />);
+
+    expect(wrapper).toContainReactComponent('ul', {'aria-label': 'test'});
+  });
+
+  it('renders children', () => {
+    const wrapper = mountWithApp(<MockComponent />);
+
+    expect(wrapper).toContainReactComponent(ListBox.Option);
+  });
+
+  it('does not render a ul when children are null', () => {
+    const listBox = mountWithApp(
+      <ListBox enableKeyboardControl>{null}</ListBox>,
+    );
+
+    expect(listBox).not.toContainReactComponent('ul');
+  });
+
+  it('scrolls selected option into view when outside scrollable view', () => {
+    animationFrame.mock();
+    const scrollBySpy = jest.fn();
+    const wrapper = mountWithApp(<MockComponent />);
+    const option3 = wrapper.findAll(ListBox.Option)[2]!;
+
+    const scrollable = option3.domNode?.closest('[data-polaris-scrollable]')!;
+    scrollable.scrollBy = scrollBySpy;
+
+    triggerUp(wrapper);
+
+    expect(option3.domNode!.getAttribute('data-focused')).toBe('true');
+
+    timer.runAllTimers();
+
+    animationFrame.runFrame();
+
+    expect(scrollBySpy).toHaveBeenCalled();
+
+    animationFrame.restore();
+  });
+
+  describe('KeypressListenner', () => {
+    describe('keyboardEventsEnabled prop', () => {
+      it('renders the KeypressListenners when enableKeyboardControl is true', () => {
+        const listBox = mountWithApp(
+          <ListBox enableKeyboardControl>Child</ListBox>,
+        );
+
+        const listenners = listBox.findAll(KeypressListener);
+
+        expect(listenners).toHaveLength(3);
+        expect(listenners[0]).toHaveReactProps({keyCode: Key.DownArrow});
+        expect(listenners[1]).toHaveReactProps({keyCode: Key.UpArrow});
+        expect(listenners[2]).toHaveReactProps({keyCode: Key.Enter});
+      });
+
+      it('does not render the KeypressListenners when enableKeyboardControl is false', () => {
+        const listBox = mountWithApp(
+          <ListBox enableKeyboardControl={false}>Child</ListBox>,
+        );
+
+        expect(listBox).not.toContainReactComponent(KeypressListener);
+      });
+    });
+
+    describe('combobox textfield focused', () => {
+      it('renders the KeypressListenners when the combobox textfield is focused', () => {
+        const listBox = mountWithComboBoxListContext(<ListBox>Child</ListBox>, {
+          textFieldFocused: true,
+        });
+
+        const listenners = listBox.findAll(KeypressListener);
+
+        expect(listenners).toHaveLength(3);
+        expect(listenners[0]).toHaveReactProps({keyCode: Key.DownArrow});
+        expect(listenners[1]).toHaveReactProps({keyCode: Key.UpArrow});
+        expect(listenners[2]).toHaveReactProps({keyCode: Key.Enter});
+      });
+
+      it('does not render the KeypressListenners when the combobox textfield is no focused', () => {
+        const listbox = mountWithComboBoxListContext(<ListBox>Child</ListBox>);
+
+        expect(listbox).not.toContainReactComponent(KeypressListener);
+      });
+    });
+
+    describe('focusing the list', () => {
+      it('renders the KeypressListenners onFocus', () => {
+        const wrapper = mountWithApp(
+          <MockComponent enableKeyboardControl={false} />,
+        );
+
+        expect(wrapper).not.toContainReactComponent(KeypressListener);
+
+        wrapper.find('ul', {role: 'listbox'})!.trigger('onFocus');
+
+        const listenners = wrapper.findAll(KeypressListener);
+
+        expect(listenners).toHaveLength(3);
+        expect(listenners[0]).toHaveReactProps({keyCode: Key.DownArrow});
+        expect(listenners[1]).toHaveReactProps({keyCode: Key.UpArrow});
+        expect(listenners[2]).toHaveReactProps({keyCode: Key.Enter});
+      });
+    });
+
+    describe('blurring the list', () => {
+      it('removes the KeypressListenners onBlur', () => {
+        const wrapper = mountWithApp(
+          <MockComponent enableKeyboardControl={false} />,
+        );
+
+        expect(wrapper).not.toContainReactComponent(KeypressListener);
+
+        wrapper.find('ul', {role: 'listbox'})!.trigger('onFocus');
+
+        const listenners = wrapper.findAll(KeypressListener);
+
+        expect(listenners).toHaveLength(3);
+
+        wrapper
+          .find('ul', {role: 'listbox'})!
+          .trigger('onBlur', {stopPropagation: () => {}});
+
+        expect(wrapper).not.toContainReactComponent(KeypressListener);
+      });
+
+      it('does not remove the KeypressListenners onBlur if enableKeyboardControl is true', () => {
+        const wrapper = mountWithApp(<MockComponent enableKeyboardControl />);
+
+        expect(wrapper.findAll(KeypressListener)).toHaveLength(3);
+
+        wrapper
+          .find('ul', {role: 'listbox'})!
+          .trigger('onBlur', {stopPropagation: () => {}});
+
+        expect(wrapper.findAll(KeypressListener)).toHaveLength(3);
+      });
+    });
+  });
+
+  describe('Keyboard control', () => {
+    describe('down arrow', () => {
+      it('move the data-focused attribute to true of the selected list item', () => {
+        const wrapper = mountWithApp(<MockComponent />);
+
+        const options = wrapper.findAll(ListBox.Option);
+
+        expect(options[0].domNode!.getAttribute('data-focused')).toBeNull();
+
+        triggerDown(wrapper);
+
+        expect(options[0].domNode!.getAttribute('data-focused')).toBe('true');
+
+        triggerDown(wrapper);
+
+        expect(options[0].domNode!.getAttribute('data-focused')).toBeNull();
+        expect(options[1].domNode!.getAttribute('data-focused')).toBe('true');
+      });
+
+      it('set the active-descendant attribute of the list to the id of the focused element', () => {
+        const wrapper = mountWithApp(<MockComponent />);
+        const listBox = wrapper.find('ul', {role: 'listbox'})!;
+        const options = wrapper.findAll(ListBox.Option);
+
+        expect(
+          listBox.domNode!.getAttribute('aria-activedescendant'),
+        ).toBeNull();
+
+        triggerDown(wrapper);
+
+        expect(listBox.domNode!.getAttribute('aria-activedescendant')).toBe(
+          options[0].domNode!.id,
+        );
+
+        triggerDown(wrapper);
+
+        expect(listBox.domNode!.getAttribute('aria-activedescendant')).toBe(
+          options[1].domNode!.id,
+        );
+      });
+
+      it('move the focus back to the first option when the bottom of the list is reached', () => {
+        const wrapper = mountWithApp(<MockComponent />);
+        const options = wrapper.findAll(ListBox.Option);
+
+        expect(options[0].domNode!.getAttribute('data-focused')).toBeNull();
+
+        triggerDown(wrapper);
+        triggerDown(wrapper);
+        triggerDown(wrapper);
+        triggerDown(wrapper);
+
+        expect(options[0].domNode!.getAttribute('data-focused')).toBe('true');
+      });
+
+      it('skips disabled options', () => {
+        const wrapper = mountWithApp(<MockComponent />);
+        const options = wrapper.findAll(ListBox.Option);
+
+        wrapper.find(Button)!.trigger('onClick');
+
+        triggerDown(wrapper);
+
+        expect(options[0].domNode!.getAttribute('data-focused')).toBe('true');
+
+        triggerDown(wrapper);
+
+        expect(options[0].domNode!.getAttribute('data-focused')).toBeNull();
+        expect(options[2].domNode!.getAttribute('data-focused')).toBe('true');
+      });
+
+      it('does not focus a disabled element when all elements are disabled', () => {
+        const setActiveOptionIdSpy = jest.fn();
+        const listbox = mountWithComboBoxListContext(
+          <ListBox enableKeyboardControl>
+            <ListBox.Option disabled value="valueOne" />
+            <ListBox.Option disabled value="valueTwo" />
+          </ListBox>,
+          {
+            setActiveOptionId: setActiveOptionIdSpy,
+          },
+        );
+
+        triggerDown(listbox);
+
+        expect(setActiveOptionIdSpy).not.toHaveBeenCalled();
+      });
+    });
+
+    describe('up arrow', () => {
+      it('move the data-focused attribute to true of the selected list item', () => {
+        const wrapper = mountWithApp(<MockComponent />);
+
+        const options = wrapper.findAll(ListBox.Option);
+
+        expect(options[2].domNode!.getAttribute('data-focused')).toBeNull();
+
+        triggerUp(wrapper);
+
+        expect(options[2].domNode!.getAttribute('data-focused')).toBe('true');
+
+        triggerUp(wrapper);
+
+        expect(options[2].domNode!.getAttribute('data-focused')).toBeNull();
+        expect(options[1].domNode!.getAttribute('data-focused')).toBe('true');
+      });
+
+      it('set the active-descendant attribute of the list to the id of the focused element', () => {
+        const wrapper = mountWithApp(<MockComponent />);
+        const listBox = wrapper.find('ul', {role: 'listbox'})!;
+        const options = wrapper.findAll(ListBox.Option);
+
+        expect(
+          listBox.domNode!.getAttribute('aria-activedescendant'),
+        ).toBeNull();
+
+        triggerUp(wrapper);
+
+        expect(listBox.domNode!.getAttribute('aria-activedescendant')).toBe(
+          options[2].domNode!.id,
+        );
+
+        triggerUp(wrapper);
+
+        expect(listBox.domNode!.getAttribute('aria-activedescendant')).toBe(
+          options[1].domNode!.id,
+        );
+      });
+
+      it('move the focus back to the last option when the top of the list is reached', () => {
+        const wrapper = mountWithApp(<MockComponent />);
+        const options = wrapper.findAll(ListBox.Option);
+
+        expect(options[2].domNode!.getAttribute('data-focused')).toBeNull();
+
+        triggerUp(wrapper);
+        triggerUp(wrapper);
+        triggerUp(wrapper);
+        triggerUp(wrapper);
+
+        expect(options[2].domNode!.getAttribute('data-focused')).toBe('true');
+      });
+
+      it('skips disabled options', () => {
+        const wrapper = mountWithApp(<MockComponent />);
+        const options = wrapper.findAll(ListBox.Option);
+
+        wrapper.find(Button)!.trigger('onClick');
+
+        triggerUp(wrapper);
+
+        expect(options[2].domNode!.getAttribute('data-focused')).toBe('true');
+
+        triggerUp(wrapper);
+
+        expect(options[0].domNode!.getAttribute('data-focused')).toBe('true');
+        expect(options[2].domNode!.getAttribute('data-focused')).toBeNull();
+      });
+    });
+
+    describe('enter', () => {
+      it('calls onOptionSelect with the data-listbox-option-value when enter is pressed', () => {
+        const onSelect = jest.fn();
+        const wrapper = mountWithApp(<MockComponent onSelect={onSelect} />);
+        const option = wrapper.find(ListBox.Option);
+        triggerDown(wrapper);
+
+        triggerEnter(wrapper);
+
+        expect(onSelect).toHaveBeenCalledWith(
+          option!.domNode!.getAttribute('data-listbox-option-value'),
+        );
+      });
+    });
+  });
+
+  describe('Keyboard control in combobox', () => {
+    it('calls setActiveOptionId on the combobox context with the option id when an option is focused', () => {
+      const setActiveOptionIdSpy = jest.fn();
+      const wrapper = mountWithComboBoxListContext(<MockComponent />, {
+        setActiveOptionId: setActiveOptionIdSpy,
+      });
+      const option = wrapper.find(ListBox.Option);
+      triggerDown(wrapper);
+
+      expect(setActiveOptionIdSpy).toHaveBeenCalledWith(option!.domNode!.id);
+    });
+
+    it('calls onOptionSelected on the combobox context when an option is focused and enter is pressed', () => {
+      const onOptionSelectedSpy = jest.fn();
+      const wrapper = mountWithComboBoxListContext(<MockComponent />, {
+        onOptionSelected: onOptionSelectedSpy,
+      });
+
+      triggerDown(wrapper);
+      triggerEnter(wrapper);
+
+      expect(onOptionSelectedSpy).toHaveBeenCalled();
+    });
+
+    it('calls onKeyToBottom on the combobox when the last item is focused', () => {
+      const onKeyToBottomSpy = jest.fn();
+      const wrapper = mountWithComboBoxListContext(<MockComponent />, {
+        onKeyToBottom: onKeyToBottomSpy,
+      });
+      triggerUp(wrapper);
+
+      expect(onKeyToBottomSpy).toHaveBeenCalled();
+    });
+
+    it('enables keyboard controls when enableKeyboardControl prop changed from false to true', () => {
+      const listBox = mountWithListBoxProvider(
+        <ListBox onSelect={() => {}} enableKeyboardControl={false}>
+          <div>Empty state</div>
+        </ListBox>,
+      );
+
+      listBox.setProps({enableKeyboardControl: true});
+
+      expect(listBox).toContainReactComponent(KeypressListener);
+    });
+  });
+});
+
+function triggerDown(component: any) {
+  component
+    .find(KeypressListener, {keyCode: Key.DownArrow})!
+    .trigger('handler', keyDown);
+}
+
+function triggerUp(component: any) {
+  component
+    .find(KeypressListener, {keyCode: Key.UpArrow})!
+    .trigger('handler', keyUp);
+}
+
+function triggerEnter(component: any) {
+  component
+    .find(KeypressListener, {keyCode: Key.Enter})!
+    .trigger('handler', keyEnter);
+}
diff --git a/src/components/TextField/README.md b/src/components/TextField/README.md
index 97a4e065372..62dbb6a03d1 100644
--- a/src/components/TextField/README.md
+++ b/src/components/TextField/README.md
@@ -964,12 +964,4 @@ Text fields have standard keyboard support.
 
 Although you can use the `autoFocus` prop to automatically move focus to the text field, it’s generally best to avoid focusing on fields automatically. The `autoFocus` prop is set to `false` by default and should only be used in cases where it won’t force focus to skip other controls or content of equal or greater importance.
 
-### Autocomplete
-
-- Use the `ariaControls` and `ariaOwns` props (which implement the `aria-controls` and `aria-owns` attributes) to point to the `id` of the autocomplete list.
-- Use the `ariaAutocomplete` prop to indicate what kind of `aria-autocomplete` input is provided, either `list` or `inline`. Typically, `list` is used.
-- When merchants navigate through the list, the `ariaActiveDescendant` prop indicates which option has programmatic focus so that it can be conveyed to screen reader users.
-
-To learn more about implementing a text field with autocomplete, see the [autocomplete component](https://polaris.shopify.com/components/forms/autocomplete).
-
 <!-- /content-for -->
diff --git a/src/components/index.ts b/src/components/index.ts
index 5d14b8e5200..4eb04d7be2f 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -67,6 +67,9 @@ export type {CollapsibleProps} from './Collapsible';
 export {ColorPicker} from './ColorPicker';
 export type {ColorPickerProps} from './ColorPicker';
 
+export {ComboBox} from './ComboBox';
+export type {ComboBoxProps} from './ComboBox';
+
 export {Connected} from './Connected';
 export type {ConnectedProps} from './Connected';
 
@@ -174,6 +177,9 @@ export type {LinkProps} from './Link';
 export {List} from './List';
 export type {ListProps} from './List';
 
+export {ListBox} from './ListBox';
+export type {ListBoxProps} from './ListBox';
+
 export {Loading} from './Loading';
 export type {LoadingProps} from './Loading';
 
diff --git a/src/test-utilities/list-box.tsx b/src/test-utilities/list-box.tsx
new file mode 100644
index 00000000000..41e94254b43
--- /dev/null
+++ b/src/test-utilities/list-box.tsx
@@ -0,0 +1,59 @@
+import React, {ReactElement} from 'react';
+import {createMount} from '@shopify/react-testing';
+
+import {PolarisTestProvider} from '../components';
+import {ListBoxContext} from '../utilities/list-box';
+import {
+  ComboBoxListBoxContext,
+  ComboBoxListBoxType,
+} from '../utilities/combo-box';
+import translations from '../../locales/en.json';
+
+import {mountWithApp} from './react-testing';
+
+const defaultContext: React.ContextType<typeof ListBoxContext> = {
+  onOptionSelect: noop,
+  setLoading: noop,
+};
+
+export function mountWithListBoxProvider(
+  element: React.ReactElement,
+  context: React.ContextType<typeof ListBoxContext> = defaultContext,
+) {
+  return createMount({
+    context: () => {
+      return {context};
+    },
+    render(element: React.ReactElement) {
+      return (
+        <PolarisTestProvider
+          i18n={translations}
+          features={{newDesignLanguage: true}}
+        >
+          <ListBoxContext.Provider value={context}>
+            {element}
+          </ListBoxContext.Provider>
+        </PolarisTestProvider>
+      );
+    },
+  })(element);
+}
+
+export function mountWithComboBoxListContext(
+  listbox: ReactElement,
+  context: ComboBoxListBoxType = {},
+) {
+  const comboxBox = mountWithApp(
+    <ComboBoxListBoxContext.Provider
+      value={{
+        setActiveOptionId: () => null,
+        ...context,
+      }}
+    >
+      {listbox}
+    </ComboBoxListBoxContext.Provider>,
+  );
+  return comboxBox;
+}
+
+function noop() {}
diff --git a/src/test-utilities/react-testing.tsx b/src/test-utilities/react-testing.tsx
index c4142e30cc6..2180ce4e9a9 100644
--- a/src/test-utilities/react-testing.tsx
+++ b/src/test-utilities/react-testing.tsx
@@ -1,5 +1,10 @@
 import React from 'react';
-import {createMount, mount} from '@shopify/react-testing';
+import {
+  createMount,
+  mount,
+  Element as ReactTestingElement,
+  CustomRoot,
+} from '@shopify/react-testing';
 
 import translations from '../../locales/en.json';
 import {
@@ -7,7 +12,7 @@ import {
   WithPolarisTestProviderOptions,
 } from '../components';
 
-export {createMount, mount};
+export {createMount, mount, ReactTestingElement, CustomRoot};
 
 export const mountWithApp = createMount<
   WithPolarisTestProviderOptions,
diff --git a/src/types.ts b/src/types.ts
index b4d67846585..3a7dfdf1d9a 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -306,3 +306,5 @@ export interface CheckboxHandles {
 }
 
 export type NonEmptyArray<T> = [T, ...T[]];
+
+export type ArrayElement<T> = T extends (infer U)[] ? U : never;
diff --git a/src/utilities/autocomplete/context.ts b/src/utilities/autocomplete/context.ts
new file mode 100644
index 00000000000..0030be0b1f3
--- /dev/null
+++ b/src/utilities/autocomplete/context.ts
@@ -0,0 +1,14 @@
+import {createContext} from 'react';
+
+interface MappedActionContextType {
+  role?: string;
+  url?: string;
+  external?: boolean;
+  onAction?(): void;
+  destructive?: boolean;
+  isAction: boolean;
+}
+
+export const MappedActionContext = createContext<MappedActionContextType>({
+  isAction: false,
+});
diff --git a/src/utilities/autocomplete/index.ts b/src/utilities/autocomplete/index.ts
new file mode 100644
index 00000000000..c38e8e82152
--- /dev/null
+++ b/src/utilities/autocomplete/index.ts
@@ -0,0 +1 @@
+export * from './context';
diff --git a/src/utilities/closest-parent-match.ts b/src/utilities/closest-parent-match.ts
new file mode 100644
index 00000000000..702e67ca3e7
--- /dev/null
+++ b/src/utilities/closest-parent-match.ts
@@ -0,0 +1,10 @@
+export function closestParentMatch(element: HTMLElement, matcher: string) {
+  let parent = element.parentElement;
+
+  while (parent) {
+    if (parent.matches(matcher)) return parent;
+    parent = parent.parentElement;
+  }
+
+  return parent;
+}
diff --git a/src/utilities/combo-box/context.tsx b/src/utilities/combo-box/context.tsx
new file mode 100644
index 00000000000..ebc77cda240
--- /dev/null
+++ b/src/utilities/combo-box/context.tsx
@@ -0,0 +1,52 @@
+import {createContext} from 'react';
+
+export interface ComboBoxTextFieldType {
+  // Value for the TextField aria-activedescendant. (also on list context when not in combobox)
+  activeOptionId?: string;
+  // Value for the ComboBox aria-owns and TextField aria-control
+  listBoxId?: string;
+  // Value for aria-expanded on TextField
+  expanded?: boolean;
+  // Sets the value for the ListBox aria-labelledby
+  setTextFieldLabelId?(id: string): void;
+  // Sets a boolean to enable/disable keyboard control for the ListBox
+  setTextFieldFocused?(value: boolean): void;
+  // Callback when TextField is focused
+  onTextFieldFocus?(): void;
+  // Callback when TextField is blured
+  onTextFieldBlur?(): void;
+  // Callback when TextField is changed
+  onTextFieldChange?(): void;
+}
+
+export interface ComboBoxListBoxType {
+  // Value of the Texfields ID for listBox aria-labelledby
+  textFieldLabelId?: string;
+  // Enables/disables keyboard control
+  textFieldFocused?: boolean;
+  // Sets the value for the TextFields aria-activedescendant.
+  setActiveOptionId?(id: string): void;
+  // Sets the value of the listBoxId use for the ComboBox aria-owns and TextField aria-control
+  setListBoxId?(id: string): void;
+  // Value of listBoxId to avoid calling setListBoxId
+  listBoxId?: string;
+  // Handler used in ComboBox to brings to manage popover state and focus based on multi or single select
+  onOptionSelected?(): void;
+  // Callback to onScrolledToBottom when using keyboard navigation navigates to the last item
+  onKeyToBottom?(): void;
+}
+
+export interface ComboBoxListBoxOptionType {
+  // Whether the option should visually support multiple selection
+  allowMultiple?: boolean;
+}
+
+export const ComboBoxTextFieldContext = createContext<
+  ComboBoxTextFieldType | undefined
+>(undefined);
+
+export const ComboBoxListBoxContext = createContext<ComboBoxListBoxType>({});
+
+export const ComboBoxListBoxOptionContext = createContext<
+  ComboBoxListBoxOptionType
+>({});
diff --git a/src/utilities/combo-box/hooks.tsx b/src/utilities/combo-box/hooks.tsx
new file mode 100644
index 00000000000..7df1da73fb1
--- /dev/null
+++ b/src/utilities/combo-box/hooks.tsx
@@ -0,0 +1,18 @@
+import {useContext} from 'react';
+
+import {ComboBoxTextFieldContext, ComboBoxListBoxContext} from './context';
+
+export function useComboBoxTextField() {
+  const context = useContext(ComboBoxTextFieldContext);
+  if (!context) {
+    throw new Error(
+      'No ComboBox was provided. Your component must be wrapped in a <ComboBox> component.',
+    );
+  }
+  return context;
+}
+
+export function useComboBoxListBox() {
+  const context = useContext(ComboBoxListBoxContext);
+  return context;
+}
diff --git a/src/utilities/combo-box/index.ts b/src/utilities/combo-box/index.ts
new file mode 100644
index 00000000000..472021f7e91
--- /dev/null
+++ b/src/utilities/combo-box/index.ts
@@ -0,0 +1,2 @@
+export * from './context';
+export * from './hooks';
diff --git a/src/utilities/combo-box/tests/hook.test.tsx b/src/utilities/combo-box/tests/hook.test.tsx
new file mode 100644
index 00000000000..627407c5497
--- /dev/null
+++ b/src/utilities/combo-box/tests/hook.test.tsx
@@ -0,0 +1,41 @@
+import React from 'react';
+import {mountWithApp} from 'test-utilities';
+
+import {useComboBoxTextField} from '../hooks';
+import {ComboBoxTextFieldContext} from '../context';
+
+function TextFieldComponent() {
+  const textFieldContext = useComboBoxTextField();
+
+  return textFieldContext ? <div /> : null;
+}
+
+describe('textFieldContent', () => {
+  it('throws if not wrapped in ComboBoxTextFieldContext', () => {
+    const consoleErrorSpy = jest
+      .spyOn(console, 'error')
+      .mockImplementation(() => {});
+
+    expect(() => mountWithApp(<TextFieldComponent />)).toThrow(
+      'No ComboBox was provided. Your component must be wrapped in a <ComboBox> component.',
+    );
+
+    consoleErrorSpy.mockRestore();
+  });
+
+  it('does not throw if wrapped in a ComboBoxTextFieldContext provide', () => {
+    const consoleErrorSpy = jest
+      .spyOn(console, 'error')
+      .mockImplementation(() => {});
+
+    expect(() =>
+      mountWithApp(
+        <ComboBoxTextFieldContext.Provider value={{}}>
+          <TextFieldComponent />
+        </ComboBoxTextFieldContext.Provider>,
+      ),
+    ).not.toThrow('No ComboBox was provided.');
+
+    consoleErrorSpy.mockRestore();
+  });
+});
diff --git a/src/utilities/list-box/context.ts b/src/utilities/list-box/context.ts
new file mode 100644
index 00000000000..bbdc5478079
--- /dev/null
+++ b/src/utilities/list-box/context.ts
@@ -0,0 +1,14 @@
+import {createContext} from 'react';
+
+import type {NavigableOption} from './types';
+
+export interface ListBoxContextType {
+  onOptionSelect(option: NavigableOption): void;
+  setLoading(label?: string): void;
+}
+
+export const ListBoxContext = createContext<ListBoxContextType | undefined>(
+  undefined,
+);
+
+export const WithinListBoxContext = createContext(false);
diff --git a/src/utilities/list-box/hooks.ts b/src/utilities/list-box/hooks.ts
new file mode 100644
index 00000000000..03d9346147b
--- /dev/null
+++ b/src/utilities/list-box/hooks.ts
@@ -0,0 +1,15 @@
+import {useContext} from 'react';
+
+import {ListBoxContext} from './context';
+
+export function useListBox() {
+  const listBox = useContext(ListBoxContext);
+
+  if (!listBox) {
+    throw new Error(
+      'No ListBox was provided. ListBox components must be wrapped in a Listbox',
+    );
+  }
+
+  return listBox;
+}
diff --git a/src/utilities/list-box/index.ts b/src/utilities/list-box/index.ts
new file mode 100644
index 00000000000..a9fae143c8a
--- /dev/null
+++ b/src/utilities/list-box/index.ts
@@ -0,0 +1,3 @@
+export * from './context';
+export * from './hooks';
+export * from './types';
diff --git a/src/utilities/list-box/types.ts b/src/utilities/list-box/types.ts
new file mode 100644
index 00000000000..3681afb885c
--- /dev/null
+++ b/src/utilities/list-box/types.ts
@@ -0,0 +1,6 @@
+export interface NavigableOption {
+  domId: string;
+  value: string;
+  element: HTMLElement;
+  disabled: boolean;
+}
diff --git a/src/utilities/scroll-into-view.ts b/src/utilities/scroll-into-view.ts
new file mode 100644
index 00000000000..8b6e94850d4
--- /dev/null
+++ b/src/utilities/scroll-into-view.ts
@@ -0,0 +1,8 @@
+export function scrollIntoView(element: HTMLElement, container: HTMLElement) {
+  requestAnimationFrame(() => {
+    if (element) {
+      const offset = element.offsetTop - container.scrollTop;
+      container.scrollBy({top: offset});
+    }
+  });
+}
diff --git a/src/utilities/tests/closest-parent-match.test.ts b/src/utilities/tests/closest-parent-match.test.ts
new file mode 100644
index 00000000000..b23862a0225
--- /dev/null
+++ b/src/utilities/tests/closest-parent-match.test.ts
@@ -0,0 +1,30 @@
+import {closestParentMatch} from '../closest-parent-match';
+
+describe('closest-parent-match', () => {
+  it('matches first parent element', () => {
+    const {parent, child, matcher} = setUpParentAndChild();
+    const closestParent = closestParentMatch(child, matcher);
+
+    expect(parent).toBe(closestParent);
+  });
+
+  it('matches nested elements', () => {
+    const {parent, nestedChild, matcher} = setUpParentAndChild();
+    const closestParent = closestParentMatch(nestedChild, matcher);
+
+    expect(parent).toBe(closestParent);
+  });
+});
+
+function setUpParentAndChild() {
+  const id = 'parent';
+
+  const parent = document.createElement('div');
+  const child = document.createElement('div');
+  const nestedChild = document.createElement('div');
+
+  parent.id = id;
+  parent.append(child, nestedChild);
+
+  return {parent, child, nestedChild, matcher: `#${id}`};
+}
diff --git a/tests/setup.ts b/tests/setup.ts
index c5b090306d2..bf38c4557c6 100644
--- a/tests/setup.ts
+++ b/tests/setup.ts
@@ -18,9 +18,7 @@ const IGNORE_ERROR_REGEXES = [
   /React does not recognize the `%s` prop on a DOM element/,
 ];
 
-const IGNORE_WARN_REGEXES: RegExp[] = [
-  /Deprecation: <FilterControl \/> is deprecated\. This is a private component, do not use it\. This component might be removed in a minor version update\. Use <Filters \/> instead\./,
-];
+const IGNORE_WARN_REGEXES: RegExp[] = [/Deprecation:.*/];
 
 // eslint-disable-next-line no-console
 const originalConsoleError = console.error.bind(console);