From 98797e712ea49a15a58219b5596c1f922b9d591f Mon Sep 17 00:00:00 2001
From: alex leon <alex@leon.st>
Date: Wed, 2 Sep 2026 14:59:23 +0200
Subject: [PATCH 1/8] Add multiple option to select

---
 .../Select/multi-select.stories.tsx           | 223 ++++++++++++++++++
 .../src/components/Select/select.stories.tsx  |  31 +--
 .../src/components/Select/select.tsx          | 181 ++++++++++----
 libs/@hashintel/ds-components/src/main.ts     |   6 +-
 4 files changed, 380 insertions(+), 61 deletions(-)
 create mode 100644 libs/@hashintel/ds-components/src/components/Select/multi-select.stories.tsx

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..98b6df6b26d
--- /dev/null
+++ b/libs/@hashintel/ds-components/src/components/Select/multi-select.stories.tsx
@@ -0,0 +1,223 @@
+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 { 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;
+
+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 [capped, setCapped] = useState<string[]>(["apple", "banana"]);
+  const [colors, setColors] = useState<ColorValue[]>(["red", "blue"]);
+  const [clearableValues, setClearableValues] = useState<string[]>(["cherry"]);
+
+  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}>
+          maxItems=2 — unselected items disable once 2 values are selected
+        </span>
+        <Select
+          multiple
+          maxItems={2}
+          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}>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.stories.tsx b/libs/@hashintel/ds-components/src/components/Select/select.stories.tsx
index 19fdaa78708..6c2dd252e1e 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,7 @@ const stateRows: Array<{
   {
     key: "required",
     label: "Required",
-    extraProps: { required: true } as Partial<SelectProps>,
+    extraProps: { required: true } as Partial<SingleSelectProps>,
   },
   {
     key: "hide-arrow",
@@ -308,9 +311,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 +375,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 +397,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 +500,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 +508,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 +620,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..c1bd37f7035 100644
--- a/libs/@hashintel/ds-components/src/components/Select/select.tsx
+++ b/libs/@hashintel/ds-components/src/components/Select/select.tsx
@@ -1,7 +1,7 @@
 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 { Fragment, useId, useMemo, useRef } from "react";
 
 import { cx } from "@hashintel/ds-helpers/css";
 
@@ -32,6 +32,12 @@ 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";
+  };
+
 type SelectBaseProps<TValue extends string> = {
   /** An optional placeholder shown when no value is selected */
   placeholder?: string;
@@ -61,11 +67,8 @@ 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 */
@@ -76,20 +79,42 @@ type SelectBaseProps<TValue extends string> = {
 > &
   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 +181,22 @@ 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;
+  },
 ): Array<ItemOrGroup<Item>> {
-  const toItem = (it: SelectItem<TValue>): Item => ({
+  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",
     subItems: undefined,
     onClick: () => {},
   });
@@ -202,6 +235,8 @@ export const Select = <TValue extends string>({
   onKeyDown,
   tabIndex,
   items,
+  multiple,
+  maxItems,
   renderItem,
   renderSelectedItem,
   className,
@@ -235,23 +270,31 @@ 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]);
-
-  const selectedItem = findSelectItem(effectiveItems, value) ?? orphan;
+    return [...orphans, ...items];
+  }, [items, orphans, loading]);
 
   const resolvedRenderItem = useMemo<(value: TValue) => React.ReactNode>(
     () =>
@@ -259,11 +302,43 @@ 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 menuItems = useMemo(() => {
-    const mapped = mapToMenuItems(effectiveItems, resolvedRenderItem);
+    const mapped = mapToMenuItems(effectiveItems, resolvedRenderItem, {
+      multiple: !!multiple,
+      selectableValues:
+        selectableAtMax === undefined ? undefined : new Set(selectableAtMax),
+    });
     if (!isOptional || mapped.length === 0) {
       return mapped;
     }
@@ -274,7 +349,14 @@ export const Select = <TValue extends string>({
       onClick: () => {},
     };
     return [noneItem, ...mapped];
-  }, [effectiveItems, isOptional, resolvedRenderItem, noneValue]);
+  }, [
+    effectiveItems,
+    isOptional,
+    resolvedRenderItem,
+    noneValue,
+    multiple,
+    selectableAtMax,
+  ]);
   const collection = useMemo(() => {
     const valueToText = new Map<string, string>();
     for (const entry of effectiveItems) {
@@ -315,10 +397,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 +408,7 @@ export const Select = <TValue extends string>({
         data-testid={testId}
         {...ariaProps}
       >
-        {selectedItem ? resolvedRenderSelectedItem(selectedItem.value) : ""}
+        {renderSelectedContent()}
       </span>
     );
   }
@@ -337,15 +416,25 @@ 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);
         }
       }}
       disabled={disabled}
@@ -398,10 +487,10 @@ export const Select = <TValue extends string>({
             onBlur={onBlur}
             {...ariaProps}
           >
-            {selectedItem ? (
+            {hasSelection ? (
               <>
                 {(renderItem || renderSelectedItem) && "\u200B"}
-                {resolvedRenderSelectedItem(selectedItem.value)}
+                {renderSelectedContent()}
               </>
             ) : (
               (placeholder ?? "\u200B")
@@ -423,7 +512,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,7 +544,7 @@ export const Select = <TValue extends string>({
             as="Select"
             className={classes.list}
             items={menuItems}
-            selected={value != null && value !== "" ? [value] : []}
+            selected={selectedValues}
             size={size}
             emptyState={
               emptyState ??
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";

From 3e8bc497e35177699565f30f3b939b0ca7251de5 Mon Sep 17 00:00:00 2001
From: alex leon <alex@leon.st>
Date: Wed, 2 Sep 2026 15:42:37 +0200
Subject: [PATCH 2/8] Better select clearable states

---
 .../src/components/Select/select.recipe.ts            | 11 +++++++++++
 1 file changed, 11 insertions(+)

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..7308393ef44 100644
--- a/libs/@hashintel/ds-components/src/components/Select/select.recipe.ts
+++ b/libs/@hashintel/ds-components/src/components/Select/select.recipe.ts
@@ -49,7 +49,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",
       },

From 8e2ceb29f32eaa250ad48ac8464027fbfbc87767 Mon Sep 17 00:00:00 2001
From: alex leon <alex@leon.st>
Date: Wed, 2 Sep 2026 15:58:13 +0200
Subject: [PATCH 3/8] Adjust multi select highlight options

---
 .../Select/multi-select.stories.tsx           | 45 +++++++++++++++++++
 .../src/components/Select/select.recipe.ts    | 11 +++++
 .../src/components/Select/select.tsx          |  5 +++
 3 files changed, 61 insertions(+)

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
index 98b6df6b26d..b5301036d48 100644
--- a/libs/@hashintel/ds-components/src/components/Select/multi-select.stories.tsx
+++ b/libs/@hashintel/ds-components/src/components/Select/multi-select.stories.tsx
@@ -91,6 +91,12 @@ const renderColorItem = (value: string): React.ReactNode => (
 
 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 },
+];
+
 export const Multiple: Story = () => {
   const [fruits, setFruits] = useState<string[]>(["apple", "banana"]);
   const [byVariant, setByVariant] = useState<Record<string, string[]>>({
@@ -98,6 +104,13 @@ export const Multiple: Story = () => {
     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 [colors, setColors] = useState<ColorValue[]>(["red", "blue"]);
   const [clearableValues, setClearableValues] = useState<string[]>(["cherry"]);
@@ -146,6 +159,38 @@ export const Multiple: Story = () => {
           ))}
         </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}>
           maxItems=2 — unselected items disable once 2 values are selected
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 7308393ef44..ef34edd1998 100644
--- a/libs/@hashintel/ds-components/src/components/Select/select.recipe.ts
+++ b/libs/@hashintel/ds-components/src/components/Select/select.recipe.ts
@@ -402,6 +402,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.tsx b/libs/@hashintel/ds-components/src/components/Select/select.tsx
index c1bd37f7035..f2533d25166 100644
--- a/libs/@hashintel/ds-components/src/components/Select/select.tsx
+++ b/libs/@hashintel/ds-components/src/components/Select/select.tsx
@@ -23,6 +23,7 @@ import type {
   FormInputSize,
   FormInputWidth,
   SharedInputProps,
+  Tone,
 } from "../../util/form-shared";
 import type { IconName } from "../Icon/icon";
 
@@ -36,6 +37,8 @@ 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">;
   };
 
 type SelectBaseProps<TValue extends string> = {
@@ -197,6 +200,7 @@ function mapToMenuItems<TValue extends string>(
       (options.selectableValues !== undefined &&
         !options.selectableValues.has(it.value)),
     selectedStyle: options.multiple ? (it.variant ?? "checkbox") : "tick",
+    selectedTone: it.tone,
     subItems: undefined,
     onClick: () => {},
   });
@@ -387,6 +391,7 @@ export const Select = <TValue extends string>({
     size,
     align,
     width,
+    multiple: !!multiple,
     invalid: !!invalid,
     disabled: !!disabled,
     loading: !!loading,

From 4aaf23c392fad7da6f9f3ae3ad4d472ae4a7b91a Mon Sep 17 00:00:00 2001
From: alex leon <alex@leon.st>
Date: Wed, 2 Sep 2026 16:37:41 +0200
Subject: [PATCH 4/8] Add showOnlyButton to multi-select

---
 .../Select/multi-select.stories.tsx           | 25 ++++++-
 .../src/components/Select/select.tsx          | 71 ++++++++++++++++++-
 2 files changed, 93 insertions(+), 3 deletions(-)

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
index b5301036d48..c4b4bcbc68f 100644
--- a/libs/@hashintel/ds-components/src/components/Select/multi-select.stories.tsx
+++ b/libs/@hashintel/ds-components/src/components/Select/multi-select.stories.tsx
@@ -5,7 +5,7 @@ import { css } from "@hashintel/ds-helpers/css";
 import { Select } from "./select";
 
 import type { ItemOrGroup } from "../Menu/SelectableList/selectable-list";
-import type { SelectItem } from "./select";
+import type { MultiSelectItem, SelectItem } from "./select";
 import type { Story, StoryDefault } from "@ladle/react";
 
 export default {
@@ -97,6 +97,13 @@ const tonedItems = [
   { 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 },
+  { 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[]>>({
@@ -112,6 +119,10 @@ export const Multiple: Story = () => {
     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"]);
 
@@ -191,6 +202,18 @@ export const Multiple: Story = () => {
           ))}
         </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 — unselected items disable once 2 values are selected
diff --git a/libs/@hashintel/ds-components/src/components/Select/select.tsx b/libs/@hashintel/ds-components/src/components/Select/select.tsx
index f2533d25166..800e0c39faa 100644
--- a/libs/@hashintel/ds-components/src/components/Select/select.tsx
+++ b/libs/@hashintel/ds-components/src/components/Select/select.tsx
@@ -1,9 +1,9 @@
 import { createListCollection } from "@ark-ui/react/collection";
 import { Portal } from "@ark-ui/react/portal";
 import { Select as ArkSelect } from "@ark-ui/react/select";
-import { Fragment, useId, useMemo, useRef } from "react";
+import { Fragment, useCallback, useId, useMemo, useRef } from "react";
 
-import { cx } from "@hashintel/ds-helpers/css";
+import { css, cx } from "@hashintel/ds-helpers/css";
 
 import { resolveAutoFocusProps } from "../../util/form-shared";
 import { usePortalContainerRef } from "../../util/portal-container-context";
@@ -39,6 +39,10 @@ export type MultiSelectItem<TValue extends string = string> =
     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> = {
@@ -183,6 +187,28 @@ function findSelectItem<TValue extends string>(
   return undefined;
 }
 
+const suffixClasses = {
+  // The default suffix content, swapped out for the "Only" button while hovered
+  defaultContent: css({
+    "[data-part='item']:hover &": {
+      display: "none",
+    },
+  }),
+  onlyButton: css({
+    display: "none",
+    cursor: "pointer",
+    color: "neutral.s110",
+    fontWeight: "[500]",
+    _hover: {
+      color: "neutral.s125",
+      textDecoration: "underline",
+    },
+    "[data-part='item']:hover &": {
+      display: "inline-flex",
+    },
+  }),
+};
+
 function mapToMenuItems<TValue extends string>(
   items: ReadonlyArray<ItemOrGroup<MultiSelectItem<TValue>>>,
   renderItem: (value: TValue) => React.ReactNode,
@@ -190,8 +216,40 @@ function mapToMenuItems<TValue extends string>(
     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 toSuffix = (it: MultiSelectItem<TValue>): React.ReactNode => {
+    if (!it.showOnlyButton || it.disabled) {
+      return it.suffix;
+    }
+    return (
+      <>
+        {it.suffix !== undefined && (
+          <span className={suffixClasses.defaultContent}>{it.suffix}</span>
+        )}
+        <button
+          type="button"
+          className={suffixClasses.onlyButton}
+          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),
@@ -201,6 +259,7 @@ function mapToMenuItems<TValue extends string>(
         !options.selectableValues.has(it.value)),
     selectedStyle: options.multiple ? (it.variant ?? "checkbox") : "tick",
     selectedTone: it.tone,
+    suffix: toSuffix(it),
     subItems: undefined,
     onClick: () => {},
   });
@@ -337,11 +396,18 @@ export const Select = <TValue extends string>({
     !!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 selectOnly = useCallback(
+    (val: TValue) => {
+      (onChange as (value: TValue[]) => void)([val]);
+    },
+    [onChange],
+  );
   const menuItems = useMemo(() => {
     const mapped = mapToMenuItems(effectiveItems, resolvedRenderItem, {
       multiple: !!multiple,
       selectableValues:
         selectableAtMax === undefined ? undefined : new Set(selectableAtMax),
+      selectOnly,
     });
     if (!isOptional || mapped.length === 0) {
       return mapped;
@@ -360,6 +426,7 @@ export const Select = <TValue extends string>({
     noneValue,
     multiple,
     selectableAtMax,
+    selectOnly,
   ]);
   const collection = useMemo(() => {
     const valueToText = new Map<string, string>();

From 0956057e2af4630b1059c05f148d0f3d211f7722 Mon Sep 17 00:00:00 2001
From: alex leon <alex@leon.st>
Date: Wed, 2 Sep 2026 16:52:21 +0200
Subject: [PATCH 5/8] Add only button to multi select item

---
 .../Select/multi-select.stories.tsx           |  8 +++-
 .../src/components/Select/select.recipe.ts    | 37 ++++++++++++++++++-
 .../src/components/Select/select.tsx          | 36 +++++-------------
 3 files changed, 53 insertions(+), 28 deletions(-)

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
index c4b4bcbc68f..5de2ff58b3f 100644
--- a/libs/@hashintel/ds-components/src/components/Select/multi-select.stories.tsx
+++ b/libs/@hashintel/ds-components/src/components/Select/multi-select.stories.tsx
@@ -99,7 +99,13 @@ const tonedItems = [
 
 const suffixItems: Array<MultiSelectItem> = [
   { value: "apple", text: "Apple", suffix: "52 kcal", showOnlyButton: true },
-  { value: "banana", text: "Banana", suffix: "89 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" },
 ];
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 ef34edd1998..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",
diff --git a/libs/@hashintel/ds-components/src/components/Select/select.tsx b/libs/@hashintel/ds-components/src/components/Select/select.tsx
index 800e0c39faa..9a358b46b8b 100644
--- a/libs/@hashintel/ds-components/src/components/Select/select.tsx
+++ b/libs/@hashintel/ds-components/src/components/Select/select.tsx
@@ -3,7 +3,7 @@ import { Portal } from "@ark-ui/react/portal";
 import { Select as ArkSelect } from "@ark-ui/react/select";
 import { Fragment, useCallback, useId, useMemo, useRef } from "react";
 
-import { css, cx } from "@hashintel/ds-helpers/css";
+import { cx } from "@hashintel/ds-helpers/css";
 
 import { resolveAutoFocusProps } from "../../util/form-shared";
 import { usePortalContainerRef } from "../../util/portal-container-context";
@@ -17,7 +17,11 @@ import {
 } from "../Menu/SelectableList/selectable-list";
 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,
@@ -187,28 +191,6 @@ function findSelectItem<TValue extends string>(
   return undefined;
 }
 
-const suffixClasses = {
-  // The default suffix content, swapped out for the "Only" button while hovered
-  defaultContent: css({
-    "[data-part='item']:hover &": {
-      display: "none",
-    },
-  }),
-  onlyButton: css({
-    display: "none",
-    cursor: "pointer",
-    color: "neutral.s110",
-    fontWeight: "[500]",
-    _hover: {
-      color: "neutral.s125",
-      textDecoration: "underline",
-    },
-    "[data-part='item']:hover &": {
-      display: "inline-flex",
-    },
-  }),
-};
-
 function mapToMenuItems<TValue extends string>(
   items: ReadonlyArray<ItemOrGroup<MultiSelectItem<TValue>>>,
   renderItem: (value: TValue) => React.ReactNode,
@@ -227,11 +209,13 @@ function mapToMenuItems<TValue extends string>(
     return (
       <>
         {it.suffix !== undefined && (
-          <span className={suffixClasses.defaultContent}>{it.suffix}</span>
+          <span className={suffixDefaultContentClass}>{it.suffix}</span>
         )}
         <button
           type="button"
-          className={suffixClasses.onlyButton}
+          className={onlyButtonRecipe({
+            tone: it.tone === "brand" ? "brand" : "neutral",
+          })}
           onPointerDown={(event) => {
             event.preventDefault();
             event.stopPropagation();

From 3c789fc627454339895611baa83817be09253554 Mon Sep 17 00:00:00 2001
From: alex leon <alex@leon.st>
Date: Wed, 2 Sep 2026 17:36:23 +0200
Subject: [PATCH 6/8] Add searchable prop to Select

---
 .../src/components/Filter/sort-menu.recipe.ts |  48 -----
 .../src/components/Filter/sort-menu.tsx       |  56 +----
 .../selectable-list-search.recipe.ts          |  62 ++++++
 .../SelectableList/selectable-list-search.tsx |  58 ++++++
 .../SelectableList/selectable-list.recipe.ts  |  15 ++
 .../Menu/SelectableList/selectable-list.tsx   |  14 +-
 .../Select/multi-select.stories.tsx           |  14 ++
 .../src/components/Select/select.stories.tsx  |   5 +
 .../src/components/Select/select.tsx          | 194 ++++++++++++++++--
 9 files changed, 348 insertions(+), 118 deletions(-)
 create mode 100644 libs/@hashintel/ds-components/src/components/Menu/SelectableList/selectable-list-search.recipe.ts
 create mode 100644 libs/@hashintel/ds-components/src/components/Menu/SelectableList/selectable-list-search.tsx

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
index 5de2ff58b3f..e1ef1396fcb 100644
--- a/libs/@hashintel/ds-components/src/components/Select/multi-select.stories.tsx
+++ b/libs/@hashintel/ds-components/src/components/Select/multi-select.stories.tsx
@@ -131,6 +131,8 @@ export const Multiple: Story = () => {
   ]);
   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}>
@@ -256,6 +258,18 @@ export const Multiple: Story = () => {
           )}
         />
       </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
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 6c2dd252e1e..557095b8a73 100644
--- a/libs/@hashintel/ds-components/src/components/Select/select.stories.tsx
+++ b/libs/@hashintel/ds-components/src/components/Select/select.stories.tsx
@@ -219,6 +219,11 @@ const stateRows: Array<{
     label: "Required",
     extraProps: { required: true } as Partial<SingleSelectProps>,
   },
+  {
+    key: "searchable",
+    label: "Searchable",
+    extraProps: { searchable: { searchable: true, onSearch: noop } },
+  },
   {
     key: "hide-arrow",
     label: "Hide arrow",
diff --git a/libs/@hashintel/ds-components/src/components/Select/select.tsx b/libs/@hashintel/ds-components/src/components/Select/select.tsx
index 9a358b46b8b..383cf023463 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 { Fragment, useCallback, 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,9 +20,12 @@ 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 {
@@ -84,6 +95,11 @@ type SelectBaseProps<TValue extends string> = {
   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"
@@ -254,12 +270,47 @@ 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();
+  const lastSyncedSearch = useRef("");
+
+  useEffect(() => {
+    if (lastSyncedSearch.current === search) {
+      return;
+    }
+    lastSyncedSearch.current = search;
+    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);
     }
   }
@@ -302,6 +353,7 @@ export const Select = <TValue extends string>({
   invalid,
   autoFocus,
   emptyState,
+  searchable,
   ...ariaProps
 }: SelectProps<TValue>) => {
   const portalContainerRef = usePortalContainerRef();
@@ -343,6 +395,58 @@ export const Select = <TValue extends string>({
     return [...orphans, ...items];
   }, [items, orphans, loading]);
 
+  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 firstVisibleValue = useMemo<TValue | undefined>(() => {
+    for (const entry of visibleItems) {
+      if ("items" in entry) {
+        const first = entry.items.find((it) => !it.disabled);
+        if (first) {
+          return first.value;
+        }
+      } else if (!entry.disabled) {
+        return entry.value;
+      }
+    }
+    return undefined;
+  }, [visibleItems]);
+
   const resolvedRenderItem = useMemo<(value: TValue) => React.ReactNode>(
     () =>
       renderItem ??
@@ -386,31 +490,69 @@ export const Select = <TValue extends string>({
     },
     [onChange],
   );
+  const resolvedEmptyState =
+    emptyState ?? (loading ? "Loading options\u2026" : "No options available");
   const menuItems = useMemo(() => {
-    const mapped = mapToMenuItems(effectiveItems, resolvedRenderItem, {
-      multiple: !!multiple,
-      selectableValues:
-        selectableAtMax === undefined ? undefined : new Set(selectableAtMax),
-      selectOnly,
-    });
-    if (!isOptional || mapped.length === 0) {
+    const mapped: Array<ItemOrGroup<Item>> = mapToMenuItems(
+      visibleItems,
+      resolvedRenderItem,
+      {
+        multiple: !!multiple,
+        selectableValues:
+          selectableAtMax === undefined ? undefined : new Set(selectableAtMax),
+        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];
+    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;
   }, [
-    effectiveItems,
+    visibleItems,
     isOptional,
     resolvedRenderItem,
     noneValue,
     multiple,
     selectableAtMax,
     selectOnly,
+    showSearch,
+    search,
+    handleSearchChange,
+    searchTerms,
+    resolvedEmptyState,
   ]);
   const collection = useMemo(() => {
     const valueToText = new Map<string, string>();
@@ -493,6 +635,11 @@ export const Select = <TValue extends string>({
           (onChange as (value: TValue) => void)(next as TValue);
         }
       }}
+      onOpenChange={({ open }) => {
+        if (!open && search !== "") {
+          handleSearchChange("");
+        }
+      }}
       disabled={disabled}
       invalid={invalid}
       required={required}
@@ -507,6 +654,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}
@@ -602,10 +755,7 @@ export const Select = <TValue extends string>({
             items={menuItems}
             selected={selectedValues}
             size={size}
-            emptyState={
-              emptyState ??
-              (loading ? "Loading options…" : "No options available")
-            }
+            emptyState={resolvedEmptyState}
           />
         </ArkSelect.Positioner>
       </Portal>

From cc1b6b285e30d4e47c627751bd7cbb44d32f90b4 Mon Sep 17 00:00:00 2001
From: alex leon <alex@leon.st>
Date: Thu, 3 Sep 2026 15:47:10 +0200
Subject: [PATCH 7/8] Better handling of async search

---
 .../src/components/Select/select.tsx             | 16 +++++++++++++---
 1 file changed, 13 insertions(+), 3 deletions(-)

diff --git a/libs/@hashintel/ds-components/src/components/Select/select.tsx b/libs/@hashintel/ds-components/src/components/Select/select.tsx
index 383cf023463..1fe9d972a72 100644
--- a/libs/@hashintel/ds-components/src/components/Select/select.tsx
+++ b/libs/@hashintel/ds-components/src/components/Select/select.tsx
@@ -284,13 +284,23 @@ const SearchHighlightSync = ({
   firstVisibleValue: string | undefined;
 }) => {
   const select = useSelectContext();
-  const lastSyncedSearch = useRef("");
+  // 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(() => {
-    if (lastSyncedSearch.current === search) {
+    const last = lastSynced.current;
+    if (
+      last.search === search &&
+      last.firstVisibleValue === firstVisibleValue
+    ) {
       return;
     }
-    lastSyncedSearch.current = search;
+    lastSynced.current = { search, firstVisibleValue };
     if (search === "") {
       return;
     }

From 88cfe8535aee8ec2871273b202bc54a85eb5786e Mon Sep 17 00:00:00 2001
From: alex leon <alex@leon.st>
Date: Thu, 3 Sep 2026 15:57:20 +0200
Subject: [PATCH 8/8] Fix maxItems on search

---
 .../Select/multi-select.stories.tsx           |  4 +-
 .../src/components/Select/select.tsx          | 47 ++++++++++++-------
 2 files changed, 33 insertions(+), 18 deletions(-)

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
index e1ef1396fcb..ac55527476b 100644
--- a/libs/@hashintel/ds-components/src/components/Select/multi-select.stories.tsx
+++ b/libs/@hashintel/ds-components/src/components/Select/multi-select.stories.tsx
@@ -224,11 +224,13 @@ export const Multiple: Story = () => {
       </div>
       <div className={groupStyle}>
         <span style={subheadingStyle}>
-          maxItems=2 — unselected items disable once 2 values are selected
+          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}
diff --git a/libs/@hashintel/ds-components/src/components/Select/select.tsx b/libs/@hashintel/ds-components/src/components/Select/select.tsx
index 1fe9d972a72..31f824615e9 100644
--- a/libs/@hashintel/ds-components/src/components/Select/select.tsx
+++ b/libs/@hashintel/ds-components/src/components/Select/select.tsx
@@ -443,20 +443,6 @@ export const Select = <TValue extends string>({
     return filtered;
   }, [effectiveItems, searchTerms]);
 
-  const firstVisibleValue = useMemo<TValue | undefined>(() => {
-    for (const entry of visibleItems) {
-      if ("items" in entry) {
-        const first = entry.items.find((it) => !it.disabled);
-        if (first) {
-          return first.value;
-        }
-      } else if (!entry.disabled) {
-        return entry.value;
-      }
-    }
-    return undefined;
-  }, [visibleItems]);
-
   const resolvedRenderItem = useMemo<(value: TValue) => React.ReactNode>(
     () =>
       renderItem ??
@@ -494,6 +480,34 @@ export const Select = <TValue extends string>({
     !!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]);
@@ -508,8 +522,7 @@ export const Select = <TValue extends string>({
       resolvedRenderItem,
       {
         multiple: !!multiple,
-        selectableValues:
-          selectableAtMax === undefined ? undefined : new Set(selectableAtMax),
+        selectableValues: selectableAtMaxSet,
         selectOnly,
       },
     );
@@ -556,7 +569,7 @@ export const Select = <TValue extends string>({
     resolvedRenderItem,
     noneValue,
     multiple,
-    selectableAtMax,
+    selectableAtMaxSet,
     selectOnly,
     showSearch,
     search,