From 3fc2a068e4260cbc59383b3820cf1ab19967acfe Mon Sep 17 00:00:00 2001
From: Marcus Kernohan <135075821+mkernohanbc@users.noreply.github.com>
Date: Thu, 26 Feb 2026 09:47:32 -0800
Subject: [PATCH 01/16] refactor sizing

---
 .../src/components/Select/Select.css          | 35 +++++++++++++------
 .../src/components/Select/Select.tsx          |  4 +--
 2 files changed, 26 insertions(+), 13 deletions(-)

diff --git a/packages/react-components/src/components/Select/Select.css b/packages/react-components/src/components/Select/Select.css
index 582ab4dd..7fcea434 100644
--- a/packages/react-components/src/components/Select/Select.css
+++ b/packages/react-components/src/components/Select/Select.css
@@ -24,6 +24,30 @@
   padding: var(--layout-padding-xsmall) var(--layout-padding-none);
 }
 
+/* Sizing */
+.bcds-react-aria-Select.small .bcds-react-aria-Select--Button {
+  height: 32px;
+}
+.bcds-react-aria-Select--ListBox.small .bcds-react-aria-Select--ListBoxItem {
+  padding: var(--layout-padding-xsmall);
+}
+.bcds-react-aria-Select.small .bcds-react-aria-SelectValue,
+.bcds-react-aria-Select--ListBox.small
+  .bcds-react-aria-Select--ListBoxItem-Text-label {
+  font: var(--typography-regular-small-body);
+}
+.bcds-react-aria-Select.medium .bcds-react-aria-Select--Button {
+  height: 40px;
+}
+.bcds-react-aria-Select--ListBox.medium .bcds-react-aria-Select--ListBoxItem {
+  padding: var(--layout-padding-small);
+}
+.bcds-react-aria-Select.medium .bcds-react-aria-SelectValue,
+.bcds-react-aria-Select--ListBox.medium
+  .bcds-react-aria-Select--ListBoxItem-Text-label {
+  font: var(--typography-regular-body);
+}
+
 /* Error message */
 .bcds-react-aria-Select--Error {
   font: var(--typography-regular-small-body);
@@ -72,14 +96,7 @@
 .bcds-react-aria-Select--Button[data-pressed] {
   border-color: var(--surface-color-border-active);
 }
-.bcds-react-aria-Select--Button.medium {
-  height: 40px;
-}
-.bcds-react-aria-Select--Button.small {
-  height: 32px;
-}
 .bcds-react-aria-Select--Button > .bcds-react-aria-SelectValue {
-  font: var(--typography-regular-body);
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
@@ -126,7 +143,6 @@
   flex-direction: row;
   align-items: center;
   gap: var(--layout-margin-small);
-  padding: var(--layout-padding-small);
 }
 .bcds-react-aria-Select--ListBoxItem[data-focused],
 .bcds-react-aria-Select--ListBoxItem[data-hovered] {
@@ -147,9 +163,6 @@
   flex-direction: column;
   flex-grow: 1;
 }
-.bcds-react-aria-Select--ListBoxItem-Text-label {
-  font: var(--typography-regular-body);
-}
 .bcds-react-aria-Select--ListBoxItem.destructive {
   color: var(--surface-color-primary-danger-button-default);
 }
diff --git a/packages/react-components/src/components/Select/Select.tsx b/packages/react-components/src/components/Select/Select.tsx
index 398569bd..2c5bada1 100644
--- a/packages/react-components/src/components/Select/Select.tsx
+++ b/packages/react-components/src/components/Select/Select.tsx
@@ -73,7 +73,7 @@ export default function Select<T extends object>({
   ...props
 }: SelectProps<T>) {
   return (
-    <ReactAriaSelect {...props} className="bcds-react-aria-Select">
+    <ReactAriaSelect {...props} className={`bcds-react-aria-Select ${size}`}>
       {({ isOpen, isRequired, isInvalid }) => (
         <>
           {label && (
@@ -110,7 +110,7 @@ export default function Select<T extends object>({
           </FieldError>
           <Popover className="bcds-react-aria-Select--Popover" offset={4}>
             <ListBox
-              className="bcds-react-aria-Select--ListBox"
+              className={`bcds-react-aria-Select--ListBox ${size}`}
               // This ternary statement is used to mock the data for `sections`
               // if a flat list of `items` was passed instead. This allows us to
               // use one component to support both flat and sectioned lists of

From 1290d9dffde213c3aef034ed9361852e78c67c2e Mon Sep 17 00:00:00 2001
From: Marcus Kernohan <135075821+mkernohanbc@users.noreply.github.com>
Date: Thu, 26 Feb 2026 11:11:09 -0800
Subject: [PATCH 02/16] support multi-select and add visual indicator for
 selected item

---
 .../src/components/Select/Select.tsx          | 73 ++++++++++++-------
 .../src/stories/Select.stories.tsx            | 15 ++++
 2 files changed, 60 insertions(+), 28 deletions(-)

diff --git a/packages/react-components/src/components/Select/Select.tsx b/packages/react-components/src/components/Select/Select.tsx
index 2c5bada1..af34e185 100644
--- a/packages/react-components/src/components/Select/Select.tsx
+++ b/packages/react-components/src/components/Select/Select.tsx
@@ -18,6 +18,7 @@ import {
 } from "react-aria-components";
 
 import SvgExclamationIcon from "../Icons/SvgExclamationIcon";
+import SvgCheckIcon from "../Icons/SvgCheckIcon";
 import SvgChevronUpIcon from "../Icons/SvgChevronUpIcon";
 import SvgChevronDownIcon from "../Icons/SvgChevronDownIcon";
 
@@ -44,7 +45,10 @@ export interface SelectionSectionProps {
   items: ListBoxItemProps[];
 }
 
-export interface SelectProps<T extends object> extends ReactAriaSelectProps<T> {
+export interface SelectProps<
+  T extends object,
+  M extends "single" | "multiple" = "single",
+> extends ReactAriaSelectProps<T, M> {
   /** Use `items` for a flat list of options */
   items?: ListBoxItemProps[];
   /** Use `sections` for a sectioned list with `items` options in each section */
@@ -62,7 +66,10 @@ export interface SelectProps<T extends object> extends ReactAriaSelectProps<T> {
 }
 
 /** Select displays a collapsible list of options and allows a user to select one of them. */
-export default function Select<T extends object>({
+export default function Select<
+  T extends object,
+  M extends "single" | "multiple" = "single",
+>({
   items,
   sections,
   label,
@@ -71,7 +78,7 @@ export default function Select<T extends object>({
   size = "medium",
   errorMessage,
   ...props
-}: SelectProps<T>) {
+}: SelectProps<T, M>) {
   return (
     <ReactAriaSelect {...props} className={`bcds-react-aria-Select ${size}`}>
       {({ isOpen, isRequired, isInvalid }) => (
@@ -142,31 +149,41 @@ export default function Select<T extends object>({
                         }`}
                         textValue={item.label}
                       >
-                        {item?.iconLeft && (
-                          <div className="bcds-react-aria-Select--ListBoxItem-icon">
-                            {item.iconLeft}
-                          </div>
-                        )}
-                        <div className="bcds-react-aria-Select--ListBoxItem-Text-container">
-                          <Text
-                            slot="label"
-                            className="bcds-react-aria-Select--ListBoxItem-Text-label"
-                          >
-                            {item.label}
-                          </Text>
-                          {item.description && (
-                            <Text
-                              slot="description"
-                              className="bcds-react-aria-Select--ListBoxItem-Text-description"
-                            >
-                              {item.description}
-                            </Text>
-                          )}
-                        </div>
-                        {item?.iconRight && (
-                          <div className="bcds-react-aria-Select--ListBoxItem-icon">
-                            {item.iconRight}
-                          </div>
+                        {({ isSelected }) => (
+                          <>
+                            {item?.iconLeft && (
+                              <div className="bcds-react-aria-Select--ListBoxItem-icon">
+                                {item.iconLeft}
+                              </div>
+                            )}
+                            <div className="bcds-react-aria-Select--ListBoxItem-Text-container">
+                              <Text
+                                slot="label"
+                                className="bcds-react-aria-Select--ListBoxItem-Text-label"
+                              >
+                                {item.label}
+                              </Text>
+                              {item.description && (
+                                <Text
+                                  slot="description"
+                                  className="bcds-react-aria-Select--ListBoxItem-Text-description"
+                                >
+                                  {item.description}
+                                </Text>
+                              )}
+                            </div>
+                            {isSelected ? (
+                              <div className="bcds-react-aria-Select--ListBoxItem-icon">
+                                <SvgCheckIcon />
+                              </div>
+                            ) : (
+                              item?.iconRight && (
+                                <div className="bcds-react-aria-Select--ListBoxItem-icon">
+                                  {item.iconRight}
+                                </div>
+                              )
+                            )}
+                          </>
                         )}
                       </ListBoxItem>
                     )}
diff --git a/packages/react-components/src/stories/Select.stories.tsx b/packages/react-components/src/stories/Select.stories.tsx
index ff10cdce..68205553 100644
--- a/packages/react-components/src/stories/Select.stories.tsx
+++ b/packages/react-components/src/stories/Select.stories.tsx
@@ -35,6 +35,11 @@ const meta = {
       description:
         "Text label that appears inside the select input before an option has been selected",
     },
+    selectionMode: {
+      options: ["single", "multiple"],
+      control: { type: "radio" },
+      description: "Whether the user can select one or multiple options",
+    },
     errorMessage: {
       control: { type: "text" },
       description: "Text displayed when the input is invalid",
@@ -65,6 +70,7 @@ export const SelectTemplate: Story = {
     label: "Label",
     size: "medium",
     description: "Optional description or helper text",
+    selectionMode: "single",
     isRequired: false,
     isDisabled: false,
     isInvalid: false,
@@ -72,6 +78,15 @@ export const SelectTemplate: Story = {
   },
 };
 
+export const MultiSelect: Story = {
+  ...SelectTemplate,
+  args: {
+    ...SelectTemplate.args,
+    label: "Multi-select example",
+    selectionMode: "multiple",
+  },
+};
+
 const iconPlaceholder = (
   <svg
     width="20"

From 945ba3bca5e7157a239fc249cc2fb5211fea0647 Mon Sep 17 00:00:00 2001
From: Marcus Kernohan <135075821+mkernohanbc@users.noreply.github.com>
Date: Thu, 26 Feb 2026 11:43:36 -0800
Subject: [PATCH 03/16] expanding examples

---
 .../src/pages/Select/Select.tsx               | 68 +++++++++++++++++--
 .../src/pages/Select/UseStateExample.tsx      |  2 +-
 2 files changed, 64 insertions(+), 6 deletions(-)

diff --git a/packages/react-components/src/pages/Select/Select.tsx b/packages/react-components/src/pages/Select/Select.tsx
index 0e9c2f6e..a8778f0b 100644
--- a/packages/react-components/src/pages/Select/Select.tsx
+++ b/packages/react-components/src/pages/Select/Select.tsx
@@ -1,14 +1,72 @@
+import { Select } from "@/components";
 import UseStateExample from "./UseStateExample";
 
 export default function SelectPage() {
+  const items = [
+    {
+      id: "1",
+      label: "Lorem ipsum dolor sit amet, consectetur adipiscing elit",
+    },
+    {
+      id: "2",
+      label:
+        "Suspendisse mi leo, gravida non consectetur vel, tincidunt eu nisl",
+    },
+    {
+      id: "3",
+      label:
+        "Nunc faucibus, magna nec condimentum venenatis, nunc dui euismod metus, et vehicula elit purus in ex",
+    },
+    {
+      id: "4",
+      label:
+        "Quisque velit tortor, facilisis eu orci vitae, tristique convallis nisi. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae",
+    },
+  ];
   return (
     <>
       <h2>Select</h2>
-
-      <hr />
-
-      <h3>Select with useState</h3>
-      <UseStateExample />
+      <h3>Default</h3>
+      <div className="row">
+        <div className="col">
+          <Select label="Default" description="Description" items={items} />
+        </div>
+        <div className="col">
+          <Select
+            label="Default"
+            description="Description"
+            items={items}
+            isDisabled
+          />
+        </div>
+      </div>
+      <h3>Small</h3>
+      <div className="row">
+        <div className="col">
+          <Select
+            size="small"
+            label="Default"
+            description="Description"
+            items={items}
+          />
+        </div>
+        <div className="col">
+          <Select
+            size="small"
+            label="Default"
+            description="Description"
+            items={items}
+            isDisabled
+          />
+        </div>
+      </div>
+      <div className="row">
+        <div className="col">
+          <h3>Select with useState</h3>
+          <UseStateExample />
+        </div>
+        <div className="col"></div>
+      </div>
     </>
   );
 }
diff --git a/packages/react-components/src/pages/Select/UseStateExample.tsx b/packages/react-components/src/pages/Select/UseStateExample.tsx
index 5217ce93..8fa480b5 100644
--- a/packages/react-components/src/pages/Select/UseStateExample.tsx
+++ b/packages/react-components/src/pages/Select/UseStateExample.tsx
@@ -33,8 +33,8 @@ export default function UseStateExample() {
         items={items}
         value={selected}
         onChange={(selected) => setSelected(selected)}
+        description={`Selected key: ${selected}`}
       />
-      <p>Selected key: {selected}</p>
     </>
   );
 }

From 1c652a06dd7f0bd82c6e368bb1c12e1501ce6589 Mon Sep 17 00:00:00 2001
From: Marcus Kernohan <135075821+mkernohanbc@users.noreply.github.com>
Date: Thu, 26 Feb 2026 14:08:21 -0800
Subject: [PATCH 04/16] refining flex behaviour

---
 .../src/components/Select/Select.css          | 18 +++++--
 .../src/pages/Select/Select.tsx               | 54 ++++++++-----------
 2 files changed, 35 insertions(+), 37 deletions(-)

diff --git a/packages/react-components/src/components/Select/Select.css b/packages/react-components/src/components/Select/Select.css
index 7fcea434..10ba7153 100644
--- a/packages/react-components/src/components/Select/Select.css
+++ b/packages/react-components/src/components/Select/Select.css
@@ -1,7 +1,9 @@
 .bcds-react-aria-Select {
   display: flex;
+  flex: 1 1 0;
   flex-direction: column;
-  align-items: flex-start;
+  align-items: stretch;
+  min-width: 0;
   /* Hacks for `stretch`: https://caniuse.com/mdn-css_properties_max-width_stretch */
   max-width: -moz-available;
   max-width: -webkit-fill-available;
@@ -64,14 +66,17 @@
 /* Select input equivalent */
 .bcds-react-aria-Select--Button {
   background-color: var(--surface-color-forms-default);
-  border: 1px solid var(--surface-color-border-default);
+  border: var(--layout-border-width-small) solid
+    var(--surface-color-border-default);
   border-radius: var(--layout-border-radius-medium);
   cursor: pointer;
   display: flex;
   justify-content: space-between;
   gap: var(--layout-margin-small);
   align-items: center;
-  padding: 0 12px;
+  padding: var(--layout-padding-none) 0.75rem;
+  width: 100%;
+  min-width: 0;
   max-width: 100%;
 }
 .bcds-react-aria-Select--Button.invalid {
@@ -103,7 +108,7 @@
   min-width: 0;
 }
 .bcds-react-aria-Select--Button > svg {
-  flex-shrink: 0;
+  flex: 0 0 auto;
 }
 
 /* Dropdown menu panel */
@@ -115,6 +120,8 @@
   box-sizing: border-box;
   overflow-y: auto;
   padding: var(--layout-padding-hair) var(--layout-padding-xsmall);
+  max-width: calc(100vw - (2 * var(--layout-padding-small)));
+  max-height: 50vh;
   width: var(
     --trigger-width
   ); /* Variable provided by Select component https://react-spectrum.adobe.com/react-aria/Select.html#popover-1 */
@@ -161,7 +168,8 @@
   color: var(--typography-color-primary);
   display: flex;
   flex-direction: column;
-  flex-grow: 1;
+  flex: 1 1 auto;
+  min-width: 0;
 }
 .bcds-react-aria-Select--ListBoxItem.destructive {
   color: var(--surface-color-primary-danger-button-default);
diff --git a/packages/react-components/src/pages/Select/Select.tsx b/packages/react-components/src/pages/Select/Select.tsx
index a8778f0b..b9135116 100644
--- a/packages/react-components/src/pages/Select/Select.tsx
+++ b/packages/react-components/src/pages/Select/Select.tsx
@@ -28,43 +28,33 @@ export default function SelectPage() {
       <h2>Select</h2>
       <h3>Default</h3>
       <div className="row">
-        <div className="col">
-          <Select label="Default" description="Description" items={items} />
-        </div>
-        <div className="col">
-          <Select
-            label="Default"
-            description="Description"
-            items={items}
-            isDisabled
-          />
-        </div>
+        <Select label="Default" description="Description" items={items} />
+        <Select
+          label="Default"
+          description="Description"
+          items={items}
+          isDisabled
+        />
       </div>
       <h3>Small</h3>
       <div className="row">
-        <div className="col">
-          <Select
-            size="small"
-            label="Default"
-            description="Description"
-            items={items}
-          />
-        </div>
-        <div className="col">
-          <Select
-            size="small"
-            label="Default"
-            description="Description"
-            items={items}
-            isDisabled
-          />
-        </div>
+        <Select
+          size="small"
+          label="Default"
+          description="Description"
+          items={items}
+        />
+        <Select
+          size="small"
+          label="Default"
+          description="Description"
+          items={items}
+          isDisabled
+        />
       </div>
+      <h3>Select with useState</h3>
       <div className="row">
-        <div className="col">
-          <h3>Select with useState</h3>
-          <UseStateExample />
-        </div>
+        <UseStateExample />
         <div className="col"></div>
       </div>
     </>

From 1dbf8b52586559334ec3a0aa4d07f5a56f1422a2 Mon Sep 17 00:00:00 2001
From: Marcus Kernohan <135075821+mkernohanbc@users.noreply.github.com>
Date: Thu, 26 Feb 2026 14:20:11 -0800
Subject: [PATCH 05/16] cleaning up examples

---
 packages/react-components/src/App.css         |  4 +++
 .../src/pages/Select/MultiSelect.tsx          | 32 +++++++++++++++++++
 .../src/pages/Select/Select.tsx               | 25 +++++++++------
 .../src/pages/Select/UseStateExample.tsx      |  2 +-
 4 files changed, 53 insertions(+), 10 deletions(-)
 create mode 100644 packages/react-components/src/pages/Select/MultiSelect.tsx

diff --git a/packages/react-components/src/App.css b/packages/react-components/src/App.css
index c9051874..d1ee4385 100644
--- a/packages/react-components/src/App.css
+++ b/packages/react-components/src/App.css
@@ -31,10 +31,14 @@ main {
   display: flex;
   flex-direction: row;
   gap: var(--layout-margin-medium);
+  min-width: 0;
+  max-width: 100%;
 }
 .col {
   display: flex;
   flex-direction: column;
+  max-width: 100%;
+  width: 100%;
 }
 .menu {
   display: flex;
diff --git a/packages/react-components/src/pages/Select/MultiSelect.tsx b/packages/react-components/src/pages/Select/MultiSelect.tsx
new file mode 100644
index 00000000..259d4240
--- /dev/null
+++ b/packages/react-components/src/pages/Select/MultiSelect.tsx
@@ -0,0 +1,32 @@
+import Select from "@/components/Select/Select";
+
+export default function MultiSelectExample() {
+  const items = [
+    {
+      id: "1",
+      label: "Option 1",
+    },
+    {
+      id: "2",
+      label: "Option 2",
+    },
+    {
+      id: "3",
+      label: "Option 3",
+    },
+    {
+      id: "4",
+      label: "Option 4",
+    },
+  ];
+  return (
+    <>
+      <Select
+        label="Pick some options"
+        description="Allows multiple options to be selected"
+        selectionMode="multiple"
+        items={items}
+      />
+    </>
+  );
+}
diff --git a/packages/react-components/src/pages/Select/Select.tsx b/packages/react-components/src/pages/Select/Select.tsx
index b9135116..26014bcc 100644
--- a/packages/react-components/src/pages/Select/Select.tsx
+++ b/packages/react-components/src/pages/Select/Select.tsx
@@ -1,5 +1,6 @@
 import { Select } from "@/components";
 import UseStateExample from "./UseStateExample";
+import MultiSelectExample from "./MultiSelect";
 
 export default function SelectPage() {
   const items = [
@@ -26,36 +27,42 @@ export default function SelectPage() {
   return (
     <>
       <h2>Select</h2>
-      <h3>Default</h3>
+      <h3>Default size</h3>
       <div className="row">
-        <Select label="Default" description="Description" items={items} />
+        <Select label="Label" description="Description" items={items} />
         <Select
-          label="Default"
+          label="Disabled"
           description="Description"
           items={items}
           isDisabled
         />
       </div>
-      <h3>Small</h3>
+      <h3>Small size</h3>
       <div className="row">
         <Select
           size="small"
-          label="Default"
+          label="Label"
           description="Description"
           items={items}
         />
         <Select
           size="small"
-          label="Default"
+          label="Disabled"
           description="Description"
           items={items}
           isDisabled
         />
       </div>
-      <h3>Select with useState</h3>
+
       <div className="row">
-        <UseStateExample />
-        <div className="col"></div>
+        <div className="col">
+          <h3>Multi-select</h3>
+          <MultiSelectExample />
+        </div>
+        <div className="col">
+          <h3>Select with useState</h3>
+          <UseStateExample />
+        </div>
       </div>
     </>
   );
diff --git a/packages/react-components/src/pages/Select/UseStateExample.tsx b/packages/react-components/src/pages/Select/UseStateExample.tsx
index 8fa480b5..0d8f7681 100644
--- a/packages/react-components/src/pages/Select/UseStateExample.tsx
+++ b/packages/react-components/src/pages/Select/UseStateExample.tsx
@@ -29,7 +29,7 @@ export default function UseStateExample() {
   return (
     <>
       <Select
-        aria-label="Select example"
+        label="Pick an option"
         items={items}
         value={selected}
         onChange={(selected) => setSelected(selected)}

From af6a47a2cb910b10e89ccd58aaf4a050ad7c6487 Mon Sep 17 00:00:00 2001
From: Marcus Kernohan <135075821+mkernohanbc@users.noreply.github.com>
Date: Mon, 2 Mar 2026 14:01:07 -0800
Subject: [PATCH 06/16] override RA default labelling for multiple selections

---
 .../react-components/src/components/Select/Select.tsx | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/packages/react-components/src/components/Select/Select.tsx b/packages/react-components/src/components/Select/Select.tsx
index af34e185..1b3e2bbe 100644
--- a/packages/react-components/src/components/Select/Select.tsx
+++ b/packages/react-components/src/components/Select/Select.tsx
@@ -96,6 +96,17 @@ export default function Select<
             <SelectValue
               className="bcds-react-aria-SelectValue"
               children={(value) => {
+                if (value.selectedItems.length > 1) {
+                  const firstSelectedItem = value
+                    .selectedItems[0] as ListBoxItemProps | null;
+                  const firstSelectedText = firstSelectedItem?.label;
+                  const remainingCount = value.selectedItems.length - 1;
+
+                  if (firstSelectedText) {
+                    return `${firstSelectedText} + ${remainingCount} more`;
+                  }
+                }
+
                 if (value.selectedText) return value.selectedText;
                 if (placeholder) return placeholder;
                 return "Select an item";

From 0bff16b7f459b3eae4271c0455ba9f9d5c775c57 Mon Sep 17 00:00:00 2001
From: Marcus Kernohan <135075821+mkernohanbc@users.noreply.github.com>
Date: Mon, 2 Mar 2026 16:54:42 -0800
Subject: [PATCH 07/16] prototyping TagGroup integration in Select

---
 .../src/components/Select/Select.tsx          | 52 +++++++++++++------
 1 file changed, 35 insertions(+), 17 deletions(-)

diff --git a/packages/react-components/src/components/Select/Select.tsx b/packages/react-components/src/components/Select/Select.tsx
index 1b3e2bbe..0176db23 100644
--- a/packages/react-components/src/components/Select/Select.tsx
+++ b/packages/react-components/src/components/Select/Select.tsx
@@ -21,6 +21,8 @@ import SvgExclamationIcon from "../Icons/SvgExclamationIcon";
 import SvgCheckIcon from "../Icons/SvgCheckIcon";
 import SvgChevronUpIcon from "../Icons/SvgChevronUpIcon";
 import SvgChevronDownIcon from "../Icons/SvgChevronDownIcon";
+import TagGroup from "../TagGroup/TagGroup";
+import TagList from "../TagList/TagList";
 
 import "./Select.css";
 
@@ -93,25 +95,41 @@ export default function Select<
               size === "medium" ? "medium" : "small"
             } ${isInvalid && "invalid"}`}
           >
-            <SelectValue
-              className="bcds-react-aria-SelectValue"
-              children={(value) => {
-                if (value.selectedItems.length > 1) {
-                  const firstSelectedItem = value
-                    .selectedItems[0] as ListBoxItemProps | null;
-                  const firstSelectedText = firstSelectedItem?.label;
-                  const remainingCount = value.selectedItems.length - 1;
-
-                  if (firstSelectedText) {
-                    return `${firstSelectedText} + ${remainingCount} more`;
+            <SelectValue className="bcds-react-aria-SelectValue">
+              {({ selectedItems, state }) => (
+                <TagGroup
+                  aria-label={
+                    label ? `${label} selections` : "Selected options"
                   }
-                }
+                  onRemove={(keys) => {
+                    const selectedKeys = state.selectionManager.selectedKeys;
+
+                    const updatedSelectedKeys = new Set(selectedKeys);
+
+                    for (const key of keys) {
+                      updatedSelectedKeys.delete(key);
+                    }
 
-                if (value.selectedText) return value.selectedText;
-                if (placeholder) return placeholder;
-                return "Select an item";
-              }}
-            />
+                    state.selectionManager.setSelectedKeys(updatedSelectedKeys);
+                  }}
+                >
+                  <TagList
+                    items={(selectedItems as Array<ListBoxItemProps | null>)
+                      .filter((item): item is ListBoxItemProps => item !== null)
+                      .map((item) => ({
+                        id: item?.id ? item.id : item.label,
+                        textValue: item.label,
+                        size: "small",
+                      }))}
+                    renderEmptyState={() => (
+                      <span>
+                        {placeholder ? placeholder : "Select an item"}
+                      </span>
+                    )}
+                  />
+                </TagGroup>
+              )}
+            </SelectValue>
             {isInvalid && <SvgExclamationIcon />}
             {isOpen ? <SvgChevronUpIcon /> : <SvgChevronDownIcon />}
           </Button>

From 10b3ba71774ad0ce185eb657806075ebe2dc9d94 Mon Sep 17 00:00:00 2001
From: Marcus Kernohan <135075821+mkernohanbc@users.noreply.github.com>
Date: Tue, 3 Mar 2026 12:10:50 -0800
Subject: [PATCH 08/16] refining styling to support TagList integration

---
 .../src/components/Select/Select.css          | 74 +++++++++----------
 .../src/components/Select/Select.tsx          | 14 +++-
 .../src/components/Tag/Tag.css                | 26 +++++--
 .../src/components/Tag/Tag.tsx                |  4 +-
 .../src/pages/Select/MultiSelect.tsx          | 21 ++++++
 .../src/pages/Select/Select.tsx               |  7 +-
 6 files changed, 98 insertions(+), 48 deletions(-)

diff --git a/packages/react-components/src/components/Select/Select.css b/packages/react-components/src/components/Select/Select.css
index 10ba7153..43e17ffa 100644
--- a/packages/react-components/src/components/Select/Select.css
+++ b/packages/react-components/src/components/Select/Select.css
@@ -9,60 +9,30 @@
   max-width: -webkit-fill-available;
 }
 
-/* Label above select input */
-.bcds-react-aria-Select--Label {
-  color: var(--typography-color-secondary);
-  font: var(--typography-regular-small-body);
-  padding: var(--layout-padding-xsmall) var(--layout-padding-none);
-}
-.bcds-react-aria-Select[data-disabled] > .bcds-react-aria-Select--Label {
-  color: var(--typography-color-disabled);
-}
-
-/* Text description below select input */
-.bcds-react-aria-Select--Description {
-  font: var(--typography-regular-small-body);
-  color: var(--typography-color-secondary);
-  padding: var(--layout-padding-xsmall) var(--layout-padding-none);
-}
-
 /* Sizing */
 .bcds-react-aria-Select.small .bcds-react-aria-Select--Button {
-  height: 32px;
+  min-height: 32px;
 }
 .bcds-react-aria-Select--ListBox.small .bcds-react-aria-Select--ListBoxItem {
   padding: var(--layout-padding-xsmall);
 }
-.bcds-react-aria-Select.small .bcds-react-aria-SelectValue,
+.bcds-react-aria-Select.small .bcds-react-aria-SelectValue--Placeholder,
 .bcds-react-aria-Select--ListBox.small
   .bcds-react-aria-Select--ListBoxItem-Text-label {
   font: var(--typography-regular-small-body);
 }
 .bcds-react-aria-Select.medium .bcds-react-aria-Select--Button {
-  height: 40px;
+  min-height: 40px;
 }
 .bcds-react-aria-Select--ListBox.medium .bcds-react-aria-Select--ListBoxItem {
   padding: var(--layout-padding-small);
 }
-.bcds-react-aria-Select.medium .bcds-react-aria-SelectValue,
+.bcds-react-aria-Select.medium .bcds-react-aria-SelectValue--Placeholder,
 .bcds-react-aria-Select--ListBox.medium
   .bcds-react-aria-Select--ListBoxItem-Text-label {
   font: var(--typography-regular-body);
 }
 
-/* Error message */
-.bcds-react-aria-Select--Error {
-  font: var(--typography-regular-small-body);
-  color: var(--typography-color-danger);
-}
-
-/* Error icon */
-.bcds-react-aria-Select[data-invalid]
-  > .bcds-react-aria-Select--Button
-  > svg:not(:last-child) {
-  color: var(--icons-color-danger);
-}
-
 /* Select input equivalent */
 .bcds-react-aria-Select--Button {
   background-color: var(--surface-color-forms-default);
@@ -71,10 +41,9 @@
   border-radius: var(--layout-border-radius-medium);
   cursor: pointer;
   display: flex;
-  justify-content: space-between;
   gap: var(--layout-margin-small);
   align-items: center;
-  padding: var(--layout-padding-none) 0.75rem;
+  padding: var(--layout-padding-small);
   width: 100%;
   min-width: 0;
   max-width: 100%;
@@ -102,7 +71,8 @@
   border-color: var(--surface-color-border-active);
 }
 .bcds-react-aria-Select--Button > .bcds-react-aria-SelectValue {
-  overflow: hidden;
+  flex: 1 1 auto;
+  overflow: visible;
   white-space: nowrap;
   text-overflow: ellipsis;
   min-width: 0;
@@ -111,6 +81,36 @@
   flex: 0 0 auto;
 }
 
+/* Label above select input */
+.bcds-react-aria-Select--Label {
+  color: var(--typography-color-secondary);
+  font: var(--typography-regular-small-body);
+  padding: var(--layout-padding-xsmall) var(--layout-padding-none);
+}
+.bcds-react-aria-Select[data-disabled] > .bcds-react-aria-Select--Label {
+  color: var(--typography-color-disabled);
+}
+
+/* Text description below select input */
+.bcds-react-aria-Select--Description {
+  font: var(--typography-regular-small-body);
+  color: var(--typography-color-secondary);
+  padding: var(--layout-padding-xsmall) var(--layout-padding-none);
+}
+
+/* Error message */
+.bcds-react-aria-Select--Error {
+  font: var(--typography-regular-small-body);
+  color: var(--typography-color-danger);
+}
+
+/* Error icon */
+.bcds-react-aria-Select[data-invalid]
+  > .bcds-react-aria-Select--Button
+  > svg:not(:last-child) {
+  color: var(--icons-color-danger);
+}
+
 /* Dropdown menu panel */
 .bcds-react-aria-Select--Popover {
   background-color: var(--surface-color-forms-default);
diff --git a/packages/react-components/src/components/Select/Select.tsx b/packages/react-components/src/components/Select/Select.tsx
index 0176db23..a80ea9d6 100644
--- a/packages/react-components/src/components/Select/Select.tsx
+++ b/packages/react-components/src/components/Select/Select.tsx
@@ -23,6 +23,7 @@ import SvgChevronUpIcon from "../Icons/SvgChevronUpIcon";
 import SvgChevronDownIcon from "../Icons/SvgChevronDownIcon";
 import TagGroup from "../TagGroup/TagGroup";
 import TagList from "../TagList/TagList";
+import { TagProps } from "../Tag";
 
 import "./Select.css";
 
@@ -37,6 +38,10 @@ export interface ListBoxItemProps extends ReactAriaListBoxItemProps {
   iconLeft?: React.ReactElement;
   /** Right icon slot */
   iconRight?: React.ReactElement;
+  /** Optional color token forwarded to selected tags */
+  color?: TagProps["color"];
+  /** Optional style token forwarded to selected tags */
+  tagStyle?: TagProps["tagStyle"];
 }
 
 export interface SelectionSectionProps {
@@ -101,6 +106,7 @@ export default function Select<
                   aria-label={
                     label ? `${label} selections` : "Selected options"
                   }
+                  /* Handle deselection of items via tag button */
                   onRemove={(keys) => {
                     const selectedKeys = state.selectionManager.selectedKeys;
 
@@ -116,13 +122,17 @@ export default function Select<
                   <TagList
                     items={(selectedItems as Array<ListBoxItemProps | null>)
                       .filter((item): item is ListBoxItemProps => item !== null)
+                      /* Map ListBoxItem props to Tag props */
                       .map((item) => ({
                         id: item?.id ? item.id : item.label,
                         textValue: item.label,
-                        size: "small",
+                        size: size === "small" ? "xsmall" : "small",
+                        color: item.color,
+                        tagStyle: item.tagStyle,
+                        ...(item.iconLeft && { icon: item.iconLeft }),
                       }))}
                     renderEmptyState={() => (
-                      <span>
+                      <span className="bcds-react-aria-SelectValue--Placeholder">
                         {placeholder ? placeholder : "Select an item"}
                       </span>
                     )}
diff --git a/packages/react-components/src/components/Tag/Tag.css b/packages/react-components/src/components/Tag/Tag.css
index e665a1fe..85068752 100644
--- a/packages/react-components/src/components/Tag/Tag.css
+++ b/packages/react-components/src/components/Tag/Tag.css
@@ -3,9 +3,18 @@
   cursor: pointer;
   border: var(--layout-border-width-small) solid;
   display: flex;
+  flex: 0 1 auto;
   align-items: center;
+  text-align: left;
   font: var(--typography-regular-label);
   width: fit-content;
+  max-width: 100%;
+  min-width: 0;
+}
+.bcds-react-aria-Tag--Label {
+  min-width: 0;
+  overflow-wrap: break-word;
+  white-space: normal;
 }
 .bcds-react-aria-Tag .react-aria-Button {
   background: none;
@@ -13,6 +22,7 @@
   color: var(--typography-color-primary);
   cursor: pointer;
   display: flex;
+  flex: 0 0 auto;
   margin: 0;
   padding: 0;
 }
@@ -69,17 +79,21 @@
 }
 
 /* Tag size */
-.bcds-react-aria-Tag.medium {
-  height: var(--layout-padding-xlarge);
-  padding: var(--layout-padding-hair) var(--layout-padding-medium);
-  gap: var(--layout-margin-medium);
+.bcds-react-aria-Tag.xsmall {
+  min-height: var(--layout-padding-medium);
+  padding: var(--layout-padding-hair) var(--layout-padding-small);
+  gap: var(--layout-margin-xsmall);
 }
 .bcds-react-aria-Tag.small {
-  height: var(--layout-padding-large);
+  min-height: var(--layout-padding-large);
   padding: var(--layout-padding-hair) var(--layout-padding-small);
   gap: var(--layout-margin-small);
 }
-
+.bcds-react-aria-Tag.medium {
+  min-height: var(--layout-padding-xlarge);
+  padding: var(--layout-padding-hair) var(--layout-padding-medium);
+  gap: var(--layout-margin-medium);
+}
 /* Selected */
 .bcds-react-aria-Tag[data-selected] {
   border-radius: var(--layout-border-radius-small);
diff --git a/packages/react-components/src/components/Tag/Tag.tsx b/packages/react-components/src/components/Tag/Tag.tsx
index c5f25bc2..9eee92d4 100644
--- a/packages/react-components/src/components/Tag/Tag.tsx
+++ b/packages/react-components/src/components/Tag/Tag.tsx
@@ -32,7 +32,7 @@ export interface TagProps extends ReactAriaTagProps {
   /**
    * size
    */
-  size?: "small" | "medium";
+  size?: "xsmall" | "small" | "medium";
 }
 
 export default function Tag({
@@ -52,7 +52,7 @@ export default function Tag({
       {({ allowsRemoving, isDisabled }: TagRenderProps) => (
         <>
           {icon}
-          {textValue}
+          <span className="bcds-react-aria-Tag--Label">{textValue}</span>
           {!isDisabled && allowsRemoving && (
             <ReactAriaButton aria-label={`Remove ${textValue}`} slot="remove">
               <svg
diff --git a/packages/react-components/src/pages/Select/MultiSelect.tsx b/packages/react-components/src/pages/Select/MultiSelect.tsx
index 259d4240..9dc5b231 100644
--- a/packages/react-components/src/pages/Select/MultiSelect.tsx
+++ b/packages/react-components/src/pages/Select/MultiSelect.tsx
@@ -1,23 +1,44 @@
 import Select from "@/components/Select/Select";
+import { SvgCalendarIcon } from "@/components";
+import { TagProps } from "@/components/Tag";
 
 export default function MultiSelectExample() {
   const items = [
     {
       id: "1",
       label: "Option 1",
+      color: "bc-blue" as TagProps["color"],
     },
     {
       id: "2",
       label: "Option 2",
+      tagStyle: "circular" as TagProps["tagStyle"],
     },
     {
       id: "3",
       label: "Option 3",
+      iconLeft: <SvgCalendarIcon />,
     },
     {
       id: "4",
       label: "Option 4",
     },
+    {
+      id: "5",
+      label: "Option 5",
+    },
+    {
+      id: "6",
+      label: "Option 6",
+    },
+    {
+      id: "7",
+      label: "Option 7",
+    },
+    {
+      id: "8",
+      label: "Option 8",
+    },
   ];
   return (
     <>
diff --git a/packages/react-components/src/pages/Select/Select.tsx b/packages/react-components/src/pages/Select/Select.tsx
index 26014bcc..708f8e7e 100644
--- a/packages/react-components/src/pages/Select/Select.tsx
+++ b/packages/react-components/src/pages/Select/Select.tsx
@@ -29,7 +29,12 @@ export default function SelectPage() {
       <h2>Select</h2>
       <h3>Default size</h3>
       <div className="row">
-        <Select label="Label" description="Description" items={items} />
+        <Select
+          label="Label"
+          description="Description"
+          items={items}
+          placeholder="Pick something"
+        />
         <Select
           label="Disabled"
           description="Description"

From 2cc29967972a95a8c5d33d439a2240ec93e68662 Mon Sep 17 00:00:00 2001
From: Marcus Kernohan <135075821+mkernohanbc@users.noreply.github.com>
Date: Tue, 3 Mar 2026 14:00:00 -0800
Subject: [PATCH 09/16] update docs and stories

---
 .../react-components/src/stories/Select.mdx   | 39 +++++++++-
 .../src/stories/Select.stories.tsx            | 71 +++++++++++++++++--
 2 files changed, 104 insertions(+), 6 deletions(-)

diff --git a/packages/react-components/src/stories/Select.mdx b/packages/react-components/src/stories/Select.mdx
index 8cb2eaf0..ad686632 100644
--- a/packages/react-components/src/stories/Select.mdx
+++ b/packages/react-components/src/stories/Select.mdx
@@ -24,7 +24,7 @@ import * as SelectStories from "./Select.stories";
 
 <Subtitle>
   The select component displays a collapsible list of options and enables a user
-  to select one of them.
+  to select one or more values.
 </Subtitle>
 
 <InlineAlert
@@ -69,6 +69,41 @@ This component may trigger [a known false positive](https://react-spectrum.adobe
 
 ## Configuration
 
+### Values and selection mode
+
+Use `value` to set or get the currently-selected value. Use `defaultValue` to set an uncontrolled initial value.
+
+By default, Select permits the user to select a single option from the list. Set `selectionMode` to `multiple` to permit multiple selections:
+
+<Canvas of={SelectStories.MultiSelect} />
+
+Selected values are rendered inside a [TagGroup](/docs/inputs-and-controls-taggroup--docs). This provides visual separation between selected values, and enables the user to de-select items without re-opening the dropdown. Selected items are also indicated with a checkmark in the dropdown list.
+
+#### Styling tags
+
+Tags' labels, IDs and icons are populated automatically from Select's `items` array. You can further access and customise how individual tags are styled using [Tag](/story/inputs-and-controls-taggroup-tag--single-tag) props:
+
+```typescript
+import { TagProps } from "@bcgov/design-system-react-components";
+
+const items = [
+  {
+    id: "1",
+    label: "Option 1",
+    color: "bc-blue" as TagProps["color"],
+    tagStyle: "circular" as TagProps["tagStyle"],
+  },
+  {
+    id: "2",
+    label: "Option 2",
+    color: "bc-gold" as TagProps["color"],
+    tagStyle: "circular" as TagProps["tagStyle"],
+  },
+];
+```
+
+<Canvas of={SelectStories.StyledTags} />
+
 ### Flat list of items
 
 Options in the select component are implemented using React Aria's [Collection Components API](https://react-spectrum.adobe.com/react-aria/collections.html) via the `items` and `sections` props.
@@ -87,7 +122,7 @@ Each section object can be labelled with an optional `header`.
 
 ### Size
 
-Choose from medium (default) and small select sizes:
+Choose from `medium` (default) and `small` select sizes:
 
 <Canvas of={SelectStories.Small} />
 <Canvas of={SelectStories.Medium} />
diff --git a/packages/react-components/src/stories/Select.stories.tsx b/packages/react-components/src/stories/Select.stories.tsx
index 68205553..e088469a 100644
--- a/packages/react-components/src/stories/Select.stories.tsx
+++ b/packages/react-components/src/stories/Select.stories.tsx
@@ -1,6 +1,7 @@
 import type { Meta, StoryObj } from "@storybook/react-vite";
 
 import { Select } from "../components";
+import { TagProps } from "../components/Tag";
 
 const meta = {
   title: "Inputs and controls/Select",
@@ -20,6 +21,22 @@ const meta = {
       options: ["medium", "small"],
       control: { type: "radio" },
       description: "Defaults to 'medium', also supports 'small'",
+      table: { defaultValue: { summary: "medium" } },
+    },
+    selectionMode: {
+      options: ["single", "multiple"],
+      control: { type: "radio" },
+      description: "Whether the user can select one or multiple options",
+      table: { defaultValue: { summary: "single" } },
+    },
+    items: {
+      control: { type: "object" },
+      description: "Array of options to display in the dropdown",
+    },
+    sections: {
+      control: { type: "object" },
+      description:
+        "Array of sections to display in the dropdown. Each should have its own array of `items`",
     },
     label: {
       control: { type: "text" },
@@ -35,15 +52,37 @@ const meta = {
       description:
         "Text label that appears inside the select input before an option has been selected",
     },
-    selectionMode: {
-      options: ["single", "multiple"],
-      control: { type: "radio" },
-      description: "Whether the user can select one or multiple options",
+    value: {
+      control: { type: "object" },
+      description: "The current value (controlled)",
+    },
+    defaultValue: {
+      control: { type: "object" },
+      description: "The initial value (uncontrolled)",
+    },
+    disabledKeys: {
+      control: { type: "object" },
+      description:
+        "Items that cannot be selected, focused or otherwise interacted with",
     },
     errorMessage: {
       control: { type: "text" },
       description: "Text displayed when the input is invalid",
     },
+    isRequired: {
+      control: { type: "boolean" },
+      description: "Whether a select is required or optional",
+      table: { defaultValue: { summary: "false" } },
+    },
+    isDisabled: {
+      control: { type: "boolean" },
+      description: "Whether the select is disabled",
+      table: { defaultValue: { summary: "false" } },
+    },
+    isInvalid: {
+      control: "boolean",
+      description: "Whether the input is valid (usually set programmatically)",
+    },
   },
 } satisfies Meta<typeof Select>;
 
@@ -87,6 +126,30 @@ export const MultiSelect: Story = {
   },
 };
 
+export const StyledTags: Story = {
+  ...SelectTemplate,
+  args: {
+    ...SelectTemplate.args,
+    label: "Multi-select with styled tags",
+    selectionMode: "multiple",
+    defaultValue: ["1", "2"],
+    items: [
+      {
+        id: "1",
+        label: "Option 1",
+        color: "bc-blue" as TagProps["color"],
+        tagStyle: "circular" as TagProps["tagStyle"],
+      },
+      {
+        id: "2",
+        label: "Option 2",
+        color: "bc-gold" as TagProps["color"],
+        tagStyle: "circular" as TagProps["tagStyle"],
+      },
+    ],
+  },
+};
+
 const iconPlaceholder = (
   <svg
     width="20"

From f1d97d69b40475163899a4b4ed47fc5e3694a813 Mon Sep 17 00:00:00 2001
From: Marcus Kernohan <135075821+mkernohanbc@users.noreply.github.com>
Date: Tue, 3 Mar 2026 16:50:18 -0800
Subject: [PATCH 10/16] refactor to conditionally render Group instead of
 Button for multi-select

---
 .../src/components/Select/Select.css          |  24 ++-
 .../src/components/Select/Select.tsx          | 150 ++++++++++++------
 .../react-components/src/stories/Select.mdx   |   4 +-
 3 files changed, 123 insertions(+), 55 deletions(-)

diff --git a/packages/react-components/src/components/Select/Select.css b/packages/react-components/src/components/Select/Select.css
index 43e17ffa..bcbf24a9 100644
--- a/packages/react-components/src/components/Select/Select.css
+++ b/packages/react-components/src/components/Select/Select.css
@@ -16,7 +16,7 @@
 .bcds-react-aria-Select--ListBox.small .bcds-react-aria-Select--ListBoxItem {
   padding: var(--layout-padding-xsmall);
 }
-.bcds-react-aria-Select.small .bcds-react-aria-SelectValue--Placeholder,
+.bcds-react-aria-Select.small .bcds-react-aria-SelectValue--Text,
 .bcds-react-aria-Select--ListBox.small
   .bcds-react-aria-Select--ListBoxItem-Text-label {
   font: var(--typography-regular-small-body);
@@ -27,7 +27,7 @@
 .bcds-react-aria-Select--ListBox.medium .bcds-react-aria-Select--ListBoxItem {
   padding: var(--layout-padding-small);
 }
-.bcds-react-aria-Select.medium .bcds-react-aria-SelectValue--Placeholder,
+.bcds-react-aria-Select.medium .bcds-react-aria-SelectValue--Text,
 .bcds-react-aria-Select--ListBox.medium
   .bcds-react-aria-Select--ListBoxItem-Text-label {
   font: var(--typography-regular-body);
@@ -39,12 +39,13 @@
   border: var(--layout-border-width-small) solid
     var(--surface-color-border-default);
   border-radius: var(--layout-border-radius-medium);
+  box-sizing: border-box;
   cursor: pointer;
   display: flex;
   gap: var(--layout-margin-small);
   align-items: center;
   padding: var(--layout-padding-small);
-  width: 100%;
+  width: auto;
   min-width: 0;
   max-width: 100%;
 }
@@ -73,8 +74,9 @@
 .bcds-react-aria-Select--Button > .bcds-react-aria-SelectValue {
   flex: 1 1 auto;
   overflow: visible;
-  white-space: nowrap;
+  white-space: normal;
   text-overflow: ellipsis;
+  text-align: left;
   min-width: 0;
 }
 .bcds-react-aria-Select--Button > svg {
@@ -114,7 +116,8 @@
 /* Dropdown menu panel */
 .bcds-react-aria-Select--Popover {
   background-color: var(--surface-color-forms-default);
-  border: 1px solid var(--surface-color-border-default);
+  border: var(--layout-border-width-small) solid
+    var(--surface-color-border-default);
   border-radius: var(--layout-border-radius-medium);
   box-shadow: var(--surface-shadow-medium);
   box-sizing: border-box;
@@ -122,17 +125,24 @@
   padding: var(--layout-padding-hair) var(--layout-padding-xsmall);
   max-width: calc(100vw - (2 * var(--layout-padding-small)));
   max-height: 50vh;
+}
+/* Set width separately for single and multiple selection modes */
+.bcds-react-aria-Select--Popover.single {
   width: var(
     --trigger-width
   ); /* Variable provided by Select component https://react-spectrum.adobe.com/react-aria/Select.html#popover-1 */
 }
+.bcds-react-aria-Select--Popover.multiple {
+  width: 300px;
+}
 .bcds-react-aria-Select--ListBox[data-focused] {
   outline: none;
 }
 .bcds-react-aria-Select--ListBox > .bcds-react-aria-Section:not(:first-child) {
-  border-top: 1px solid var(--surface-color-border-default);
+  border-top: var(--layout-border-width-small) solid
+    var(--surface-color-border-default);
   margin-top: 1px;
-  padding-top: 2px;
+  padding-top: var(--layout-padding-hair);
 }
 
 /* Header label within Section of multi-section Select */
diff --git a/packages/react-components/src/components/Select/Select.tsx b/packages/react-components/src/components/Select/Select.tsx
index a80ea9d6..2d213e13 100644
--- a/packages/react-components/src/components/Select/Select.tsx
+++ b/packages/react-components/src/components/Select/Select.tsx
@@ -1,7 +1,7 @@
 import {
-  Button,
   Collection,
   FieldError,
+  Group,
   Header,
   Key,
   Label,
@@ -16,7 +16,9 @@ import {
   Text,
   ValidationResult,
 } from "react-aria-components";
+import { useRef } from "react";
 
+import Button from "../Button";
 import SvgExclamationIcon from "../Icons/SvgExclamationIcon";
 import SvgCheckIcon from "../Icons/SvgCheckIcon";
 import SvgChevronUpIcon from "../Icons/SvgChevronUpIcon";
@@ -84,10 +86,17 @@ export default function Select<
   placeholder,
   size = "medium",
   errorMessage,
+  selectionMode,
   ...props
 }: SelectProps<T, M>) {
+  const triggerRef = useRef<HTMLDivElement | null>(null);
+
   return (
-    <ReactAriaSelect {...props} className={`bcds-react-aria-Select ${size}`}>
+    <ReactAriaSelect
+      selectionMode={selectionMode}
+      className={`bcds-react-aria-Select ${size}`}
+      {...props}
+    >
       {({ isOpen, isRequired, isInvalid }) => (
         <>
           {label && (
@@ -95,54 +104,96 @@ export default function Select<
               {isRequired ? `${label} (required)` : label}
             </Label>
           )}
-          <Button
-            className={`bcds-react-aria-Select--Button ${
-              size === "medium" ? "medium" : "small"
-            } ${isInvalid && "invalid"}`}
-          >
-            <SelectValue className="bcds-react-aria-SelectValue">
-              {({ selectedItems, state }) => (
-                <TagGroup
-                  aria-label={
-                    label ? `${label} selections` : "Selected options"
-                  }
-                  /* Handle deselection of items via tag button */
-                  onRemove={(keys) => {
-                    const selectedKeys = state.selectionManager.selectedKeys;
+          {selectionMode === "multiple" ? (
+            /* Render group instead of button in multiple selection mode */
+            <Group
+              className={`bcds-react-aria-Select--Button ${
+                size === "medium" ? "medium" : "small"
+              } ${isInvalid && "invalid"}`}
+              ref={triggerRef}
+            >
+              <SelectValue className="bcds-react-aria-SelectValue">
+                {({ selectedItems, state }) => (
+                  <TagGroup
+                    aria-label={
+                      label ? `${label} selections` : "Selected options"
+                    }
+                    /* Handle deselection of items via Tag button */
+                    onRemove={(keys) => {
+                      const selectedKeys = state.selectionManager.selectedKeys;
 
-                    const updatedSelectedKeys = new Set(selectedKeys);
+                      const updatedSelectedKeys = new Set(selectedKeys);
 
-                    for (const key of keys) {
-                      updatedSelectedKeys.delete(key);
-                    }
+                      for (const key of keys) {
+                        updatedSelectedKeys.delete(key);
+                      }
 
-                    state.selectionManager.setSelectedKeys(updatedSelectedKeys);
-                  }}
-                >
-                  <TagList
-                    items={(selectedItems as Array<ListBoxItemProps | null>)
-                      .filter((item): item is ListBoxItemProps => item !== null)
-                      /* Map ListBoxItem props to Tag props */
-                      .map((item) => ({
-                        id: item?.id ? item.id : item.label,
-                        textValue: item.label,
-                        size: size === "small" ? "xsmall" : "small",
-                        color: item.color,
-                        tagStyle: item.tagStyle,
-                        ...(item.iconLeft && { icon: item.iconLeft }),
-                      }))}
-                    renderEmptyState={() => (
-                      <span className="bcds-react-aria-SelectValue--Placeholder">
-                        {placeholder ? placeholder : "Select an item"}
+                      state.selectionManager.setSelectedKeys(
+                        updatedSelectedKeys,
+                      );
+                    }}
+                  >
+                    <TagList
+                      items={(selectedItems as Array<ListBoxItemProps | null>)
+                        .filter(
+                          (item): item is ListBoxItemProps => item !== null,
+                        )
+                        /* Map ListBoxItem props to Tag props */
+                        .map((item) => ({
+                          id: item?.id ? item.id : item.label,
+                          textValue: item.label,
+                          size: size === "small" ? "xsmall" : "small",
+                          color: item.color,
+                          tagStyle: item.tagStyle,
+                          ...(item.iconLeft && { icon: item.iconLeft }),
+                        }))}
+                      renderEmptyState={() => (
+                        <span className="bcds-react-aria-SelectValue--Text">
+                          {placeholder ? placeholder : "Select an item"}
+                        </span>
+                      )}
+                    />
+                  </TagGroup>
+                )}
+              </SelectValue>
+              {isInvalid && <SvgExclamationIcon />}
+              <Button variant="tertiary" size="xsmall" isIconButton>
+                {isOpen ? <SvgChevronUpIcon /> : <SvgChevronDownIcon />}
+              </Button>
+            </Group>
+          ) : (
+            /* Render button in single selection mode */
+            <Button
+              className={`bcds-react-aria-Select--Button ${
+                size === "medium" ? "medium" : "small"
+              } ${isInvalid && "invalid"}`}
+            >
+              <SelectValue
+                className="bcds-react-aria-SelectValue"
+                children={(value) => {
+                  if (value.selectedText)
+                    return (
+                      <span className="bcds-react-aria-SelectValue--Text">
+                        {value.selectedText}
                       </span>
-                    )}
-                  />
-                </TagGroup>
-              )}
-            </SelectValue>
-            {isInvalid && <SvgExclamationIcon />}
-            {isOpen ? <SvgChevronUpIcon /> : <SvgChevronDownIcon />}
-          </Button>
+                    );
+                  if (placeholder)
+                    return (
+                      <span className="bcds-react-aria-SelectValue--Text">
+                        {placeholder}
+                      </span>
+                    );
+                  return (
+                    <span className="bcds-react-aria-SelectValue--Text">
+                      Select an item
+                    </span>
+                  );
+                }}
+              />
+              {isInvalid && <SvgExclamationIcon />}
+              {isOpen ? <SvgChevronUpIcon /> : <SvgChevronDownIcon />}
+            </Button>
+          )}
           {description && (
             <Text
               slot="description"
@@ -154,7 +205,12 @@ export default function Select<
           <FieldError className="bcds-react-aria-Select--Error">
             {errorMessage}
           </FieldError>
-          <Popover className="bcds-react-aria-Select--Popover" offset={4}>
+          <Popover
+            className={`bcds-react-aria-Select--Popover ${selectionMode === "multiple" ? "multiple" : "single "}`}
+            offset={4}
+            /* Move trigger to button when in multiple selection mode */
+            {...(selectionMode === "multiple" && { triggerRef })}
+          >
             <ListBox
               className={`bcds-react-aria-Select--ListBox ${size}`}
               // This ternary statement is used to mock the data for `sections`
diff --git a/packages/react-components/src/stories/Select.mdx b/packages/react-components/src/stories/Select.mdx
index ad686632..fded1a5d 100644
--- a/packages/react-components/src/stories/Select.mdx
+++ b/packages/react-components/src/stories/Select.mdx
@@ -73,11 +73,13 @@ This component may trigger [a known false positive](https://react-spectrum.adobe
 
 Use `value` to set or get the currently-selected value. Use `defaultValue` to set an uncontrolled initial value.
 
+Selected items are indicated with a checkmark icon in the dropdown list.
+
 By default, Select permits the user to select a single option from the list. Set `selectionMode` to `multiple` to permit multiple selections:
 
 <Canvas of={SelectStories.MultiSelect} />
 
-Selected values are rendered inside a [TagGroup](/docs/inputs-and-controls-taggroup--docs). This provides visual separation between selected values, and enables the user to de-select items without re-opening the dropdown. Selected items are also indicated with a checkmark in the dropdown list.
+In multi-select mode, selected values are rendered inside a [TagGroup](/docs/inputs-and-controls-taggroup--docs). This provides visual separation between selected values, and enables the user to de-select items without re-opening the dropdown.
 
 #### Styling tags
 

From 5e01805b6b35cf1f87b07aa52a92a3d8fc38f6ef Mon Sep 17 00:00:00 2001
From: Marcus Kernohan <135075821+mkernohanbc@users.noreply.github.com>
Date: Wed, 4 Mar 2026 09:04:15 -0800
Subject: [PATCH 11/16] fix button styling in multi-select mode, support
 disabling tags

---
 .../react-components/src/components/Select/Select.css     | 8 ++++----
 .../react-components/src/components/Select/Select.tsx     | 3 ++-
 packages/react-components/src/components/Tag/Tag.tsx      | 2 ++
 3 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/packages/react-components/src/components/Select/Select.css b/packages/react-components/src/components/Select/Select.css
index bcbf24a9..628e8996 100644
--- a/packages/react-components/src/components/Select/Select.css
+++ b/packages/react-components/src/components/Select/Select.css
@@ -40,7 +40,6 @@
     var(--surface-color-border-default);
   border-radius: var(--layout-border-radius-medium);
   box-sizing: border-box;
-  cursor: pointer;
   display: flex;
   gap: var(--layout-margin-small);
   align-items: center;
@@ -49,6 +48,10 @@
   min-width: 0;
   max-width: 100%;
 }
+button.bcds-react-aria-Select--Button[data-hovered] {
+  border-color: var(--surface-color-border-dark);
+  cursor: pointer;
+}
 .bcds-react-aria-Select--Button.invalid {
   border-color: var(--support-border-color-danger);
 }
@@ -59,9 +62,6 @@
   background-color: var(--surface-color-forms-disabled);
   cursor: not-allowed;
 }
-.bcds-react-aria-Select--Button[data-hovered] {
-  border-color: var(--surface-color-border-dark);
-}
 .bcds-react-aria-Select--Button[data-focused] {
   border-color: var(--surface-color-border-active);
   outline: solid var(--layout-border-width-medium)
diff --git a/packages/react-components/src/components/Select/Select.tsx b/packages/react-components/src/components/Select/Select.tsx
index 2d213e13..2cf18dd8 100644
--- a/packages/react-components/src/components/Select/Select.tsx
+++ b/packages/react-components/src/components/Select/Select.tsx
@@ -97,7 +97,7 @@ export default function Select<
       className={`bcds-react-aria-Select ${size}`}
       {...props}
     >
-      {({ isOpen, isRequired, isInvalid }) => (
+      {({ isOpen, isRequired, isInvalid, isDisabled }) => (
         <>
           {label && (
             <Label className="bcds-react-aria-Select--Label">
@@ -146,6 +146,7 @@ export default function Select<
                           color: item.color,
                           tagStyle: item.tagStyle,
                           ...(item.iconLeft && { icon: item.iconLeft }),
+                          ...(isDisabled && { isDisabled: true }),
                         }))}
                       renderEmptyState={() => (
                         <span className="bcds-react-aria-SelectValue--Text">
diff --git a/packages/react-components/src/components/Tag/Tag.tsx b/packages/react-components/src/components/Tag/Tag.tsx
index 9eee92d4..d75d5db2 100644
--- a/packages/react-components/src/components/Tag/Tag.tsx
+++ b/packages/react-components/src/components/Tag/Tag.tsx
@@ -42,12 +42,14 @@ export default function Tag({
   icon,
   id,
   textValue,
+  ...props
 }: TagProps) {
   return (
     <ReactAriaTag
       className={`bcds-react-aria-Tag ${color} ${tagStyle} ${size}`}
       id={id}
       textValue={textValue}
+      {...props}
     >
       {({ allowsRemoving, isDisabled }: TagRenderProps) => (
         <>

From be03d00211df6ec1b1ed990c89f0780a751e83fd Mon Sep 17 00:00:00 2001
From: Marcus Kernohan <135075821+mkernohanbc@users.noreply.github.com>
Date: Wed, 4 Mar 2026 11:11:08 -0800
Subject: [PATCH 12/16] alternative fix for accessibility issue, using
 createPortal

---
 .../src/components/Select/Select.css          |  45 +++--
 .../src/components/Select/Select.tsx          | 156 +++++++++++-------
 2 files changed, 129 insertions(+), 72 deletions(-)

diff --git a/packages/react-components/src/components/Select/Select.css b/packages/react-components/src/components/Select/Select.css
index 628e8996..7170dcaa 100644
--- a/packages/react-components/src/components/Select/Select.css
+++ b/packages/react-components/src/components/Select/Select.css
@@ -44,11 +44,11 @@
   gap: var(--layout-margin-small);
   align-items: center;
   padding: var(--layout-padding-small);
-  width: auto;
+  width: 100%;
   min-width: 0;
   max-width: 100%;
 }
-button.bcds-react-aria-Select--Button[data-hovered] {
+.bcds-react-aria-Select--Button[data-hovered] {
   border-color: var(--surface-color-border-dark);
   cursor: pointer;
 }
@@ -83,6 +83,37 @@ button.bcds-react-aria-Select--Button[data-hovered] {
   flex: 0 0 auto;
 }
 
+/* Overlay for tags in multi-select mode */
+.bcds-react-aria-Select--TriggerShell {
+  display: grid;
+  width: 100%;
+  min-width: 0;
+}
+.bcds-react-aria-Select--TriggerShell > .bcds-react-aria-Select--Button {
+  grid-area: 1 / 1;
+  align-self: stretch;
+}
+.bcds-react-aria-Select--TagOverlayHost {
+  grid-area: 1 / 1;
+  z-index: 1;
+  min-width: 0;
+  display: flex;
+  align-items: center;
+  padding: var(--layout-padding-small);
+  padding-right: 2.5rem;
+  pointer-events: none;
+}
+.bcds-react-aria-Select--TagOverlay {
+  width: 100%;
+  min-width: 0;
+  pointer-events: none;
+}
+.bcds-react-aria-Select--TagOverlay .bcds-react-aria-Tag,
+.bcds-react-aria-Select--TagOverlay .bcds-react-aria-Tag [slot="remove"],
+.bcds-react-aria-Select--TagOverlay .bcds-react-aria-Tag button {
+  pointer-events: auto;
+}
+
 /* Label above select input */
 .bcds-react-aria-Select--Label {
   color: var(--typography-color-secondary);
@@ -108,8 +139,8 @@ button.bcds-react-aria-Select--Button[data-hovered] {
 
 /* Error icon */
 .bcds-react-aria-Select[data-invalid]
-  > .bcds-react-aria-Select--Button
-  > svg:not(:last-child) {
+  .bcds-react-aria-Select--Button
+  svg:not(:last-child) {
   color: var(--icons-color-danger);
 }
 
@@ -125,16 +156,10 @@ button.bcds-react-aria-Select--Button[data-hovered] {
   padding: var(--layout-padding-hair) var(--layout-padding-xsmall);
   max-width: calc(100vw - (2 * var(--layout-padding-small)));
   max-height: 50vh;
-}
-/* Set width separately for single and multiple selection modes */
-.bcds-react-aria-Select--Popover.single {
   width: var(
     --trigger-width
   ); /* Variable provided by Select component https://react-spectrum.adobe.com/react-aria/Select.html#popover-1 */
 }
-.bcds-react-aria-Select--Popover.multiple {
-  width: 300px;
-}
 .bcds-react-aria-Select--ListBox[data-focused] {
   outline: none;
 }
diff --git a/packages/react-components/src/components/Select/Select.tsx b/packages/react-components/src/components/Select/Select.tsx
index 2cf18dd8..d561904b 100644
--- a/packages/react-components/src/components/Select/Select.tsx
+++ b/packages/react-components/src/components/Select/Select.tsx
@@ -1,7 +1,6 @@
 import {
   Collection,
   FieldError,
-  Group,
   Header,
   Key,
   Label,
@@ -16,7 +15,8 @@ import {
   Text,
   ValidationResult,
 } from "react-aria-components";
-import { useRef } from "react";
+import { useState } from "react";
+import { createPortal } from "react-dom";
 
 import Button from "../Button";
 import SvgExclamationIcon from "../Icons/SvgExclamationIcon";
@@ -89,7 +89,9 @@ export default function Select<
   selectionMode,
   ...props
 }: SelectProps<T, M>) {
-  const triggerRef = useRef<HTMLDivElement | null>(null);
+  const [tagOverlayHost, setTagOverlayHost] = useState<HTMLDivElement | null>(
+    null,
+  );
 
   return (
     <ReactAriaSelect
@@ -105,65 +107,100 @@ export default function Select<
             </Label>
           )}
           {selectionMode === "multiple" ? (
-            /* Render group instead of button in multiple selection mode */
-            <Group
-              className={`bcds-react-aria-Select--Button ${
-                size === "medium" ? "medium" : "small"
-              } ${isInvalid && "invalid"}`}
-              ref={triggerRef}
-            >
-              <SelectValue className="bcds-react-aria-SelectValue">
-                {({ selectedItems, state }) => (
-                  <TagGroup
-                    aria-label={
-                      label ? `${label} selections` : "Selected options"
-                    }
-                    /* Handle deselection of items via Tag button */
-                    onRemove={(keys) => {
-                      const selectedKeys = state.selectionManager.selectedKeys;
+            <div className="bcds-react-aria-Select--TriggerShell">
+              <Button
+                className={`bcds-react-aria-Select--Button ${
+                  size === "medium" ? "medium" : "small"
+                } ${isInvalid && "invalid"}`}
+              >
+                <SelectValue className="bcds-react-aria-SelectValue">
+                  {({ selectedItems, state }) => {
+                    return (
+                      /* Portal interactive tags out of button as accessibility safeguard */
+                      <>
+                        {selectedItems.length === 0 && (
+                          <span className="bcds-react-aria-SelectValue--Text">
+                            {placeholder ? placeholder : "Select an item"}
+                          </span>
+                        )}
+                        {selectedItems.length > 0 &&
+                          tagOverlayHost &&
+                          createPortal(
+                            <div
+                              className="bcds-react-aria-Select--TagOverlay"
+                              onPointerDown={(event) => event.stopPropagation()}
+                              onClick={(event) => event.stopPropagation()}
+                            >
+                              <TagGroup
+                                aria-label={
+                                  label
+                                    ? `${label} selections`
+                                    : "Selected options"
+                                }
+                                /* Handle deselection of items via Tag button */
+                                onRemove={(keys) => {
+                                  const selectedKeys =
+                                    state.selectionManager.selectedKeys;
 
-                      const updatedSelectedKeys = new Set(selectedKeys);
+                                  const updatedSelectedKeys = new Set(
+                                    selectedKeys,
+                                  );
 
-                      for (const key of keys) {
-                        updatedSelectedKeys.delete(key);
-                      }
+                                  for (const key of keys) {
+                                    updatedSelectedKeys.delete(key);
+                                  }
 
-                      state.selectionManager.setSelectedKeys(
-                        updatedSelectedKeys,
-                      );
-                    }}
-                  >
-                    <TagList
-                      items={(selectedItems as Array<ListBoxItemProps | null>)
-                        .filter(
-                          (item): item is ListBoxItemProps => item !== null,
-                        )
-                        /* Map ListBoxItem props to Tag props */
-                        .map((item) => ({
-                          id: item?.id ? item.id : item.label,
-                          textValue: item.label,
-                          size: size === "small" ? "xsmall" : "small",
-                          color: item.color,
-                          tagStyle: item.tagStyle,
-                          ...(item.iconLeft && { icon: item.iconLeft }),
-                          ...(isDisabled && { isDisabled: true }),
-                        }))}
-                      renderEmptyState={() => (
-                        <span className="bcds-react-aria-SelectValue--Text">
-                          {placeholder ? placeholder : "Select an item"}
-                        </span>
-                      )}
-                    />
-                  </TagGroup>
-                )}
-              </SelectValue>
-              {isInvalid && <SvgExclamationIcon />}
-              <Button variant="tertiary" size="xsmall" isIconButton>
+                                  state.selectionManager.setSelectedKeys(
+                                    updatedSelectedKeys,
+                                  );
+                                }}
+                              >
+                                <TagList
+                                  items={(
+                                    selectedItems as Array<ListBoxItemProps | null>
+                                  )
+                                    .filter(
+                                      (item): item is ListBoxItemProps =>
+                                        item !== null,
+                                    )
+                                    /* Map ListBoxItem props to Tag props */
+                                    .map((item) => ({
+                                      id: item?.id ? item.id : item.label,
+                                      textValue: item.label,
+                                      size:
+                                        size === "small" ? "xsmall" : "small",
+                                      color: item.color,
+                                      tagStyle: item.tagStyle,
+                                      ...(item.iconLeft && {
+                                        icon: item.iconLeft,
+                                      }),
+                                      ...(isDisabled && { isDisabled: true }),
+                                    }))}
+                                  renderEmptyState={() => (
+                                    <span className="bcds-react-aria-SelectValue--Text">
+                                      {placeholder
+                                        ? placeholder
+                                        : "Select an item"}
+                                    </span>
+                                  )}
+                                />
+                              </TagGroup>
+                            </div>,
+                            tagOverlayHost,
+                          )}
+                      </>
+                    );
+                  }}
+                </SelectValue>
+                {isInvalid && <SvgExclamationIcon />}
                 {isOpen ? <SvgChevronUpIcon /> : <SvgChevronDownIcon />}
               </Button>
-            </Group>
+              <div
+                className="bcds-react-aria-Select--TagOverlayHost"
+                ref={setTagOverlayHost}
+              />
+            </div>
           ) : (
-            /* Render button in single selection mode */
             <Button
               className={`bcds-react-aria-Select--Button ${
                 size === "medium" ? "medium" : "small"
@@ -206,12 +243,7 @@ export default function Select<
           <FieldError className="bcds-react-aria-Select--Error">
             {errorMessage}
           </FieldError>
-          <Popover
-            className={`bcds-react-aria-Select--Popover ${selectionMode === "multiple" ? "multiple" : "single "}`}
-            offset={4}
-            /* Move trigger to button when in multiple selection mode */
-            {...(selectionMode === "multiple" && { triggerRef })}
-          >
+          <Popover className="bcds-react-aria-Select--Popover" offset={4}>
             <ListBox
               className={`bcds-react-aria-Select--ListBox ${size}`}
               // This ternary statement is used to mock the data for `sections`

From cf3ae283caa09dd2b46a5fe251a69cd3fac06b3b Mon Sep 17 00:00:00 2001
From: Marcus Kernohan <135075821+mkernohanbc@users.noreply.github.com>
Date: Wed, 4 Mar 2026 13:33:14 -0800
Subject: [PATCH 13/16] remove redundant rule

---
 packages/react-components/src/components/Select/Select.css | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/react-components/src/components/Select/Select.css b/packages/react-components/src/components/Select/Select.css
index 7170dcaa..b81d9cc5 100644
--- a/packages/react-components/src/components/Select/Select.css
+++ b/packages/react-components/src/components/Select/Select.css
@@ -75,7 +75,6 @@
   flex: 1 1 auto;
   overflow: visible;
   white-space: normal;
-  text-overflow: ellipsis;
   text-align: left;
   min-width: 0;
 }

From 6b1460471c08578ebd385ea8d6c19b99bf4828a4 Mon Sep 17 00:00:00 2001
From: Marcus Kernohan <135075821+mkernohanbc@users.noreply.github.com>
Date: Mon, 9 Mar 2026 15:41:03 -0700
Subject: [PATCH 14/16] add toggleable styling for overflow behaviour

---
 .../src/components/Select/Select.css          | 55 ++++++++++++++++++-
 .../src/components/Select/Select.tsx          | 19 ++++---
 .../src/pages/Select/MultiSelect.tsx          | 11 +++-
 .../src/pages/Select/Select.tsx               |  2 +
 4 files changed, 73 insertions(+), 14 deletions(-)

diff --git a/packages/react-components/src/components/Select/Select.css b/packages/react-components/src/components/Select/Select.css
index b81d9cc5..16d7c2b6 100644
--- a/packages/react-components/src/components/Select/Select.css
+++ b/packages/react-components/src/components/Select/Select.css
@@ -9,6 +9,55 @@
   max-width: -webkit-fill-available;
 }
 
+/* Scroll mode: single-select text truncation */
+.bcds-react-aria-Select.scroll .bcds-react-aria-SelectValue {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+/* Scroll mode: horizontally scrollable tag overlay.
+   overflow-x: auto forces overflow-y to also clip (per CSS spec), which
+   would clip tag focus rings. padding-block creates room for the outline
+   inside the scroll container's padding box, and matching negative
+   margin-block cancels it out so the overlay's outer box stays the same
+   size, preserving alignment with wrap mode. */
+.bcds-react-aria-Select.scroll .bcds-react-aria-Select--TagOverlay {
+  overflow-x: auto;
+  pointer-events: auto;
+  scrollbar-width: none;
+  padding-block: calc(
+    var(--layout-border-width-medium) + var(--layout-margin-hair) + 1px
+  );
+  margin-block: calc(
+    -1 * (var(--layout-border-width-medium) + var(--layout-margin-hair) + 1px)
+  );
+  padding-inline: calc(
+    var(--layout-border-width-medium) + var(--layout-margin-hair) + 1px
+  );
+  margin-inline: calc(
+    -1 * (var(--layout-border-width-medium) + var(--layout-margin-hair) + 1px)
+  );
+}
+.bcds-react-aria-Select.scroll
+  .bcds-react-aria-Select--TagOverlay::-webkit-scrollbar {
+  display: none;
+}
+
+/* Scroll mode: prevent tag list from wrapping */
+.bcds-react-aria-Select.scroll .bcds-react-aria-TagList {
+  flex-wrap: nowrap;
+  width: max-content;
+}
+
+/* Scroll mode: prevent tags from shrinking or wrapping */
+.bcds-react-aria-Select.scroll .bcds-react-aria-Tag {
+  flex-shrink: 0;
+}
+.bcds-react-aria-Select.scroll .bcds-react-aria-Tag--Label {
+  white-space: nowrap;
+}
+
 /* Sizing */
 .bcds-react-aria-Select.small .bcds-react-aria-Select--Button {
   min-height: 32px;
@@ -83,16 +132,16 @@
 }
 
 /* Overlay for tags in multi-select mode */
-.bcds-react-aria-Select--TriggerShell {
+.bcds-react-aria-Select--InputContainer {
   display: grid;
   width: 100%;
   min-width: 0;
 }
-.bcds-react-aria-Select--TriggerShell > .bcds-react-aria-Select--Button {
+.bcds-react-aria-Select--InputContainer > .bcds-react-aria-Select--Button {
   grid-area: 1 / 1;
   align-self: stretch;
 }
-.bcds-react-aria-Select--TagOverlayHost {
+.bcds-react-aria-Select--TagOverlayContainer {
   grid-area: 1 / 1;
   z-index: 1;
   min-width: 0;
diff --git a/packages/react-components/src/components/Select/Select.tsx b/packages/react-components/src/components/Select/Select.tsx
index d561904b..6a993da9 100644
--- a/packages/react-components/src/components/Select/Select.tsx
+++ b/packages/react-components/src/components/Select/Select.tsx
@@ -72,6 +72,8 @@ export interface SelectProps<
   description?: string;
   /** Used for data validation and error handling */
   errorMessage?: string | ((validation: ValidationResult) => string);
+  /** Overflow behaviour */
+  overflow?: "wrap" | "scroll";
 }
 
 /** Select displays a collapsible list of options and allows a user to select one of them. */
@@ -87,16 +89,15 @@ export default function Select<
   size = "medium",
   errorMessage,
   selectionMode,
+  overflow = "wrap",
   ...props
 }: SelectProps<T, M>) {
-  const [tagOverlayHost, setTagOverlayHost] = useState<HTMLDivElement | null>(
-    null,
-  );
+  const [tagOverlay, setTagOverlay] = useState<HTMLDivElement | null>(null);
 
   return (
     <ReactAriaSelect
       selectionMode={selectionMode}
-      className={`bcds-react-aria-Select ${size}`}
+      className={`bcds-react-aria-Select ${size} ${overflow}`}
       {...props}
     >
       {({ isOpen, isRequired, isInvalid, isDisabled }) => (
@@ -107,7 +108,7 @@ export default function Select<
             </Label>
           )}
           {selectionMode === "multiple" ? (
-            <div className="bcds-react-aria-Select--TriggerShell">
+            <div className="bcds-react-aria-Select--InputContainer">
               <Button
                 className={`bcds-react-aria-Select--Button ${
                   size === "medium" ? "medium" : "small"
@@ -124,7 +125,7 @@ export default function Select<
                           </span>
                         )}
                         {selectedItems.length > 0 &&
-                          tagOverlayHost &&
+                          tagOverlay &&
                           createPortal(
                             <div
                               className="bcds-react-aria-Select--TagOverlay"
@@ -186,7 +187,7 @@ export default function Select<
                                 />
                               </TagGroup>
                             </div>,
-                            tagOverlayHost,
+                            tagOverlay,
                           )}
                       </>
                     );
@@ -196,8 +197,8 @@ export default function Select<
                 {isOpen ? <SvgChevronUpIcon /> : <SvgChevronDownIcon />}
               </Button>
               <div
-                className="bcds-react-aria-Select--TagOverlayHost"
-                ref={setTagOverlayHost}
+                className="bcds-react-aria-Select--TagOverlayContainer"
+                ref={setTagOverlay}
               />
             </div>
           ) : (
diff --git a/packages/react-components/src/pages/Select/MultiSelect.tsx b/packages/react-components/src/pages/Select/MultiSelect.tsx
index 9dc5b231..e1fad761 100644
--- a/packages/react-components/src/pages/Select/MultiSelect.tsx
+++ b/packages/react-components/src/pages/Select/MultiSelect.tsx
@@ -41,13 +41,20 @@ export default function MultiSelectExample() {
     },
   ];
   return (
-    <>
+    <div className="col" style={{ gap: "var(--layout-margin-medium)" }}>
       <Select
         label="Pick some options"
         description="Allows multiple options to be selected"
         selectionMode="multiple"
         items={items}
       />
-    </>
+      <Select
+        label="Pick some options"
+        description="Allows multiple options to be selected"
+        selectionMode="multiple"
+        items={items}
+        overflow="scroll"
+      />
+    </div>
   );
 }
diff --git a/packages/react-components/src/pages/Select/Select.tsx b/packages/react-components/src/pages/Select/Select.tsx
index 708f8e7e..562de845 100644
--- a/packages/react-components/src/pages/Select/Select.tsx
+++ b/packages/react-components/src/pages/Select/Select.tsx
@@ -34,6 +34,7 @@ export default function SelectPage() {
           description="Description"
           items={items}
           placeholder="Pick something"
+          overflow="wrap"
         />
         <Select
           label="Disabled"
@@ -49,6 +50,7 @@ export default function SelectPage() {
           label="Label"
           description="Description"
           items={items}
+          overflow="scroll"
         />
         <Select
           size="small"

From 7bd12ca33937c5fc290d400edbc3f4f9b47155f4 Mon Sep 17 00:00:00 2001
From: Marcus Kernohan <135075821+mkernohanbc@users.noreply.github.com>
Date: Thu, 2 Apr 2026 10:03:36 -0700
Subject: [PATCH 15/16] remove redundant popover styling

---
 packages/react-components/src/components/Select/Select.css | 2 --
 1 file changed, 2 deletions(-)

diff --git a/packages/react-components/src/components/Select/Select.css b/packages/react-components/src/components/Select/Select.css
index 16d7c2b6..759a7263 100644
--- a/packages/react-components/src/components/Select/Select.css
+++ b/packages/react-components/src/components/Select/Select.css
@@ -202,8 +202,6 @@
   box-sizing: border-box;
   overflow-y: auto;
   padding: var(--layout-padding-hair) var(--layout-padding-xsmall);
-  max-width: calc(100vw - (2 * var(--layout-padding-small)));
-  max-height: 50vh;
   width: var(
     --trigger-width
   ); /* Variable provided by Select component https://react-spectrum.adobe.com/react-aria/Select.html#popover-1 */

From 8301d56429b37005df7d08eef8c2844eea26806c Mon Sep 17 00:00:00 2001
From: Marcus Kernohan <135075821+mkernohanbc@users.noreply.github.com>
Date: Thu, 2 Apr 2026 10:05:31 -0700
Subject: [PATCH 16/16] remove z-index

---
 packages/react-components/src/components/Select/Select.css | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/react-components/src/components/Select/Select.css b/packages/react-components/src/components/Select/Select.css
index 759a7263..bddc60ed 100644
--- a/packages/react-components/src/components/Select/Select.css
+++ b/packages/react-components/src/components/Select/Select.css
@@ -143,7 +143,6 @@
 }
 .bcds-react-aria-Select--TagOverlayContainer {
   grid-area: 1 / 1;
-  z-index: 1;
   min-width: 0;
   display: flex;
   align-items: center;