diff --git a/libs/@hashintel/ds-components/src/components/Filter/sort-menu.recipe.ts b/libs/@hashintel/ds-components/src/components/Filter/sort-menu.recipe.ts
index 9566dbf7f15..1fe825fb9b4 100644
--- a/libs/@hashintel/ds-components/src/components/Filter/sort-menu.recipe.ts
+++ b/libs/@hashintel/ds-components/src/components/Filter/sort-menu.recipe.ts
@@ -55,54 +55,6 @@ export const menuContent = cva({
   },
 });
 
-export const searchRow = cva({
-  base: {
-    display: "flex",
-    alignItems: "center",
-    gap: "1.5",
-    marginTop:
-      "[calc(-1 * (var(--spacing-1) + var(--selectable-list-padding-y)))]",
-    marginInline:
-      "[calc(-1 * (var(--selectable-list-padding-x) + var(--spacing-1)))]",
-    marginBottom: "0.5",
-    paddingInline: "[var(--selectable-list-padding-x)]",
-    paddingTop: "1.5",
-    paddingBottom: "1",
-    background: "neutral.s20",
-    borderBottom: "1px solid {colors.neutral.s50}",
-  },
-});
-
-export const searchIcon = cva({
-  base: {
-    color: "fg.muted",
-    flexShrink: "0",
-  },
-});
-
-export const searchInput = cva({
-  base: {
-    flex: "1",
-    minWidth: "0",
-    appearance: "none",
-    border: "none",
-    background: "[transparent]",
-    outline: "none",
-    padding: "0",
-    font: "[inherit]",
-    color: "[inherit]",
-    _placeholder: { color: "neutral.s80" },
-  },
-});
-
-export const searchEmpty = cva({
-  base: {
-    display: "block",
-    color: "neutral.s90",
-    paddingBlock: "0.5",
-  },
-});
-
 export const triggerButton = cva({
   base: {
     maxWidth: "[100%]",
diff --git a/libs/@hashintel/ds-components/src/components/Filter/sort-menu.tsx b/libs/@hashintel/ds-components/src/components/Filter/sort-menu.tsx
index 433d7eb04cf..e2be31ec672 100644
--- a/libs/@hashintel/ds-components/src/components/Filter/sort-menu.tsx
+++ b/libs/@hashintel/ds-components/src/components/Filter/sort-menu.tsx
@@ -9,6 +9,8 @@ import {
 } from "../Button/button";
 import { Icon } from "../Icon/icon";
 import { Menu, type MenuItem } from "../Menu/menu";
+import { SelectableListSearch } from "../Menu/SelectableList/selectable-list-search";
+import { searchEmpty } from "../Menu/SelectableList/selectable-list-search.recipe";
 import {
   readSavedSort,
   type SortDirection,
@@ -23,10 +25,6 @@ import {
   directionToggle,
   menuContent,
   placeholderLabel,
-  searchEmpty,
-  searchIcon,
-  searchInput,
-  searchRow,
   triggerButton,
   triggerDirectionToggle,
   triggerIcon,
@@ -34,48 +32,6 @@ import {
 
 import type { DistributedOmit } from "type-fest";
 
-const SearchField = ({
-  value,
-  onChange,
-}: {
-  value: string;
-  onChange: (next: string) => void;
-}) => {
-  const inputRef = useRef<HTMLInputElement>(null);
-
-  // Focus when the (lazily mounted) dropdown opens. Double rAF so the focus
-  // lands after ark moves focus to the menu content (mirrors Filter).
-  useEffect(() => {
-    let cancelled = false;
-    const raf = requestAnimationFrame(() => {
-      requestAnimationFrame(() => {
-        if (!cancelled) {
-          inputRef.current?.focus();
-        }
-      });
-    });
-    return () => {
-      cancelled = true;
-      cancelAnimationFrame(raf);
-    };
-  }, []);
-
-  return (
-    <div className={searchRow()}>
-      <Icon name="search" size="sm" className={searchIcon()} />
-      <input
-        ref={inputRef}
-        type="text"
-        className={searchInput()}
-        value={value}
-        onChange={(event) => onChange(event.currentTarget.value)}
-        placeholder="Search…"
-        aria-label="Search sort options"
-      />
-    </div>
-  );
-};
-
 export const SortMenu = <SortKey extends string = string>({
   items = [],
   value,
@@ -279,7 +235,13 @@ export const SortMenu = <SortKey extends string = string>({
     ? [
         {
           id: "sort-menu-search",
-          custom: <SearchField value={search} onChange={setSearch} />,
+          custom: (
+            <SelectableListSearch
+              value={search}
+              onChange={setSearch}
+              aria-label="Search sort options"
+            />
+          ),
         },
         ...sorterItems,
         ...(visibleSorters.length === 0
diff --git a/libs/@hashintel/ds-components/src/components/Menu/SelectableList/selectable-list-search.recipe.ts b/libs/@hashintel/ds-components/src/components/Menu/SelectableList/selectable-list-search.recipe.ts
new file mode 100644
index 00000000000..811c64f1a2b
--- /dev/null
+++ b/libs/@hashintel/ds-components/src/components/Menu/SelectableList/selectable-list-search.recipe.ts
@@ -0,0 +1,62 @@
+import { cva } from "@hashintel/ds-helpers/css";
+
+export const searchRow = cva({
+  base: {
+    display: "flex",
+    alignItems: "center",
+    gap: "1.5",
+    marginTop:
+      "[calc(-1 * (var(--spacing-1) + var(--selectable-list-padding-y)))]",
+    marginInline:
+      "[calc(-1 * (var(--selectable-list-padding-x) + var(--spacing-1)))]",
+    marginBottom: "0.5",
+    paddingInline: "[var(--selectable-list-padding-x)]",
+    paddingTop: "1.5",
+    paddingBottom: "1",
+    background: "neutral.s10",
+    borderBottom: "1px solid {colors.neutral.s35}",
+    // When the dropdown flips above the trigger, move the search to the
+    // bottom edge so it stays adjacent to the trigger (the list content is a
+    // flex column, so `order` relocates it without changing DOM order)
+    "[data-placement^='top'] &": {
+      order: "[1]",
+      marginTop: "0.5",
+      marginBottom:
+        "[calc(-1 * (var(--spacing-1) + var(--selectable-list-padding-y)))]",
+      paddingTop: "1",
+      paddingBottom: "1.5",
+      borderBottom: "none",
+      borderTop: "1px solid {colors.neutral.s35}",
+    },
+  },
+});
+
+export const searchIcon = cva({
+  base: {
+    color: "fg.muted",
+    flexShrink: "0",
+  },
+});
+
+export const searchInput = cva({
+  base: {
+    flex: "1",
+    minWidth: "0",
+    appearance: "none",
+    border: "none",
+    background: "[transparent]",
+    outline: "none",
+    padding: "0",
+    font: "[inherit]",
+    color: "[inherit]",
+    _placeholder: { color: "neutral.s80" },
+  },
+});
+
+export const searchEmpty = cva({
+  base: {
+    display: "block",
+    color: "neutral.s90",
+    paddingBlock: "0.5",
+  },
+});
diff --git a/libs/@hashintel/ds-components/src/components/Menu/SelectableList/selectable-list-search.tsx b/libs/@hashintel/ds-components/src/components/Menu/SelectableList/selectable-list-search.tsx
new file mode 100644
index 00000000000..b2d029c5a4a
--- /dev/null
+++ b/libs/@hashintel/ds-components/src/components/Menu/SelectableList/selectable-list-search.tsx
@@ -0,0 +1,58 @@
+import { useEffect, useRef } from "react";
+
+import { Icon } from "../../Icon/icon";
+import {
+  searchIcon,
+  searchInput,
+  searchRow,
+} from "./selectable-list-search.recipe";
+
+/**
+ * A search field to embed as a custom row at the top of a SelectableList
+ * (`{ custom: <SelectableListSearch ... /> }`). It focuses itself when
+ * mounted — pair with a lazily mounted dropdown so focus lands when it opens
+ * (the double rAF lets ark move focus to the list content first).
+ */
+export const SelectableListSearch = ({
+  value,
+  onChange,
+  placeholder = "Search…",
+  "aria-label": ariaLabel,
+}: {
+  value: string;
+  onChange: (next: string) => void;
+  placeholder?: string;
+  "aria-label": string;
+}) => {
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+    let cancelled = false;
+    const raf = requestAnimationFrame(() => {
+      requestAnimationFrame(() => {
+        if (!cancelled) {
+          inputRef.current?.focus();
+        }
+      });
+    });
+    return () => {
+      cancelled = true;
+      cancelAnimationFrame(raf);
+    };
+  }, []);
+
+  return (
+    <div className={searchRow()} data-selectable-list-search="">
+      <Icon name="search" size="sm" className={searchIcon()} />
+      <input
+        ref={inputRef}
+        type="text"
+        className={searchInput()}
+        value={value}
+        onChange={(event) => onChange(event.currentTarget.value)}
+        placeholder={placeholder}
+        aria-label={ariaLabel}
+      />
+    </div>
+  );
+};
diff --git a/libs/@hashintel/ds-components/src/components/Menu/SelectableList/selectable-list.recipe.ts b/libs/@hashintel/ds-components/src/components/Menu/SelectableList/selectable-list.recipe.ts
index 17f528941cb..daaf6410783 100644
--- a/libs/@hashintel/ds-components/src/components/Menu/SelectableList/selectable-list.recipe.ts
+++ b/libs/@hashintel/ds-components/src/components/Menu/SelectableList/selectable-list.recipe.ts
@@ -6,6 +6,15 @@ export const styles = sva({
   slots: ["content", "group", "groupLabel", "emptyContainer", "customItem"],
   base: {
     content: {
+      // A flex column so rows can re-order themselves by placement (the
+      // search row moves to the bottom edge when the dropdown flips upward).
+      // Children must not shrink, or long lists would compress rows to fit
+      // maxHeight instead of scrolling.
+      display: "flex",
+      flexDirection: "column",
+      "& > *": {
+        flexShrink: "0",
+      },
       backgroundColor: "white",
       border: "1px solid {colors.bd.subtle}",
       borderRadius: "lg",
@@ -55,6 +64,12 @@ export const styles = sva({
       width: "full",
       paddingX: "[var(--selectable-list-padding-x)]",
       paddingY: "[var(--selectable-list-padding-y)]",
+      // A search row moves to the bottom edge when the dropdown flips upward
+      "[data-placement^='top'] &": {
+        "&:has([data-selectable-list-search])": {
+          order: "[1]",
+        },
+      },
     },
   },
   variants: {
diff --git a/libs/@hashintel/ds-components/src/components/Menu/SelectableList/selectable-list.tsx b/libs/@hashintel/ds-components/src/components/Menu/SelectableList/selectable-list.tsx
index 955f9961684..8e0b344bf74 100644
--- a/libs/@hashintel/ds-components/src/components/Menu/SelectableList/selectable-list.tsx
+++ b/libs/@hashintel/ds-components/src/components/Menu/SelectableList/selectable-list.tsx
@@ -119,7 +119,19 @@ const CustomRow = ({ item, ctx }: { item: CustomItem; ctx: RenderCtx }) => {
       className={classes.customItem}
       data-selectable-list-custom={getItemId(item)}
       onKeyDown={(event) => {
-        if (event.key !== "Tab" && event.key !== "Escape") {
+        // In a Select, arrows and Enter fall through to zag's content handler
+        // so the list highlight/selection can be driven from inside the row
+        // (zag already ignores typing from editable elements, but Space and
+        // Home/End would act on both the caret and the list, so they stay
+        // stopped along with everything else).
+        const passThrough =
+          event.key === "Tab" ||
+          event.key === "Escape" ||
+          (ctx.as === "Select" &&
+            (event.key === "ArrowDown" ||
+              event.key === "ArrowUp" ||
+              event.key === "Enter"));
+        if (!passThrough) {
           event.stopPropagation();
         }
       }}
diff --git a/libs/@hashintel/ds-components/src/components/Select/multi-select.stories.tsx b/libs/@hashintel/ds-components/src/components/Select/multi-select.stories.tsx
new file mode 100644
index 00000000000..ac55527476b
--- /dev/null
+++ b/libs/@hashintel/ds-components/src/components/Select/multi-select.stories.tsx
@@ -0,0 +1,313 @@
+import { useState } from "react";
+
+import { css } from "@hashintel/ds-helpers/css";
+
+import { Select } from "./select";
+
+import type { ItemOrGroup } from "../Menu/SelectableList/selectable-list";
+import type { MultiSelectItem, SelectItem } from "./select";
+import type { Story, StoryDefault } from "@ladle/react";
+
+export default {
+  title: "Components/Select",
+} satisfies StoryDefault;
+
+const sampleItems: Array<ItemOrGroup<SelectItem>> = [
+  { value: "apple", text: "Apple" },
+  { value: "banana", text: "Banana" },
+  { value: "cherry", text: "Cherry" },
+  { value: "date", text: "Date" },
+];
+
+const noop = () => {};
+
+const findItemText = (
+  items: ReadonlyArray<ItemOrGroup<SelectItem>>,
+  value: string,
+): string => {
+  for (const entry of items) {
+    if ("items" in entry) {
+      const found = entry.items.find((it) => it.value === value);
+      if (found) {
+        return found.text;
+      }
+    } else if (entry.value === value) {
+      return entry.text;
+    }
+  }
+  return value;
+};
+
+const sectionStyle = css({
+  display: "flex",
+  flexDirection: "column",
+  gap: "[32px]",
+  background: "neutral.s10",
+});
+
+const groupStyle = css({
+  display: "flex",
+  flexDirection: "column",
+  gap: "[12px]",
+});
+
+const subheadingStyle: React.CSSProperties = {
+  fontSize: 12,
+  fontWeight: 500,
+  color: "#666",
+};
+
+// Declared `as const` so a `Select` using these items can narrow `value` /
+// `onChange` to the literal union of these values.
+const colorItems = [
+  { value: "red", text: "Red" },
+  { value: "green", text: "Green" },
+  { value: "blue", text: "Blue" },
+  { value: "orange", text: "Orange" },
+] as const;
+
+type ColorValue = (typeof colorItems)[number]["value"];
+
+const ColorSwatch = ({ value }: { value: string }) => (
+  <span
+    aria-hidden="true"
+    style={{
+      display: "inline-block",
+      width: 10,
+      height: 10,
+      borderRadius: "50%",
+      background: value,
+      flexShrink: 0,
+    }}
+  />
+);
+
+const renderColorItem = (value: string): React.ReactNode => (
+  <span style={{ display: "flex", alignItems: "center", gap: 8 }}>
+    <ColorSwatch value={value} />
+    {findItemText(colorItems, value)}
+  </span>
+);
+
+const multiItemVariants = ["checkbox", "tick", "highlight"] as const;
+
+const tonedItems = [
+  { value: "neutral", text: "Neutral (default)" },
+  { value: "brand", text: "Brand", tone: "brand" as const },
+  { value: "error", text: "Error", tone: "error" as const },
+];
+
+const suffixItems: Array<MultiSelectItem> = [
+  { value: "apple", text: "Apple", suffix: "52 kcal", showOnlyButton: true },
+  {
+    value: "banana",
+    text: "Banana",
+    suffix: "89 kcal",
+    showOnlyButton: true,
+    tone: "brand",
+  },
+  { value: "cherry", text: "Cherry", showOnlyButton: true },
+  { value: "date", text: "Date", suffix: "282 kcal" },
+];
+
+export const Multiple: Story = () => {
+  const [fruits, setFruits] = useState<string[]>(["apple", "banana"]);
+  const [byVariant, setByVariant] = useState<Record<string, string[]>>({
+    checkbox: ["apple"],
+    tick: ["apple"],
+    highlight: ["apple"],
+  });
+  const [tonedByVariant, setTonedByVariant] = useState<
+    Record<string, string[]>
+  >({
+    checkbox: ["neutral", "brand", "error"],
+    tick: ["neutral", "brand", "error"],
+    highlight: ["neutral", "brand", "error"],
+  });
+  const [capped, setCapped] = useState<string[]>(["apple", "banana"]);
+  const [suffixValues, setSuffixValues] = useState<string[]>([
+    "apple",
+    "banana",
+  ]);
+  const [colors, setColors] = useState<ColorValue[]>(["red", "blue"]);
+  const [clearableValues, setClearableValues] = useState<string[]>(["cherry"]);
+  const [searchableValues, setSearchableValues] = useState<string[]>(["apple"]);
+  const [lastSearch, setLastSearch] = useState("");
+
+  return (
+    <div className={sectionStyle}>
+      <div className={groupStyle}>
+        <span style={subheadingStyle}>Default (checkbox items)</span>
+        <Select
+          multiple
+          items={sampleItems}
+          value={fruits}
+          onChange={setFruits}
+          placeholder="Select fruits..."
+        />
+      </div>
+      <div className={groupStyle}>
+        <span style={subheadingStyle}>Item variants</span>
+        <div
+          style={{
+            display: "grid",
+            gridTemplateColumns: "repeat(3, minmax(0, 1fr))",
+            columnGap: 32,
+            rowGap: 12,
+            alignItems: "center",
+          }}
+        >
+          {multiItemVariants.map((itemVariant) => (
+            <span key={itemVariant} style={subheadingStyle}>
+              {itemVariant}
+            </span>
+          ))}
+          {multiItemVariants.map((itemVariant) => (
+            <Select
+              key={itemVariant}
+              multiple
+              items={sampleItems.map((item) => ({
+                ...item,
+                variant: itemVariant,
+              }))}
+              value={byVariant[itemVariant] ?? []}
+              onChange={(next) =>
+                setByVariant((prev) => ({ ...prev, [itemVariant]: next }))
+              }
+            />
+          ))}
+        </div>
+      </div>
+      <div className={groupStyle}>
+        <span style={subheadingStyle}>Item tones (mapped to selectedTone)</span>
+        <div
+          style={{
+            display: "grid",
+            gridTemplateColumns: "repeat(3, minmax(0, 1fr))",
+            columnGap: 32,
+            rowGap: 12,
+            alignItems: "center",
+          }}
+        >
+          {multiItemVariants.map((itemVariant) => (
+            <span key={itemVariant} style={subheadingStyle}>
+              {itemVariant}
+            </span>
+          ))}
+          {multiItemVariants.map((itemVariant) => (
+            <Select
+              key={itemVariant}
+              multiple
+              items={tonedItems.map((item) => ({
+                ...item,
+                variant: itemVariant,
+              }))}
+              value={tonedByVariant[itemVariant] ?? []}
+              onChange={(next) =>
+                setTonedByVariant((prev) => ({ ...prev, [itemVariant]: next }))
+              }
+            />
+          ))}
+        </div>
+      </div>
+      <div className={groupStyle}>
+        <span style={subheadingStyle}>
+          suffix + showOnlyButton — hover a row: "Only" replaces the suffix
+          (Date has a suffix but no Only button)
+        </span>
+        <Select
+          multiple
+          items={suffixItems}
+          value={suffixValues}
+          onChange={setSuffixValues}
+        />
+      </div>
+      <div className={groupStyle}>
+        <span style={subheadingStyle}>
+          maxItems=2 + searchable — unselected items disable once 2 values are
+          selected
+        </span>
+        <Select
+          multiple
+          maxItems={2}
+          searchable={{ searchable: true, onSearch: noop }}
+          items={sampleItems}
+          value={capped}
+          onChange={setCapped}
+        />
+      </div>
+      <div className={groupStyle}>
+        <span style={subheadingStyle}>
+          renderItem + renderSelectedItem (receives all selected values)
+        </span>
+        <Select
+          multiple
+          items={colorItems}
+          value={colors}
+          onChange={(next) => {
+            // Compile-time narrowing proof — fails if TValue widens to `string`.
+            const narrowed: ColorValue[] = next;
+            setColors(narrowed);
+          }}
+          renderItem={renderColorItem}
+          renderSelectedItem={(values) => (
+            <span style={{ display: "flex", alignItems: "center", gap: 8 }}>
+              {values.map((val) => (
+                <ColorSwatch key={val} value={val} />
+              ))}
+              {values.length} selected
+            </span>
+          )}
+        />
+      </div>
+      <div className={groupStyle}>
+        <span style={subheadingStyle}>
+          Searchable — onSearch reported: "{lastSearch}"
+        </span>
+        <Select
+          multiple
+          searchable={{ searchable: true, onSearch: setLastSearch }}
+          items={sampleItems}
+          value={searchableValues}
+          onChange={setSearchableValues}
+        />
+      </div>
+      <div className={groupStyle}>
+        <span style={subheadingStyle}>Clearable</span>
+        <Select
+          multiple
+          items={sampleItems}
+          value={clearableValues}
+          onChange={setClearableValues}
+          clearable={{ clearable: true, onClear: () => setClearableValues([]) }}
+        />
+      </div>
+      <div className={groupStyle}>
+        <span style={subheadingStyle}>Readonly</span>
+        <Select
+          multiple
+          items={sampleItems}
+          value={["apple", "cherry"]}
+          onChange={noop}
+          readonly
+        />
+      </div>
+      <div style={{ display: "none" }}>
+        {/* @ts-expect-error — maxItems is only allowed when multiple is set */}
+        <Select
+          items={sampleItems}
+          value="apple"
+          onChange={noop}
+          maxItems={2}
+        />
+        <Select
+          multiple
+          items={colorItems}
+          // @ts-expect-error — "yellow" is not a value declared in colorItems
+          value={["yellow"]}
+          onChange={noop}
+        />
+      </div>
+    </div>
+  );
+};
diff --git a/libs/@hashintel/ds-components/src/components/Select/select.recipe.ts b/libs/@hashintel/ds-components/src/components/Select/select.recipe.ts
index dd40e4ab575..5fb26e3939d 100644
--- a/libs/@hashintel/ds-components/src/components/Select/select.recipe.ts
+++ b/libs/@hashintel/ds-components/src/components/Select/select.recipe.ts
@@ -1,8 +1,43 @@
-import { sva } from "@hashintel/ds-helpers/css";
+import { css, cva, sva } from "@hashintel/ds-helpers/css";
 
 import { formSizes } from "../../util/form-size.recipe";
 import { formWidths } from "../../util/form-width.recipe";
 
+// The default suffix content of a multi select item, swapped out for the
+// "Only" button while the item is hovered
+export const suffixDefaultContentClass = css({
+  "[data-part='item']:hover &": {
+    display: "none",
+  },
+});
+
+export const onlyButtonRecipe = cva({
+  base: {
+    display: "none",
+    cursor: "pointer",
+    fontWeight: "[500]",
+    _hover: {
+      textDecoration: "underline",
+    },
+    "[data-part='item']:hover &": {
+      display: "inline-flex",
+    },
+  },
+  variants: {
+    tone: {
+      neutral: {
+        color: "neutral.s110",
+        _hover: { color: "neutral.s125" },
+      },
+      brand: {
+        color: "blue.s100",
+        _hover: { color: "blue.s110" },
+      },
+    },
+  },
+  defaultVariants: { tone: "neutral" },
+});
+
 export const selectRecipe = sva({
   slots: [
     "wrapper",
@@ -49,7 +84,18 @@ export const selectRecipe = sva({
         opacity: "1",
         visibility: "visible",
       },
+      // Visibility and opacity are split across the two focus rules: focus-within
+      // drives visibility so the clear stays keyboard-reachable (Chromium's tab
+      // navigation honours :focus-within-dependent visibility but skips elements
+      // revealed via :has(:focus-visible)), while opacity — the actual visual
+      // reveal — only applies for keyboard (:focus-visible) focus.
       "&:focus-within [data-part='clear']": {
+        visibility: "visible",
+      },
+      "&:has(:focus-visible) [data-part='clear']": {
+        opacity: "1",
+      },
+      "&:has([data-part='trigger'][data-state='open']) [data-part='clear']": {
         opacity: "1",
         visibility: "visible",
       },
@@ -391,6 +437,17 @@ export const selectRecipe = sva({
     },
     willClear: { true: {} },
     hasPrefix: { true: {} },
+    // Multi-select items need the same inter-item gap as Menu lists so that
+    // adjacent highlight-style selections read as separate rows
+    multiple: {
+      true: {
+        list: {
+          "& [data-part='item'] + [data-part='item']": {
+            marginTop: "[1px]",
+          },
+        },
+      },
+    },
     connectsRight: {
       true: {
         wrapper: {
diff --git a/libs/@hashintel/ds-components/src/components/Select/select.stories.tsx b/libs/@hashintel/ds-components/src/components/Select/select.stories.tsx
index 19fdaa78708..557095b8a73 100644
--- a/libs/@hashintel/ds-components/src/components/Select/select.stories.tsx
+++ b/libs/@hashintel/ds-components/src/components/Select/select.stories.tsx
@@ -11,6 +11,7 @@ import type { SelectItem } from "./select";
 import type { Story, StoryDefault } from "@ladle/react";
 
 type SelectProps = React.ComponentProps<typeof Select>;
+type SingleSelectProps = Extract<SelectProps, { multiple?: false }>;
 type Variant = NonNullable<SelectProps["variant"]>;
 type Align = NonNullable<SelectProps["align"]>;
 
@@ -68,7 +69,9 @@ const findItemText = (
 };
 
 const Controlled = (
-  props: Omit<SelectProps, "items"> & { items?: SelectProps["items"] },
+  props: Omit<SingleSelectProps, "items"> & {
+    items?: SingleSelectProps["items"];
+  },
 ) => {
   const { required: _required, ...rest } = props;
   const [value, setValue] = useState<string | null | undefined>(
@@ -78,7 +81,7 @@ const Controlled = (
     return (
       <Select
         {...(rest as Omit<
-          SelectProps,
+          SingleSelectProps,
           "value" | "onChange" | "items" | "required"
         >)}
         required
@@ -99,8 +102,8 @@ const Controlled = (
 };
 
 const ClearableSelect = (
-  props: Omit<SelectProps, "clearable" | "onChange" | "items"> & {
-    items?: SelectProps["items"];
+  props: Omit<SingleSelectProps, "clearable" | "onChange" | "items"> & {
+    items?: SingleSelectProps["items"];
   },
 ) => {
   const { required: _required, ...rest } = props;
@@ -192,7 +195,7 @@ const stateRows: Array<{
   key: string;
   label: string;
   clearable?: boolean;
-  extraProps: Partial<SelectProps>;
+  extraProps: Partial<SingleSelectProps>;
 }> = [
   { key: "disabled", label: "Disabled", extraProps: { disabled: true } },
   { key: "invalid", label: "Invalid", extraProps: { invalid: true } },
@@ -204,7 +207,7 @@ const stateRows: Array<{
     extraProps: {
       placeholder: "Placeholder text...",
       required: true,
-    } as Partial<SelectProps>,
+    } as Partial<SingleSelectProps>,
   },
   {
     key: "placeholder-not-required",
@@ -214,7 +217,12 @@ const stateRows: Array<{
   {
     key: "required",
     label: "Required",
-    extraProps: { required: true } as Partial<SelectProps>,
+    extraProps: { required: true } as Partial<SingleSelectProps>,
+  },
+  {
+    key: "searchable",
+    label: "Searchable",
+    extraProps: { searchable: { searchable: true, onSearch: noop } },
   },
   {
     key: "hide-arrow",
@@ -308,9 +316,9 @@ export default {
     size: "md",
     hideArrow: false,
   },
-} satisfies StoryDefault<SelectProps>;
+} satisfies StoryDefault<SingleSelectProps>;
 
-export const Default: Story<SelectProps> = (args) => (
+export const Default: Story<SingleSelectProps> = (args) => (
   <div className={sectionStyle}>
     {variants.map((variant) => (
       <div key={variant} className={groupStyle}>
@@ -372,7 +380,7 @@ export const Default: Story<SelectProps> = (args) => (
   </div>
 );
 
-export const Alignment: Story<SelectProps> = (args) => (
+export const Alignment: Story<SingleSelectProps> = (args) => (
   <div
     style={{
       display: "grid",
@@ -394,7 +402,7 @@ export const Alignment: Story<SelectProps> = (args) => (
   </div>
 );
 
-export const Size: Story<SelectProps> = (args) => (
+export const Size: Story<SingleSelectProps> = (args) => (
   <div
     style={{
       display: "grid",
@@ -497,7 +505,7 @@ const renderColorHalfHeight = (value: string): React.ReactNode => (
   </span>
 );
 
-export const CustomRender: Story<SelectProps> = (args) => {
+export const CustomRender: Story<SingleSelectProps> = (args) => {
   const [valueA, setValueA] = useState<ColorValue | null>("red");
   const [valueB, setValueB] = useState<ColorValue | null>("green");
   const [valueC, setValueC] = useState<ColorValue | null>("blue");
@@ -505,7 +513,7 @@ export const CustomRender: Story<SelectProps> = (args) => {
   const [valueE, setValueE] = useState<ColorValue | null>("red");
   const [valueF, setValueF] = useState<ColorValue | null>("green");
   const spreadArgs = args as Omit<
-    SelectProps,
+    SingleSelectProps,
     "items" | "value" | "onChange" | "required"
   >;
 
@@ -617,7 +625,7 @@ export const CustomRender: Story<SelectProps> = (args) => {
   );
 };
 
-export const Widths: Story<SelectProps> = (args) => (
+export const Widths: Story<SingleSelectProps> = (args) => (
   <div className={sectionStyle}>
     {rowVariants.map((rv) => (
       <div key={rv.label} className={groupStyle}>
diff --git a/libs/@hashintel/ds-components/src/components/Select/select.tsx b/libs/@hashintel/ds-components/src/components/Select/select.tsx
index 4841f50151d..31f824615e9 100644
--- a/libs/@hashintel/ds-components/src/components/Select/select.tsx
+++ b/libs/@hashintel/ds-components/src/components/Select/select.tsx
@@ -1,7 +1,15 @@
 import { createListCollection } from "@ark-ui/react/collection";
 import { Portal } from "@ark-ui/react/portal";
-import { Select as ArkSelect } from "@ark-ui/react/select";
-import { useId, useMemo, useRef } from "react";
+import { Select as ArkSelect, useSelectContext } from "@ark-ui/react/select";
+import {
+  Fragment,
+  useCallback,
+  useEffect,
+  useId,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
 
 import { cx } from "@hashintel/ds-helpers/css";
 
@@ -12,17 +20,25 @@ import { Icon } from "../Icon/icon";
 import { LoadingSpinner } from "../Loading/loading-spinner";
 import {
   SelectableList,
+  isCustomItem,
   type Item,
   type ItemOrGroup,
 } from "../Menu/SelectableList/selectable-list";
+import { SelectableListSearch } from "../Menu/SelectableList/selectable-list-search";
+import { searchEmpty } from "../Menu/SelectableList/selectable-list-search.recipe";
 import { getItemId } from "../Menu/SelectableList/selectable-list-util";
 import { InputConnector } from "../TextInput/input-connector";
-import { selectRecipe } from "./select.recipe";
+import {
+  onlyButtonRecipe,
+  selectRecipe,
+  suffixDefaultContentClass,
+} from "./select.recipe";
 
 import type {
   FormInputSize,
   FormInputWidth,
   SharedInputProps,
+  Tone,
 } from "../../util/form-shared";
 import type { IconName } from "../Icon/icon";
 
@@ -32,6 +48,18 @@ export type SelectItem<TValue extends string = string> = {
   disabled?: boolean;
 };
 
+export type MultiSelectItem<TValue extends string = string> =
+  SelectItem<TValue> & {
+    /** How selection is indicated for this item in the dropdown. Defaults to `checkbox`. */
+    variant?: "checkbox" | "tick" | "highlight";
+    /** The tone of this item's selected indicator (checkbox fill, tick or highlight color). Defaults to `neutral`. */
+    tone?: Exclude<Tone, "warning" | "success">;
+    /** Optional content aligned to the right of the item in the dropdown */
+    suffix?: React.ReactNode;
+    /** Show an "Only" button while the item is hovered, which sets the selection to just this item. It renders in the suffix position, replacing `suffix` while visible. */
+    showOnlyButton?: boolean;
+  };
+
 type SelectBaseProps<TValue extends string> = {
   /** An optional placeholder shown when no value is selected */
   placeholder?: string;
@@ -61,35 +89,59 @@ type SelectBaseProps<TValue extends string> = {
   onClick?: React.MouseEventHandler<Element>;
   onKeyDown?: React.KeyboardEventHandler<Element>;
   tabIndex?: number;
-  items: ReadonlyArray<ItemOrGroup<SelectItem<TValue>>>;
   /** Custom renderer for items in the dropdown. Defaults to the item's `text`. Note that if connectToLeftInput or connectToRightInput the height of the rendered selected item is clamped to the default height of select so that it correctly aligns. */
   renderItem?: (value: TValue) => React.ReactNode;
-  /** Custom renderer for the selected value in the trigger. Defaults to `renderItem`, or the item's `text` if neither is provided. Note that if connectToLeftInput or connectToRightInput the height of the rendered selected item is clamped to the default height of select so that it correctly aligns. */
-  renderSelectedItem?: (value: TValue) => React.ReactNode;
   /** The input ref - this is different to the ref, which is the containing element. This refers instead to a hidden select element (the actual ui uses a button to handle custom styling). Use this to access the internal select state and/or to set focus. */
   inputRef?: React.Ref<HTMLSelectElement>;
   /** Optional custom message for scenarios where there are no items available to show */
   emptyState?: React.ReactNode;
+  /** Set to add a search field to the dropdown that filters the items by their text. onSearch is called as the search value changes, including with "" when the dropdown closes and the search resets. */
+  searchable?: {
+    searchable: boolean;
+    onSearch: (search: string) => void;
+  };
 } & Omit<
   SharedInputProps<HTMLButtonElement, string | null | undefined>,
   "value" | "onChange" | "required" | "inputRef"
 > &
   React.AriaAttributes;
 
+type SelectSingleProps<TValue extends string> = {
+  /** Set to allow selecting multiple values */
+  multiple?: false;
+  maxItems?: never;
+  items: ReadonlyArray<ItemOrGroup<SelectItem<TValue>>>;
+  /** Custom renderer for the selected value in the trigger. Defaults to `renderItem`, or the item's `text` if neither is provided. Note that if connectToLeftInput or connectToRightInput the height of the rendered selected item is clamped to the default height of select so that it correctly aligns. */
+  renderSelectedItem?: (value: TValue) => React.ReactNode;
+} & (
+  | {
+      required: true;
+      value: NoInfer<TValue>;
+      onChange: (value: NoInfer<TValue>) => void;
+    }
+  | {
+      required?: false;
+      value: NoInfer<TValue> | null | undefined;
+      onChange: (value: NoInfer<TValue> | null | undefined) => void;
+    }
+);
+
+type SelectMultipleProps<TValue extends string> = {
+  /** Set to allow selecting multiple values. The dropdown stays open while selecting, and items indicate selection with a checkbox unless they set their own `variant`. */
+  multiple: true;
+  /** The maximum number of values that can be selected. Once reached, unselected items are disabled until a value is deselected. */
+  maxItems?: number;
+  items: ReadonlyArray<ItemOrGroup<MultiSelectItem<TValue>>>;
+  /** Custom renderer for the selected values in the trigger. Defaults to rendering each selected value with `renderItem` (or the item's `text`), comma-separated. Note that if connectToLeftInput or connectToRightInput the height of the rendered selected items is clamped to the default height of select so that it correctly aligns. */
+  renderSelectedItem?: (values: TValue[]) => React.ReactNode;
+  required?: boolean;
+  value: ReadonlyArray<NoInfer<TValue>>;
+  onChange: (value: Array<NoInfer<TValue>>) => void;
+};
+
 export type SelectProps<TValue extends string = string> =
   SelectBaseProps<TValue> &
-    (
-      | {
-          required: true;
-          value: NoInfer<TValue>;
-          onChange: (value: NoInfer<TValue>) => void;
-        }
-      | {
-          required?: false;
-          value: NoInfer<TValue> | null | undefined;
-          onChange: (value: NoInfer<TValue> | null | undefined) => void;
-        }
-    );
+    (SelectSingleProps<TValue> | SelectMultipleProps<TValue>);
 
 type SelectSlots = ReturnType<typeof selectRecipe>;
 type Prefix =
@@ -156,14 +208,58 @@ function findSelectItem<TValue extends string>(
 }
 
 function mapToMenuItems<TValue extends string>(
-  items: ReadonlyArray<ItemOrGroup<SelectItem<TValue>>>,
+  items: ReadonlyArray<ItemOrGroup<MultiSelectItem<TValue>>>,
   renderItem: (value: TValue) => React.ReactNode,
+  options: {
+    multiple: boolean;
+    /** When defined, values outside the set are disabled (a multi select at `maxItems`) */
+    selectableValues: ReadonlySet<string> | undefined;
+    /** Sets the selection to just the given value — backs the per-item "Only" button */
+    selectOnly: (value: TValue) => void;
+  },
 ): Array<ItemOrGroup<Item>> {
-  const toItem = (it: SelectItem<TValue>): Item => ({
+  const toSuffix = (it: MultiSelectItem<TValue>): React.ReactNode => {
+    if (!it.showOnlyButton || it.disabled) {
+      return it.suffix;
+    }
+    return (
+      <>
+        {it.suffix !== undefined && (
+          <span className={suffixDefaultContentClass}>{it.suffix}</span>
+        )}
+        <button
+          type="button"
+          className={onlyButtonRecipe({
+            tone: it.tone === "brand" ? "brand" : "neutral",
+          })}
+          onPointerDown={(event) => {
+            event.preventDefault();
+            event.stopPropagation();
+          }}
+          onPointerUp={(event) => {
+            event.stopPropagation();
+          }}
+          onClick={(event) => {
+            event.preventDefault();
+            event.stopPropagation();
+            options.selectOnly(it.value);
+          }}
+        >
+          Only
+        </button>
+      </>
+    );
+  };
+  const toItem = (it: MultiSelectItem<TValue>): Item => ({
     id: it.value,
     text: renderItem(it.value),
-    disabled: it.disabled,
-    selectedStyle: "tick",
+    disabled:
+      it.disabled ||
+      (options.selectableValues !== undefined &&
+        !options.selectableValues.has(it.value)),
+    selectedStyle: options.multiple ? (it.variant ?? "checkbox") : "tick",
+    selectedTone: it.tone,
+    suffix: toSuffix(it),
     subItems: undefined,
     onClick: () => {},
   });
@@ -174,12 +270,57 @@ function mapToMenuItems<TValue extends string>(
   );
 }
 
+/**
+ * While a search filter is active, keeps the highlight on the first visible
+ * item, so arrows/Enter from the search field always operate on the filtered
+ * results — the previous highlight may have been filtered out of the
+ * collection, which would strand zag's arrow navigation.
+ */
+const SearchHighlightSync = ({
+  search,
+  firstVisibleValue,
+}: {
+  search: string;
+  firstVisibleValue: string | undefined;
+}) => {
+  const select = useSelectContext();
+  // Re-sync when the search OR the first match changes (results can arrive
+  // after the query, e.g. loading or onSearch-driven fetches), but not on
+  // plain re-renders — arrow-key navigation must keep its highlight.
+  const lastSynced = useRef<{
+    search: string;
+    firstVisibleValue: string | undefined;
+  }>({ search: "", firstVisibleValue: undefined });
+
+  useEffect(() => {
+    const last = lastSynced.current;
+    if (
+      last.search === search &&
+      last.firstVisibleValue === firstVisibleValue
+    ) {
+      return;
+    }
+    lastSynced.current = { search, firstVisibleValue };
+    if (search === "") {
+      return;
+    }
+    if (firstVisibleValue !== undefined) {
+      select.setHighlightValue(firstVisibleValue);
+    } else {
+      select.clearHighlightValue();
+    }
+  }, [search, firstVisibleValue, select]);
+
+  return null;
+};
+
+/** Flattens groups and drops custom rows (e.g. the search field), which must not enter the collection as selectable options */
 function flattenItems(items: Array<ItemOrGroup<Item>>): Item[] {
   const flat: Item[] = [];
   for (const entry of items) {
     if ("items" in entry) {
       flat.push(...entry.items);
-    } else {
+    } else if (!isCustomItem(entry)) {
       flat.push(entry);
     }
   }
@@ -202,6 +343,8 @@ export const Select = <TValue extends string>({
   onKeyDown,
   tabIndex,
   items,
+  multiple,
+  maxItems,
   renderItem,
   renderSelectedItem,
   className,
@@ -220,6 +363,7 @@ export const Select = <TValue extends string>({
   invalid,
   autoFocus,
   emptyState,
+  searchable,
   ...ariaProps
 }: SelectProps<TValue>) => {
   const portalContainerRef = usePortalContainerRef();
@@ -235,23 +379,69 @@ export const Select = <TValue extends string>({
   const connectsLeft = connectToLeftInput && variant === "default";
   const connectsRight = connectToRightInput && variant === "default";
 
-  const orphan = useMemo<SelectItem<TValue> | undefined>(() => {
-    if (value == null || value === "" || findSelectItem(items, value)) {
-      return undefined;
+  const selectedValues = useMemo<TValue[]>(() => {
+    if (multiple) {
+      return [...(value as ReadonlyArray<TValue>)];
     }
-    return { value, text: value, disabled: true };
-  }, [items, value]);
+    const single = value as TValue | null | undefined;
+    return single != null && single !== "" ? [single] : [];
+  }, [multiple, value]);
+  const hasSelection = selectedValues.length > 0;
+
+  const orphans = useMemo<Array<SelectItem<TValue>>>(
+    () =>
+      selectedValues
+        .filter((val) => !findSelectItem(items, val))
+        .map((val) => ({ value: val, text: val, disabled: true })),
+    [items, selectedValues],
+  );
 
   const effectiveItems = useMemo<
-    ReadonlyArray<ItemOrGroup<SelectItem<TValue>>>
+    ReadonlyArray<ItemOrGroup<MultiSelectItem<TValue>>>
   >(() => {
-    if (!orphan || (loading && items.length === 0)) {
+    if (orphans.length === 0 || (loading && items.length === 0)) {
       return items;
     }
-    return [orphan, ...items];
-  }, [items, orphan, loading]);
+    return [...orphans, ...items];
+  }, [items, orphans, loading]);
 
-  const selectedItem = findSelectItem(effectiveItems, value) ?? orphan;
+  const [search, setSearch] = useState("");
+  const showSearch = !!searchable?.searchable;
+  const onSearch = searchable?.onSearch;
+  const handleSearchChange = useCallback(
+    (next: string) => {
+      setSearch(next);
+      onSearch?.(next);
+    },
+    [onSearch],
+  );
+  const searchTerms = useMemo(
+    () => (showSearch ? search.toLowerCase().split(/\s+/).filter(Boolean) : []),
+    [showSearch, search],
+  );
+  const visibleItems = useMemo<
+    ReadonlyArray<ItemOrGroup<MultiSelectItem<TValue>>>
+  >(() => {
+    if (searchTerms.length === 0) {
+      return effectiveItems;
+    }
+    const matches = (it: MultiSelectItem<TValue>) => {
+      const label = it.text.toLowerCase();
+      return searchTerms.every((term) => label.includes(term));
+    };
+    const filtered: Array<ItemOrGroup<MultiSelectItem<TValue>>> = [];
+    for (const entry of effectiveItems) {
+      if ("items" in entry) {
+        const children = entry.items.filter(matches);
+        if (children.length > 0) {
+          filtered.push({ ...entry, items: children });
+        }
+      } else if (matches(entry)) {
+        filtered.push(entry);
+      }
+    }
+    return filtered;
+  }, [effectiveItems, searchTerms]);
 
   const resolvedRenderItem = useMemo<(value: TValue) => React.ReactNode>(
     () =>
@@ -259,22 +449,134 @@ export const Select = <TValue extends string>({
       ((val: TValue) => findSelectItem(effectiveItems, val)?.text ?? val),
     [renderItem, effectiveItems],
   );
-  const resolvedRenderSelectedItem = renderSelectedItem ?? resolvedRenderItem;
 
-  const isOptional = required !== true;
+  const renderSelectedContent = (): React.ReactNode => {
+    if (multiple) {
+      if (renderSelectedItem) {
+        return (renderSelectedItem as (values: TValue[]) => React.ReactNode)(
+          selectedValues,
+        );
+      }
+      return selectedValues.map((val, index) => (
+        <Fragment key={val}>
+          {index > 0 && ", "}
+          {resolvedRenderItem(val)}
+        </Fragment>
+      ));
+    }
+    const selectedValue = selectedValues[0];
+    if (selectedValue === undefined) {
+      return "";
+    }
+    const renderSingle =
+      (renderSelectedItem as
+        | ((value: TValue) => React.ReactNode)
+        | undefined) ?? resolvedRenderItem;
+    return renderSingle(selectedValue);
+  };
+
+  const isOptional = required !== true && !multiple;
+  const atMaxItems =
+    !!multiple && maxItems !== undefined && selectedValues.length >= maxItems;
+  // At maxItems only the currently-selected values stay enabled, so they can be deselected
+  const selectableAtMax = atMaxItems ? selectedValues : undefined;
+  const selectableAtMaxSet = useMemo<ReadonlySet<string> | undefined>(
+    () =>
+      selectableAtMax === undefined
+        ? undefined
+        : new Set<string>(selectableAtMax),
+    [selectableAtMax],
+  );
+
+  // The first search match the highlight can land on — must apply the same
+  // effective-disabled rule as the collection (explicit `disabled` plus rows
+  // disabled by `maxItems`), or Enter would target an unselectable row
+  const firstVisibleValue = useMemo<TValue | undefined>(() => {
+    const isEnabled = (it: MultiSelectItem<TValue>) =>
+      !it.disabled &&
+      (selectableAtMaxSet === undefined || selectableAtMaxSet.has(it.value));
+    for (const entry of visibleItems) {
+      if ("items" in entry) {
+        const first = entry.items.find(isEnabled);
+        if (first) {
+          return first.value;
+        }
+      } else if (isEnabled(entry)) {
+        return entry.value;
+      }
+    }
+    return undefined;
+  }, [visibleItems, selectableAtMaxSet]);
+
+  const selectOnly = useCallback(
+    (val: TValue) => {
+      (onChange as (value: TValue[]) => void)([val]);
+    },
+    [onChange],
+  );
+  const resolvedEmptyState =
+    emptyState ?? (loading ? "Loading options\u2026" : "No options available");
   const menuItems = useMemo(() => {
-    const mapped = mapToMenuItems(effectiveItems, resolvedRenderItem);
-    if (!isOptional || mapped.length === 0) {
+    const mapped: Array<ItemOrGroup<Item>> = mapToMenuItems(
+      visibleItems,
+      resolvedRenderItem,
+      {
+        multiple: !!multiple,
+        selectableValues: selectableAtMaxSet,
+        selectOnly,
+      },
+    );
+    const searching = searchTerms.length > 0;
+    if (isOptional && !searching && mapped.length > 0) {
+      const noneItem: Item = {
+        id: noneValue,
+        text: "\u200B",
+        subItems: undefined,
+        onClick: () => {},
+      };
+      mapped.unshift(noneItem);
+    }
+    if (!showSearch) {
       return mapped;
     }
-    const noneItem: Item = {
-      id: noneValue,
-      text: "\u200B",
-      subItems: undefined,
-      onClick: () => {},
-    };
-    return [noneItem, ...mapped];
-  }, [effectiveItems, isOptional, resolvedRenderItem, noneValue]);
+    const rows: Array<ItemOrGroup<Item>> = [
+      {
+        id: `${noneValue}-search`,
+        custom: (
+          <SelectableListSearch
+            value={search}
+            onChange={handleSearchChange}
+            aria-label="Search options"
+          />
+        ),
+      },
+      ...mapped,
+    ];
+    if (mapped.length === 0) {
+      rows.push({
+        id: `${noneValue}-search-empty`,
+        custom: (
+          <span className={searchEmpty()}>
+            {searching ? "No matching options" : resolvedEmptyState}
+          </span>
+        ),
+      });
+    }
+    return rows;
+  }, [
+    visibleItems,
+    isOptional,
+    resolvedRenderItem,
+    noneValue,
+    multiple,
+    selectableAtMaxSet,
+    selectOnly,
+    showSearch,
+    search,
+    handleSearchChange,
+    searchTerms,
+    resolvedEmptyState,
+  ]);
   const collection = useMemo(() => {
     const valueToText = new Map<string, string>();
     for (const entry of effectiveItems) {
@@ -305,6 +607,7 @@ export const Select = <TValue extends string>({
     size,
     align,
     width,
+    multiple: !!multiple,
     invalid: !!invalid,
     disabled: !!disabled,
     loading: !!loading,
@@ -315,10 +618,7 @@ export const Select = <TValue extends string>({
     customRender: !!renderItem || !!renderSelectedItem,
     clampTriggerHeight:
       (!!renderItem || !!renderSelectedItem) && (connectsLeft || connectsRight),
-    willClear:
-      showClear &&
-      clearable.clearable &&
-      (value === null || value === undefined || value === ""),
+    willClear: showClear && clearable.clearable && !hasSelection,
   });
 
   if (readonly) {
@@ -329,7 +629,7 @@ export const Select = <TValue extends string>({
         data-testid={testId}
         {...ariaProps}
       >
-        {selectedItem ? resolvedRenderSelectedItem(selectedItem.value) : ""}
+        {renderSelectedContent()}
       </span>
     );
   }
@@ -337,15 +637,30 @@ export const Select = <TValue extends string>({
   return (
     <ArkSelect.Root
       collection={collection}
-      value={value != null && value !== "" ? [value] : []}
+      value={selectedValues}
+      multiple={multiple}
+      closeOnSelect={!multiple}
       onValueChange={({ value: nextValue }) => {
+        if (multiple) {
+          const next = nextValue as TValue[];
+          if (maxItems !== undefined && next.length > maxItems) {
+            return;
+          }
+          (onChange as (value: TValue[]) => void)(next);
+          return;
+        }
         const next = nextValue[0];
         if (next === noneValue) {
           (onChange as (value: null) => void)(null);
           return;
         }
         if (next !== undefined) {
-          onChange(next as TValue);
+          (onChange as (value: TValue) => void)(next as TValue);
+        }
+      }}
+      onOpenChange={({ open }) => {
+        if (!open && search !== "") {
+          handleSearchChange("");
         }
       }}
       disabled={disabled}
@@ -362,6 +677,12 @@ export const Select = <TValue extends string>({
       className={cx(classes.wrapper, className)}
     >
       <ArkSelect.HiddenSelect ref={inputRef} />
+      {showSearch && (
+        <SearchHighlightSync
+          search={search}
+          firstVisibleValue={firstVisibleValue}
+        />
+      )}
       {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions -- click-to-focus container delegates to inner <input> */}
       <div
         ref={selectRef}
@@ -398,10 +719,10 @@ export const Select = <TValue extends string>({
             onBlur={onBlur}
             {...ariaProps}
           >
-            {selectedItem ? (
+            {hasSelection ? (
               <>
                 {(renderItem || renderSelectedItem) && "\u200B"}
-                {resolvedRenderSelectedItem(selectedItem.value)}
+                {renderSelectedContent()}
               </>
             ) : (
               (placeholder ?? "\u200B")
@@ -423,7 +744,7 @@ export const Select = <TValue extends string>({
               }}
               className={cx(
                 classes.clear,
-                (!clearable.clearable || !value) && classes.hideClear,
+                (!clearable.clearable || !hasSelection) && classes.hideClear,
               )}
               aria-label="Clear input"
             >
@@ -455,12 +776,9 @@ export const Select = <TValue extends string>({
             as="Select"
             className={classes.list}
             items={menuItems}
-            selected={value != null && value !== "" ? [value] : []}
+            selected={selectedValues}
             size={size}
-            emptyState={
-              emptyState ??
-              (loading ? "Loading options…" : "No options available")
-            }
+            emptyState={resolvedEmptyState}
           />
         </ArkSelect.Positioner>
       </Portal>
diff --git a/libs/@hashintel/ds-components/src/main.ts b/libs/@hashintel/ds-components/src/main.ts
index 66e814ee7d7..5920cdc26ff 100644
--- a/libs/@hashintel/ds-components/src/main.ts
+++ b/libs/@hashintel/ds-components/src/main.ts
@@ -66,7 +66,11 @@ export {
   type SegmentedControlItem,
   type SegmentedControlProps,
 } from "./components/SegmentedControl/segmented-control";
-export { Select, type SelectItem } from "./components/Select/select";
+export {
+  type MultiSelectItem,
+  Select,
+  type SelectItem,
+} from "./components/Select/select";
 export { Slider, type SliderProps } from "./components/Slider/slider";
 export { TextArea } from "./components/TextArea/text-area";
 export { TextInput } from "./components/TextInput/text-input";