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/components/Select/Select.css b/packages/react-components/src/components/Select/Select.css
index 582ab4dd..bddc60ed 100644
--- a/packages/react-components/src/components/Select/Select.css
+++ b/packages/react-components/src/components/Select/Select.css
@@ -1,55 +1,106 @@
 .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;
 }
 
-/* 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);
+/* Scroll mode: single-select text truncation */
+.bcds-react-aria-Select.scroll .bcds-react-aria-SelectValue {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
 }
-.bcds-react-aria-Select[data-disabled] > .bcds-react-aria-Select--Label {
-  color: var(--typography-color-disabled);
+
+/* 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;
 }
 
-/* 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);
+/* Scroll mode: prevent tag list from wrapping */
+.bcds-react-aria-Select.scroll .bcds-react-aria-TagList {
+  flex-wrap: nowrap;
+  width: max-content;
 }
 
-/* Error message */
-.bcds-react-aria-Select--Error {
-  font: var(--typography-regular-small-body);
-  color: var(--typography-color-danger);
+/* 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;
 }
 
-/* Error icon */
-.bcds-react-aria-Select[data-invalid]
-  > .bcds-react-aria-Select--Button
-  > svg:not(:last-child) {
-  color: var(--icons-color-danger);
+/* Sizing */
+.bcds-react-aria-Select.small .bcds-react-aria-Select--Button {
+  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--Text,
+.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 {
+  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--Text,
+.bcds-react-aria-Select--ListBox.medium
+  .bcds-react-aria-Select--ListBoxItem-Text-label {
+  font: var(--typography-regular-body);
 }
 
 /* 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;
+  box-sizing: border-box;
   display: flex;
-  justify-content: space-between;
   gap: var(--layout-margin-small);
   align-items: center;
-  padding: 0 12px;
+  padding: var(--layout-padding-small);
+  width: 100%;
+  min-width: 0;
   max-width: 100%;
 }
+.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);
 }
@@ -60,9 +111,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)
@@ -72,27 +120,82 @@
 .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;
+  flex: 1 1 auto;
+  overflow: visible;
+  white-space: normal;
+  text-align: left;
   min-width: 0;
 }
 .bcds-react-aria-Select--Button > svg {
-  flex-shrink: 0;
+  flex: 0 0 auto;
+}
+
+/* Overlay for tags in multi-select mode */
+.bcds-react-aria-Select--InputContainer {
+  display: grid;
+  width: 100%;
+  min-width: 0;
+}
+.bcds-react-aria-Select--InputContainer > .bcds-react-aria-Select--Button {
+  grid-area: 1 / 1;
+  align-self: stretch;
+}
+.bcds-react-aria-Select--TagOverlayContainer {
+  grid-area: 1 / 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);
+  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);
-  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;
@@ -106,9 +209,10 @@
   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 */
@@ -126,7 +230,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] {
@@ -145,10 +248,8 @@
   color: var(--typography-color-primary);
   display: flex;
   flex-direction: column;
-  flex-grow: 1;
-}
-.bcds-react-aria-Select--ListBoxItem-Text-label {
-  font: var(--typography-regular-body);
+  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/components/Select/Select.tsx b/packages/react-components/src/components/Select/Select.tsx
index 398569bd..6a993da9 100644
--- a/packages/react-components/src/components/Select/Select.tsx
+++ b/packages/react-components/src/components/Select/Select.tsx
@@ -1,5 +1,4 @@
 import {
-  Button,
   Collection,
   FieldError,
   Header,
@@ -16,10 +15,17 @@ import {
   Text,
   ValidationResult,
 } from "react-aria-components";
+import { useState } from "react";
+import { createPortal } from "react-dom";
 
+import Button from "../Button";
 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 { TagProps } from "../Tag";
 
 import "./Select.css";
 
@@ -34,6 +40,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 {
@@ -44,7 +54,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 */
@@ -59,10 +72,15 @@ export interface SelectProps<T extends object> extends ReactAriaSelectProps<T> {
   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. */
-export default function Select<T extends object>({
+export default function Select<
+  T extends object,
+  M extends "single" | "multiple" = "single",
+>({
   items,
   sections,
   label,
@@ -70,33 +88,151 @@ export default function Select<T extends object>({
   placeholder,
   size = "medium",
   errorMessage,
+  selectionMode,
+  overflow = "wrap",
   ...props
-}: SelectProps<T>) {
+}: SelectProps<T, M>) {
+  const [tagOverlay, setTagOverlay] = useState<HTMLDivElement | null>(null);
+
   return (
-    <ReactAriaSelect {...props} className="bcds-react-aria-Select">
-      {({ isOpen, isRequired, isInvalid }) => (
+    <ReactAriaSelect
+      selectionMode={selectionMode}
+      className={`bcds-react-aria-Select ${size} ${overflow}`}
+      {...props}
+    >
+      {({ isOpen, isRequired, isInvalid, isDisabled }) => (
         <>
           {label && (
             <Label className="bcds-react-aria-Select--Label">
               {isRequired ? `${label} (required)` : label}
             </Label>
           )}
-          <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 value.selectedText;
-                if (placeholder) return placeholder;
-                return "Select an item";
-              }}
-            />
-            {isInvalid && <SvgExclamationIcon />}
-            {isOpen ? <SvgChevronUpIcon /> : <SvgChevronDownIcon />}
-          </Button>
+          {selectionMode === "multiple" ? (
+            <div className="bcds-react-aria-Select--InputContainer">
+              <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 &&
+                          tagOverlay &&
+                          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,
+                                  );
+
+                                  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>
+                            </div>,
+                            tagOverlay,
+                          )}
+                      </>
+                    );
+                  }}
+                </SelectValue>
+                {isInvalid && <SvgExclamationIcon />}
+                {isOpen ? <SvgChevronUpIcon /> : <SvgChevronDownIcon />}
+              </Button>
+              <div
+                className="bcds-react-aria-Select--TagOverlayContainer"
+                ref={setTagOverlay}
+              />
+            </div>
+          ) : (
+            <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>
+                    );
+                  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"
@@ -110,7 +246,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
@@ -142,31 +278,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/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..d75d5db2 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({
@@ -42,17 +42,19 @@ 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) => (
         <>
           {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
new file mode 100644
index 00000000..e1fad761
--- /dev/null
+++ b/packages/react-components/src/pages/Select/MultiSelect.tsx
@@ -0,0 +1,60 @@
+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 (
+    <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 0e9c2f6e..562de845 100644
--- a/packages/react-components/src/pages/Select/Select.tsx
+++ b/packages/react-components/src/pages/Select/Select.tsx
@@ -1,14 +1,76 @@
+import { Select } from "@/components";
 import UseStateExample from "./UseStateExample";
+import MultiSelectExample from "./MultiSelect";
 
 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>
+      <h3>Default size</h3>
+      <div className="row">
+        <Select
+          label="Label"
+          description="Description"
+          items={items}
+          placeholder="Pick something"
+          overflow="wrap"
+        />
+        <Select
+          label="Disabled"
+          description="Description"
+          items={items}
+          isDisabled
+        />
+      </div>
+      <h3>Small size</h3>
+      <div className="row">
+        <Select
+          size="small"
+          label="Label"
+          description="Description"
+          items={items}
+          overflow="scroll"
+        />
+        <Select
+          size="small"
+          label="Disabled"
+          description="Description"
+          items={items}
+          isDisabled
+        />
+      </div>
 
-      <hr />
-
-      <h3>Select with useState</h3>
-      <UseStateExample />
+      <div className="row">
+        <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 5217ce93..0d8f7681 100644
--- a/packages/react-components/src/pages/Select/UseStateExample.tsx
+++ b/packages/react-components/src/pages/Select/UseStateExample.tsx
@@ -29,12 +29,12 @@ export default function UseStateExample() {
   return (
     <>
       <Select
-        aria-label="Select example"
+        label="Pick an option"
         items={items}
         value={selected}
         onChange={(selected) => setSelected(selected)}
+        description={`Selected key: ${selected}`}
       />
-      <p>Selected key: {selected}</p>
     </>
   );
 }
diff --git a/packages/react-components/src/stories/Select.mdx b/packages/react-components/src/stories/Select.mdx
index 8cb2eaf0..fded1a5d 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,43 @@ 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.
+
+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} />
+
+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
+
+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 +124,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 ff10cdce..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,10 +52,37 @@ const meta = {
       description:
         "Text label that appears inside the select input before an option has been selected",
     },
+    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>;
 
@@ -65,6 +109,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 +117,39 @@ export const SelectTemplate: Story = {
   },
 };
 
+export const MultiSelect: Story = {
+  ...SelectTemplate,
+  args: {
+    ...SelectTemplate.args,
+    label: "Multi-select example",
+    selectionMode: "multiple",
+  },
+};
+
+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"