diff --git a/package-lock.json b/package-lock.json
index b6bf317728..ec622e1229 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -28583,6 +28583,7 @@
         "@fortawesome/fontawesome-svg-core": "^6.2.1",
         "@fortawesome/react-fontawesome": "^0.2.0",
         "@react-spectrum/theme-default": "^3.5.1",
+        "@react-types/shared": "^3.22.1",
         "bootstrap": "4.6.2",
         "classnames": "^2.3.1",
         "event-target-shim": "^6.0.2",
@@ -31032,6 +31033,7 @@
         "@fortawesome/fontawesome-svg-core": "^6.2.1",
         "@fortawesome/react-fontawesome": "^0.2.0",
         "@react-spectrum/theme-default": "^3.5.1",
+        "@react-types/shared": "^3.22.1",
         "bootstrap": "4.6.2",
         "classnames": "^2.3.1",
         "event-target-shim": "^6.0.2",
diff --git a/packages/code-studio/src/styleguide/Pickers.tsx b/packages/code-studio/src/styleguide/Pickers.tsx
index e698c57555..6170ec79da 100644
--- a/packages/code-studio/src/styleguide/Pickers.tsx
+++ b/packages/code-studio/src/styleguide/Pickers.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
-import { Picker } from '@deephaven/components';
+import { Item, Picker, Section } from '@deephaven/components';
 import { vsPerson } from '@deephaven/icons';
-import { Flex, Icon, Item, Text } from '@adobe/react-spectrum';
+import { Flex, Icon, Text } from '@adobe/react-spectrum';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { sampleSectionIdAndClasses } from './utils';
 
@@ -40,9 +40,32 @@ export function Pickers(): JSX.Element {
           <Item>Item Bbb</Item>
           <Item textValue="Complex Ccc">
             <PersonIcon />
-            <Text>Complex Ccc</Text>
+            <Text>Complex Ccc with text that should be truncated</Text>
           </Item>
         </Picker>
+
+        <Picker label="Sections" tooltip>
+          {/* eslint-disable react/jsx-curly-brace-presence */}
+          {'String 1'}
+          {'String 2'}
+          {'String 3'}
+          <Section title="Section A">
+            <Item>Item Aaa</Item>
+            <Item>Item Bbb</Item>
+            <Item textValue="Complex Ccc">
+              <PersonIcon />
+              <Text>Complex Ccc</Text>
+            </Item>
+          </Section>
+          <Section>
+            <Item>Item Ddd</Item>
+            <Item>Item Eee</Item>
+            <Item textValue="Complex Fff">
+              <PersonIcon />
+              <Text>Complex Fff</Text>
+            </Item>
+          </Section>
+        </Picker>
       </Flex>
     </div>
   );
diff --git a/packages/components/package.json b/packages/components/package.json
index 428e02001e..12193bcabb 100644
--- a/packages/components/package.json
+++ b/packages/components/package.json
@@ -25,6 +25,7 @@
   },
   "dependencies": {
     "@adobe/react-spectrum": "^3.34.1",
+    "@react-types/shared": "^3.22.1",
     "@deephaven/icons": "file:../icons",
     "@deephaven/log": "file:../log",
     "@deephaven/react-hooks": "file:../react-hooks",
diff --git a/packages/components/src/spectrum/Item.tsx b/packages/components/src/spectrum/Item.tsx
new file mode 100644
index 0000000000..a9371db928
--- /dev/null
+++ b/packages/components/src/spectrum/Item.tsx
@@ -0,0 +1,13 @@
+/**
+ * Wrapping Spectrum `Item` components will break functionality due to the way
+ * they are consumed by collection components. They are only used to pass data
+ * and don't render anything on their own, so they don't need to be wrapped.
+ * See https://github.com/adobe/react-spectrum/blob/main/packages/%40react-stately/collections/src/Item.ts#L17
+ */
+import { Item } from '@adobe/react-spectrum';
+
+export type { ItemProps } from '@react-types/shared';
+
+export { Item };
+
+export default Item;
diff --git a/packages/components/src/spectrum/Section.tsx b/packages/components/src/spectrum/Section.tsx
new file mode 100644
index 0000000000..d8b89f24af
--- /dev/null
+++ b/packages/components/src/spectrum/Section.tsx
@@ -0,0 +1,13 @@
+/**
+ * Wrapping Spectrum `Section` components will break functionality due to the way
+ * they are consumed by collection components. They are only used to pass data
+ * and don't render anything on their own, so they don't need to be wrapped.
+ * See https://github.com/adobe/react-spectrum/blob/main/packages/%40react-stately/collections/src/Section.ts#L18
+ */
+import { Section } from '@adobe/react-spectrum';
+
+export type { SectionProps } from '@react-types/shared';
+
+export { Section };
+
+export default Section;
diff --git a/packages/components/src/spectrum/index.ts b/packages/components/src/spectrum/index.ts
index aea9fbd736..ec4f31aa20 100644
--- a/packages/components/src/spectrum/index.ts
+++ b/packages/components/src/spectrum/index.ts
@@ -1 +1,3 @@
 export * from './picker';
+export * from './Item';
+export * from './Section';
diff --git a/packages/components/src/spectrum/picker/Picker.tsx b/packages/components/src/spectrum/picker/Picker.tsx
index 68345b26f4..668f9bdc8c 100644
--- a/packages/components/src/spectrum/picker/Picker.tsx
+++ b/packages/components/src/spectrum/picker/Picker.tsx
@@ -1,18 +1,23 @@
-import { useMemo } from 'react';
-import { Item, Picker as SpectrumPicker } from '@adobe/react-spectrum';
+import { Key, useCallback, useMemo } from 'react';
+import { Picker as SpectrumPicker } from '@adobe/react-spectrum';
+import cl from 'classnames';
 import { Tooltip } from '../../popper';
 import {
   NormalizedSpectrumPickerProps,
   normalizePickerItemList,
   normalizeTooltipOptions,
-  PickerItem,
+  PickerItemOrSection,
   PickerItemKey,
   TooltipOptions,
+  NormalizedPickerItem,
+  isNormalizedPickerSection,
 } from './PickerUtils';
 import { PickerItemContent } from './PickerItemContent';
+import { Item } from '../Item';
+import { Section } from '../Section';
 
 export type PickerProps = {
-  children: PickerItem | PickerItem[];
+  children: PickerItemOrSection | PickerItemOrSection[];
   /** Can be set to true or a TooltipOptions to enable item tooltips */
   tooltip?: boolean | TooltipOptions;
   /** The currently selected key in the collection (controlled). */
@@ -54,11 +59,13 @@ export type PickerProps = {
  */
 export function Picker({
   children,
-  tooltip,
+  tooltip = true,
   defaultSelectedKey,
   selectedKey,
   onChange,
   onSelectionChange,
+  // eslint-disable-next-line camelcase
+  UNSAFE_className,
   ...spectrumPickerProps
 }: PickerProps): JSX.Element {
   const normalizedItems = useMemo(
@@ -71,10 +78,29 @@ export function Picker({
     [tooltip]
   );
 
+  const renderItem = useCallback(
+    ({ key, content, textValue }: NormalizedPickerItem) => (
+      // The `textValue` prop gets used to provide the content of `<option>`
+      // elements that back the Spectrum Picker. These are not visible in the UI,
+      // but are used for accessibility purposes, so we set to an arbitrary
+      // 'Empty' value so that they are not empty strings.
+      <Item key={key as Key} textValue={textValue === '' ? 'Empty' : textValue}>
+        <PickerItemContent>{content}</PickerItemContent>
+        {tooltipOptions == null || content === '' ? null : (
+          <Tooltip options={tooltipOptions}>
+            {typeof content === 'boolean' ? String(content) : content}
+          </Tooltip>
+        )}
+      </Item>
+    ),
+    [tooltipOptions]
+  );
+
   return (
     <SpectrumPicker
       // eslint-disable-next-line react/jsx-props-no-spreading
       {...spectrumPickerProps}
+      UNSAFE_className={cl('dh-picker', UNSAFE_className)}
       items={normalizedItems}
       // Type assertions are necessary for `selectedKey`, `defaultSelectedKey`,
       // and `onSelectionChange` due to Spectrum types not accounting for
@@ -89,14 +115,21 @@ export function Picker({
           onSelectionChange) as NormalizedSpectrumPickerProps['onSelectionChange']
       }
     >
-      {({ content, textValue }) => (
-        <Item textValue={textValue === '' ? 'Empty' : textValue}>
-          <PickerItemContent>{content}</PickerItemContent>
-          {tooltipOptions == null || content === '' ? null : (
-            <Tooltip options={tooltipOptions}>{content}</Tooltip>
-          )}
-        </Item>
-      )}
+      {itemOrSection => {
+        if (isNormalizedPickerSection(itemOrSection)) {
+          return (
+            <Section
+              key={itemOrSection.key}
+              title={itemOrSection.title}
+              items={itemOrSection.items}
+            >
+              {renderItem}
+            </Section>
+          );
+        }
+
+        return renderItem(itemOrSection);
+      }}
     </SpectrumPicker>
   );
 }
diff --git a/packages/components/src/spectrum/picker/PickerItemContent.tsx b/packages/components/src/spectrum/picker/PickerItemContent.tsx
index e5bcd8ae20..77f113cc58 100644
--- a/packages/components/src/spectrum/picker/PickerItemContent.tsx
+++ b/packages/components/src/spectrum/picker/PickerItemContent.tsx
@@ -23,6 +23,12 @@ export function PickerItemContent({
     content = <>&nbsp;</>;
   }
 
+  if (typeof content === 'boolean') {
+    // Boolean values need to be stringified to render
+    // eslint-disable-next-line no-param-reassign
+    content = String(content);
+  }
+
   return (
     <Text UNSAFE_className={stylesCommon.spectrumEllipsis}>{content}</Text>
   );
diff --git a/packages/components/src/spectrum/picker/PickerUtils.test.tsx b/packages/components/src/spectrum/picker/PickerUtils.test.tsx
index 48dfe5f8ea..3c7f6764d2 100644
--- a/packages/components/src/spectrum/picker/PickerUtils.test.tsx
+++ b/packages/components/src/spectrum/picker/PickerUtils.test.tsx
@@ -1,44 +1,44 @@
-import React from 'react';
-import { Item, Text } from '@adobe/react-spectrum';
+import React, { createElement } from 'react';
+import { Text } from '@adobe/react-spectrum';
 import {
   NormalizedPickerItem,
   normalizeTooltipOptions,
   normalizePickerItemList,
   PickerItem,
+  isSectionElement,
+  isItemElement,
+  NormalizedPickerSection,
+  INVALID_PICKER_ITEM_ERROR_MESSAGE,
+  isPickerItemOrSection,
+  isNormalizedPickerSection,
 } from './PickerUtils';
 import type { PickerProps } from './Picker';
+import { Item } from '../Item';
+import { Section } from '../Section';
 
 beforeEach(() => {
   expect.hasAssertions();
 });
 
 /* eslint-disable react/jsx-key */
-const expectedNormalizations = new Map<PickerItem, NormalizedPickerItem>([
-  [
+const expectedItems = {
+  numberLiteral: [
     999,
     {
-      content: '999',
+      content: 999,
       key: 999,
       textValue: '999',
     },
   ],
-  [
-    true,
-    {
-      content: 'true',
-      key: true,
-      textValue: 'true',
-    },
-  ],
-  [
-    false,
+  stringLiteral: [
+    'String',
     {
-      content: 'false',
-      key: false,
-      textValue: 'false',
+      content: 'String',
+      key: 'String',
+      textValue: 'String',
     },
   ],
-  [
+  emptyStringLiteral: [
     '',
     {
       content: '',
@@ -46,15 +46,24 @@ const expectedNormalizations = new Map<PickerItem, NormalizedPickerItem>([
       textValue: '',
     },
   ],
-  [
-    'String',
+  booleanLiteral: [
+    false,
     {
-      content: 'String',
-      key: 'String',
-      textValue: 'String',
+      content: false,
+      key: false,
+      textValue: 'false',
     },
   ],
-  [
+  singleStringChild: [
+    <Item textValue="textValue">Single string</Item>,
+    {
+      content: 'Single string',
+      key: 'textValue',
+      textValue: 'textValue',
+    },
+  ],
+  singleStringChildNoTextValue: [
+    // eslint-disable-next-line react/jsx-key
     <Item>Single string child no textValue</Item>,
     {
       content: 'Single string child no textValue',
@@ -62,7 +71,7 @@ const expectedNormalizations = new Map<PickerItem, NormalizedPickerItem>([
       textValue: 'Single string child no textValue',
     },
   ],
-  [
+  elementChildNoTextValue: [
     <Item>
       <span>No textValue</span>
     </Item>,
@@ -72,15 +81,7 @@ const expectedNormalizations = new Map<PickerItem, NormalizedPickerItem>([
       textValue: '',
     },
   ],
-  [
-    <Item textValue="textValue">Single string</Item>,
-    {
-      content: 'Single string',
-      key: 'Single string',
-      textValue: 'textValue',
-    },
-  ],
-  [
+  explicitKey: [
     <Item key="explicit.key" textValue="textValue">
       Explicit key
     </Item>,
@@ -90,7 +91,7 @@ const expectedNormalizations = new Map<PickerItem, NormalizedPickerItem>([
       textValue: 'textValue',
     },
   ],
-  [
+  complex: [
     <Item textValue="textValue">
       <i>i</i>
       <Text>Complex</Text>
@@ -101,9 +102,46 @@ const expectedNormalizations = new Map<PickerItem, NormalizedPickerItem>([
       textValue: 'textValue',
     },
   ],
-]);
+} satisfies Record<string, [PickerItem, NormalizedPickerItem]>;
+/* eslint-enable react/jsx-key */
+
+const nonItemElement = <span>Non-item element</span>;
+
+/* eslint-disable react/jsx-key */
+const expectedSections = {
+  noTitle: [
+    <Section>{expectedItems.singleStringChild[0]}</Section>,
+    {
+      key: '',
+      items: [expectedItems.singleStringChild[1]],
+    },
+  ],
+  title: [
+    <Section title="Some Title">{expectedItems.singleStringChild[0]}</Section>,
+    {
+      key: 'Some Title',
+      title: 'Some Title',
+      items: [expectedItems.singleStringChild[1]],
+    },
+  ],
+  explicitKey: [
+    <Section key="Some Key" title="Some Title">
+      {expectedItems.singleStringChild[0]}
+    </Section>,
+    {
+      key: 'Some Key',
+      title: 'Some Title',
+      items: [expectedItems.singleStringChild[1]],
+    },
+  ],
+} satisfies Record<string, [PickerItem, NormalizedPickerSection]>;
 /* eslint-enable react/jsx-key */
 
+const expectedNormalizations = new Map<
+  PickerItem,
+  NormalizedPickerItem | NormalizedPickerSection
+>([...Object.values(expectedItems), ...Object.values(expectedSections)]);
+
 const mixedItems = [...expectedNormalizations.keys()];
 
 const children = {
@@ -112,9 +150,58 @@ const children = {
   mixed: mixedItems as PickerProps['children'],
 };
 
+describe('isSectionElement', () => {
+  it.each([
+    [createElement(Section), true],
+    [createElement(Item), false],
+    ['some string', false],
+  ])('should return true for a Section element', (element, expected) => {
+    expect(isSectionElement(element)).toBe(expected);
+  });
+});
+
+describe('isItemElement', () => {
+  it.each([
+    [createElement(Item), true],
+    [createElement(Section), false],
+    ['some string', false],
+  ])('should return true for a Item element', (element, expected) => {
+    expect(isItemElement(element)).toBe(expected);
+  });
+});
+
+describe('isPickerItemOrSection', () => {
+  it.each([
+    [createElement(Item), true],
+    [createElement(Section), true],
+    ['Some string', true],
+    [999, true],
+    [true, true],
+    [false, true],
+    [createElement('span'), false],
+  ])(
+    'should return true for a Item or Section element: %s, %s',
+    (element, expected) => {
+      expect(isPickerItemOrSection(element)).toBe(expected);
+    }
+  );
+});
+
+describe('isNormalizedPickerSection', () => {
+  it.each([
+    [{ key: 'mock.key' } as NormalizedPickerItem, false],
+    [{ key: 'mock.key', items: [] } as NormalizedPickerSection, true],
+  ])(
+    'should return true for a normalized Picker section: %s',
+    (obj, expected) => {
+      expect(isNormalizedPickerSection(obj)).toBe(expected);
+    }
+  );
+});
+
 describe('normalizePickerItemList', () => {
   it.each([children.empty, children.single, children.mixed])(
-    'should return normalized picker items: %s',
+    'should return normalized picker items: %#: %s',
     given => {
       const childrenArray = Array.isArray(given) ? given : [given];
 
@@ -126,6 +213,12 @@ describe('normalizePickerItemList', () => {
       expect(actual).toEqual(expected);
     }
   );
+
+  it(`should throw for invalid items: %#: %s`, () => {
+    expect(() => normalizePickerItemList(nonItemElement)).toThrow(
+      INVALID_PICKER_ITEM_ERROR_MESSAGE
+    );
+  });
 });
 
 describe('normalizeTooltipOptions', () => {
diff --git a/packages/components/src/spectrum/picker/PickerUtils.ts b/packages/components/src/spectrum/picker/PickerUtils.ts
index 4aca535b44..2ef8db44fa 100644
--- a/packages/components/src/spectrum/picker/PickerUtils.ts
+++ b/packages/components/src/spectrum/picker/PickerUtils.ts
@@ -1,10 +1,31 @@
-import { Key, ReactElement, ReactNode } from 'react';
-import type { SpectrumPickerProps } from '@adobe/react-spectrum';
-import type { ItemProps } from '@react-types/shared';
+import { isValidElement, Key, ReactElement, ReactNode } from 'react';
+import { SpectrumPickerProps } from '@adobe/react-spectrum';
+import type { ItemRenderer } from '@react-types/shared';
+import Log from '@deephaven/log';
+import { Item, ItemProps } from '../Item';
+import { Section, SectionProps } from '../Section';
 import { PopperOptions } from '../../popper';
 
-export type ItemElement = ReactElement<ItemProps<unknown>>;
+const log = Log.module('PickerUtils');
+
+export const INVALID_PICKER_ITEM_ERROR_MESSAGE =
+  'Picker items must be strings, numbers, booleans, <Item> or <Section> elements:';
+
+/**
+ * React Spectrum <Section> supports an `ItemRenderer` function as a child. The
+ * DH picker makes use of this internally, but we don't want to support it as
+ * an incoming prop.
+ */
+type SectionPropsNoItemRenderer<T> = Omit<SectionProps<T>, 'children'> & {
+  children: Exclude<SectionProps<T>['children'], ItemRenderer<T>>;
+};
+
+type ItemElement = ReactElement<ItemProps<unknown>>;
+type SectionElement = ReactElement<SectionPropsNoItemRenderer<unknown>>;
+
 export type PickerItem = number | string | boolean | ItemElement;
+export type PickerSection = SectionElement;
+export type PickerItemOrSection = PickerItem | PickerSection;
 
 /**
  * Augment the Spectrum selection key type to include boolean values.
@@ -32,32 +53,102 @@ export interface NormalizedPickerItem {
   textValue: string;
 }
 
+export interface NormalizedPickerSection {
+  key: Key;
+  title?: ReactNode;
+  items: NormalizedPickerItem[];
+}
+
 export type NormalizedSpectrumPickerProps =
   SpectrumPickerProps<NormalizedPickerItem>;
 
 export type TooltipOptions = { placement: PopperOptions['placement'] };
 
 /**
- * Determine the `key` of a picker item.
- * @param item The picker item
+ * Determine if a node is a Section element.
+ * @param node The node to check
+ * @returns True if the node is a Section element
+ */
+export function isSectionElement<T>(
+  node: ReactNode
+): node is ReactElement<SectionProps<T>> {
+  return isValidElement<SectionProps<T>>(node) && node.type === Section;
+}
+
+/**
+ * Determine if a node is an Item element.
+ * @param node The node to check
+ * @returns True if the node is an Item element
+ */
+export function isItemElement<T>(
+  node: ReactNode
+): node is ReactElement<ItemProps<T>> {
+  return isValidElement<ItemProps<T>>(node) && node.type === Item;
+}
+
+/**
+ * Determine if a node is a Picker item or section. Valid types include strings,
+ * numbers, booleans, Item elements, and Section elements.
+ * @param node The node to check
+ * @returns True if the node is a Picker item or section
+ */
+export function isPickerItemOrSection(
+  node: ReactNode
+): node is PickerItemOrSection {
+  return (
+    typeof node === 'string' ||
+    typeof node === 'number' ||
+    typeof node === 'boolean' ||
+    isItemElement(node) ||
+    isSectionElement(node)
+  );
+}
+
+/**
+ * Determine if an object is a normalized Picker section.
+ * @param maybeNormalizedPickerSection The object to check
+ * @returns True if the object is a normalized Picker section
+ */
+export function isNormalizedPickerSection(
+  maybeNormalizedPickerSection: NormalizedPickerItem | NormalizedPickerSection
+): maybeNormalizedPickerSection is NormalizedPickerSection {
+  return 'items' in maybeNormalizedPickerSection;
+}
+
+/**
+ * Determine the `key` of a picker item or section.
+ * @param itemOrSection The picker item or section
  * @returns A `PickerItemKey` for the picker item
  */
-function normalizeItemKey(item: PickerItem): PickerItemKey {
+function normalizeItemKey(item: PickerItem): PickerItemKey;
+function normalizeItemKey(section: PickerSection): Key;
+function normalizeItemKey(
+  itemOrSection: PickerItem | PickerSection
+): Key | PickerItemKey {
   // string, number, or boolean
-  if (typeof item !== 'object') {
-    return item;
+  if (typeof itemOrSection !== 'object') {
+    return itemOrSection;
   }
 
-  // `ItemElement` with `key` prop set
-  if (item.key != null) {
-    return item.key;
+  // If `key` prop is explicitly set
+  if (itemOrSection.key != null) {
+    return itemOrSection.key;
   }
 
-  if (typeof item.props.children === 'string') {
-    return item.props.children;
+  // Section element
+  if (isSectionElement(itemOrSection)) {
+    return typeof itemOrSection.props.title === 'string'
+      ? itemOrSection.props.title
+      : '';
   }
 
-  return item.props.textValue ?? '';
+  // Item element
+  return (
+    itemOrSection.props.textValue ??
+    (typeof itemOrSection.props.children === 'string'
+      ? itemOrSection.props.children
+      : '')
+  );
 }
 
 /**
@@ -83,13 +174,38 @@ function normalizeTextValue(item: PickerItem): string {
 
 /**
  * Normalize a picker item to an object form.
- * @param item item to normalize
+ * @param itemOrSection item to normalize
  * @returns NormalizedPickerItem object
  */
-function normalizePickerItem(item: PickerItem): NormalizedPickerItem {
-  const key = normalizeItemKey(item);
-  const content = typeof item === 'object' ? item.props.children : String(item);
-  const textValue = normalizeTextValue(item);
+function normalizePickerItem(
+  itemOrSection: PickerItemOrSection
+): NormalizedPickerItem | NormalizedPickerSection {
+  if (!isPickerItemOrSection(itemOrSection)) {
+    log.debug(INVALID_PICKER_ITEM_ERROR_MESSAGE, itemOrSection);
+    throw new Error(INVALID_PICKER_ITEM_ERROR_MESSAGE);
+  }
+
+  if (isSectionElement(itemOrSection)) {
+    const key = normalizeItemKey(itemOrSection);
+    const { title } = itemOrSection.props;
+
+    const items = normalizePickerItemList(itemOrSection.props.children).filter(
+      // We don't support nested section elements
+      childItem => !isSectionElement(childItem)
+    ) as NormalizedPickerItem[];
+
+    return {
+      key,
+      title,
+      items,
+    };
+  }
+
+  const key = normalizeItemKey(itemOrSection);
+  const content = isItemElement(itemOrSection)
+    ? itemOrSection.props.children
+    : itemOrSection;
+  const textValue = normalizeTextValue(itemOrSection);
 
   return {
     key,
@@ -100,13 +216,15 @@ function normalizePickerItem(item: PickerItem): NormalizedPickerItem {
 
 /**
  * Get normalized picker items from a picker item or array of picker items.
- * @param items A picker item or array of picker items
+ * @param itemsOrSections A picker item or array of picker items
  * @returns An array of normalized picker items
  */
 export function normalizePickerItemList(
-  items: PickerItem | PickerItem[]
-): NormalizedPickerItem[] {
-  const itemsArray = Array.isArray(items) ? items : [items];
+  itemsOrSections: PickerItemOrSection | PickerItemOrSection[]
+): (NormalizedPickerItem | NormalizedPickerSection)[] {
+  const itemsArray = Array.isArray(itemsOrSections)
+    ? itemsOrSections
+    : [itemsOrSections];
   return itemsArray.map(normalizePickerItem);
 }
 
diff --git a/tests/styleguide.spec.ts-snapshots/pickers-chromium-linux.png b/tests/styleguide.spec.ts-snapshots/pickers-chromium-linux.png
index e0a394040c..cbe3fbea24 100644
Binary files a/tests/styleguide.spec.ts-snapshots/pickers-chromium-linux.png and b/tests/styleguide.spec.ts-snapshots/pickers-chromium-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/pickers-firefox-linux.png b/tests/styleguide.spec.ts-snapshots/pickers-firefox-linux.png
index 9fe033008f..73cd095a5c 100644
Binary files a/tests/styleguide.spec.ts-snapshots/pickers-firefox-linux.png and b/tests/styleguide.spec.ts-snapshots/pickers-firefox-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/pickers-webkit-linux.png b/tests/styleguide.spec.ts-snapshots/pickers-webkit-linux.png
index 82b031a601..0d3fc182ac 100644
Binary files a/tests/styleguide.spec.ts-snapshots/pickers-webkit-linux.png and b/tests/styleguide.spec.ts-snapshots/pickers-webkit-linux.png differ