diff --git a/client/src/components/Form/Elements/FormSelect.test.js b/client/src/components/Form/Elements/FormSelect.test.js
index 5d662edf7a50..1854a23698ac 100644
--- a/client/src/components/Form/Elements/FormSelect.test.js
+++ b/client/src/components/Form/Elements/FormSelect.test.js
@@ -1,3 +1,4 @@
+import { createTestingPinia } from "@pinia/testing";
 import { mount } from "@vue/test-utils";
 import { getLocalVue } from "tests/jest/helpers";
 
@@ -6,9 +7,12 @@ import MountTarget from "./FormSelection.vue";
 const localVue = getLocalVue(true);
 
 function createTarget(propsData) {
+    const pinia = createTestingPinia();
+
     return mount(MountTarget, {
         localVue,
         propsData,
+        pinia,
     });
 }
 
diff --git a/client/src/components/Form/Elements/FormSelectMany/FormSelectMany.test.ts b/client/src/components/Form/Elements/FormSelectMany/FormSelectMany.test.ts
new file mode 100644
index 000000000000..12f36bdf55ef
--- /dev/null
+++ b/client/src/components/Form/Elements/FormSelectMany/FormSelectMany.test.ts
@@ -0,0 +1,349 @@
+import "./worker/__mocks__/selectMany";
+
+import { createTestingPinia } from "@pinia/testing";
+import { getLocalVue } from "@tests/jest/helpers";
+import { mount } from "@vue/test-utils";
+import { PropType } from "vue";
+
+import type { SelectOption } from "./worker/selectMany";
+
+import FormSelectMany from "./FormSelectMany.vue";
+
+const pinia = createTestingPinia();
+const localVue = getLocalVue();
+
+jest.mock("@/components/Form/Elements/FormSelectMany/worker/selectMany");
+
+function mountSelectMany(props: Partial<PropType<typeof FormSelectMany>>) {
+    return mount(FormSelectMany as any, {
+        propsData: { options: [], value: [], ...props },
+        pinia,
+        localVue,
+    });
+}
+
+const selectors = {
+    unselectedOptions: ".options-list.unselected > button",
+    unselectedHighlighted: ".options-list.unselected > button.highlighted",
+    selectedOptions: ".options-list:not(.unselected) > button",
+    selectedHighlighted: ".options-list:not(.unselected) > button.highlighted",
+    selectAll: ".selection-button.select",
+    deselectAll: ".selection-button.deselect",
+    selectedCount: ".selected-count",
+    unselectedCount: ".unselected-count",
+    search: "input[type=search]",
+    caseSensitivity: ".toggle-button.case-sensitivity",
+    useRegex: ".toggle-button.use-regex",
+} as const;
+
+function generateOptionsFromArrays(matrix: Array<Array<string>>): SelectOption[] {
+    const combineTwo = (a: string[], b: string[]) => {
+        const combined = [] as string[];
+
+        a.forEach((aValue) => {
+            b.forEach((bValue) => {
+                combined.push(`${aValue}${bValue}`);
+            });
+        });
+
+        return combined;
+    };
+
+    const combined = matrix.reduce((accumulator, current) => combineTwo(accumulator, current), [""]);
+
+    return combined.map((v) => ({ label: v, value: v }));
+}
+
+/** gets the latest input event value and reflects it to props */
+async function emittedInput(wrapper: ReturnType<typeof mountSelectMany>) {
+    const emittedEvents = wrapper.emitted()?.["input"];
+
+    if (!emittedEvents) {
+        return undefined;
+    }
+
+    const latestValue = emittedEvents[emittedEvents.length - 1]?.[0];
+
+    if (latestValue === undefined) {
+        return undefined;
+    }
+
+    await wrapper.setProps({ ...wrapper.props(), value: latestValue });
+    return latestValue;
+}
+
+// circumvent input debounce
+jest.useFakeTimers();
+
+async function search(wrapper: ReturnType<typeof mountSelectMany>, value: string) {
+    const searchInput = wrapper.find(selectors.search);
+    await searchInput.setValue(value);
+    jest.runAllTimers();
+}
+
+describe("FormSelectMany", () => {
+    it("displays all options", async () => {
+        const options = generateOptionsFromArrays([["foo", "bar", "baz"], ["@"], ["galaxy"], [".com", ".org"]]);
+        const wrapper = mountSelectMany({ options });
+
+        const unselectedOptions = wrapper.findAll(selectors.unselectedOptions);
+        expect(unselectedOptions.length).toBe(6);
+
+        options.forEach((option, i) => {
+            expect(unselectedOptions.at(i).text()).toBe(option.label);
+        });
+    });
+
+    it("emits selected options", async () => {
+        const options = generateOptionsFromArrays([["foo", "bar", "baz"], ["@"], ["galaxy"], [".com", ".org"]]);
+
+        const wrapper = mountSelectMany({ options });
+
+        {
+            const firstOption = wrapper.findAll(selectors.unselectedOptions).at(0);
+            await firstOption.trigger("click");
+
+            const emitted = await emittedInput(wrapper);
+            expect(emitted).toEqual(["foo@galaxy.com"]);
+        }
+
+        {
+            const firstOption = wrapper.findAll(selectors.unselectedOptions).at(0);
+            await firstOption.trigger("click");
+
+            const emitted = await emittedInput(wrapper);
+            expect(emitted).toEqual(["foo@galaxy.com", "foo@galaxy.org"]);
+        }
+    });
+
+    it("displays selected values in the selected column", async () => {
+        const options = generateOptionsFromArrays([["foo", "bar", "baz"], ["@"], ["galaxy"], [".com", ".org"]]);
+        const wrapper = mountSelectMany({ options, value: ["foo@galaxy.com", "foo@galaxy.org"] });
+
+        {
+            const selectedOptions = wrapper.findAll(selectors.selectedOptions);
+            expect(selectedOptions.length).toBe(2);
+            expect(selectedOptions.at(0).text()).toBe("foo@galaxy.com");
+            expect(selectedOptions.at(1).text()).toBe("foo@galaxy.org");
+
+            const unselectedOptions = wrapper.findAll(selectors.unselectedOptions);
+            unselectedOptions.wrappers.forEach((unselectedOption) => {
+                expect(unselectedOption.text()).not.toBe("foo@galaxy.com");
+                expect(unselectedOption.text()).not.toBe("foo@galaxy.org");
+            });
+        }
+
+        const firstOption = wrapper.findAll(selectors.unselectedOptions).at(0);
+        await firstOption.trigger("click");
+        const emitted = await emittedInput(wrapper);
+
+        {
+            const selectedOptions = wrapper.findAll(selectors.selectedOptions);
+            expect(selectedOptions.length).toBe(3);
+            expect(selectedOptions.at(2).text()).toBe(emitted[2]);
+
+            const unselectedOptions = wrapper.findAll(selectors.unselectedOptions);
+            unselectedOptions.wrappers.forEach((unselectedOption) => {
+                expect(unselectedOption.text()).not.toBe(emitted[2]);
+            });
+        }
+    });
+
+    it("shows the amount of selected options", async () => {
+        const options = generateOptionsFromArrays([["foo", "bar", "baz"], ["@"], ["galaxy"], [".com", ".org"]]);
+        const wrapper = mountSelectMany({ options, value: ["foo@galaxy.com", "foo@galaxy.org"] });
+
+        {
+            const selectedCount = wrapper.find(selectors.selectedCount);
+            const unselectedCount = wrapper.find(selectors.unselectedCount);
+
+            expect(selectedCount.text()).toBe("(2)");
+            expect(unselectedCount.text()).toBe("(4)");
+        }
+
+        const firstOption = wrapper.findAll(selectors.unselectedOptions).at(0);
+        await firstOption.trigger("click");
+        await emittedInput(wrapper);
+
+        {
+            const selectedCount = wrapper.find(selectors.selectedCount);
+            const unselectedCount = wrapper.find(selectors.unselectedCount);
+
+            expect(selectedCount.text()).toBe("(3)");
+            expect(unselectedCount.text()).toBe("(3)");
+        }
+    });
+
+    it("selects all options", async () => {
+        const options = generateOptionsFromArrays([["foo", "bar", "baz"], ["@"], ["galaxy"], [".com", ".org"]]);
+        const wrapper = mountSelectMany({ options, value: ["foo@galaxy.com", "foo@galaxy.org"] });
+
+        const selectAllButton = wrapper.find(selectors.selectAll);
+        await selectAllButton.trigger("click");
+        await emittedInput(wrapper);
+
+        {
+            const selectedOptions = wrapper.findAll(selectors.selectedOptions);
+            const unselectedOptions = wrapper.findAll(selectors.unselectedOptions);
+
+            expect(unselectedOptions.length).toBe(0);
+            expect(selectedOptions.length).toBe(6);
+        }
+
+        const deselectAllButton = wrapper.find(selectors.deselectAll);
+        await deselectAllButton.trigger("click");
+        await emittedInput(wrapper);
+
+        {
+            const selectedOptions = wrapper.findAll(selectors.selectedOptions);
+            const unselectedOptions = wrapper.findAll(selectors.unselectedOptions);
+
+            expect(unselectedOptions.length).toBe(6);
+            expect(selectedOptions.length).toBe(0);
+        }
+    });
+
+    it("filters options", async () => {
+        const options = generateOptionsFromArrays([["foo", "BAR", "baz"], ["@"], ["galaxy"], [".com", ".org"]]);
+        const wrapper = mountSelectMany({ options });
+
+        await search(wrapper, "bar");
+
+        {
+            const unselectedOptions = wrapper.findAll(selectors.unselectedOptions);
+            expect(unselectedOptions.length).toBe(2);
+
+            const unselectedCount = wrapper.find(selectors.unselectedCount);
+            expect(unselectedCount.text()).toBe("(2)");
+        }
+
+        const caseSensitivityButton = wrapper.find(selectors.caseSensitivity);
+        await caseSensitivityButton.trigger("click");
+
+        {
+            const unselectedOptions = wrapper.findAll(selectors.unselectedOptions);
+            expect(unselectedOptions.length).toBe(0);
+        }
+
+        await search(wrapper, "BAR");
+
+        {
+            const unselectedOptions = wrapper.findAll(selectors.unselectedOptions);
+            expect(unselectedOptions.length).toBe(2);
+        }
+
+        const useRegexButton = wrapper.find(selectors.useRegex);
+        await useRegexButton.trigger("click");
+
+        {
+            const unselectedOptions = wrapper.findAll(selectors.unselectedOptions);
+            expect(unselectedOptions.length).toBe(2);
+        }
+
+        await search(wrapper, "^[a-z]+@");
+
+        {
+            const unselectedOptions = wrapper.findAll(selectors.unselectedOptions);
+            expect(unselectedOptions.length).toBe(4);
+        }
+
+        await caseSensitivityButton.trigger("click");
+
+        {
+            const unselectedOptions = wrapper.findAll(selectors.unselectedOptions);
+            expect(unselectedOptions.length).toBe(6);
+        }
+    });
+
+    it("selects filtered", async () => {
+        const options = generateOptionsFromArrays([["foo", "BAR", "baz"], ["@"], ["galaxy"], [".com", ".org"]]);
+        const wrapper = mountSelectMany({ options });
+
+        await search(wrapper, "bar");
+
+        const selectAllButton = wrapper.find(selectors.selectAll);
+        await selectAllButton.trigger("click");
+        await emittedInput(wrapper);
+
+        await search(wrapper, "");
+
+        {
+            const selectedOptions = wrapper.findAll(selectors.selectedOptions);
+            expect(selectedOptions.length).toBe(2);
+        }
+
+        await search(wrapper, ".org");
+
+        const deselectAllButton = wrapper.find(selectors.deselectAll);
+        await deselectAllButton.trigger("click");
+        await emittedInput(wrapper);
+
+        await search(wrapper, "");
+
+        {
+            const selectedOptions = wrapper.findAll(selectors.selectedOptions);
+            expect(selectedOptions.length).toBe(1);
+        }
+    });
+
+    it("allows for highlighting ranges", async () => {
+        const options = generateOptionsFromArrays([["foo", "BAR", "baz", "bar"], ["@"], ["galaxy"], [".com", ".org"]]);
+        const wrapper = mountSelectMany({ options });
+
+        {
+            const unselectedOptions = wrapper.findAll(selectors.unselectedOptions);
+            await unselectedOptions.at(0).trigger("click", { shiftKey: true });
+            await unselectedOptions.at(7).trigger("click", { shiftKey: true });
+
+            {
+                const highlightedOptions = wrapper.findAll(selectors.unselectedHighlighted);
+                expect(highlightedOptions.length).toBe(8);
+            }
+
+            await unselectedOptions.at(1).trigger("click", { ctrlKey: true });
+            await unselectedOptions.at(2).trigger("click", { ctrlKey: true });
+
+            {
+                const highlightedOptions = wrapper.findAll(selectors.unselectedHighlighted);
+                expect(highlightedOptions.length).toBe(6);
+            }
+        }
+
+        const selectAllButton = wrapper.find(selectors.selectAll);
+        await selectAllButton.trigger("click");
+        await emittedInput(wrapper);
+
+        {
+            const selectedOptions = wrapper.findAll(selectors.selectedOptions);
+            expect(selectedOptions.length).toBe(6);
+
+            await selectedOptions.at(0).trigger("click", { shiftKey: true });
+            await selectedOptions.at(5).trigger("click", { shiftKey: true });
+
+            {
+                const highlightedOptions = wrapper.findAll(selectors.selectedHighlighted);
+                expect(highlightedOptions.length).toBe(6);
+            }
+
+            await selectedOptions.at(2).trigger("click", { shiftKey: true, ctrlKey: true });
+            await selectedOptions.at(5).trigger("click", { shiftKey: true, ctrlKey: true });
+
+            {
+                const highlightedOptions = wrapper.findAll(selectors.selectedHighlighted);
+                expect(highlightedOptions.length).toBe(2);
+            }
+        }
+
+        const deselectAllButton = wrapper.find(selectors.deselectAll);
+        await deselectAllButton.trigger("click");
+        await emittedInput(wrapper);
+
+        {
+            const unselectedOptions = wrapper.findAll(selectors.unselectedOptions);
+            expect(unselectedOptions.length).toBe(4);
+
+            const selectedOptions = wrapper.findAll(selectors.selectedOptions);
+            expect(selectedOptions.length).toBe(4);
+        }
+    });
+});
diff --git a/client/src/components/Form/Elements/FormSelectMany/FormSelectMany.vue b/client/src/components/Form/Elements/FormSelectMany/FormSelectMany.vue
new file mode 100644
index 000000000000..5491a4742b85
--- /dev/null
+++ b/client/src/components/Form/Elements/FormSelectMany/FormSelectMany.vue
@@ -0,0 +1,554 @@
+<script setup lang="ts">
+import { library } from "@fortawesome/fontawesome-svg-core";
+import { faLongArrowAltLeft, faLongArrowAltRight, faTimes } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
+import { refDebounced } from "@vueuse/core";
+import { BButton, BFormInput } from "bootstrap-vue";
+import { computed, nextTick, type PropType, reactive, ref, type UnwrapRef } from "vue";
+
+import { useUid } from "@/composables/utils/uid";
+
+import { useHighlight } from "./useHighlight";
+import { filterOptions } from "./worker/filterOptions";
+import { useSelectMany } from "./worker/selectMany";
+
+library.add(faLongArrowAltLeft, faLongArrowAltRight, faTimes);
+
+type SelectValue = Record<string, unknown> | string | number | null;
+
+interface SelectOption {
+    label: string;
+    value: SelectValue;
+}
+
+const props = defineProps({
+    id: { type: String, default: () => useUid("form-select-many-").value },
+    disabled: {
+        type: Boolean,
+        default: false,
+    },
+    options: {
+        type: Array as PropType<Array<SelectOption>>,
+        required: true,
+    },
+    placeholder: {
+        type: String,
+        default: "Search for options",
+    },
+    value: {
+        type: Array as PropType<SelectValue | SelectValue[]>,
+        default: null,
+    },
+});
+
+const emit = defineEmits<{
+    (e: "input", value: Array<SelectValue>): void;
+}>();
+
+const searchValue = ref("");
+const useRegex = ref(false);
+const caseSensitive = ref(false);
+
+const searchRegex = computed(() => {
+    if (useRegex.value) {
+        try {
+            const regex = new RegExp(searchValue.value, caseSensitive.value ? undefined : "i");
+            return regex;
+        } catch (e) {
+            return null;
+        }
+    } else {
+        return null;
+    }
+});
+
+/** Wraps value prop so it can be set, and always returns an array */
+const selected = computed({
+    get() {
+        return Array.isArray(props.value) ? props.value : [props.value];
+    },
+    set(value) {
+        emit("input", value);
+    },
+});
+
+const regexInvalid = computed(() => useRegex.value && searchRegex.value === null);
+
+// Limits amount of displayed options
+const selectedDisplayCount = ref(1000);
+const unselectedDisplayCount = ref(1000);
+
+const filter = computed(() => searchRegex.value ?? searchValue.value);
+
+// binding to worker thread
+const { unselectedOptionsFiltered, selectedOptionsFiltered, running, moreUnselected, moreSelected } = useSelectMany({
+    optionsArray: computed(() => props.options),
+    filter,
+    selected,
+    selectedDisplayCount,
+    unselectedDisplayCount,
+    caseSensitive,
+});
+
+// debounced to it doesn't blink, and only appears when relevant
+const workerRunning = refDebounced(running, 400);
+
+/** generic event handler to handle highlighting of options */
+function handleHighlight(
+    event: MouseEvent | KeyboardEvent,
+    index: number,
+    highlightHandler: UnwrapRef<ReturnType<typeof useHighlight>>
+) {
+    if (event.shiftKey && event.ctrlKey) {
+        highlightHandler.rangeRemoveHighlight(index);
+    } else if (event.shiftKey) {
+        highlightHandler.rangeHighlight(index);
+    } else if (event.ctrlKey) {
+        highlightHandler.toggleHighlight(index);
+    }
+}
+
+/** focus option at given index, or previous option if that doesn't exist */
+function focusOptionAtIndex(selected: "selected" | "unselected", index: number) {
+    const el = document.getElementById(`${props.id}-${selected}-${index}`);
+    if (el) {
+        el.focus();
+    } else {
+        document.getElementById(`${props.id}-${selected}-${index - 1}`)?.focus();
+    }
+}
+
+async function selectOption(event: MouseEvent, index: number): Promise<void> {
+    if (event.shiftKey || event.ctrlKey) {
+        handleHighlight(event, index, highlightUnselected);
+    } else {
+        const [option] = unselectedOptionsFiltered.value.splice(index, 1);
+
+        if (option) {
+            selected.value = [...selected.value, option.value];
+        }
+
+        // select the element which now is where the removed element just was
+        // to improve keyboard navigation
+        await nextTick();
+        focusOptionAtIndex("unselected", index);
+    }
+}
+
+async function deselectOption(event: MouseEvent, index: number) {
+    if (event.shiftKey || event.ctrlKey) {
+        handleHighlight(event, index, highlightSelected);
+    } else {
+        const [option] = selectedOptionsFiltered.value.splice(index, 1);
+
+        if (option) {
+            const i = selected.value.indexOf(option.value);
+            selected.value = selected.value.flatMap((value, index) => (index === i ? [] : [value]));
+        }
+
+        await nextTick();
+        focusOptionAtIndex("selected", index);
+    }
+}
+
+function selectAll() {
+    if (highlightUnselected.highlightedIndexes.length > 0) {
+        const highlightedValues = highlightUnselected.highlightedOptions.map((o) => o.value);
+        const selectedSet = new Set([...selected.value, ...highlightedValues]);
+        selected.value = Array.from(selectedSet);
+
+        unselectedOptionsFiltered.value.filter((o) => highlightedValues.includes(o.value));
+    } else if (searchValue.value === "") {
+        selected.value = props.options.map((o) => o.value);
+
+        unselectedOptionsFiltered.value = [];
+    } else {
+        const filteredValues = filterOptions(props.options, filter.value, caseSensitive.value).map((o) => o.value);
+
+        const selectedSet = new Set([...selected.value, ...filteredValues]);
+        selected.value = Array.from(selectedSet);
+
+        unselectedOptionsFiltered.value = [];
+    }
+}
+
+function deselectAll() {
+    if (highlightSelected.highlightedIndexes.length > 0) {
+        const selectedSet = new Set(selected.value);
+        const highlightedValues = highlightSelected.highlightedOptions.map((o) => o.value);
+
+        highlightedValues.forEach((v) => selectedSet.delete(v));
+        selected.value = Array.from(selectedSet);
+
+        selectedOptionsFiltered.value.filter((o) => highlightedValues.includes(o.value));
+    } else if (searchValue.value === "") {
+        selected.value = [];
+        selectedOptionsFiltered.value = [];
+    } else {
+        const selectedSet = new Set(selected.value);
+        const filteredValues = filterOptions(props.options, filter.value, caseSensitive.value).map((o) => o.value);
+
+        filteredValues.forEach((v) => selectedSet.delete(v));
+        selected.value = Array.from(selectedSet);
+
+        selectedOptionsFiltered.value = [];
+    }
+}
+
+function optionOnKey(selected: "selected" | "unselected", event: KeyboardEvent, index: number) {
+    // handle highlighting
+    if ([" ", "Enter"].includes(event.key) && (event.shiftKey || event.ctrlKey)) {
+        const highlightHandler = selected === "selected" ? highlightSelected : highlightUnselected;
+        handleHighlight(event, index, highlightHandler);
+        event.preventDefault();
+        return;
+    }
+
+    if (!["ArrowUp", "ArrowDown"].includes(event.key)) {
+        return;
+    }
+
+    event.preventDefault();
+
+    // handle arrow navigation
+    const nextIndex = event.key === "ArrowUp" ? index - 1 : index + 1;
+    document.getElementById(`${props.id}-${selected}-${nextIndex}`)?.focus();
+}
+
+const highlightUnselected = reactive(useHighlight(unselectedOptionsFiltered));
+const highlightSelected = reactive(useHighlight(selectedOptionsFiltered));
+
+const selectText = computed(() => {
+    if (highlightUnselected.highlightedIndexes.length > 0) {
+        return "Select highlighted";
+    } else if (searchValue.value === "") {
+        return "Select all";
+    } else {
+        return "Select filtered";
+    }
+});
+
+const deselectText = computed(() => {
+    if (highlightSelected.highlightedIndexes.length > 0) {
+        return "Deselect highlighted";
+    } else if (searchValue.value === "") {
+        return "Deselect all";
+    } else {
+        return "Deselect filtered";
+    }
+});
+
+const unselectedCount = computed(() => {
+    if (searchValue.value === "") {
+        return `${props.options.length - selected.value.length}`;
+    } else {
+        let countString = `${unselectedOptionsFiltered.value.length}`;
+        if (moreUnselected.value) {
+            countString += "+";
+        }
+        return countString;
+    }
+});
+
+const selectedCount = computed(() => {
+    if (searchValue.value === "") {
+        return `${selected.value.length}`;
+    } else {
+        let countString = `${selectedOptionsFiltered.value.length}`;
+        if (moreSelected.value) {
+            countString += "+";
+        }
+        return countString;
+    }
+});
+</script>
+
+<template>
+    <div :id="props.id" class="form-select-many">
+        <fieldset class="search-bar">
+            <fieldset class="search-input">
+                <BFormInput
+                    v-model="searchValue"
+                    type="search"
+                    :state="regexInvalid ? false : undefined"
+                    :debounce="300"
+                    :placeholder="props.placeholder" />
+                <button
+                    class="inline-icon-button"
+                    :class="{ hidden: searchValue === '' }"
+                    title="Clear search"
+                    @click="searchValue = ''">
+                    <FontAwesomeIcon icon="fa-times" />
+                </button>
+            </fieldset>
+
+            <BButton
+                class="toggle-button case-sensitivity"
+                :variant="caseSensitive ? 'primary' : 'outline-primary'"
+                role="switch"
+                :aria-checked="`${caseSensitive}`"
+                title="case sensitive"
+                @click="caseSensitive = !caseSensitive">
+                Aa
+            </BButton>
+            <BButton
+                class="toggle-button use-regex"
+                :variant="useRegex ? 'primary' : 'outline-primary'"
+                role="switch"
+                :aria-checked="`${useRegex}`"
+                title="use regex"
+                @click="useRegex = !useRegex">
+                .*
+            </BButton>
+        </fieldset>
+
+        <div class="options-box border rounded mt-2">
+            <div class="selection-heading border-right px-2">
+                <span>
+                    Unselected
+                    <span class="font-weight-normal unselected-count"> ({{ unselectedCount }}) </span>
+                </span>
+                <BButton class="selection-button select" :title="selectText" variant="primary" @click="selectAll">
+                    {{ selectText }}
+                    <FontAwesomeIcon icon="fa-long-arrow-alt-right" />
+                </BButton>
+            </div>
+
+            <div
+                class="options-list unselected border-right"
+                tabindex="-1"
+                @keydown.up.down.prevent
+                @blur="highlightUnselected.abortHighlight">
+                <button
+                    v-for="(option, i) in unselectedOptionsFiltered"
+                    :id="`${props.id}-unselected-${i}`"
+                    :key="option.label"
+                    :tabindex="i === 0 ? 0 : -1"
+                    :class="{ highlighted: highlightUnselected.highlightedIndexes.includes(i) }"
+                    @click="(e) => selectOption(e, i)"
+                    @keydown="(e) => optionOnKey('unselected', e, i)">
+                    {{ option.label }}
+                </button>
+
+                <span v-if="moreUnselected" class="show-more-indicator">
+                    Limited to {{ unselectedDisplayCount }} options.
+                    <button class="show-more-button" @click="unselectedDisplayCount += 500">Show more</button>
+                </span>
+            </div>
+            <div class="selection-heading px-2">
+                <span>
+                    Selected
+                    <span class="font-weight-normal selected-count"> ({{ selectedCount }}) </span>
+                </span>
+                <BButton class="selection-button deselect" :title="deselectText" variant="primary" @click="deselectAll">
+                    <FontAwesomeIcon icon="fa-long-arrow-alt-left" />
+                    {{ deselectText }}
+                </BButton>
+            </div>
+
+            <div
+                class="options-list selected"
+                tabindex="-1"
+                @keydown.up.down.prevent
+                @blur="highlightSelected.abortHighlight">
+                <button
+                    v-for="(option, i) in selectedOptionsFiltered"
+                    :id="`${props.id}-selected-${i}`"
+                    :key="option.label"
+                    :tabindex="i === 0 ? 0 : -1"
+                    :class="{ highlighted: highlightSelected.highlightedIndexes.includes(i) }"
+                    @click="(e) => deselectOption(e, i)"
+                    @keydown="(e) => optionOnKey('selected', e, i)">
+                    {{ option.label }}
+                </button>
+
+                <span v-if="moreSelected" class="show-more-indicator">
+                    Limited to {{ selectedDisplayCount }} options.
+                    <button class="show-more-button" @click="selectedDisplayCount += 500">Show more</button>
+                </span>
+            </div>
+        </div>
+        <div class="bottom-row-info">
+            <span> Shift to highlight range. Ctrl to highlight multiple </span>
+            <span v-if="workerRunning" class="working-indicator"> Processing... </span>
+        </div>
+    </div>
+</template>
+
+<style scoped lang="scss">
+@import "theme/blue.scss";
+
+.form-select-many {
+    .search-bar {
+        display: grid;
+        grid-template-columns: 1fr 2.125rem 2.125rem;
+
+        > *:not(:first-child):not(:last-child) {
+            border-radius: 0;
+        }
+
+        > *:last-child {
+            border-top-left-radius: 0;
+            border-bottom-left-radius: 0;
+        }
+
+        .search-input {
+            position: relative;
+
+            input {
+                border-top-right-radius: 0;
+                border-bottom-right-radius: 0;
+            }
+
+            button {
+                position: absolute;
+                right: 4px;
+                top: 4px;
+                height: calc(100% - 8px);
+                width: 26px;
+
+                &.hidden:not(:focus) {
+                    color: transparent;
+
+                    &:hover {
+                        color: $white;
+                    }
+                }
+            }
+        }
+    }
+
+    .toggle-button {
+        padding-left: 0;
+        padding-right: 0;
+    }
+}
+
+.options-box {
+    resize: vertical;
+    overflow: hidden;
+    min-height: 200px;
+    height: 200px;
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    grid-template-rows: auto 1fr;
+    grid-auto-flow: column;
+    padding: 0.5rem;
+
+    .selection-heading {
+        color: $gray-600;
+        font-weight: bold;
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: space-between;
+
+        .selection-button {
+            height: 20px;
+            padding: 0 0.5rem;
+            display: flex;
+            align-items: center;
+            gap: 0.25rem;
+        }
+    }
+}
+
+.options-list {
+    overflow-y: scroll;
+    display: flex;
+    flex-direction: column;
+
+    button {
+        text-align: start;
+        border: none;
+        padding: 0 0.5rem;
+        background: none;
+        transition: none;
+        display: flex;
+        justify-content: space-between;
+
+        &.highlighted {
+            background-color: $brand-info;
+            border-radius: 0;
+            color: $white;
+
+            &:hover,
+            &:focus {
+                background-color: $brand-primary;
+
+                &::after {
+                    color: $white;
+                }
+            }
+        }
+
+        &:focus-visible {
+            outline-color: $brand-primary;
+            outline-width: 2px;
+            outline-offset: -2px;
+            outline-style: solid;
+            box-shadow: none;
+        }
+
+        &:hover,
+        &:focus {
+            background-color: $brand-secondary;
+
+            &::after {
+                content: "click to select";
+                color: darken($brand-secondary, 40%);
+                font-weight: bold;
+            }
+        }
+
+        &:focus-visible::after {
+            content: "enter to select";
+        }
+    }
+
+    .show-more-indicator {
+        display: flex;
+        font-style: italic;
+        padding-left: 0.5rem;
+        color: darken($gray-400, 20%);
+
+        .show-more-button:hover::after,
+        .show-more-button:focus::after {
+            content: none;
+        }
+
+        .show-more-button {
+            color: $brand-info;
+            text-decoration: underline;
+        }
+    }
+}
+
+.options-list.selected {
+    button {
+        &:hover,
+        &:focus {
+            &::after {
+                content: "click to deselect";
+            }
+        }
+
+        &:focus-visible::after {
+            content: "enter to deselect";
+        }
+    }
+}
+
+.bottom-row-info {
+    font-style: italic;
+    color: darken($gray-400, 10%);
+    font-size: 0.75rem;
+    padding: 0 0.25rem;
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+
+    .working-indicator {
+        color: $brand-primary;
+    }
+}
+</style>
diff --git a/client/src/components/Form/Elements/FormSelectMany/useHighlight.ts b/client/src/components/Form/Elements/FormSelectMany/useHighlight.ts
new file mode 100644
index 000000000000..8feb91eef706
--- /dev/null
+++ b/client/src/components/Form/Elements/FormSelectMany/useHighlight.ts
@@ -0,0 +1,111 @@
+import { type Ref, ref, watch } from "vue";
+
+import { assertDefined } from "@/utils/assertions";
+
+import type { SelectOption } from "./worker/selectMany";
+
+/**
+ * Handles logic required for highlighting options
+ * @param options Array of select options to handle highlighting for
+ */
+export function useHighlight(options: Ref<SelectOption[]>) {
+    const highlightedOptions = ref<SelectOption[]>([]);
+    const highlightedIndexes = ref<number[]>([]);
+
+    const reset = () => {
+        highlightedOptions.value = [];
+        highlightedIndexes.value = [];
+        abortHighlight();
+    };
+
+    watch(
+        () => options.value,
+        () => reset()
+    );
+
+    let highlightIndexStart = -1;
+
+    const rangeHighlight = (index: number) => {
+        if (highlightIndexStart === -1) {
+            highlightIndexStart = index;
+            addHighlight(index);
+            return;
+        }
+
+        const from = Math.min(highlightIndexStart, index);
+        const to = Math.max(highlightIndexStart, index);
+
+        for (let i = from; i <= to; i++) {
+            addHighlight(i);
+        }
+
+        highlightIndexStart = -1;
+    };
+
+    const rangeRemoveHighlight = (index: number) => {
+        if (highlightIndexStart === -1) {
+            highlightIndexStart = index;
+            removeHighlight(index);
+            return;
+        }
+
+        const from = Math.min(highlightIndexStart, index);
+        const to = Math.max(highlightIndexStart, index);
+
+        for (let i = from; i <= to; i++) {
+            removeHighlight(i);
+        }
+
+        highlightIndexStart = -1;
+    };
+
+    const removeHighlight = (index: number) => {
+        const position = highlightedIndexes.value.indexOf(index);
+
+        if (position !== -1) {
+            highlightedIndexes.value.splice(position, 1);
+            highlightedOptions.value.splice(position, 1);
+        }
+    };
+
+    const addHighlight = (index: number) => {
+        const position = highlightedIndexes.value.indexOf(index);
+
+        if (position === -1) {
+            highlightedIndexes.value.push(index);
+            const option = options.value[index];
+            assertDefined(option);
+            highlightedOptions.value.push(option);
+        }
+    };
+
+    const toggleHighlight = (index: number) => {
+        const position = highlightedIndexes.value.indexOf(index);
+
+        if (position === -1) {
+            highlightedIndexes.value.push(index);
+            const option = options.value[index];
+            assertDefined(option);
+            highlightedOptions.value.push(option);
+        } else {
+            highlightedIndexes.value.splice(position, 1);
+            highlightedOptions.value.splice(position, 1);
+        }
+    };
+
+    const abortHighlight = () => {
+        highlightIndexStart = -1;
+    };
+
+    return {
+        highlightedOptions,
+        highlightedIndexes,
+        reset,
+        rangeHighlight,
+        rangeRemoveHighlight,
+        toggleHighlight,
+        abortHighlight,
+        addHighlight,
+        removeHighlight,
+    };
+}
diff --git a/client/src/components/Form/Elements/FormSelectMany/worker/__mocks__/selectMany.ts b/client/src/components/Form/Elements/FormSelectMany/worker/__mocks__/selectMany.ts
new file mode 100644
index 000000000000..d040fb824da8
--- /dev/null
+++ b/client/src/components/Form/Elements/FormSelectMany/worker/__mocks__/selectMany.ts
@@ -0,0 +1,37 @@
+import { reactive, ref, watch } from "vue";
+
+import type { SelectOption, useSelectMany as UseSelectMany } from "../selectMany";
+import { main } from "../selectManyMain";
+
+jest.mock("@/components/Form/Elements/FormSelectMany/worker/selectMany", () => ({
+    useSelectMany,
+}));
+
+export const useSelectMany: typeof UseSelectMany = (options) => {
+    const unselectedOptionsFiltered = ref([] as SelectOption[]);
+    const selectedOptionsFiltered = ref([] as SelectOption[]);
+    const moreSelected = ref(false);
+    const moreUnselected = ref(false);
+    const running = ref(false);
+
+    watch(
+        [...Object.values(options)],
+        () => {
+            const result = main(reactive(options));
+
+            unselectedOptionsFiltered.value = result.unselectedOptionsFiltered;
+            selectedOptionsFiltered.value = result.selectedOptionsFiltered;
+            moreSelected.value = result.moreSelected;
+            moreUnselected.value = result.moreUnselected;
+        },
+        { immediate: true }
+    );
+
+    return {
+        unselectedOptionsFiltered,
+        selectedOptionsFiltered,
+        moreSelected,
+        moreUnselected,
+        running,
+    };
+};
diff --git a/client/src/components/Form/Elements/FormSelectMany/worker/filterOptions.ts b/client/src/components/Form/Elements/FormSelectMany/worker/filterOptions.ts
new file mode 100644
index 000000000000..6c3c26f3a38c
--- /dev/null
+++ b/client/src/components/Form/Elements/FormSelectMany/worker/filterOptions.ts
@@ -0,0 +1,16 @@
+import { SelectOption } from "./selectMany";
+
+export function filterOptions(options: SelectOption[], filter: string | RegExp, caseSensitive: boolean) {
+    let filteredSelectOptions;
+
+    if (filter instanceof RegExp) {
+        filteredSelectOptions = options.filter((option) => Boolean(option.label.match(filter)));
+    } else if (caseSensitive) {
+        filteredSelectOptions = options.filter((option) => option.label.includes(filter));
+    } else {
+        const filterLowercase = filter.toLowerCase();
+        filteredSelectOptions = options.filter((option) => option.label.toLowerCase().includes(filterLowercase));
+    }
+
+    return filteredSelectOptions;
+}
diff --git a/client/src/components/Form/Elements/FormSelectMany/worker/selectMany.d.ts b/client/src/components/Form/Elements/FormSelectMany/worker/selectMany.d.ts
new file mode 100644
index 000000000000..3f3ebf146dde
--- /dev/null
+++ b/client/src/components/Form/Elements/FormSelectMany/worker/selectMany.d.ts
@@ -0,0 +1,30 @@
+import type { Ref } from "vue";
+
+export type SelectValue = Record<string, unknown> | string | number | null;
+
+export interface SelectOption {
+    label: string;
+    value: SelectValue;
+}
+
+export interface UseSelectManyOptions {
+    optionsArray: Ref<SelectOption[]>;
+    filter: Ref<string | RegExp>;
+    selected: Ref<SelectValue[]>;
+    unselectedDisplayCount: Ref<number>;
+    selectedDisplayCount: Ref<number>;
+    caseSensitive: Ref<boolean>;
+}
+
+export interface UseSelectManyReturn {
+    unselectedOptionsFiltered: Ref<SelectOption[]>;
+    selectedOptionsFiltered: Ref<SelectOption[]>;
+    moreUnselected: Ref<boolean>;
+    moreSelected: Ref<boolean>;
+}
+
+/**
+ * Filter and grouping logic for FormSelectMany component.
+ * Runs in a thread, which is why it is abstracted in a composable.
+ */
+export declare function useSelectMany(options: UseSelectManyOptions): UseSelectManyReturn & { running: Ref<boolean> };
diff --git a/client/src/components/Form/Elements/FormSelectMany/worker/selectMany.js b/client/src/components/Form/Elements/FormSelectMany/worker/selectMany.js
new file mode 100644
index 000000000000..485e55bd23fc
--- /dev/null
+++ b/client/src/components/Form/Elements/FormSelectMany/worker/selectMany.js
@@ -0,0 +1,95 @@
+import { onScopeDispose, ref, watchEffect } from "vue";
+
+// glue code together with the .worker.js file, to run `main` in a thread
+
+let worker;
+let idCounter = 0;
+let workerReferenceCount = 0;
+
+export function useSelectMany({
+    optionsArray,
+    filter,
+    selected,
+    unselectedDisplayCount,
+    selectedDisplayCount,
+    caseSensitive,
+}) {
+    // only start a single worker
+    if (!worker) {
+        worker = new Worker(new URL("./selectMany.worker.js", import.meta.url));
+    }
+
+    workerReferenceCount += 1;
+
+    const id = idCounter++;
+
+    const unselectedOptionsFiltered = ref([]);
+    const selectedOptionsFiltered = ref([]);
+    const moreSelected = ref(false);
+    const moreUnselected = ref(false);
+    const running = ref(false);
+
+    const post = (message) => {
+        worker.postMessage({ id, ...message });
+        running.value = true;
+    };
+
+    onScopeDispose(() => {
+        workerReferenceCount -= 1;
+
+        if (workerReferenceCount === 0) {
+            worker.terminate();
+            worker = null;
+        } else {
+            post({ type: "clear" });
+            worker.removeEventListener("message", onMessage);
+        }
+    });
+
+    watchEffect(() => {
+        post({ type: "setArray", array: optionsArray.value });
+    });
+
+    watchEffect(() => {
+        post({ type: "setFilter", filter: filter.value });
+    });
+
+    watchEffect(() => {
+        post({ type: "setSelected", selected: selected.value });
+    });
+
+    watchEffect(() => {
+        post({
+            type: "setSettings",
+            unselectedDisplayCount: unselectedDisplayCount.value,
+            selectedDisplayCount: selectedDisplayCount.value,
+            caseSensitive: caseSensitive.value,
+        });
+    });
+
+    const onMessage = (e) => {
+        const message = e.data;
+
+        if (message.id !== id) {
+            return;
+        }
+
+        if (message.type === "result") {
+            unselectedOptionsFiltered.value = message.unselectedOptionsFiltered;
+            selectedOptionsFiltered.value = message.selectedOptionsFiltered;
+            moreSelected.value = message.moreSelected;
+            moreUnselected.value = message.moreUnselected;
+            running.value = false;
+        }
+    };
+
+    worker.addEventListener("message", onMessage);
+
+    return {
+        unselectedOptionsFiltered,
+        selectedOptionsFiltered,
+        moreSelected,
+        moreUnselected,
+        running,
+    };
+}
diff --git a/client/src/components/Form/Elements/FormSelectMany/worker/selectMany.worker.js b/client/src/components/Form/Elements/FormSelectMany/worker/selectMany.worker.js
new file mode 100644
index 000000000000..6eaed4c7638d
--- /dev/null
+++ b/client/src/components/Form/Elements/FormSelectMany/worker/selectMany.worker.js
@@ -0,0 +1,63 @@
+import { main } from "./selectManyMain";
+
+// glue code to run `main` in a thread
+
+const createOptions = () => {
+    return {
+        optionsArray: [],
+        filter: "",
+        selected: [],
+        unselectedDisplayCount: 1000,
+        selectedDisplayCount: 1000,
+        caseSensitive: false,
+    };
+};
+
+const optionsById = new Map();
+const timerById = {};
+
+self.addEventListener("message", (e) => {
+    const message = e.data;
+
+    if (!optionsById.has(message.id)) {
+        optionsById.set(message.id, createOptions());
+    }
+
+    const options = optionsById.get(message.id);
+
+    switch (message.type) {
+        case "setArray":
+            options.optionsArray = message.array;
+            break;
+
+        case "setFilter":
+            options.filter = message.filter;
+            break;
+
+        case "setSelected":
+            options.selected = message.selected;
+            break;
+
+        case "setSettings":
+            options.unselectedDisplayCount = message.unselectedDisplayCount;
+            options.selectedDisplayCount = message.selectedDisplayCount;
+            options.caseSensitive = message.caseSensitive;
+            break;
+
+        case "clear":
+            optionsById.delete(message.id);
+            return;
+
+        default:
+            break;
+    }
+
+    if (message.id in timerById) {
+        clearTimeout(timerById[message.id]);
+    }
+
+    timerById[message.id] = setTimeout(() => {
+        const result = main(options);
+        self.postMessage({ id: message.id, type: "result", ...result });
+    }, 10);
+});
diff --git a/client/src/components/Form/Elements/FormSelectMany/worker/selectManyMain.ts b/client/src/components/Form/Elements/FormSelectMany/worker/selectManyMain.ts
new file mode 100644
index 000000000000..0a35d9e04223
--- /dev/null
+++ b/client/src/components/Form/Elements/FormSelectMany/worker/selectManyMain.ts
@@ -0,0 +1,61 @@
+import type { UnwrapNestedRefs } from "vue";
+
+import { filterOptions } from "./filterOptions";
+import type { SelectOption, SelectValue, UseSelectManyOptions, UseSelectManyReturn } from "./selectMany";
+
+export function main(options: UnwrapNestedRefs<UseSelectManyOptions>): UnwrapNestedRefs<UseSelectManyReturn> {
+    const unselectedOptionsFiltered: SelectOption[] = [];
+    const selectedOptionsFiltered: SelectOption[] = [];
+
+    const filteredSelectOptions = filterOptions(options.optionsArray, options.filter, options.caseSensitive);
+
+    const selectedValues = new Set(options.selected.map(stringifyObject));
+
+    let moreUnselected = false;
+    let moreSelected = false;
+
+    for (let index = 0; index < filteredSelectOptions.length; index++) {
+        const option = filteredSelectOptions[index]!;
+
+        const value = stringifyObject(option.value);
+
+        const isSelected = selectedValues.has(value);
+
+        if (
+            unselectedOptionsFiltered.length > options.unselectedDisplayCount &&
+            selectedOptionsFiltered.length > options.selectedDisplayCount
+        ) {
+            break;
+        }
+
+        if (isSelected) {
+            if (selectedOptionsFiltered.length < options.selectedDisplayCount) {
+                selectedOptionsFiltered.push(option);
+            } else {
+                moreSelected = true;
+            }
+        } else {
+            if (unselectedOptionsFiltered.length < options.unselectedDisplayCount) {
+                unselectedOptionsFiltered.push(option);
+            } else {
+                moreUnselected = true;
+            }
+        }
+    }
+
+    return {
+        unselectedOptionsFiltered,
+        selectedOptionsFiltered,
+        moreUnselected,
+        moreSelected,
+    };
+}
+
+/**
+ * Convert object to strings, leaving every other value unchanged
+ * @param value
+ * @returns
+ */
+function stringifyObject(value: SelectValue) {
+    return typeof value === "object" && value !== null ? JSON.stringify(value) : value;
+}
diff --git a/client/src/components/Form/Elements/FormSelection.vue b/client/src/components/Form/Elements/FormSelection.vue
index 42d5a762e0d6..ca328723e6b0 100644
--- a/client/src/components/Form/Elements/FormSelection.vue
+++ b/client/src/components/Form/Elements/FormSelection.vue
@@ -1,11 +1,21 @@
 <script setup>
-import { computed } from "vue";
+import { library } from "@fortawesome/fontawesome-svg-core";
+import { faCaretDown } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
+import { BDropdown, BDropdownItemButton } from "bootstrap-vue";
+import { storeToRefs } from "pinia";
+import { computed, ref, watch } from "vue";
+
+import { useUserFlagsStore } from "@/stores/userFlagsStore";
 
 import FormCheck from "./FormCheck.vue";
 import FormRadio from "./FormRadio.vue";
 import FormSelect from "./FormSelect.vue";
+import FormSelectMany from "./FormSelectMany/FormSelectMany.vue";
+
+library.add(faCaretDown);
 
-const $emit = defineEmits(["input"]);
+const emit = defineEmits(["input"]);
 const props = defineProps({
     value: {
         default: null,
@@ -37,7 +47,7 @@ const currentValue = computed({
         return props.value;
     },
     set: (val) => {
-        $emit("input", val);
+        emit("input", val);
     },
 });
 
@@ -59,10 +69,78 @@ const currentOptions = computed(() => {
     }
     return result;
 });
+
+const useMany = ref(false);
+
+const { preferredFormSelectElement } = storeToRefs(useUserFlagsStore());
+
+watch(
+    () => preferredFormSelectElement.value,
+    (newValue, oldValue) => {
+        if (oldValue !== undefined) {
+            return;
+        }
+
+        if (newValue === "none") {
+            if ((Array.isArray(props.value) && props.value.length >= 15) || props.options.length >= 500) {
+                useMany.value = true;
+            } else {
+                useMany.value = false;
+            }
+        } else if (newValue === "many") {
+            useMany.value = true;
+        } else {
+            useMany.value = false;
+        }
+    },
+    { immediate: true }
+);
+
+const displayMany = computed(
+    () => props.multiple && props.display !== "checkboxes" && props.display !== "radio" && useMany.value
+);
+
+const showManyButton = computed(
+    () => props.multiple && props.display !== "checkboxes" && props.display !== "radio" && !useMany.value
+);
+
+const showMultiButton = computed(() => displayMany.value);
 </script>
 
 <template>
-    <FormCheck v-if="display === 'checkboxes'" v-model="currentValue" :options="currentOptions" />
-    <FormRadio v-else-if="display === 'radio'" v-model="currentValue" :options="currentOptions" />
-    <FormSelect v-else v-model="currentValue" :multiple="multiple" :optional="optional" :options="currentOptions" />
+    <div>
+        <FormCheck v-if="display === 'checkboxes'" v-model="currentValue" :options="currentOptions" />
+        <FormRadio v-else-if="display === 'radio'" v-model="currentValue" :options="currentOptions" />
+        <FormSelectMany v-else-if="displayMany" v-model="currentValue" :options="currentOptions" />
+        <FormSelect v-else v-model="currentValue" :multiple="multiple" :optional="optional" :options="currentOptions" />
+
+        <div class="d-flex">
+            <button v-if="showManyButton" class="ui-link ml-1" @click="useMany = true">switch to column select</button>
+            <button v-else-if="showMultiButton" class="ui-link ml-1" @click="useMany = false">
+                switch to simple select
+            </button>
+
+            <BDropdown toggle-class="inline-icon-button d-block px-1" variant="link" no-caret>
+                <template v-slot:button-content>
+                    <FontAwesomeIcon icon="fa-caret-down"></FontAwesomeIcon>
+                    <span class="sr-only">select element preferences</span>
+                </template>
+                <BDropdownItemButton
+                    :active="preferredFormSelectElement === 'none'"
+                    @click="preferredFormSelectElement = 'none'">
+                    No preference
+                </BDropdownItemButton>
+                <BDropdownItemButton
+                    :active="preferredFormSelectElement === 'multi'"
+                    @click="preferredFormSelectElement = 'multi'">
+                    Default to simple select
+                </BDropdownItemButton>
+                <BDropdownItemButton
+                    :active="preferredFormSelectElement === 'many'"
+                    @click="preferredFormSelectElement = 'many'">
+                    Default to column select
+                </BDropdownItemButton>
+            </BDropdown>
+        </div>
+    </div>
 </template>
diff --git a/client/src/composables/filter/filter.js b/client/src/composables/filter/filter.js
index e908f5d79bf4..15f630150a84 100644
--- a/client/src/composables/filter/filter.js
+++ b/client/src/composables/filter/filter.js
@@ -1,18 +1,18 @@
-import { resolveUnref } from "@vueuse/core";
+import { toValue } from "@vueuse/core";
 import { onScopeDispose, ref, watch } from "vue";
 
-export function useFilterObjectArray(array, filter, objectFields) {
+export function useFilterObjectArray(array, filter, objectFields, asRegex = false) {
     const worker = new Worker(new URL("./filter.worker.js", import.meta.url));
 
     const filtered = ref([]);
-    filtered.value = resolveUnref(array);
+    filtered.value = toValue(array);
 
     const post = (message) => {
         worker.postMessage(message);
     };
 
     watch(
-        () => resolveUnref(array),
+        () => toValue(array),
         (arr) => {
             post({ type: "setArray", array: arr });
         },
@@ -22,7 +22,7 @@ export function useFilterObjectArray(array, filter, objectFields) {
     );
 
     watch(
-        () => resolveUnref(filter),
+        () => toValue(filter),
         (f) => {
             post({ type: "setFilter", filter: f });
         },
@@ -32,7 +32,7 @@ export function useFilterObjectArray(array, filter, objectFields) {
     );
 
     watch(
-        () => resolveUnref(objectFields),
+        () => toValue(objectFields),
         (fields) => {
             post({ type: "setFields", fields });
         },
diff --git a/client/src/stores/userFlagsStore.ts b/client/src/stores/userFlagsStore.ts
index 2664e38000d2..a6d52a8d23c9 100644
--- a/client/src/stores/userFlagsStore.ts
+++ b/client/src/stores/userFlagsStore.ts
@@ -2,8 +2,14 @@ import { defineStore } from "pinia";
 
 import { useUserLocalStorage } from "@/composables/userLocalStorage";
 
+export type PreferredFormSelect = "none" | "multi" | "many";
+
 export const useUserFlagsStore = defineStore("userFlagsStore", () => {
     const showSelectionQueryBreakWarning = useUserLocalStorage("user-flags-store-show-break-warning", true);
+    const preferredFormSelectElement = useUserLocalStorage(
+        "user-flags-store-preferred-form-select",
+        "none" as PreferredFormSelect
+    );
 
     function ignoreSelectionQueryBreakWarning() {
         showSelectionQueryBreakWarning.value = false;
@@ -12,5 +18,6 @@ export const useUserFlagsStore = defineStore("userFlagsStore", () => {
     return {
         showSelectionQueryBreakWarning,
         ignoreSelectionQueryBreakWarning,
+        preferredFormSelectElement,
     };
 });