diff --git a/frontend/packages/api/src/contract.ts b/frontend/packages/api/src/contract.ts
index 0bba0a9..8618e1d 100644
--- a/frontend/packages/api/src/contract.ts
+++ b/frontend/packages/api/src/contract.ts
@@ -38,9 +38,12 @@ export type FieldType =
  * `raw_id_fields` (#251). `password` is a security boundary, not a layout
  * choice: it marks a field the admin routed through `PasswordInput`, whose
  * stored value the backend redacts from the payload (matching Django's
- * `render_value=False`) — the SPA masks the input (#504).
+ * `render_value=False`) — the SPA masks the input (#504). `shuttle_h` /
+ * `shuttle_v` come from `filter_horizontal` / `filter_vertical` (#627) —
+ * the SPA renders Django's two-pane "available / chosen" widget for the
+ * M2M field, with horizontal or vertical orientation respectively.
  */
-export type WidgetHint = 'radio' | 'raw_id' | 'password';
+export type WidgetHint = 'radio' | 'raw_id' | 'password' | 'shuttle_h' | 'shuttle_v';
 
 export interface Permissions {
   view: boolean;
diff --git a/frontend/packages/form/src/FieldInput.tsx b/frontend/packages/form/src/FieldInput.tsx
index 289d6eb..fff1ecb 100644
--- a/frontend/packages/form/src/FieldInput.tsx
+++ b/frontend/packages/form/src/FieldInput.tsx
@@ -17,6 +17,7 @@ import { Checkbox } from '@dar/ui';
 
 import { AutocompleteInput } from './AutocompleteInput';
 import { RelatedAddModal } from './RelatedAddModal';
+import { ShuttleSelect } from './ShuttleSelect';
 
 interface FieldInputProps {
   name: string;
@@ -163,6 +164,29 @@ export function FieldInput({ name, field, value, error, onChange }: FieldInputPr
         onChange={onChange}
       />
     );
+  } else if (
+    field.type === 'manytomany' &&
+    (field.widget === 'shuttle_h' || field.widget === 'shuttle_v') &&
+    field.choices &&
+    field.choices.length > 0
+  ) {
+    // filter_horizontal / filter_vertical (#627). The admin opted into
+    // Django's two-pane "available / chosen" shuttle widget — the API
+    // emits `widget: "shuttle_h"` or `"shuttle_v"` (api 1.2.0+) and
+    // we render a real shuttle with per-pane search, selection-order
+    // preservation, and "Choose all / Remove all" bulk actions.
+    // Scales well past the ~50-option ceiling where the default
+    // checkbox list breaks down.
+    control = (
+      <ShuttleSelect
+        id={id}
+        choices={field.choices}
+        value={value}
+        orientation={field.widget === 'shuttle_v' ? 'v' : 'h'}
+        label={field.label}
+        onChange={(next) => onChange(next as unknown as WriteValue)}
+      />
+    );
   } else if (field.type === 'manytomany') {
     // ManyToMany write (#240). The backend accepts a list of pks
     // (form.save_m2m). When the target set is small the descriptor
diff --git a/frontend/packages/form/src/ShuttleSelect.test.tsx b/frontend/packages/form/src/ShuttleSelect.test.tsx
new file mode 100644
index 0000000..6d15340
--- /dev/null
+++ b/frontend/packages/form/src/ShuttleSelect.test.tsx
@@ -0,0 +1,185 @@
+// ShuttleSelect — locks the two-pane render + selection behaviour
+// (#627): which items live in which pane, click-to-move, search
+// filter per pane, "Choose all" / "Remove all" buttons, order
+// preservation when moving items in and out of Chosen.
+import '@testing-library/jest-dom/vitest';
+
+import { fireEvent, render, screen, within } from '@testing-library/react';
+import { describe, expect, it, vi } from 'vitest';
+
+import type { FieldChoice } from '@dar/data';
+
+import { ShuttleSelect } from './ShuttleSelect';
+
+const CHOICES: FieldChoice[] = [
+  { value: 1, label: 'Engineering' },
+  { value: 2, label: 'Marketing' },
+  { value: 3, label: 'Finance' },
+  { value: 4, label: 'Operations' },
+];
+
+function paneByTitle(title: string): HTMLElement {
+  // Each Pane renders an `<ul role="listbox" aria-labelledby="...">`
+  // pointing to a `<div>` carrying the title text.
+  return screen.getByRole('listbox', { name: title });
+}
+
+describe('ShuttleSelect (#627)', () => {
+  it('renders two panes: Available (unselected) + Chosen (selected)', () => {
+    render(
+      <ShuttleSelect
+        id="t"
+        choices={CHOICES}
+        value={[2]}
+        orientation="h"
+        label="departments"
+        onChange={() => {}}
+      />,
+    );
+    const avail = paneByTitle('Available departments');
+    const chosen = paneByTitle('Chosen departments');
+    expect(within(avail).getByText('Engineering')).toBeInTheDocument();
+    expect(within(avail).getByText('Finance')).toBeInTheDocument();
+    expect(within(avail).getByText('Operations')).toBeInTheDocument();
+    expect(within(avail).queryByText('Marketing')).not.toBeInTheDocument();
+    expect(within(chosen).getByText('Marketing')).toBeInTheDocument();
+  });
+
+  it('clicking an Available item appends it to Chosen (preserves order)', () => {
+    const onChange = vi.fn();
+    render(
+      <ShuttleSelect
+        id="t"
+        choices={CHOICES}
+        value={[2]}
+        orientation="h"
+        label="departments"
+        onChange={onChange}
+      />,
+    );
+    fireEvent.click(within(paneByTitle('Available departments')).getByText('Finance'));
+    expect(onChange).toHaveBeenCalledWith([2, 3]);
+  });
+
+  it('clicking a Chosen item removes it', () => {
+    const onChange = vi.fn();
+    render(
+      <ShuttleSelect
+        id="t"
+        choices={CHOICES}
+        value={[1, 2, 3]}
+        orientation="h"
+        label="departments"
+        onChange={onChange}
+      />,
+    );
+    fireEvent.click(within(paneByTitle('Chosen departments')).getByText('Marketing'));
+    expect(onChange).toHaveBeenCalledWith([1, 3]);
+  });
+
+  it('search filters items within a pane (case-insensitive)', () => {
+    render(
+      <ShuttleSelect
+        id="t"
+        choices={CHOICES}
+        value={[]}
+        orientation="h"
+        label="departments"
+        onChange={() => {}}
+      />,
+    );
+    const availSearch = screen.getByLabelText('Filter Available departments');
+    fireEvent.change(availSearch, { target: { value: 'fin' } });
+    const avail = paneByTitle('Available departments');
+    expect(within(avail).getByText('Finance')).toBeInTheDocument();
+    expect(within(avail).queryByText('Engineering')).not.toBeInTheDocument();
+  });
+
+  it('Choose all moves every FILTERED Available item to Chosen', () => {
+    const onChange = vi.fn();
+    render(
+      <ShuttleSelect
+        id="t"
+        choices={CHOICES}
+        value={[]}
+        orientation="h"
+        label="departments"
+        onChange={onChange}
+      />,
+    );
+    // Narrow the visible set to Engineering + Operations (anything with `o`).
+    const availSearch = screen.getByLabelText('Filter Available departments');
+    fireEvent.change(availSearch, { target: { value: 'O' } });
+    fireEvent.click(screen.getByRole('button', { name: 'Choose all' }));
+    // Marketing matches "O" too (mArketing has no O — but "ratiOns" /
+    // "engineering" / "operatiOns" do). Be explicit.
+    const want = CHOICES.filter((c) => c.label.toLowerCase().includes('o')).map((c) => c.value);
+    expect(onChange).toHaveBeenCalledWith(want);
+  });
+
+  it('Remove all clears every FILTERED Chosen item', () => {
+    const onChange = vi.fn();
+    render(
+      <ShuttleSelect
+        id="t"
+        choices={CHOICES}
+        value={[1, 2, 3, 4]}
+        orientation="h"
+        label="departments"
+        onChange={onChange}
+      />,
+    );
+    // Filter Chosen by "ing" — matches Engineering + Marketing only
+    // (Finance + Operations have no "ing"). Removes those two; the
+    // surviving Chosen set is [3, 4] in order.
+    const chosenSearch = screen.getByLabelText('Filter Chosen departments');
+    fireEvent.change(chosenSearch, { target: { value: 'ing' } });
+    fireEvent.click(screen.getByRole('button', { name: 'Remove all' }));
+    expect(onChange).toHaveBeenCalledWith([3, 4]);
+  });
+
+  it('horizontal vs vertical orientation toggles the grid layout', () => {
+    const { container, rerender } = render(
+      <ShuttleSelect
+        id="t"
+        choices={CHOICES}
+        value={[]}
+        orientation="h"
+        label="departments"
+        onChange={() => {}}
+      />,
+    );
+    const hRoot = container.firstChild as HTMLElement;
+    expect(hRoot.className).toContain('sm:grid-cols-[1fr_1fr]');
+    rerender(
+      <ShuttleSelect
+        id="t"
+        choices={CHOICES}
+        value={[]}
+        orientation="v"
+        label="departments"
+        onChange={() => {}}
+      />,
+    );
+    const vRoot = container.firstChild as HTMLElement;
+    expect(vRoot.className).not.toContain('sm:grid-cols-[1fr_1fr]');
+  });
+
+  it('round-trips numeric pks as numbers (not strings) on emit', () => {
+    const onChange = vi.fn();
+    render(
+      <ShuttleSelect
+        id="t"
+        choices={CHOICES}
+        value={[1]}
+        orientation="h"
+        label="departments"
+        onChange={onChange}
+      />,
+    );
+    fireEvent.click(within(paneByTitle('Available departments')).getByText('Finance'));
+    const [emitted] = onChange.mock.calls[0] as [Array<string | number>];
+    expect(emitted).toEqual([1, 3]);
+    for (const v of emitted) expect(typeof v).toBe('number');
+  });
+});
diff --git a/frontend/packages/form/src/ShuttleSelect.tsx b/frontend/packages/form/src/ShuttleSelect.tsx
new file mode 100644
index 0000000..3cffc5d
--- /dev/null
+++ b/frontend/packages/form/src/ShuttleSelect.tsx
@@ -0,0 +1,262 @@
+// ShuttleSelect — the two-pane "available / chosen" widget Django's
+// HTML admin renders for ``filter_horizontal`` / ``filter_vertical``
+// M2M fields (#627). Fires when the API emits ``widget: "shuttle_h"``
+// or ``"shuttle_v"``; the SPA fell back to a single-list checkbox
+// bank before, which doesn't scale past ~50 options.
+//
+// Contract:
+// - ``choices`` — full set of options as ``{value, label}`` pairs.
+// - ``value`` — the operator's current selection (array of choice
+//   values), order-preserved.
+// - ``orientation`` — ``'h'`` side-by-side (filter_horizontal), ``'v'``
+//   stacked (filter_vertical).
+// - ``onChange`` — fires with the new ordered array of selected values.
+//
+// Behaviour:
+// - Each pane has its own filter input that narrows the visible items
+//   client-side (no server roundtrip — the choices are already inlined).
+// - Single click moves the item to the other pane (matches Django).
+// - "Choose all" / "Remove all" links act on the FILTERED view, so
+//   typing a search term + clicking the link affects only those items.
+// - Selection order is preserved: when an item is moved INTO chosen, it
+//   appends; when moved out, the relative order of remaining items is
+//   kept. Matches Django's admin.
+
+import { useId, useMemo, useState } from 'react';
+
+import type { FieldChoice, WriteValue } from '@dar/data';
+
+interface ShuttleSelectProps {
+  /** Stable id prefix for the search inputs (a11y labelling). */
+  id: string;
+  /** Inlined choice list — the same shape as ``field.choices``. */
+  choices: FieldChoice[];
+  /** Currently selected values (array of choice values). */
+  value: WriteValue;
+  /** ``filter_horizontal`` → ``'h'``; ``filter_vertical`` → ``'v'``. */
+  orientation: 'h' | 'v';
+  /** Label of the field (drives the "Available <label>" header text). */
+  label: string;
+  onChange: (next: Array<string | number>) => void;
+}
+
+function asArray(v: WriteValue): Array<string | number> {
+  if (!Array.isArray(v)) return [];
+  return v.filter((x): x is string | number => typeof x === 'string' || typeof x === 'number');
+}
+
+/** Narrow a FieldChoice's `value` to the string|number M2M-pk shape.
+ *  `FieldChoice.value` is widened to ``boolean | null`` to cover
+ *  choice fields; M2M pks can only be string/number, so we narrow
+ *  before any compare / emit. Returns `null` for the (unexpected)
+ *  bool/null cases; callers filter those out. */
+function pkOf(c: FieldChoice): string | number | null {
+  return typeof c.value === 'string' || typeof c.value === 'number' ? c.value : null;
+}
+
+function matchesFilter(label: string, q: string): boolean {
+  if (!q) return true;
+  return label.toLowerCase().includes(q.toLowerCase());
+}
+
+export function ShuttleSelect({
+  id,
+  choices,
+  value,
+  orientation,
+  label,
+  onChange,
+}: ShuttleSelectProps): JSX.Element {
+  const selectedIds = useMemo(() => asArray(value).map(String), [value]);
+  const selectedSet = useMemo(() => new Set(selectedIds), [selectedIds]);
+
+  const [availFilter, setAvailFilter] = useState('');
+  const [chosenFilter, setChosenFilter] = useState('');
+
+  // Re-derive both panes from the canonical (value, choices) pair on
+  // every render — no parallel state to keep in sync. Selection order
+  // is preserved by following the order of `value` for the chosen
+  // pane, and the natural choice order for the available pane.
+  const availableChoices = useMemo(
+    () => choices.filter((c) => !selectedSet.has(String(c.value))),
+    [choices, selectedSet],
+  );
+  const chosenChoices = useMemo(() => {
+    const byKey = new Map(choices.map((c) => [String(c.value), c]));
+    return selectedIds.map((k) => byKey.get(k)).filter((c): c is FieldChoice => c !== undefined);
+  }, [choices, selectedIds]);
+
+  const visibleAvail = availableChoices.filter((c) => matchesFilter(c.label, availFilter));
+  const visibleChosen = chosenChoices.filter((c) => matchesFilter(c.label, chosenFilter));
+
+  function emit(next: Array<string | number>): void {
+    onChange(next);
+  }
+
+  function addOne(val: string | number): void {
+    if (selectedSet.has(String(val))) return;
+    emit([...selectedIds.map(toOriginalType(choices)), val]);
+  }
+
+  function removeOne(val: string | number): void {
+    const keep = selectedIds.filter((k) => k !== String(val));
+    emit(keep.map(toOriginalType(choices)));
+  }
+
+  function addMany(targets: FieldChoice[]): void {
+    const fresh: Array<string | number> = [];
+    for (const c of targets) {
+      const pk = pkOf(c);
+      if (pk !== null && !selectedSet.has(String(pk))) fresh.push(pk);
+    }
+    if (fresh.length === 0) return;
+    emit([...selectedIds.map(toOriginalType(choices)), ...fresh]);
+  }
+
+  function removeMany(targets: FieldChoice[]): void {
+    const drop = new Set<string>();
+    for (const c of targets) {
+      const pk = pkOf(c);
+      if (pk !== null) drop.add(String(pk));
+    }
+    const keep = selectedIds.filter((k) => !drop.has(k));
+    emit(keep.map(toOriginalType(choices)));
+  }
+
+  const availId = `${id}-avail`;
+  const chosenId = `${id}-chosen`;
+  const containerClass =
+    orientation === 'h'
+      ? 'grid grid-cols-1 gap-3 sm:grid-cols-[1fr_1fr]'
+      : 'grid grid-cols-1 gap-3';
+
+  return (
+    <div className={containerClass}>
+      <Pane
+        title={`Available ${label}`}
+        searchId={availId}
+        items={visibleAvail}
+        emptyMessage="No matches."
+        onItemActivate={(c) => {
+          const pk = pkOf(c);
+          if (pk !== null) addOne(pk);
+        }}
+        actionLabel="Choose all"
+        onAction={() => addMany(visibleAvail)}
+        filter={availFilter}
+        setFilter={setAvailFilter}
+      />
+      <Pane
+        title={`Chosen ${label}`}
+        searchId={chosenId}
+        items={visibleChosen}
+        emptyMessage="Nothing selected yet."
+        onItemActivate={(c) => {
+          const pk = pkOf(c);
+          if (pk !== null) removeOne(pk);
+        }}
+        actionLabel="Remove all"
+        onAction={() => removeMany(visibleChosen)}
+        filter={chosenFilter}
+        setFilter={setChosenFilter}
+      />
+    </div>
+  );
+}
+
+/** Map stringified pk back to the choice's original value type so
+ *  numeric pks round-trip as numbers (matches the legacy M2M path).
+ *  Boolean / null choice values can't be M2M pks; filtered out so
+ *  the Map's value type stays narrow. */
+function toOriginalType(
+  choices: FieldChoice[],
+): (str: string) => string | number {
+  const entries: Array<[string, string | number]> = [];
+  for (const c of choices) {
+    if (typeof c.value === 'string' || typeof c.value === 'number') {
+      entries.push([String(c.value), c.value]);
+    }
+  }
+  const map = new Map(entries);
+  return (s) => map.get(s) ?? s;
+}
+
+interface PaneProps {
+  title: string;
+  searchId: string;
+  items: FieldChoice[];
+  emptyMessage: string;
+  onItemActivate: (c: FieldChoice) => void;
+  actionLabel: string;
+  onAction: () => void;
+  filter: string;
+  setFilter: (v: string) => void;
+}
+
+function Pane({
+  title,
+  searchId,
+  items,
+  emptyMessage,
+  onItemActivate,
+  actionLabel,
+  onAction,
+  filter,
+  setFilter,
+}: PaneProps): JSX.Element {
+  const titleId = useId();
+  return (
+    <div className="flex flex-col gap-1.5">
+      <div id={titleId} className="text-sm font-medium text-gray-700">
+        {title}
+      </div>
+      <label htmlFor={searchId} className="sr-only">
+        Filter {title}
+      </label>
+      <input
+        id={searchId}
+        type="search"
+        value={filter}
+        onChange={(e) => setFilter(e.target.value)}
+        placeholder="Filter"
+        className="w-full rounded border border-gray-300 px-2 py-1 text-sm focus:outline-none focus:ring-1 focus:ring-gray-500"
+      />
+      <ul
+        role="listbox"
+        aria-labelledby={titleId}
+        className="h-48 overflow-y-auto rounded border border-gray-300 bg-white"
+      >
+        {items.length === 0 ? (
+          <li className="px-2 py-1.5 text-sm italic text-gray-500">{emptyMessage}</li>
+        ) : (
+          items.map((c) => (
+            <li
+              key={String(c.value)}
+              role="option"
+              aria-selected={false}
+              tabIndex={0}
+              onClick={() => onItemActivate(c)}
+              onKeyDown={(e) => {
+                if (e.key === 'Enter' || e.key === ' ') {
+                  e.preventDefault();
+                  onItemActivate(c);
+                }
+              }}
+              className="cursor-pointer px-2 py-1 text-sm hover:bg-gray-50 focus:bg-gray-100 focus:outline-none"
+            >
+              {c.label}
+            </li>
+          ))
+        )}
+      </ul>
+      <button
+        type="button"
+        onClick={onAction}
+        disabled={items.length === 0}
+        className="self-start text-xs text-gray-600 hover:text-gray-900 disabled:cursor-not-allowed disabled:text-gray-400"
+      >
+        {actionLabel}
+      </button>
+    </div>
+  );
+}
diff --git a/frontend/packages/form/src/index.ts b/frontend/packages/form/src/index.ts
index 592f00c..55307fa 100644
--- a/frontend/packages/form/src/index.ts
+++ b/frontend/packages/form/src/index.ts
@@ -6,3 +6,4 @@
 export { FieldInput } from './FieldInput';
 export { InlineEditor } from './InlineEditor';
 export type { InlineEditorProps } from './InlineEditor';
+export { ShuttleSelect } from './ShuttleSelect';
diff --git a/poetry.lock b/poetry.lock
index 72244c3..f49a030 100644
--- a/poetry.lock
+++ b/poetry.lock
@@ -556,14 +556,14 @@ jsonschema = ">=4.0,<5.0"
 
 [[package]]
 name = "django-admin-rest-api"
-version = "1.1.1"
+version = "1.2.0"
 description = "A JSON REST API for the Django admin — same permissions, same ModelAdmin, no new features. Powers django-admin-react and django-admin-mcp."
 optional = false
 python-versions = "<4.0,>=3.10"
 groups = ["main"]
 files = [
-    {file = "django_admin_rest_api-1.1.1-py3-none-any.whl", hash = "sha256:dacc9103d6a0a6c40cfa5e9e3f687681f3ce8bfe019050833eb848a4da2385d5"},
-    {file = "django_admin_rest_api-1.1.1.tar.gz", hash = "sha256:1780f59ed648262cf67aab98b7bb8a3d7551472c03e89a319a220ed6c089bfd7"},
+    {file = "django_admin_rest_api-1.2.0-py3-none-any.whl", hash = "sha256:cf818b0a8e58c0e0ef5967ad363ce0e111a17ca24b7b2e9f2a785d1608fbf989"},
+    {file = "django_admin_rest_api-1.2.0.tar.gz", hash = "sha256:5f0c3585f8c97f362e0a86a0818310335172572903ce02f5bcbbfbf8d1514004"},
 ]
 
 [package.dependencies]
@@ -2082,4 +2082,4 @@ zstd = ["backports-zstd (>=1.0.0) ; python_version < \"3.14\""]
 [metadata]
 lock-version = "2.1"
 python-versions = "^3.10"
-content-hash = "b193482b54c4e476ff5cf803e94bac2b6d33d802bcd606438b8b2ec39e079d72"
+content-hash = "bd71a89536a790a3f530d5602c28a2c1b91572c7d22b4c8d864dfcde8b814147"
diff --git a/pyproject.toml b/pyproject.toml
index 2e0a78e..daf6fea 100644
--- a/pyproject.toml
+++ b/pyproject.toml
@@ -1,6 +1,6 @@
 [tool.poetry]
 name = "django-admin-react"
-version = "1.5.1"
+version = "1.6.0"
 description = "A drop-in React single-page admin for Django, driven entirely by ModelAdmin."
 authors = ["django-admin-react contributors"]
 license = "MIT"
@@ -52,7 +52,7 @@ django = ">=4.2,<7.0"
 # React SPA super-layer over `django-admin-rest-api`. The package's URLs
 # are included by `django_admin_react.urls`, and consumers add
 # `"django_admin_rest_api"` to `INSTALLED_APPS` alongside this package.
-django-admin-rest-api = "^1.1.0"
+django-admin-rest-api = "^1.2.0"
 # `django-admin-mcp-api` — MCP-protocol adapter over the same REST API
 # so agents reach the SAME `ModelAdmin`-driven surface. Wire-protocol-only
 # layer; adds NO new functionality, permissions, or validation.