diff --git a/src/components/multiselect.vue b/src/components/multiselect.vue
new file mode 100644
index 000000000..df784d615
--- /dev/null
+++ b/src/components/multiselect.vue
@@ -0,0 +1,493 @@
+<!--
+Copyright 2022 ODK Central Developers
+See the NOTICE file at the top-level directory of this distribution and at
+https://github.com/getodk/central-frontend/blob/master/NOTICE.
+
+This file is part of ODK Central. It is subject to the license terms in
+the LICENSE file found in the top-level directory of this distribution and at
+https://www.apache.org/licenses/LICENSE-2.0. No part of ODK Central,
+including this file, may be copied, modified, propagated, or distributed
+except according to the terms contained in the LICENSE file.
+-->
+<template>
+  <div ref="dropdown" class="multiselect form-group">
+    <!-- Specifying @mousedown.prevent so that clicking the select element does
+    not show a menu with the placeholder option. This approach seems to work
+    across browsers. -->
+    <select :id="toggleId" ref="toggle" class="form-control"
+      :disabled="options == null" data-toggle="dropdown" role="button"
+      aria-haspopup="true" aria-expanded="false" :aria-label="label"
+      @keydown="toggleAfterEnter" @mousedown.prevent>
+      <option value="">{{ selectOption }}</option>
+    </select>
+    <span class="form-label">{{ label }}</span>
+    <!-- Specifying @click.stop so that clicking the .dropdown-menu does not
+    hide it. -->
+    <ul class="dropdown-menu" :aria-labelledby="toggleId" @click.stop>
+      <li v-if="search != null" class="search">
+        <div class="form-group">
+          <input ref="searchInput" v-model="searchValue" class="form-control"
+            :placeholder="search" :aria-label="search" autocomplete="off">
+          <button v-show="searchValue !== ''" type="button" class="close"
+            :aria-label="$t('action.clear')" @click="clearSearch">
+            <span aria-hidden="true">&times;</span>
+          </button>
+        </div>
+      </li>
+      <li class="change-all">
+        <i18n-t tag="div" keypath="action.select">
+          <template #all>
+            <a class="select-all" href="#" role="button" @click.prevent="changeAll(true)">{{ all }}</a>
+          </template>
+          <template #none>
+            <a class="select-none" href="#" role="button" @click.prevent="changeAll(false)">{{ none }}</a>
+          </template>
+        </i18n-t>
+      </li>
+      <li>
+        <ul ref="optionList" class="option-list"
+          :class="{ 'shows-all': searchValue === '' }" @change="changeCheckbox">
+          <template v-if="options != null">
+            <li v-for="({ value, key = value, text = value, title = text }, i) in options"
+              :key="key" :class="{ 'search-match': searchMatches.has(value) }">
+              <div class="checkbox">
+                <label>
+                  <input type="checkbox" :data-index="i">
+                  <span :title="title">{{ text }}</span>
+                </label>
+              </div>
+            </li>
+          </template>
+          <li class="empty-message">{{ emptyMessage }}</li>
+        </ul>
+      </li>
+      <li class="after-list">
+        <slot name="after-list" :selected="selected"></slot>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script>
+let id = 1;
+</script>
+<script setup>
+import { computed, inject, onBeforeUnmount, onMounted, onUnmounted, ref, shallowReactive, watch, watchEffect } from 'vue';
+
+const props = defineProps({
+  /*
+  `options` specifies the list of possible options. Each option specifies a
+  value, as well as optionally text and other properties:
+
+    - value. This property is required. It specifies a unique value for the
+      option, which will be emitted for props.modelValue if the option is
+      selected.
+    - key. The Multiselect component uses the `key` attribute to uniquely
+      identify options. By default, Multiselect passes the `value` property to
+      the `key` attribute. However, if `value` is not a primitive, then you must
+      specify a different value using the `key` property. In that case, the
+      `key` property should be a function of `value`: for example, if `value`
+      changes, then `key` should also change.
+    - text. The text to show for the option. Defaults to the `value` property.
+    - title. The title to show for the option. This property can be used to
+      display additional text. Defaults to the `text` property.
+
+  If `options` is `null` (for example, because the options are loading), then
+  the dropdown will not be shown.
+
+  The component assumes that `options` will not change while the dropdown is
+  shown.
+  */
+  options: {
+    type: Array,
+    required: false
+  },
+  // props.modelValue is an array of the values of the options that have been
+  // selected. Every value in modelValue should also be in props.options, unless
+  // props.options is `null`. The relative order of the values in modelValue may
+  // differ from their relative order in props.options. The component assumes
+  // that modelValue will not change while the dropdown is shown.
+  modelValue: {
+    type: Array,
+    required: true
+  },
+
+  // `true` if the options are loading and `false` if not.
+  loading: Boolean,
+
+  // Text, including for form controls and actions
+  label: {
+    type: String,
+    required: true
+  },
+  placeholder: {
+    type: Function,
+    required: true
+  },
+  all: {
+    type: String,
+    required: true
+  },
+  none: {
+    type: String,
+    required: true
+  },
+  search: {
+    type: String,
+    required: false
+  },
+  empty: {
+    type: String,
+    required: false
+  }
+});
+const emit = defineEmits(['update:modelValue']);
+
+const optionList = ref(null);
+
+
+
+////////////////////////////////////////////////////////////////////////////////
+// SYNC props.modelValue AND CHECKBOXES
+
+/*
+We try to keep props.modelValue and the checkboxes in sync. Either one can
+change the other. If props.modelValue changes, then the component updates the
+checkboxes. And if the user changes one or more checkboxes, then once the
+dropdown is hidden, the component emits an update:modelValue event. (The parent
+component is allowed to ignore that event, in which case props.modelValue and
+the checkboxes will remain out-of-sync.)
+
+To help keep props.modelValue and the checkboxes in sync, we use `selected` to
+track the values of the selected options. `selected` matches which checkboxes
+are checked.
+
+We also use `changes` to track the user's changes since the dropdown was shown.
+`changes` is cleared when the dropdown is hidden and the update:modelValue event
+emitted regardless of whether the parent component actually changes
+props.modelValue. In other words, `changes` tracks the difference between the
+current selection and the selection when the dropdown was shown. That may be the
+same as the difference between props.modelValue and the checkboxes, but it might
+not be (if an update:modelValue event was ignored).
+*/
+
+// `selected` needs to be reactive for the after-list slot.
+const selected = shallowReactive(new Set());
+const changes = new Set();
+const change = (value) => {
+  if (selected.has(value))
+    selected.delete(value);
+  else
+    selected.add(value);
+
+  if (changes.has(value))
+    changes.delete(value);
+  else
+    changes.add(value);
+};
+
+let needsSync = true;
+// Syncs the checkboxes and `selected` with props.modelValue.
+const syncWithModelValue = () => {
+  if (!needsSync) return;
+
+  selected.clear();
+  for (const value of props.modelValue) selected.add(value);
+
+  const checkboxes = optionList.value.querySelectorAll('input');
+  for (let i = 0; i < checkboxes.length; i += 1)
+    checkboxes[i].checked = selected.has(props.options[i].value);
+
+  needsSync = false;
+};
+
+const changeCheckbox = ({ target }) => {
+  change(props.options[target.dataset.index].value);
+};
+
+// emittedValue holds the last value that has been emitted since
+// props.modelValue was last set. It equals `null` if no value has been emitted
+// since then, or if no value has ever been emitted. We use emittedValue for an
+// optimization in order to avoid an extra sync.
+let emittedValue = null;
+const emitIfChanged = () => {
+  if (changes.size === 0) return;
+  changes.clear();
+  emittedValue = [...selected];
+  emit('update:modelValue', emittedValue);
+};
+
+watch(
+  () => props.modelValue,
+  (modelValue) => {
+    // If modelValue === emittedValue, then we don't need to sync anything.
+    if (modelValue !== emittedValue) {
+      /* We set needsSync rather than immediately calling syncWithModelValue().
+      We do that for two reasons. First, and most importantly, if
+      props.modelValue and props.options are both changed in the same tick, then
+      any checkboxes for new options won't be rendered yet. Second, if
+      props.modelValue will change multiple times while the dropdown is hidden,
+      syncing multiple times is unnecessary. */
+      needsSync = true;
+      // syncWithModelValue() will also clear `selected`, but we might as well
+      // free up the memory now.
+      selected.clear();
+    }
+
+    emittedValue = null;
+  },
+  { deep: true }
+);
+
+if (process.env.NODE_ENV === 'development') {
+  const optionValues = computed(() =>
+    props.options.reduce((set, { value }) => set.add(value), new Set()));
+  const notFound = computed(() =>
+    props.modelValue.find(value => !optionValues.value.has(value)));
+  watchEffect(() => {
+    if (props.options != null && notFound.value != null) {
+      // eslint-disable-next-line no-console
+      console.warn('modelValue not among options', {
+        options: props.options,
+        modelValue: props.modelValue,
+        notFound: notFound.value
+      });
+    }
+  });
+}
+
+
+
+////////////////////////////////////////////////////////////////////////////////
+// SEARCH
+
+const searchValue = ref('');
+const searchMatches = shallowReactive(new Set());
+const { i18n } = inject('container');
+const textToSearch = computed(() => props.options.map(option => {
+  const text = option.text != null ? option.text : option.value.toString();
+  const result = [text.toLocaleLowerCase(i18n.locale)];
+  const { title } = option;
+  if (title != null && title !== text)
+    result.push(title.toLocaleLowerCase(i18n.locale));
+  return result;
+}));
+// We may need to add debouncing here at some point.
+watch(searchValue, (value) => {
+  searchMatches.clear();
+  if (value === '') return;
+  const searchToLowerCase = value.toLocaleLowerCase(i18n.locale);
+  for (let i = 0; i < props.options.length; i += 1) {
+    if (textToSearch.value[i].some(text => text.includes(searchToLowerCase)))
+      searchMatches.add(props.options[i].value);
+  }
+});
+
+const searchInput = ref(null);
+const clearSearch = () => {
+  searchValue.value = '';
+  searchInput.value.focus();
+};
+
+// Fix the width of .option-list during search so that it doesn't change based
+// on the search results. The width won't change even if the scrollbar
+// disappears or reappears during the search.
+watch(searchValue, (value) => {
+  const { style } = optionList.value;
+  if (value === '') {
+    style.width = '';
+  } else if (style.width === '') {
+    const { width } = optionList.value.getBoundingClientRect();
+    style.width = `${width}px`;
+  }
+});
+
+
+
+////////////////////////////////////////////////////////////////////////////////
+// BOOTSTRAP DROPDOWN
+
+const dropdown = ref(null);
+const $dropdown = computed(() => $(dropdown.value));
+onMounted(() => {
+  $dropdown.value.on('shown.bs.dropdown', syncWithModelValue);
+  $dropdown.value.on('hidden.bs.dropdown', () => {
+    searchValue.value = '';
+    emitIfChanged();
+  });
+});
+onUnmounted(() => { $dropdown.value.off('.bs.dropdown'); });
+
+const toggle = ref(null);
+const toggleId = `multiselect-toggle${id}`;
+id += 1;
+const $toggle = computed(() => $(toggle.value));
+const toggleAfterEnter = ({ key }) => {
+  if (key === 'Enter') $toggle.value.dropdown('toggle');
+};
+
+if (process.env.NODE_ENV === 'test') {
+  const verifyAttached = ({ target }) => {
+    if (target.closest('body') == null)
+      // eslint-disable-next-line no-console
+      console.error('Clicking Multiselect toggle has no effect unless component is attached to body.');
+  };
+  onMounted(() => { toggle.value.addEventListener('click', verifyAttached); });
+  onBeforeUnmount(() => {
+    toggle.value.removeEventListener('click', verifyAttached);
+  });
+}
+
+
+
+////////////////////////////////////////////////////////////////////////////////
+// SELECT ALL / NONE
+
+// `true` for select all, `false` for select none.
+const changeAll = (selectAll) => {
+  if (selected.size === (selectAll ? props.options.length : 0)) return;
+  const selector = [selectAll ? 'input:not(:checked)' : 'input:checked'];
+  if (searchValue.value !== '') selector.unshift('.search-match');
+  for (const input of optionList.value.querySelectorAll(selector.join(' '))) {
+    input.checked = selectAll;
+    change(props.options[input.dataset.index].value);
+  }
+};
+
+
+
+////////////////////////////////////////////////////////////////////////////////
+// OTHER PROPS
+
+// Implements props.loading and props.placeholder.
+const selectOption = computed(() => {
+  if (props.loading) return i18n.t('common.loading');
+  if (props.options == null) return i18n.t('common.error');
+  const { placeholder } = props;
+  return placeholder({
+    selected: i18n.n(props.modelValue.length, 'default'),
+    total: i18n.n(props.options.length, 'default')
+  });
+});
+
+// Implements props.empty.
+const emptyMessage = computed(() => (searchValue.value === ''
+  ? (props.options != null && props.options.length === 0
+    ? (props.empty != null ? props.empty : i18n.t('common.noResults'))
+    : '')
+  : (searchMatches.size === 0 ? i18n.t('common.noResults') : '')));
+</script>
+
+<style lang="scss">
+@import '../assets/scss/mixins';
+
+.multiselect {
+  select { min-width: 111px; }
+
+  $line-height: 1;
+  .dropdown-menu {
+    border-radius: 0;
+    line-height: $line-height;
+    margin-top: 0;
+    padding-bottom: 0;
+  }
+
+  $hpadding: 9px;
+  $vpadding: 6px;
+  .search {
+    padding: $vpadding $hpadding;
+
+    // The Multiselect component may be inside a .form-inline.
+    .form-group { display: block; }
+
+    .form-control {
+      background-color: #fff;
+      display: block;
+      font-size: $font-size-dropdown-menu;
+      height: auto;
+      line-height: $line-height;
+      // padding-right for the .close button.
+      padding: 0 16px 0 0;
+      width: 100%;
+
+      &, &:focus { border-bottom: none; }
+
+      &::placeholder {
+        color: #666;
+        font-style: italic;
+      }
+    }
+
+    .close {
+      font-size: 18px;
+      right: 0;
+      top: -5px;
+    }
+  }
+
+  .change-all { padding: #{0.5 * $vpadding} $hpadding $vpadding; }
+
+  .option-list {
+    background-color: $color-subpanel-background;
+    font-size: 14px;
+    list-style: none;
+    max-height: 250px;
+    overflow: visible auto;
+    padding-bottom: 3px;
+    padding-left: 0;
+    padding-top: $vpadding;
+
+    li {
+      display: none;
+      max-width: 265px;
+      padding-left: $hpadding;
+      padding-right: $hpadding;
+    }
+    &.shows-all li, li.search-match { display: list-item; }
+
+    .checkbox {
+      display: block;
+      label { @include text-overflow-ellipsis; }
+    }
+
+    input[type="checkbox"] {
+      margin-top: 0;
+      margin-right: 5px;
+    }
+
+    .empty-message {
+      display: list-item;
+      // 22px is the same as the other <li> elements.
+      height: 22px;
+      // Give .empty-message a larger max-width to help it not wrap.
+      max-width: 375px;
+      padding-top: 3px;
+      // This seems to be needed for .empty-message to use the full max-width
+      // available to it.
+      width: max-content;
+
+      &:empty { display: none; }
+    }
+  }
+
+  .after-list {
+    padding: $vpadding $hpadding;
+
+    &:empty { display: none; }
+  }
+}
+</style>
+
+<i18n lang="json5">
+{
+  "en": {
+    "action": {
+      // This text is shown in a dropdown that allows the user to make one or
+      // more selections. {all} has the text "All", and {none} has the text
+      // "None". {all} and {none} will be translated separately based on what is
+      // being selected.
+      "select": "Select {all} / {none}"
+    }
+  }
+}
+</i18n>
diff --git a/src/components/submission/field-dropdown.vue b/src/components/submission/field-dropdown.vue
index 756e38ee1..28c6b29a8 100644
--- a/src/components/submission/field-dropdown.vue
+++ b/src/components/submission/field-dropdown.vue
@@ -10,190 +10,50 @@ including this file, may be copied, modified, propagated, or distributed
 except according to the terms contained in the LICENSE file.
 -->
 <template>
-  <div id="submission-field-dropdown" class="form-group">
-    <!-- Specifying @mousedown.prevent so that clicking the select element does
-    not show a menu with the placeholder option. This approach seems to work
-    across browsers. -->
-    <select id="submission-field-dropdown-toggle" ref="select"
-      class="form-control" data-toggle="dropdown" role="button"
-      aria-haspopup="true" aria-expanded="false"
-      :aria-label="$t('field.columns')" @keydown="toggleAfterEnter"
-      @mousedown.prevent>
-      <option value="">{{ placeholder }}</option>
-    </select>
-    <span class="form-label">{{ $t('field.columns') }}</span>
-    <!-- Specifying @click.stop so that clicking the .dropdown-menu does not
-    hide it. -->
-    <ul class="dropdown-menu" aria-labelledby="submission-field-dropdown-toggle"
-      @click.stop>
-      <li class="search">
-        <div class="form-group">
-          <input ref="search" v-model="search" class="form-control"
-            :placeholder="$t('field.search')" :aria-label="$t('field.search')"
-            autocomplete="off">
-          <button v-show="search !== ''" type="button" class="close"
-            :aria-label="$t('action.clear')" @click="clearSearch">
-            <span aria-hidden="true">&times;</span>
-          </button>
-        </div>
-      </li>
-      <li class="toggle-all">
-        <i18n-t tag="div" keypath="action.select.full">
-          <template #all>
-            <a href="#" :class="{ disabled: disablesSelectAll }"
-              :title="disablesSelectAll ? $t('disabled') : null" role="button"
-              @click.prevent="selectAll">{{ $t('action.select.all') }}</a>
-          </template>
-          <template #none>
-            <a href="#" role="button" @click.prevent="selectNone">{{ $t('action.select.none') }}</a>
-          </template>
-        </i18n-t>
-      </li>
-      <li>
-        <ul>
-          <li v-for="field of fields.selectable" :key="field.path"
-            :class="{ 'search-match': matchesSearch(field) }">
-            <div class="checkbox"
-              :class="{ disabled: disablesCheckbox(field) }">
-              <label :title="disablesCheckbox(field) ? $t('disabled') : null">
-                <input type="checkbox" :checked="checked[field.path]"
-                  :disabled="disablesCheckbox(field)" @change="toggle(field)">
-                <span :title="!disablesCheckbox(field) ? field.header : null">{{ field.name }}</span>
-              </label>
-            </div>
-          </li>
-          <li>{{ $t('common.noResults') }}</li>
-        </ul>
-      </li>
-    </ul>
-  </div>
+  <multiselect id="submission-field-dropdown" :model-value="modelValue"
+    :options="options" :label="$t('field.columns')" :placeholder="placeholder"
+    :all="$t('action.select.all')" :none="$t('action.select.none')"
+    :search="$t('field.search')"
+    @update:model-value="$emit('update:modelValue', $event)">
+    <template #after-list="{ selected }">
+      <template v-if="selected.size > 100">
+        <span class="icon-exclamation-triangle"></span>{{ $t('warning') }}
+      </template>
+    </template>
+  </multiselect>
 </template>
 
 <script>
-import { equals } from 'ramda';
-import { markRaw } from 'vue';
-
-import { useRequestData } from '../../request-data';
-
-// This constant is also used in the `disabled` message.
-const maxCheckedCount = 100;
-
 export default {
-  name: 'SubmissionFieldDropdown',
-  props: {
-    modelValue: {
-      type: Array,
-      required: true
-    }
-  },
-  emits: ['update:modelValue'],
-  setup() {
-    const { fields } = useRequestData();
-    return { fields };
-  },
-  data() {
-    const checked = {};
-    for (const field of this.fields.selectable)
-      checked[field.path] = false;
-    for (const field of this.modelValue)
-      checked[field.path] = true;
-
-    return {
-      checked,
-      checkedCount: this.modelValue.length,
-      search: '',
-      // jQuery wrappers
-      wrappers: markRaw({
-        parent: null,
-        toggle: null
-      })
-    };
-  },
-  computed: {
-    placeholder() {
-      return this.$t('placeholder', {
-        selected: this.$n(this.modelValue.length, 'default'),
-        total: this.$n(this.fields.selectable.length, 'default')
-      });
-    },
-    searchToLowerCase() {
-      return this.search.toLowerCase();
-    },
-    disablesSelectAll() {
-      if (this.checkedCount === maxCheckedCount) return true;
-      const countIfSelectAll = this.fields.selectable.reduce(
-        (count, field) => (!this.checked[field.path] && this.matchesSearch(field)
-          ? count + 1
-          : count),
-        this.checkedCount
-      );
-      return countIfSelectAll > maxCheckedCount;
-    }
-  },
-  watch: {
-    modelValue(value) {
-      for (const field of this.fields.selectable)
-        this.checked[field.path] = false;
-      for (const field of value)
-        this.checked[field.path] = true;
+  name: 'SubmissionFieldDropdown'
+};
+</script>
+<script setup>
+import { computed } from 'vue';
+import { useI18n } from 'vue-i18n';
 
-      this.checkedCount = value.length;
-    }
-  },
-  mounted() {
-    this.wrappers.parent = $(this.$el).on('hidden.bs.dropdown', this.afterHide);
-    this.wrappers.toggle = $(this.$refs.select);
-  },
-  beforeUnmount() {
-    this.wrappers.parent.off('hidden.bs.dropdown');
-  },
-  methods: {
-    toggleAfterEnter(event) {
-      if (event.key === 'Enter') this.wrappers.toggle.dropdown('toggle');
-    },
-    clearSearch() {
-      this.search = '';
-      this.$refs.search.focus();
-    },
-    matchesSearch(field) {
-      return this.search === '' ||
-        field.header.toLowerCase().includes(this.searchToLowerCase);
-    },
-    selectAll() {
-      if (this.disablesSelectAll) return;
-      for (const field of this.fields.selectable) {
-        if (!this.checked[field.path] && this.matchesSearch(field)) {
-          this.checked[field.path] = true;
-          this.checkedCount += 1;
-        }
-      }
-    },
-    selectNone() {
-      for (const field of this.fields.selectable) {
-        if (this.checked[field.path] && this.matchesSearch(field)) {
-          this.checked[field.path] = false;
-          this.checkedCount -= 1;
-        }
-      }
-    },
-    disablesCheckbox(field) {
-      return this.checkedCount === maxCheckedCount && !this.checked[field.path];
-    },
-    toggle(field) {
-      const fieldWasChecked = this.checked[field.path];
-      this.checked[field.path] = !fieldWasChecked;
-      this.checkedCount += fieldWasChecked ? -1 : 1;
-    },
-    afterHide() {
-      const newValue = this.fields.selectable.filter(field =>
-        this.checked[field.path]);
-      if (!equals(newValue, this.modelValue))
-        this.$emit('update:modelValue', newValue);
+import Multiselect from '../multiselect.vue';
+import { useRequestData } from '../../request-data';
 
-      this.search = '';
-    }
+defineProps({
+  modelValue: {
+    type: Array,
+    required: true
   }
-};
+});
+defineEmits(['update:modelValue']);
+
+// The component assumes that this data will exist when the component is
+// created.
+const { fields } = useRequestData();
+const options = computed(() => fields.selectable.map(field => ({
+  value: field,
+  key: field.path,
+  text: field.name,
+  title: field.header
+})));
+const { t } = useI18n();
+const placeholder = (counts) => t('placeholder', counts);
 </script>
 
 <style lang="scss">
@@ -203,91 +63,14 @@ export default {
   select {
     background-color: #777;
     color: #fff;
-    min-width: 111px;
-  }
-
-  $line-height: 1;
-  .dropdown-menu {
-    border-radius: 0;
-    line-height: $line-height;
-    margin-top: 0;
-    padding-bottom: 0;
-  }
-
-  $hpadding: 9px;
-  $vpadding: 6px;
-  .search {
-    padding: $vpadding $hpadding;
-
-    // SubmissionFieldDropdown is inside a .form-inline.
-    .form-group { display: block; }
-
-    .form-control {
-      background-color: #fff;
-      display: block;
-      font-size: $font-size-dropdown-menu;
-      height: auto;
-      line-height: $line-height;
-      // padding-right for the .close button.
-      padding: 0 16px 0 0;
-      width: 100%;
-
-      &, &:focus { border-bottom: none; }
-
-      &::placeholder {
-        color: #666;
-        font-style: italic;
-      }
-    }
-
-    .close {
-      font-size: 18px;
-      right: 0;
-      top: -5px;
-    }
   }
 
-  .toggle-all { padding: #{0.5 * $vpadding} $hpadding $vpadding; }
-
-  .dropdown-menu ul {
-    background-color: $color-subpanel-background;
+  .dropdown-menu { width: 275px; }
+  .after-list {
+    background-color: $color-warning-light;
     font-size: 14px;
-    list-style: none;
-    max-height: 250px;
-    overflow: visible auto;
-    padding-bottom: 3px;
-    padding-left: 0;
-    padding-top: $vpadding;
-    // Specifying a fixed width so that the width does not change during search.
-    width: 275px;
-
-    li {
-      padding-left: $hpadding;
-      padding-right: $hpadding;
-
-      &:last-child {
-        // 22px is the same as the other <li> elements.
-        height: 22px;
-        padding-top: 3px;
-      }
-
-      display: none;
-      &:last-child { display: list-item; }
-      &.search-match {
-        display: list-item;
-        ~ :last-child { display: none; }
-      }
-    }
-  }
-
-  .checkbox {
-    display: block;
-    label { @include text-overflow-ellipsis; }
-  }
 
-  input[type="checkbox"] {
-    margin-top: 0;
-    margin-right: 5px;
+    .icon-exclamation-triangle { margin-right: $margin-right-icon; }
   }
 }
 </style>
@@ -307,16 +90,19 @@ export default {
       "columns": "Columns shown",
       "search": "Search columns…"
     },
-    "disabled": "Cannot select more than 100 columns.",
     "action": {
-      // This text is shown in a dropdown that allows the user to select which
-      // columns to display in a table.
       "select": {
-        "full": "Select {all} / {none}",
+        /* This text is shown in a dropdown that allows the user to select which columns to display in a table. It will be inserted where {all} is in the following text:
+
+Select {all} / {none} */
         "all": "All",
+        /* This text is shown in a dropdown that allows the user to select which columns to display in a table. It will be inserted where {none} is in the following text:
+
+Select {all} / {none} */
         "none": "None"
       }
-    }
+    },
+    "warning": "Selecting too many columns might slow down your computer."
   }
 }
 </i18n>
diff --git a/src/components/submission/filters.vue b/src/components/submission/filters.vue
index dd239a5fe..150f6b026 100644
--- a/src/components/submission/filters.vue
+++ b/src/components/submission/filters.vue
@@ -38,7 +38,7 @@ export default {
   },
   props: {
     submitterId: {
-      type: String,
+      type: Array,
       required: true
     },
     submissionDate: {
diff --git a/src/components/submission/filters/review-state.vue b/src/components/submission/filters/review-state.vue
index 2bb3c59e8..e2cc12ebf 100644
--- a/src/components/submission/filters/review-state.vue
+++ b/src/components/submission/filters/review-state.vue
@@ -10,89 +10,85 @@ including this file, may be copied, modified, propagated, or distributed
 except according to the terms contained in the LICENSE file.
 -->
 <template>
-  <label id="submission-filters-review-state" class="form-group">
-    <select v-model="selectValue" class="form-control">
-      <option value="">{{ $t('anyState') }}</option>
-      <option v-for="reviewState of reviewStates" :key="reviewState"
-        :value="odataLiteral(reviewState)">
-        {{ $t(`reviewState.${reviewState}`) }}
-      </option>
-    </select>
-    <span class="form-label">{{ $t('field.reviewState') }}</span>
-  </label>
+  <multiselect id="submission-filters-review-state" :model-value="selectValue"
+    :options="options" :label="$t('field.reviewState')"
+    :placeholder="placeholder" :all="$t('action.select.all')"
+    :none="$t('action.select.none')" @update:model-value="update"/>
 </template>
 
 <script>
+export default {
+  name: 'SubmissionFiltersReviewState'
+};
+</script>
+<script setup>
+import { inject, nextTick, ref, watch } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+import Multiselect from '../../multiselect.vue';
+
 import useReviewState from '../../../composables/review-state';
 import { odataLiteral } from '../../../util/odata';
 
-export default {
-  name: 'SubmissionFiltersReviewState',
-  props: {
-    // modelValue is an array because at one point, the filter was a
-    // <select multiple>. However, the native <select multiple> was a confusing
-    // user experience, so we made the filter a single-select. modelValue is
-    // still an array because the filter will hopefully become a multiselect
-    // again at some point (one with an improved user experience).
-    modelValue: {
-      type: Array,
-      required: true
-    }
-  },
-  emits: ['update:modelValue'],
-  setup() {
-    const { reviewStates } = useReviewState();
-    return { reviewStates };
-  },
-  computed: {
-    selectValue: {
-      get() {
-        return this.modelValue.length !== 0 ? this.modelValue[0] : '';
-      },
-      set(value) {
-        this.$emit('update:modelValue', value !== '' ? [value] : []);
-      }
+const props = defineProps({
+  modelValue: {
+    type: Array,
+    required: true
+  }
+});
+const emit = defineEmits(['update:modelValue']);
+
+const { reviewStates } = useReviewState();
+const { i18n: globalI18n } = inject('container');
+const options = reviewStates.map(reviewState => ({
+  value: odataLiteral(reviewState),
+  text: globalI18n.t(`reviewState.${reviewState}`)
+}));
+
+const selectValue = ref(props.modelValue);
+watch(() => props.modelValue, (value) => { selectValue.value = value; });
+const update = (value) => {
+  if (value.length !== 0) {
+    emit('update:modelValue', value);
+  } else {
+    // If no review states are selected, then the selection falls back to all
+    // review states. If that's not the selection already, then we emit all
+    // review states. Otherwise, there's no change to emit, but we still need to
+    // make a temporary change to selectValue in order to force the Multiselect
+    // to recheck the checkboxes.
+    const all = options.map(option => option.value);
+    if (props.modelValue.length !== all.length) {
+      emit('update:modelValue', all);
+    } else {
+      selectValue.value = value;
+      nextTick(() => { selectValue.value = all; });
     }
-  },
-  methods: {
-    odataLiteral
   }
 };
+
+const { t } = useI18n();
+const placeholder = (counts) => t('placeholder', counts);
 </script>
 
 <i18n lang="json5">
 {
   "en": {
-    // This text is shown in a dropdown that allows the user to filter to show
-    // only Submissions in a particular Review State.
-    "anyState": "(Any State)"
-  }
-}
-</i18n>
+    // This is the text of a dropdown that allows the user to select one or more
+    // Review States. {selected} is the number of selected Review States;
+    // {total} is the total number of Review States.
+    "placeholder": "{selected} of {total}",
+    "action": {
+      "select": {
+        /* This text is shown in a dropdown that allows the user to select one or more Review States. It will be inserted where {all} is in the following text:
 
-<!-- Autogenerated by destructure.js -->
-<i18n>
-{
-  "cs": {
-    "anyState": "(Jakýkoli stav)"
-  },
-  "de": {
-    "anyState": "(Beliebiger Status)"
-  },
-  "es": {
-    "anyState": "(Cualquier estado)"
-  },
-  "fr": {
-    "anyState": "(Tous états)"
-  },
-  "it": {
-    "anyState": "(Qualsiasi Stato)"
-  },
-  "ja": {
-    "anyState": "（全ての状態）"
-  },
-  "sw": {
-    "anyState": "(hali lolote)"
+Select {all} / {none} */
+        "all": "All",
+        /* This text is shown in a dropdown that allows the user to select one or more Review States. It will be inserted where {none} is in the following text:
+
+Select {all} / {none} */
+        "none": "None"
+      }
+    }
   }
 }
 </i18n>
diff --git a/src/components/submission/filters/submitter.vue b/src/components/submission/filters/submitter.vue
index 21d167848..ce90bc1f1 100644
--- a/src/components/submission/filters/submitter.vue
+++ b/src/components/submission/filters/submitter.vue
@@ -10,72 +10,114 @@ including this file, may be copied, modified, propagated, or distributed
 except according to the terms contained in the LICENSE file.
 -->
 <template>
-  <label id="submission-filters-submitter" class="form-group">
-    <select v-if="submitters.initiallyLoading" class="form-control" disabled>
-      <option value="">{{ $t('common.loading') }}</option>
-    </select>
-    <select v-else v-model="selectValue" class="form-control">
-      <option value="">{{ $t('common.anybody') }}</option>
-      <option v-if="unknown" :value="modelValue">{{ $t('unknown') }}</option>
-      <template v-if="submitters.dataExists">
-        <option v-for="submitter of submitters" :key="submitter.id"
-          :value="submitter.id.toString()">
-          {{ submitter.displayName }}
-        </option>
-      </template>
-    </select>
-    <span class="form-label">{{ $t('field.submitter') }}</span>
-  </label>
+  <multiselect id="submission-filters-submitter" :model-value="selectValue"
+    :options="options" :loading="submitters.initiallyLoading"
+    :label="$t('field.submitter')" :placeholder="placeholder"
+    :all="$t('action.select.all')" :none="$t('action.select.none')"
+    :search="$t('field.search')" :empty="$t('submission.emptyTable')"
+    @update:model-value="update"/>
 </template>
 
 <script>
+export default {
+  name: 'SubmissionFiltersSubmitter'
+};
+</script>
+<script setup>
+import { computed, nextTick, ref, watch } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+import Multiselect from '../../multiselect.vue';
+
 import { useRequestData } from '../../../request-data';
 
-export default {
-  name: 'SubmissionFiltersSubmitter',
-  props: {
-    modelValue: {
-      type: String,
-      required: true
-    }
-  },
-  emits: ['update:modelValue'],
-  setup() {
-    // The component does not assume that this data will exist when the
-    // component is created.
-    const { submitters } = useRequestData();
-    return { submitters };
-  },
-  computed: {
-    selectValue: {
-      get() {
-        return this.modelValue;
-      },
-      set(value) {
-        this.$emit('update:modelValue', value);
-      }
-    },
-    unknown() {
-      return this.modelValue !== '' && (!this.submitters.dataExists ||
-        !this.submitters.some(submitter => this.modelValue === submitter.id.toString()));
+const props = defineProps({
+  modelValue: {
+    type: Array,
+    required: true
+  }
+});
+const emit = defineEmits(['update:modelValue']);
+
+// The component does not assume that this data will exist when the
+// component is created.
+const { submitters } = useRequestData();
+
+const { t } = useI18n();
+const unknown = computed(() => props.modelValue.reduce(
+  (set, id) => (submitters.ids.has(id) ? set : set.add(id)),
+  new Set()
+));
+const options = computed(() => {
+  if (!submitters.dataExists) return null;
+  const result = new Array(submitters.length + unknown.value.size);
+  let i = 0;
+  for (const id of unknown.value) {
+    result[i] = { value: id, text: t('unknown') };
+    i += 1;
+  }
+  for (const { id, displayName } of submitters) {
+    result[i] = { value: id, text: displayName };
+    i += 1;
+  }
+  return result;
+});
+
+const selectValue = ref(props.modelValue);
+watch(() => props.modelValue, (value) => { selectValue.value = value; });
+const update = (value) => {
+  if (unknown.value.size !== 0) {
+    // Filter out unknown submitters. If that results in no submitters, then
+    // fall back to all submitters.
+    const withoutUnknown = value.filter(id => !unknown.value.has(id));
+    emit('update:modelValue', withoutUnknown.length !== 0
+      ? withoutUnknown
+      : [...submitters.ids]);
+  } else if (value.length !== 0) {
+    emit('update:modelValue', value);
+  } else {
+    // If no submitters are selected, then the selection falls back to all
+    // submitters. If that's not the selection already, then we emit all
+    // submitters. Otherwise, there's no change to emit, but we still need to
+    // make a temporary change to selectValue in order to force the Multiselect
+    // to recheck the checkboxes.
+    const all = [...submitters.ids];
+    if (props.modelValue.length !== all.length) {
+      emit('update:modelValue', all);
+    } else {
+      selectValue.value = value;
+      nextTick(() => { selectValue.value = all; });
     }
   }
 };
-</script>
 
-<style lang="scss">
-#submission-filters-submitter {
-  select { width: 201px; }
-}
-</style>
+const placeholder = (counts) => t('placeholder', counts);
+</script>
 
 <i18n lang="json5">
 {
   "en": {
     "field": {
-      // This is the text of a form field that shows the names of users who have
-      // submitted data.
-      "submitter": "Submitted by"
+      // This is the text of a form field that shows the names of submitters.
+      "submitter": "Submitted by",
+      "search": "Search submitters…"
+    },
+    // This is the text of a dropdown that allows the user to select one or more
+    // "submitters". A submitter can be a user, a team of users, a Public Access
+    // Link, or an automation. {selected} is the number of submitters selected;
+    // {total} is the total number of submitters.
+    "placeholder": "{selected} of {total}",
+    "action": {
+      "select": {
+        /* This is the text of a dropdown that allows the user to select one or more submitters. It will be inserted where {all} is in the following text:
+
+Select {all} / {none} */
+        "all": "All",
+        /* This is the text of a dropdown that allows the user to select one or more submitters. It will be inserted where {none} is in the following text:
+
+Select {all} / {none} */
+        "none": "None"
+      }
     },
     "unknown": "Unknown submitter"
   }
diff --git a/src/components/submission/list.vue b/src/components/submission/list.vue
index 645208dd2..788539ce3 100644
--- a/src/components/submission/list.vue
+++ b/src/components/submission/list.vue
@@ -15,7 +15,7 @@ except according to the terms contained in the LICENSE file.
     <div v-show="selectedFields != null">
       <div id="submission-list-actions">
         <form class="form-inline" @submit.prevent>
-          <submission-filters v-if="!draft" v-model:submitterId="submitterId"
+          <submission-filters v-if="!draft" v-model:submitterId="submitterIds"
             v-model:submissionDate="submissionDateRange"
             v-model:reviewState="reviewStates"/>
           <submission-field-dropdown
@@ -36,7 +36,7 @@ except according to the terms contained in the LICENSE file.
         :draft="draft" :fields="selectedFields" @review="showReview"/>
       <p v-show="odata.dataExists && odata.value.length === 0"
         class="empty-table-message">
-        {{ odataFilter == null ? $t('emptyTable') : $t('noMatching') }}
+        {{ odataFilter == null ? $t('submission.emptyTable') : $t('noMatching') }}
       </p>
       <div v-show="odataLoadingMessage != null" id="submission-list-message">
         <div id="submission-list-spinner-container">
@@ -57,7 +57,7 @@ except according to the terms contained in the LICENSE file.
 
 <script>
 import { DateTime } from 'luxon';
-import { watchEffect } from 'vue';
+import { shallowRef, watchEffect } from 'vue';
 
 import Loading from '../loading.vue';
 import Spinner from '../spinner.vue';
@@ -73,6 +73,7 @@ import useFields from '../../request-data/fields';
 import useReviewState from '../../composables/review-state';
 import useSubmissions from '../../request-data/submissions';
 import { apiPaths } from '../../util/request';
+import { arrayQuery } from '../../util/router';
 import { noop } from '../../util/util';
 import { odataLiteral } from '../../util/odata';
 import { useRequestData } from '../../request-data';
@@ -131,7 +132,12 @@ export default {
   },
   data() {
     return {
-      selectedFields: null,
+      // selectedFields will be an array of fields. It needs to be shallow so
+      // that the elements of the array are not reactive proxies. That's
+      // important for SubmissionFieldDropdown, which will do exact equality
+      // checks. (The selected fields that it passes to the Multiselect must be
+      // among the options.)
+      selectedFields: shallowRef(null),
       refreshing: false,
       download: {
         state: false
@@ -143,15 +149,17 @@ export default {
     };
   },
   computed: {
-    submitterId: {
+    submitterIds: {
       get() {
-        const { submitterId } = this.$route.query;
-        return typeof submitterId === 'string' && /^[1-9]\d*$/.test(submitterId)
-          ? submitterId
-          : '';
+        const stringIds = arrayQuery(this.$route.query.submitterId, {
+          validator: (value) => /^[1-9]\d*$/.test(value)
+        });
+        return stringIds.length !== 0
+          ? stringIds.map(id => Number.parseInt(id, 10))
+          : (this.submitters.dataExists ? [...this.submitters.ids] : []);
       },
-      set(submitterId) {
-        this.replaceFilters({ submitterId });
+      set(submitterIds) {
+        this.replaceFilters({ submitterIds });
       }
     },
     submissionDateRange: {
@@ -166,36 +174,44 @@ export default {
         return [];
       },
       set(submissionDateRange) {
-        return this.replaceFilters({ submissionDateRange });
+        this.replaceFilters({ submissionDateRange });
       }
     },
     reviewStates: {
       get() {
-        const { query } = this.$route;
-        const values = Array.isArray(query.reviewState)
-          ? query.reviewState.filter(reviewState => typeof reviewState === 'string')
-          : (typeof query.reviewState === 'string' ? [query.reviewState] : []);
-        return values
-          .filter(value => this.allReviewStates.some(reviewState =>
-            value === odataLiteral(reviewState)))
-          .splice(0, 1);
+        return arrayQuery(this.$route.query.reviewState, {
+          validator: (value) => this.allReviewStates.some(reviewState =>
+            value === odataLiteral(reviewState)),
+          default: () => this.allReviewStates.map(odataLiteral)
+        });
       },
       set(reviewStates) {
         this.replaceFilters({ reviewStates });
       }
     },
+    filtersOnSubmitterId() {
+      if (this.submitterIds.length === 0) return false;
+      const selectedAll = this.submitters.dataExists &&
+        this.submitterIds.length === this.submitters.length &&
+        this.submitterIds.every(id => this.submitters.ids.has(id));
+      return !selectedAll;
+    },
     odataFilter() {
       if (this.draft) return null;
       const conditions = [];
-      if (this.submitterId !== '')
-        conditions.push(`__system/submitterId eq ${this.submitterId}`);
+      if (this.filtersOnSubmitterId) {
+        const condition = this.submitterIds
+          .map(id => `__system/submitterId eq ${id}`)
+          .join(' or ');
+        conditions.push(`(${condition})`);
+      }
       if (this.submissionDateRange.length !== 0) {
         const start = this.submissionDateRange[0].toISO();
         const end = this.submissionDateRange[1].endOf('day').toISO();
         conditions.push(`__system/submissionDate ge ${start}`);
         conditions.push(`__system/submissionDate le ${end}`);
       }
-      if (this.reviewStates.length !== 0) {
+      if (this.reviewStates.length !== this.allReviewStates.length) {
         const condition = this.reviewStates
           .map(reviewState => `__system/reviewState eq ${reviewState}`)
           .join(' or ');
@@ -305,17 +321,19 @@ export default {
         this.fetchChunk(this.odata.skip, false);
     },
     replaceFilters({
-      submitterId = this.submitterId,
+      submitterIds = this.submitterIds,
       submissionDateRange = this.submissionDateRange,
       reviewStates = this.reviewStates
     }) {
       const query = {};
-      if (submitterId !== '') query.submitterId = submitterId;
+      if (submitterIds.length !== this.submitters.length)
+        query.submitterId = submitterIds.map(id => id.toString());
       if (submissionDateRange.length !== 0) {
         query.start = submissionDateRange[0].toISODate();
         query.end = submissionDateRange[1].toISODate();
       }
-      query.reviewState = reviewStates;
+      if (reviewStates.length !== this.allReviewStates.length)
+        query.reviewState = reviewStates;
       this.$router.replace({ path: this.$route.path, query });
     },
     showReview(submission) {
@@ -424,7 +442,6 @@ export default {
         }
       }
     },
-    "emptyTable": "There are no Submissions yet.",
     "noMatching": "There are no matching Submissions."
   }
 }
diff --git a/src/locales/en.json5 b/src/locales/en.json5
index 8fdb7c84b..e230e5102 100644
--- a/src/locales/en.json5
+++ b/src/locales/en.json5
@@ -309,7 +309,8 @@
     "encryptionMessage": "Data preview is not available due to encryption.",
     // This text is shown under the "Latest Submission" column of the tables
     // for Projects and Forms. It is shown for a Project or Form with no Submissions.
-    "noSubmission": "(none)"
+    "noSubmission": "(none)",
+    "emptyTable": "There are no Submissions yet."
   },
   "common": {
     // This is a title shown above a section of the page.
@@ -328,6 +329,7 @@
     "dangerZone": "Danger Zone",
     // This is the text of a link that links to the documentation.
     "docs": "Docs",
+    "error": "Error",
     // This text is shown next to options for filtering a table.
     "filter": "Filter",
     // This is the text of a link that links to the ODK forum.
diff --git a/src/request-data/submissions.js b/src/request-data/submissions.js
index 21dadf401..3de922afa 100644
--- a/src/request-data/submissions.js
+++ b/src/request-data/submissions.js
@@ -12,6 +12,7 @@ except according to the terms contained in the LICENSE file.
 import { last } from 'ramda';
 import { reactive, shallowReactive } from 'vue';
 
+import { computeIfExists } from './util';
 import { useRequestData } from './index';
 
 export default () => {
@@ -59,6 +60,9 @@ export default () => {
       odata.skip += chunk.value.length;
     }
   }));
-  const submitters = createResource('submitters');
+  const submitters = createResource('submitters', () => ({
+    ids: computeIfExists(() =>
+      submitters.reduce((set, { id }) => set.add(id), new Set()))
+  }));
   return { odata, submitters };
 };
diff --git a/src/util/router.js b/src/util/router.js
index b1c8862b6..f4cdf2882 100644
--- a/src/util/router.js
+++ b/src/util/router.js
@@ -10,8 +10,21 @@ including this file, may be copied, modified, propagated, or distributed
 except according to the terms contained in the LICENSE file.
 */
 import { START_LOCATION } from 'vue-router';
+import { T } from 'ramda';
 import { nextTick } from 'vue';
 
+export const arrayQuery = (query, options = {}) => {
+  if (!Array.isArray(query)) return arrayQuery([query], options);
+  const set = new Set();
+  const { validator = T } = options;
+  for (const value of query) {
+    if (value != null && !set.has(value) && validator(value)) set.add(value);
+  }
+  if (set.size !== 0) return [...set];
+  const def = options.default;
+  return def != null ? (typeof def === 'function' ? def() : def) : [];
+};
+
 // Returns the props for a route component.
 export const routeProps = (route, props) => {
   if (props == null || props === false) return {};
diff --git a/test/components/multiselect.spec.js b/test/components/multiselect.spec.js
new file mode 100644
index 000000000..fba9e9f17
--- /dev/null
+++ b/test/components/multiselect.spec.js
@@ -0,0 +1,638 @@
+import sinon from 'sinon';
+import { omit } from 'ramda';
+import { reactive } from 'vue';
+
+import Multiselect from '../../src/components/multiselect.vue';
+
+import { mergeMountOptions, mount } from '../util/lifecycle';
+
+const mountComponent = (options) =>
+  mount(Multiselect, mergeMountOptions(options, {
+    props: {
+      options: [],
+      modelValue: [],
+      label: 'Some label',
+      placeholder: () => 'Some placeholder',
+      all: 'All',
+      none: 'None'
+    }
+  }));
+const toggle = (component) => component.get('select').trigger('click');
+const assertChecked = (component, checked) => {
+  const inputs = component.findAll('input[type="checkbox"]');
+  inputs.map(input => input.element.checked).should.eql(checked);
+};
+
+describe('Multiselect', () => {
+  it('renders a checkbox for each option', () => {
+    const component = mountComponent({
+      props: { options: [{ value: 'foo' }, { value: 'bar' }] }
+    });
+    component.findAll('.checkbox').length.should.equal(2);
+  });
+
+  it('shows each checkbox', async () => {
+    const component = mountComponent({
+      props: { options: [{ value: 'foo' }, { value: 'bar' }] },
+      attachTo: document.body
+    });
+    await toggle(component);
+    for (const checkbox of component.findAll('.checkbox'))
+      checkbox.should.be.visible(true);
+  });
+
+  describe('option text', () => {
+    it('uses the text property if it exists', () => {
+      const component = mountComponent({
+        props: { options: [{ value: 'foo', text: 'bar' }] }
+      });
+      component.get('.checkbox label').text().should.equal('bar');
+    });
+
+    it('falls back to the value property', () => {
+      const component = mountComponent({
+        props: { options: [{ value: 'foo' }] }
+      });
+      component.get('.checkbox label').text().should.equal('foo');
+    });
+  });
+
+  describe('option title', () => {
+    it('uses the title property if it exists', () => {
+      const component = mountComponent({
+        props: { options: [{ value: 'foo', text: 'bar', title: 'baz' }] }
+      });
+      component.get('.checkbox span').attributes().title.should.equal('baz');
+    });
+
+    it('falls back to the text property', () => {
+      const component = mountComponent({
+        props: { options: [{ value: 'foo', text: 'bar' }] }
+      });
+      component.get('.checkbox span').attributes().title.should.equal('bar');
+    });
+
+    it('falls back again to the value property', () => {
+      const component = mountComponent({
+        props: { options: [{ value: 'foo' }] }
+      });
+      component.get('.checkbox span').attributes().title.should.equal('foo');
+    });
+  });
+
+  describe('modelValue prop', () => {
+    it('checks the checkboxes specified in the modelValue prop', async () => {
+      const component = mountComponent({
+        props: {
+          options: [{ value: 0 }, { value: 1 }],
+          modelValue: [0]
+        },
+        attachTo: document.body
+      });
+      await toggle(component);
+      assertChecked(component, [true, false]);
+    });
+
+    it('updates the checkboxes if the modelValue prop changes', async () => {
+      const component = mountComponent({
+        props: {
+          options: [{ value: 0 }, { value: 1 }],
+          modelValue: [0]
+        },
+        attachTo: document.body
+      });
+      await toggle(component);
+      await toggle(component);
+      await component.setProps({ modelValue: [1] });
+      await toggle(component);
+      assertChecked(component, [false, true]);
+    });
+
+    it('updates checkboxes if an element of modelValue prop changes', async () => {
+      const options = [{ value: 0 }, { value: 1 }];
+      const modelValue = reactive([0]);
+      const component = mountComponent({
+        props: { options, modelValue },
+        attachTo: document.body
+      });
+      await toggle(component);
+      await toggle(component);
+      modelValue[0] = 1;
+      await component.vm.$nextTick();
+      await toggle(component);
+      assertChecked(component, [false, true]);
+    });
+
+    it('emits an update:modelValue event if a checkbox has changed', async () => {
+      const component = mountComponent({
+        props: {
+          options: [{ value: 0 }, { value: 1 }],
+          modelValue: [0]
+        },
+        attachTo: document.body
+      });
+      await toggle(component);
+      await component.findAll('input[type="checkbox"]')[1].setValue(true);
+      await toggle(component);
+      component.emitted('update:modelValue').should.eql([[[0, 1]]]);
+    });
+
+    it('does not emit an event if a checkbox has been checked, then unchecked', async () => {
+      const component = mountComponent({
+        props: {
+          options: [{ value: 0 }, { value: 1 }],
+          modelValue: [0]
+        },
+        attachTo: document.body
+      });
+      await toggle(component);
+      const input = component.findAll('input[type="checkbox"]')[1];
+      await input.setValue(true);
+      await input.setValue(false);
+      await toggle(component);
+      should.not.exist(component.emitted('update:modelValue'));
+    });
+
+    it('does not emit event if checkboxes have been unchecked, then checked in different order', async () => {
+      const component = mountComponent({
+        props: {
+          options: [{ value: 0 }, { value: 1 }],
+          modelValue: [0, 1]
+        },
+        attachTo: document.body
+      });
+      await toggle(component);
+      const inputs = component.findAll('input[type="checkbox"]');
+      await inputs[1].setValue(false);
+      await inputs[0].setValue(false);
+      await inputs[1].setValue(true);
+      await inputs[0].setValue(true);
+      await toggle(component);
+      should.not.exist(component.emitted('update:modelValue'));
+    });
+
+    describe('update:modelValue event is ignored', () => {
+      it('does not update checkboxes when dropdown is shown', async () => {
+        const component = mountComponent({
+          props: {
+            options: [{ value: 0 }, { value: 1 }],
+            modelValue: [0]
+          },
+          attachTo: document.body
+        });
+        await toggle(component);
+        await component.findAll('input[type="checkbox"]')[1].setValue(true);
+        await toggle(component);
+        await toggle(component);
+        assertChecked(component, [true, true]);
+      });
+
+      it('does not re-emit update:modelValue when dropdown is hidden', async () => {
+        const component = mountComponent({
+          props: {
+            options: [{ value: 0 }, { value: 1 }],
+            modelValue: [0]
+          },
+          attachTo: document.body
+        });
+        await toggle(component);
+        await component.findAll('input[type="checkbox"]')[1].setValue(true);
+        await toggle(component);
+        await toggle(component);
+        await toggle(component);
+        component.emitted('update:modelValue').length.should.equal(1);
+      });
+    });
+  });
+
+  it('updates the checkboxes if the options are reordered', async () => {
+    const component = mountComponent({
+      props: {
+        options: [{ value: 0 }, { value: 1 }],
+        modelValue: [0]
+      },
+      attachTo: document.body
+    });
+    await toggle(component);
+    assertChecked(component, [true, false]);
+    await toggle(component);
+    await component.setProps({ options: [{ value: 1 }, { value: 0 }] });
+    await toggle(component);
+    assertChecked(component, [false, true]);
+  });
+
+  it('updates checkboxes if options and modelValue prop change in same tick', async () => {
+    const component = mountComponent({
+      props: {
+        options: [{ value: 0 }],
+        modelValue: [0]
+      },
+      attachTo: document.body
+    });
+    await toggle(component);
+    await toggle(component);
+    await component.setProps({
+      options: [{ value: 0 }, { value: 1 }],
+      modelValue: [0, 1]
+    });
+    await toggle(component);
+    assertChecked(component, [true, true]);
+  });
+
+  describe('search', () => {
+    const users = [
+      { value: 1, text: 'Alice', title: 'Has a role of admin.' },
+      { value: 2, text: 'Bob', title: 'Has a role of manager.' }
+    ];
+
+    it('shows a search input if the search prop is specified', () => {
+      const component = mountComponent({
+        props: { search: 'Search' }
+      });
+      component.find('.search').exists().should.be.true();
+    });
+
+    it('does not show the input if the search prop is not specified', () => {
+      const component = mountComponent({
+        props: { search: null }
+      });
+      component.find('.search').exists().should.be.false();
+    });
+
+    it('uses the value of the search prop', () => {
+      const component = mountComponent({
+        props: { search: 'Buscar' }
+      });
+      const input = component.find('.search input');
+      input.attributes().placeholder.should.equal('Buscar');
+      input.attributes('aria-label').should.equal('Buscar');
+    });
+
+    it('shows options whose text matches', async () => {
+      const component = mountComponent({
+        props: { options: users, search: 'Search' },
+        attachTo: document.body
+      });
+      await toggle(component);
+      await component.get('.search input').setValue('c');
+      const matches = component.findAll('.search-match');
+      matches.map(match => match.text()).should.eql(['Alice']);
+    });
+
+    it('hides options that do not match', async () => {
+      const component = mountComponent({
+        props: { options: users, search: 'Search' },
+        attachTo: document.body
+      });
+      await toggle(component);
+      await component.get('.search input').setValue('c');
+      const li = component.findAll('.option-list > :not(:last-child)');
+      li[0].should.be.visible(true);
+      li[1].should.be.hidden(true);
+    });
+
+    it('shows options whose title matches', async () => {
+      const component = mountComponent({
+        props: { options: users, search: 'Search' },
+        attachTo: document.body
+      });
+      await toggle(component);
+      await component.get('.search input').setValue('admin');
+      const matches = component.findAll('.search-match');
+      matches.map(match => match.text()).should.eql(['Alice']);
+    });
+
+    it("searches an option's value if it has no text", async () => {
+      const component = mountComponent({
+        props: { options: users.map(omit(['text'])), search: 'Search' },
+        attachTo: document.body
+      });
+      await toggle(component);
+      await component.get('.search input').setValue('1');
+      const matches = component.findAll('.search-match');
+      matches.map(match => match.text()).should.eql(['1']);
+    });
+
+    it("does not search an option's value if it has text", async () => {
+      const component = mountComponent({
+        props: { options: users, search: 'Search' },
+        attachTo: document.body
+      });
+      await toggle(component);
+      await component.get('.search input').setValue('1');
+      component.findAll('.search-match').length.should.equal(0);
+    });
+
+    it('completes a case-insensitive search', async () => {
+      const component = mountComponent({
+        props: { options: users, search: 'Search' },
+        attachTo: document.body
+      });
+      await toggle(component);
+      await component.get('.search input').setValue('C');
+      const matches = component.findAll('.search-match');
+      matches.map(match => match.text()).should.eql(['Alice']);
+    });
+
+    describe('.close button', () => {
+      it('shows the button after input', async () => {
+        const component = mountComponent({
+          props: { options: users, search: 'Search' }
+        });
+        const button = component.get('.close');
+        button.should.be.hidden();
+        await component.get('.search input').setValue('c');
+        button.should.be.visible();
+      });
+
+      describe('after the button is clicked', () => {
+        it('resets the search', async () => {
+          const component = mountComponent({
+            props: { options: users, search: 'Search' }
+          });
+          const input = component.get('.search input');
+          await input.setValue('c');
+          await component.get('.close').trigger('click');
+          input.element.value.should.equal('');
+        });
+
+        it('focuses the input', async () => {
+          const component = mountComponent({
+            props: { options: users, search: 'Search' },
+            attachTo: document.body
+          });
+          await toggle(component);
+          const input = component.get('.search input');
+          await input.setValue('c');
+          await component.get('.close').trigger('click');
+          input.should.be.focused();
+        });
+      });
+    });
+
+    it('resets after the dropdown is hidden', async () => {
+      const component = mountComponent({
+        props: { search: 'Search' },
+        attachTo: document.body
+      });
+      await toggle(component);
+      const input = component.get('.search input');
+      await input.setValue('foo');
+      await toggle(component);
+      input.element.value.should.equal('');
+    });
+  });
+
+  describe('empty message', () => {
+    it('shows a message if there are no options', async () => {
+      const component = mountComponent({
+        props: { options: [] },
+        attachTo: document.body
+      });
+      await toggle(component);
+      component.get('.empty-message').should.be.visible(true);
+    });
+
+    it('does not show the message if there are options', async () => {
+      const component = mountComponent({
+        props: { options: [{ value: 0 }] },
+        attachTo: document.body
+      });
+      await toggle(component);
+      component.get('.empty-message').should.be.hidden(true);
+    });
+
+    it('uses the empty prop if it is specified', () => {
+      const component = mountComponent({
+        props: { options: [], empty: 'Nothing to select' }
+      });
+      component.get('.empty-message').text().should.equal('Nothing to select');
+    });
+
+    it('falls back to a default message', () => {
+      const component = mountComponent({
+        props: { options: [] }
+      });
+      component.get('.empty-message').text().should.equal('No results');
+    });
+
+    describe('search', () => {
+      it('shows a message if there are no matches', async () => {
+        const component = mountComponent({
+          props: { options: [{ value: 'foo' }], search: 'Search' },
+          attachTo: document.body
+        });
+        await toggle(component);
+        await component.get('.search input').setValue('g');
+        component.get('.empty-message').should.be.visible(true);
+      });
+
+      it('does not show the message if there are matches', async () => {
+        const component = mountComponent({
+          props: { options: [{ value: 'foo' }], search: 'Search' },
+          attachTo: document.body
+        });
+        await toggle(component);
+        await component.get('.search input').setValue('f');
+        component.get('.empty-message').should.be.hidden(true);
+      });
+
+      it('does not use the empty prop', async () => {
+        const component = mountComponent({
+          props: {
+            options: [{ value: 'foo' }],
+            search: 'Search',
+            empty: 'Nothing to select'
+          },
+          attachTo: document.body
+        });
+        await toggle(component);
+        await component.get('.search input').setValue('g');
+        component.get('.empty-message').text().should.equal('No results');
+      });
+    });
+  });
+
+  describe('select all', () => {
+    it('uses the all prop', () => {
+      const component = mountComponent({
+        props: { all: 'Todas' }
+      });
+      component.get('.select-all').text().should.equal('Todas');
+    });
+
+    it('checks all the checkboxes', async () => {
+      const component = mountComponent({
+        props: { options: [{ value: 0 }, { value: 1 }], modelValue: [] },
+        attachTo: document.body
+      });
+      await toggle(component);
+      await component.get('.select-all').trigger('click');
+      assertChecked(component, [true, true]);
+    });
+
+    it('emits all the values', async () => {
+      const component = mountComponent({
+        props: { options: [{ value: 0 }, { value: 1 }], modelValue: [] },
+        attachTo: document.body
+      });
+      await toggle(component);
+      await component.get('.select-all').trigger('click');
+      await toggle(component);
+      component.emitted('update:modelValue').should.eql([[[0, 1]]]);
+    });
+
+    it('only checks search matches', async () => {
+      const component = mountComponent({
+        props: {
+          options: [{ value: 0 }, { value: 1 }],
+          modelValue: [],
+          search: 'Search'
+        },
+        attachTo: document.body
+      });
+      await toggle(component);
+      await component.get('.search input').setValue('0');
+      await component.get('.select-all').trigger('click');
+      await toggle(component);
+      assertChecked(component, [true, false]);
+    });
+  });
+
+  describe('select none', () => {
+    it('shows the correct text for the select none button', () => {
+      const component = mountComponent({
+        props: { none: 'Ninguna' }
+      });
+      component.get('.select-none').text().should.equal('Ninguna');
+    });
+
+    it('unchecks all the checkboxes', async () => {
+      const component = mountComponent({
+        props: { options: [{ value: 0 }, { value: 1 }], modelValue: [0, 1] },
+        attachTo: document.body
+      });
+      await toggle(component);
+      await component.get('.select-none').trigger('click');
+      assertChecked(component, [false, false]);
+    });
+
+    it('emits an empty array', async () => {
+      const component = mountComponent({
+        props: { options: [{ value: 0 }, { value: 1 }], modelValue: [0, 1] },
+        attachTo: document.body
+      });
+      await toggle(component);
+      await component.get('.select-none').trigger('click');
+      await toggle(component);
+      component.emitted('update:modelValue').should.eql([[[]]]);
+    });
+
+    it('only unchecks search matches', async () => {
+      const component = mountComponent({
+        props: {
+          options: [{ value: 0 }, { value: 1 }],
+          modelValue: [0, 1],
+          search: 'Search'
+        },
+        attachTo: document.body
+      });
+      await toggle(component);
+      await component.get('.search input').setValue('0');
+      await component.get('.select-none').trigger('click');
+      await toggle(component);
+      assertChecked(component, [false, true]);
+    });
+  });
+
+  describe('loading', () => {
+    it('shows a loading message', () => {
+      const component = mountComponent({
+        props: { options: null, loading: true }
+      });
+      component.get('option').text().should.equal('Loading…');
+    });
+
+    it('is disabled', () => {
+      const component = mountComponent({
+        props: { options: null, loading: true }
+      });
+      component.get('select').element.disabled.should.be.true();
+    });
+  });
+
+  describe('loading error', () => {
+    it('shows an error message', () => {
+      const component = mountComponent({
+        props: { options: null, loading: false }
+      });
+      component.get('option').text().should.equal('Error');
+    });
+
+    it('is disabled', () => {
+      const component = mountComponent({
+        props: { options: null, loading: false }
+      });
+      component.get('select').element.disabled.should.be.true();
+    });
+  });
+
+  it('shows the label', () => {
+    const component = mountComponent({
+      props: { label: 'Review State' }
+    });
+    component.get('.form-label').text().should.equal('Review State');
+    const select = component.get('select');
+    select.attributes('aria-label').should.equal('Review State');
+  });
+
+  describe('placeholder', () => {
+    it('calls the function with the correct counts', () => {
+      const options = new Array(1001);
+      for (let i = 0; i < options.length; i += 1) options[i] = { value: i };
+      const modelValue = options.map(({ value }) => value);
+      modelValue.splice(-1, 1);
+      const placeholder = sinon.fake.returns('Some placeholder');
+      mountComponent({
+        props: { options, modelValue, placeholder }
+      });
+      placeholder.args[0][0].should.eql({ selected: '1,000', total: '1,001' });
+    });
+
+    it('shows the placeholder', () => {
+      const component = mountComponent({
+        props: { options: [{ value: 0 }], placeholder: () => 'No selection' }
+      });
+      component.get('option').text().should.equal('No selection');
+    });
+
+    it('does not call the function when a checkbox is checked', async () => {
+      const placeholder = sinon.fake.returns('Some placeholder');
+      const component = mountComponent({
+        props: { options: [{ value: 0 }], modelValue: [], placeholder },
+        attachTo: document.body
+      });
+      await toggle(component);
+      await component.get('input[type="checkbox"]').setValue(true);
+      placeholder.callCount.should.equal(1);
+    });
+
+    it('calls the function when the modelValue prop changes', async () => {
+      const placeholder = sinon.fake.returns('Some placeholder');
+      const component = mountComponent({
+        props: { options: [{ value: 0 }], modelValue: [], placeholder }
+      });
+      await component.setProps({ modelValue: [0] });
+      placeholder.callCount.should.equal(2);
+    });
+  });
+
+  it('uses the after-list slot', () => {
+    const component = mountComponent({
+      slots: {
+        'after-list': { template: '<span id="foo"></span>' }
+      }
+    });
+    component.find('.after-list #foo').exists().should.be.true();
+  });
+});
diff --git a/test/components/submission/field-dropdown.spec.js b/test/components/submission/field-dropdown.spec.js
index 1fe39f141..6a49bc726 100644
--- a/test/components/submission/field-dropdown.spec.js
+++ b/test/components/submission/field-dropdown.spec.js
@@ -1,15 +1,21 @@
+import Multiselect from '../../../src/components/multiselect.vue';
 import SubmissionDataRow from '../../../src/components/submission/data-row.vue';
 import SubmissionFieldDropdown from '../../../src/components/submission/field-dropdown.vue';
 import SubmissionTable from '../../../src/components/submission/table.vue';
 
 import useFields from '../../../src/request-data/fields';
 
-import createTestContainer from '../../util/container';
 import testData from '../../data';
 import { loadSubmissionList } from '../../util/submission';
-import { mount } from '../../util/lifecycle';
+import { mergeMountOptions, mount } from '../../util/lifecycle';
 import { testRequestData } from '../../util/request-data';
 
+const mountComponent = (options) =>
+  mount(SubmissionFieldDropdown, mergeMountOptions(options, {
+    props: { modelValue: [] },
+    container: { requestData: testRequestData([useFields]) }
+  }));
+
 const { repeat, group, string } = testData.fields;
 const strings = (min, max) => {
   const result = new Array(max - min + 1);
@@ -19,403 +25,46 @@ const strings = (min, max) => {
 };
 
 describe('SubmissionFieldDropdown', () => {
-  it('renders a checkbox for each selectable field', () => {
-    const dropdown = mount(SubmissionFieldDropdown, {
-      props: { modelValue: [] },
+  it('passes an option for each selectable field', () => {
+    const component = mountComponent({
       container: {
-        requestData: testRequestData([useFields], {
+        requestData: {
           fields: [repeat('/r'), string('/r/s1'), string('/s2'), string('/s3')]
-        })
+        }
       }
     });
-    const text = dropdown.findAll('.checkbox span').map(label => label.text());
-    text.should.eql(['s2', 's3']);
+    const { options } = component.getComponent(Multiselect).props();
+    const { fields } = component.vm.$container.requestData.localResources;
+    const s2 = fields.find(field => field.name === 's2');
+    const s3 = fields.find(field => field.name === 's3');
+    options.should.eql([
+      { value: s2, key: '/s2', text: 's2', title: 's2' },
+      { value: s3, key: '/s3', text: 's3', title: 's3' }
+    ]);
   });
 
-  it('adds a title attribute for checkbox that includes group name', () => {
-    const dropdown = mount(SubmissionFieldDropdown, {
-      props: { modelValue: [] },
+  it('includes the group name in the option title', () => {
+    const component = mountComponent({
       container: {
-        requestData: testRequestData([useFields], {
-          fields: [group('/g'), string('/g/s1')]
-        })
+        requestData: { fields: [group('/g'), string('/g/s1')] }
       }
     });
-    const span = dropdown.get('.checkbox span');
-    span.text().should.equal('s1');
-    span.attributes().title.should.equal('g-s1');
-  });
-
-  describe('checked boxes', () => {
-    it('checks boxes based on the modelValue prop', () => {
-      const container = createTestContainer({
-        requestData: testRequestData([useFields], { fields: strings(1, 2) })
-      });
-      const { fields } = container.requestData.localResources;
-      const dropdown = mount(SubmissionFieldDropdown, {
-        props: { modelValue: [fields[0]] },
-        container
-      });
-      const checkboxes = dropdown.findAll('input[type="checkbox"]');
-      checkboxes[0].element.checked.should.be.true();
-      checkboxes[1].element.checked.should.be.false();
-    });
-
-    it('updates the checkboxes after the modelValue prop changes', async () => {
-      const container = createTestContainer({
-        requestData: testRequestData([useFields], { fields: strings(1, 2) })
-      });
-      const { fields } = container.requestData.localResources;
-      const dropdown = mount(SubmissionFieldDropdown, {
-        props: { modelValue: [fields[0]] },
-        container
-      });
-      const checkboxes = dropdown.findAll('input[type="checkbox"]');
-      checkboxes[0].element.checked.should.be.true();
-      checkboxes[1].element.checked.should.be.false();
-      await dropdown.setProps({ modelValue: [fields[1]] });
-      checkboxes[0].element.checked.should.be.false();
-      checkboxes[1].element.checked.should.be.true();
-    });
-  });
-
-  describe('after the dropdown is hidden', () => {
-    it('emits an update:modelValue event if selection has changed', async () => {
-      const dropdown = mount(SubmissionFieldDropdown, {
-        props: { modelValue: [] },
-        container: {
-          requestData: testRequestData([useFields], { fields: [string('/s1')] })
-        },
-        attachTo: document.body
-      });
-      await dropdown.get('select').trigger('click');
-      await dropdown.get('input[type="checkbox"]').setChecked();
-      await dropdown.get('select').trigger('click');
-      const value = dropdown.emitted('update:modelValue')[0][0];
-      value.length.should.equal(1);
-      value[0].path.should.equal('/s1');
-    });
-
-    it('does not emit an update:modelValue event if selection has not changed', async () => {
-      const dropdown = mount(SubmissionFieldDropdown, {
-        props: { modelValue: [] },
-        container: {
-          requestData: testRequestData([useFields], { fields: [string('/s1')] })
-        },
-        attachTo: document.body
-      });
-      await dropdown.get('select').trigger('click');
-      await dropdown.get('input[type="checkbox"]').setChecked();
-      await dropdown.get('input[type="checkbox"]').setChecked(false);
-      await dropdown.get('select').trigger('click');
-      should.not.exist(dropdown.emitted('update:modelValue'));
-    });
-  });
-
-  it('disables an unchecked box after 100 fields have been selected', () => {
-    const container = createTestContainer({
-      requestData: testRequestData([useFields], { fields: strings(1, 101) })
-    });
-    const { fields } = container.requestData.localResources;
-    const dropdown = mount(SubmissionFieldDropdown, {
-      props: { modelValue: fields.slice(0, 100) },
-      container
-    });
-    const disabled = dropdown.findAll('.checkbox.disabled');
-    disabled.length.should.equal(1);
-    const span = disabled[0].get('span');
-    span.text().should.equal('s101');
-    disabled[0].get('input').element.disabled.should.be.true();
-    const label = disabled[0].get('label');
-    label.attributes().title.should.equal('Cannot select more than 100 columns.');
-    should.not.exist(span.attributes().title);
-  });
-
-  describe('placeholder', () => {
-    it('shows the number of selectable fields', () => {
-      const dropdown = mount(SubmissionFieldDropdown, {
-        props: { modelValue: [] },
-        container: {
-          requestData: testRequestData([useFields], {
-            fields: [repeat('/r'), string('/r/s1'), string('/s2')]
-          })
-        }
-      });
-      dropdown.get('option').text().should.endWith(' of 1');
-    });
-
-    it('shows the number of selected fields', () => {
-      const container = createTestContainer({
-        requestData: testRequestData([useFields], { fields: strings(1, 2) })
-      });
-      const { fields } = container.requestData.localResources;
-      const dropdown = mount(SubmissionFieldDropdown, {
-        props: { modelValue: [fields[0]] },
-        container
-      });
-      dropdown.get('option').text().should.equal('1 of 2');
-    });
-
-    it('does not update after a checkbox is checked', async () => {
-      const dropdown = mount(SubmissionFieldDropdown, {
-        props: { modelValue: [] },
-        container: {
-          requestData: testRequestData([useFields], { fields: [string('/s1')] })
-        }
-      });
-      await dropdown.get('input[type="checkbox"]').setChecked();
-      dropdown.get('option').text().should.equal('0 of 1');
-    });
-
-    it('updates after the modelValue prop changes', async () => {
-      const dropdown = mount(SubmissionFieldDropdown, {
-        props: { modelValue: [] },
-        container: {
-          requestData: testRequestData([useFields], { fields: [string('/s1')] })
-        }
-      });
-      const { fields } = dropdown.vm.$container.requestData.localResources;
-      await dropdown.setProps({ modelValue: fields.data });
-      dropdown.get('option').text().should.equal('1 of 1');
-    });
+    const { options } = component.getComponent(Multiselect).props();
+    options[0].title.should.equal('g-s1');
   });
 
-  describe('search', () => {
-    it('adds a class for a field the matches the search', async () => {
-      const dropdown = mount(SubmissionFieldDropdown, {
-        props: { modelValue: [] },
-        container: {
-          requestData: testRequestData([useFields], { fields: strings(1, 2) })
-        }
-      });
-      dropdown.findAll('.search-match').length.should.equal(2);
-      await dropdown.get('.search input').setValue('1');
-      const matches = dropdown.findAll('.search-match');
-      matches.length.should.equal(1);
-      matches[0].get('span').text().should.equal('s1');
-    });
-
-    it('searches the group name', async () => {
-      const dropdown = mount(SubmissionFieldDropdown, {
-        props: { modelValue: [] },
-        container: {
-          requestData: testRequestData([useFields], {
-            fields: [group('/g'), string('/g/s1'), string('/s2')]
-          })
-        }
-      });
-      await dropdown.get('.search input').setValue('g');
-      const matches = dropdown.findAll('.search-match');
-      matches.length.should.equal(1);
-      matches[0].get('span').text().should.equal('s1');
-    });
-
-    it('completes a case-insensitive search', async () => {
-      const dropdown = mount(SubmissionFieldDropdown, {
-        props: { modelValue: [] },
-        container: {
-          requestData: testRequestData([useFields], {
-            fields: [string('/s'), string('/S'), string('/x')]
-          })
-        }
-      });
-      await dropdown.get('.search input').setValue('s');
-      dropdown.findAll('.search-match').length.should.equal(2);
-      await dropdown.get('.search input').setValue('S');
-      dropdown.findAll('.search-match').length.should.equal(2);
-    });
-
-    it('shows a message if there are no matches', async () => {
-      const dropdown = mount(SubmissionFieldDropdown, {
-        props: { modelValue: [] },
-        container: {
-          requestData: testRequestData([useFields], { fields: [string('/s1')] })
-        },
-        attachTo: document.body
-      });
-      await dropdown.get('select').trigger('click');
-      const li = dropdown.findAll('.dropdown-menu ul li');
-      li.length.should.equal(2);
-      li[0].should.be.visible(true);
-      li[1].should.be.hidden(true);
-      await dropdown.get('.search input').setValue('foo');
-      li[0].should.be.hidden(true);
-      li[1].should.be.visible(true);
-    });
-
-    it('resets after the dropdown is hidden', async () => {
-      const dropdown = mount(SubmissionFieldDropdown, {
-        props: { modelValue: [] },
-        container: {
-          requestData: testRequestData([useFields], { fields: [string('/s1')] })
-        },
-        attachTo: document.body
-      });
-      await dropdown.get('select').trigger('click');
-      await dropdown.get('.search input').setValue('1');
-      await dropdown.get('select').trigger('click');
-      dropdown.get('.search input').element.value.should.equal('');
-    });
-
-    describe('.close button', async () => {
-      it('shows the button after input', async () => {
-        const dropdown = mount(SubmissionFieldDropdown, {
-          props: { modelValue: [] },
-          container: {
-            requestData: testRequestData([useFields], { fields: [string('/s1')] })
-          }
-        });
-        const button = dropdown.get('.close');
-        button.should.be.hidden();
-        await dropdown.get('.search input').setValue('1');
-        button.should.be.visible();
-      });
-
-      describe('after the button is clicked', () => {
-        it('resets the search', async () => {
-          const dropdown = mount(SubmissionFieldDropdown, {
-            props: { modelValue: [] },
-            container: {
-              requestData: testRequestData([useFields], { fields: [string('/s1')] })
-            }
-          });
-          await dropdown.get('.search input').setValue('1');
-          await dropdown.get('.close').trigger('click');
-          dropdown.get('.search input').element.value.should.equal('');
-        });
-
-        it('focuses the input', async () => {
-          const dropdown = mount(SubmissionFieldDropdown, {
-            props: { modelValue: [] },
-            container: {
-              requestData: testRequestData([useFields], { fields: [string('/s1')] })
-            },
-            attachTo: document.body
-          });
-          await dropdown.get('select').trigger('click');
-          await dropdown.get('.search input').setValue('1');
-          await dropdown.get('.close').trigger('click');
-          dropdown.get('.search input').should.be.focused();
-        });
-      });
-    });
-  });
-
-  describe('select all', () => {
-    it('checks all checkboxes', async () => {
-      const dropdown = mount(SubmissionFieldDropdown, {
-        props: { modelValue: [] },
-        container: {
-          requestData: testRequestData([useFields], { fields: strings(1, 2) })
-        }
-      });
-      await dropdown.get('.toggle-all a').trigger('click');
-      for (const checkbox of dropdown.findAll('input[type="checkbox"]'))
-        checkbox.element.checked.should.be.true();
-    });
-
-    it('only checks search results', async () => {
-      const dropdown = mount(SubmissionFieldDropdown, {
-        props: { modelValue: [] },
-        container: {
-          requestData: testRequestData([useFields], { fields: strings(1, 2) })
-        }
-      });
-      await dropdown.get('.search input').setValue('1');
-      await dropdown.get('.toggle-all a').trigger('click');
-      const checkboxes = dropdown.findAll('input[type="checkbox"]');
-      checkboxes[0].element.checked.should.be.true();
-      checkboxes[1].element.checked.should.be.false();
-    });
-
-    it('disables an unchecked box if 100 checkboxes become checked', async () => {
-      const dropdown = mount(SubmissionFieldDropdown, {
-        props: { modelValue: [] },
-        container: {
-          requestData: testRequestData([useFields], {
-            fields: [...strings(1, 100), string('/x')]
-          })
-        }
-      });
-      await dropdown.get('.search input').setValue('s');
-      await dropdown.get('.toggle-all a').trigger('click');
-      dropdown.findAll('.checkbox')[100].classes('disabled').should.be.true();
-    });
-
-    it('is disabled if 100 checkboxes are checked', () => {
-      const container = createTestContainer({
-        requestData: testRequestData([useFields], { fields: strings(1, 101) })
-      });
-      const { fields } = container.requestData.localResources;
-      const dropdown = mount(SubmissionFieldDropdown, {
-        props: { modelValue: fields.slice(0, 100) },
-        container
-      });
-      dropdown.get('.toggle-all a').classes('disabled').should.be.true();
-    });
-
-    it('is disabled if selecting all would check more than 100 checkboxes', async () => {
-      const container = createTestContainer({
-        requestData: testRequestData([useFields], { fields: strings(1, 101) })
-      });
-      const { fields } = container.requestData.localResources;
-      const dropdown = mount(SubmissionFieldDropdown, {
-        props: { modelValue: fields.slice(0, 99) },
-        container
-      });
-      const checkboxes = dropdown.findAll('input[type="checkbox"]');
-      await checkboxes[9].setChecked(false);
-      await checkboxes[100].setChecked();
-      await dropdown.get('.search input').setValue('10');
-      dropdown.get('.toggle-all a').classes('disabled').should.be.true();
-    });
-  });
-
-  describe('select none', () => {
-    it('unchecks all checkboxes', async () => {
-      const container = createTestContainer({
-        requestData: testRequestData([useFields], { fields: strings(1, 2) })
-      });
-      const { fields } = container.requestData.localResources;
-      const dropdown = mount(SubmissionFieldDropdown, {
-        props: { modelValue: fields.data },
-        container
-      });
-      await dropdown.findAll('.toggle-all a')[1].trigger('click');
-      for (const checkbox of dropdown.findAll('input[type="checkbox"]'))
-        checkbox.element.checked.should.be.false();
-    });
-
-    it('only unchecks search results', async () => {
-      const container = createTestContainer({
-        requestData: testRequestData([useFields], { fields: strings(1, 2) })
-      });
-      const { fields } = container.requestData.localResources;
-      const dropdown = mount(SubmissionFieldDropdown, {
-        props: { modelValue: fields.data },
-        container
-      });
-      await dropdown.get('.search input').setValue('1');
-      await dropdown.findAll('.toggle-all a')[1].trigger('click');
-      const checkboxes = dropdown.findAll('input[type="checkbox"]');
-      checkboxes[0].element.checked.should.be.false();
-      checkboxes[1].element.checked.should.be.true();
-    });
-
-    it('re-enables a disabled checkbox', async () => {
-      const container = createTestContainer({
-        requestData: testRequestData([useFields], { fields: strings(1, 101) })
-      });
-      const { fields } = container.requestData.localResources;
-      const dropdown = mount(SubmissionFieldDropdown, {
-        props: { modelValue: fields.slice(0, 100) },
-        container
-      });
-      const last = dropdown.findAll('.checkbox')[100];
-      last.classes('disabled').should.be.true();
-      await dropdown.findAll('.toggle-all a')[1].trigger('click');
-      last.classes('disabled').should.be.false();
+  it('shows a warning if more than 100 fields are selected', async () => {
+    const component = mountComponent({
+      props: { modelValue: [] },
+      container: {
+        requestData: { fields: strings(1, 101) }
+      }
     });
+    await component.get('select').trigger('click');
+    const after = component.get('.after-list');
+    after.text().should.equal('');
+    await component.get('.select-all').trigger('click');
+    after.text().should.equal('Selecting too many columns might slow down your computer.');
   });
 
   it('is not rendered if there are 11 selectable fields', async () => {
@@ -455,9 +104,10 @@ describe('SubmissionFieldDropdown', () => {
 
     const uncheckFirst = async (component) => {
       const dropdown = component.getComponent(SubmissionFieldDropdown);
-      await dropdown.get('select').trigger('click');
-      await dropdown.get('input[type="checkbox"]').setChecked(false);
-      return dropdown.get('select').trigger('click');
+      const select = dropdown.get('select');
+      await select.trigger('click');
+      await dropdown.get('input[type="checkbox"]').setValue(false);
+      return select.trigger('click');
     };
 
     it('sends a request for submissions', () =>
diff --git a/test/components/submission/filters.spec.js b/test/components/submission/filters.spec.js
index 5a65ae232..770b69c46 100644
--- a/test/components/submission/filters.spec.js
+++ b/test/components/submission/filters.spec.js
@@ -24,6 +24,20 @@ const loadComponent = (...args) => {
   }))
     .route(`/projects/1/forms/f/submissions?${queryString}`);
 };
+const createFieldKeys = (count) => new Array(count).fill(undefined)
+  .map((_, i) => testData.extendedFieldKeys
+    .createPast(1, { displayName: `App User ${i}` })
+    .last());
+const changeMultiselect = (selector, selectedIndexes) => async (component) => {
+  const multiselect = component.get(selector);
+  const toggle = multiselect.get('select');
+  await toggle.trigger('click');
+  await multiselect.get('.select-none').trigger('click');
+  const inputs = multiselect.findAll('input[type="checkbox"]');
+  for (const i of selectedIndexes)
+    await inputs[i].setValue(true); // eslint-disable-line no-await-in-loop
+  return toggle.trigger('click');
+};
 
 describe('SubmissionFilters', () => {
   beforeEach(mockLogin);
@@ -42,16 +56,16 @@ describe('SubmissionFilters', () => {
     });
 
     it('filters on submitter if ?submitter is specified', () =>
-      loadComponent('submitterId=1')
+      loadComponent('submitterId=1&submitterId=2')
         .beforeEachResponse((_, { url }) => {
           if (url.includes('.svc')) {
             const filter = relativeUrl(url).searchParams.get('$filter');
-            filter.should.equal('__system/submitterId eq 1');
+            filter.should.equal('(__system/submitterId eq 1 or __system/submitterId eq 2)');
           }
         })
         .afterResponses(component => {
           const filters = component.getComponent(SubmissionFilters).props();
-          filters.submitterId.should.equal('1');
+          filters.submitterId.should.eql([1, 2]);
         }));
 
     it('filters on review state if ?reviewState is specified', () =>
@@ -59,13 +73,12 @@ describe('SubmissionFilters', () => {
         .beforeEachResponse((_, { url }) => {
           if (url.includes('.svc')) {
             const filter = relativeUrl(url).searchParams.get('$filter');
-            // For now, we only use the first ?reviewState query parameter.
-            filter.should.equal("(__system/reviewState eq 'approved')");
+            filter.should.equal("(__system/reviewState eq 'approved' or __system/reviewState eq null)");
           }
         })
         .afterResponses(component => {
           const filters = component.getComponent(SubmissionFilters).props();
-          filters.reviewState.should.eql(["'approved'"]);
+          filters.reviewState.should.eql(["'approved'", 'null']);
         }));
 
     it('filters on submission date if ?start and ?end are specified', () =>
@@ -98,7 +111,6 @@ describe('SubmissionFilters', () => {
         'submitterId=-1',
         'submitterId=foo',
         'submitterId',
-        'submitterId=1&submitterId=1',
         'reviewState=foo',
         'reviewState',
         'start=1970-01-01',
@@ -120,9 +132,9 @@ describe('SubmissionFilters', () => {
             })
             .afterResponses(component => {
               const filters = component.getComponent(SubmissionFilters).props();
-              filters.submitterId.should.equal('');
+              filters.submitterId.should.eql([]);
               filters.submissionDate.should.eql([]);
-              filters.reviewState.should.eql([]);
+              filters.reviewState.length.should.equal(5);
             }));
       }
     });
@@ -130,49 +142,45 @@ describe('SubmissionFilters', () => {
 
   describe('after the submitter filter is changed', () => {
     beforeEach(() => {
-      testData.extendedProjects.createPast(1, { forms: 1, appUsers: 1 });
-      testData.extendedFieldKeys.createPast(1);
+      testData.extendedProjects.createPast(1, { forms: 1, appUsers: 3 });
+      testData.extendedForms.createPast(1, { submissions: 3 });
+      const fieldKeys = createFieldKeys(3);
+      testData.extendedSubmissions
+        .createPast(1, { submitter: fieldKeys[2] })
+        .createPast(1, { submitter: fieldKeys[1] })
+        .createPast(1, { submitter: fieldKeys[0] });
     });
 
-    it('sends a request', () => {
-      const fieldKey = testData.extendedFieldKeys.last();
-      testData.extendedSubmissions.createPast(1, { submitter: fieldKey });
-      return loadComponent()
+    it('sends a request', () =>
+      loadComponent({ attachTo: document.body })
         .complete()
-        .request(component => {
-          const select = component.get('#submission-filters-submitter select');
-          return select.setValue(fieldKey.id.toString());
-        })
+        .request(changeMultiselect('#submission-filters-submitter', [0]))
         .beforeEachResponse((_, { url }) => {
           const filter = relativeUrl(url).searchParams.get('$filter');
-          filter.should.equal(`__system/submitterId eq ${fieldKey.id}`);
+          const { id } = testData.extendedFieldKeys.first();
+          filter.should.equal(`(__system/submitterId eq ${id})`);
         })
-        .respondWithData(testData.submissionOData);
-    });
+        .respondWithData(() => ({
+          ...testData.submissionOData(1),
+          '@odata.count': 1
+        })));
 
-    it('updates the URL', () => {
-      const fieldKey = testData.extendedFieldKeys.last();
-      testData.extendedSubmissions.createPast(1, { submitter: fieldKey });
-      return loadComponent()
+    it('updates the URL', () =>
+      loadComponent({ attachTo: document.body })
         .complete()
-        .request(component => {
-          const select = component.get('#submission-filters-submitter select');
-          return select.setValue(fieldKey.id.toString());
-        })
-        .respondWithData(testData.submissionOData)
+        .request(changeMultiselect('#submission-filters-submitter', [0]))
+        .respondWithData(() => ({
+          ...testData.submissionOData(1),
+          '@odata.count': 1
+        }))
         .afterResponse(component => {
           const { submitterId } = component.vm.$route.query;
-          submitterId.should.equal(fieldKey.id.toString());
-        });
-    });
+          const { id } = testData.extendedFieldKeys.first();
+          submitterId.should.eql([id.toString()]);
+        }));
 
-    it('re-renders the table', () => {
-      testData.extendedForms.createPast(1, { submissions: 3 });
-      const fieldKey = testData.extendedFieldKeys.last();
-      testData.extendedSubmissions.createPast(3, { submitter: fieldKey });
-      return loadComponent({
-        props: { top: () => 2 }
-      })
+    it('re-renders the table', () =>
+      loadComponent({ props: { top: () => 2 }, attachTo: document.body })
         .complete()
         .request(component => {
           sinon.replace(component.vm, 'scrolledToBottom', () => true);
@@ -182,18 +190,32 @@ describe('SubmissionFilters', () => {
         .afterResponse(component => {
           component.findAllComponents(SubmissionMetadataRow).length.should.equal(3);
         })
-        .request(component => {
-          const select = component.get('#submission-filters-submitter select');
-          return select.setValue(fieldKey.id.toString());
-        })
+        .request(changeMultiselect('#submission-filters-submitter', [0]))
         .beforeEachResponse(component => {
           component.findComponent(SubmissionMetadataRow).exists().should.be.false();
         })
-        .respondWithData(() => testData.submissionOData(2, 0))
+        .respondWithData(() => ({
+          ...testData.submissionOData(1),
+          '@odata.count': 1
+        }))
         .afterResponse(component => {
-          component.findAllComponents(SubmissionMetadataRow).length.should.equal(2);
-        });
-    });
+          component.findAllComponents(SubmissionMetadataRow).length.should.equal(1);
+        }));
+
+    it('allows multiple submitters to be selected', () =>
+      loadComponent({ attachTo: document.body })
+        .complete()
+        .request(changeMultiselect('#submission-filters-submitter', [0, 1]))
+        .beforeEachResponse((_, { url }) => {
+          const filter = relativeUrl(url).searchParams.get('$filter');
+          const id0 = testData.extendedFieldKeys.get(0).id;
+          const id1 = testData.extendedFieldKeys.get(1).id;
+          filter.should.equal(`(__system/submitterId eq ${id0} or __system/submitterId eq ${id1})`);
+        })
+        .respondWithData(() => ({
+          ...testData.submissionOData(2),
+          '@odata.count': 2
+        })));
   });
 
   describe('after the submission date filter is changed', () => {
@@ -247,59 +269,48 @@ describe('SubmissionFilters', () => {
     });
 
     it('sends a request', () =>
-      loadComponent()
+      loadComponent({ attachTo: document.body })
         .complete()
-        .request(component => {
-          const select = component.get('#submission-filters-review-state select');
-          return select.setValue("'approved'");
-        })
+        .request(changeMultiselect('#submission-filters-review-state', [1]))
         .beforeEachResponse((_, { url }) => {
           const filter = relativeUrl(url).searchParams.get('$filter');
-          filter.should.equal("(__system/reviewState eq 'approved')");
+          filter.should.equal("(__system/reviewState eq 'hasIssues')");
         })
         .respondWithData(testData.submissionOData));
 
     it('updates the URL', () =>
-      loadComponent()
+      loadComponent({ attachTo: document.body })
         .complete()
-        .request(component => {
-          const select = component.get('#submission-filters-review-state select');
-          return select.setValue("'approved'");
-        })
+        .request(changeMultiselect('#submission-filters-review-state', [1]))
         .respondWithData(testData.submissionOData)
         .afterResponse(component => {
-          component.vm.$route.query.reviewState.should.eql(["'approved'"]);
+          component.vm.$route.query.reviewState.should.eql(["'hasIssues'"]);
         }));
-  });
 
-  it.skip('allows multiple review states to be selected', () => {
-    testData.extendedForms.createPast(1);
-    return loadComponent()
-      .complete()
-      .request(component => {
-        const select = component.get('#submission-filters-review-state select');
-        const options = select.findAll('option');
-        options[0].element.selected = true;
-        options[1].element.selected = true;
-        return select.trigger('change');
-      })
-      .beforeEachResponse((_, { url }) => {
-        url.should.match(/&%24filter=%28__system%2FreviewState\+eq\+null\+or\+__system%2FreviewState\+eq\+%27approved%27%29(&|$)/);
-      })
-      .respondWithData(testData.submissionOData);
+    it('allows multiple review states to be selected', () =>
+      loadComponent({ attachTo: document.body })
+        .complete()
+        .request(changeMultiselect('#submission-filters-review-state', [0, 1]))
+        .beforeEachResponse((_, { url }) => {
+          const filter = relativeUrl(url).searchParams.get('$filter');
+          filter.should.equal("(__system/reviewState eq null or __system/reviewState eq 'hasIssues')");
+        })
+        .respondWithData(testData.submissionOData));
   });
 
   it('specifies the filters together', () => {
-    testData.extendedProjects.createPast(1, { forms: 1, appUsers: 1 });
-    const fieldKey = testData.extendedFieldKeys.createPast(1).last();
-    testData.extendedSubmissions.createPast(1, { submitter: fieldKey });
-    return loadComponent()
+    testData.extendedProjects.createPast(1, { forms: 1, appUsers: 2 });
+    const fieldKeys = createFieldKeys(2);
+    testData.extendedSubmissions
+      .createPast(1, { submitter: fieldKeys[1] })
+      .createPast(1, { submitter: fieldKeys[0] });
+    return loadComponent({ attachTo: document.body })
       .complete()
-      .request(component => {
-        const select = component.get('#submission-filters-submitter select');
-        return select.setValue(fieldKey.id.toString());
-      })
-      .respondWithData(testData.submissionOData)
+      .request(changeMultiselect('#submission-filters-submitter', [0]))
+      .respondWithData(() => ({
+        ...testData.submissionOData(1),
+        '@odata.count': 1
+      }))
       .complete()
       .request(component => {
         component.getComponent(DateRangePicker).vm.close([
@@ -307,20 +318,17 @@ describe('SubmissionFilters', () => {
           DateTime.fromISO('1970-01-02').toJSDate()
         ]);
       })
-      .respondWithData(() => testData.submissionOData(0))
+      .respondWithData(() => ({ value: [], '@odata.count': 0 }))
       .complete()
-      .request(component => {
-        const select = component.get('#submission-filters-review-state select');
-        return select.setValue('null');
-      })
+      .request(changeMultiselect('#submission-filters-review-state', [0]))
       .beforeEachResponse((_, { url }) => {
         const filter = relativeUrl(url).searchParams.get('$filter');
-        filter.should.match(/^__system\/submitterId eq \d+ and __system\/submissionDate ge \S+ and __system\/submissionDate le \S+ and \(__system\/reviewState eq null\)$/);
+        filter.should.match(/^\(__system\/submitterId eq \d+\) and __system\/submissionDate ge \S+ and __system\/submissionDate le \S+ and \(__system\/reviewState eq null\)$/);
       })
-      .respondWithData(() => testData.submissionOData(0))
+      .respondWithData(() => ({ value: [], '@odata.count': 0 }))
       .afterResponse(component => {
         component.vm.$route.query.should.eql({
-          submitterId: fieldKey.id.toString(),
+          submitterId: [fieldKeys[0].id.toString()],
           start: '1970-01-01',
           end: '1970-01-02',
           reviewState: ['null']
@@ -329,22 +337,17 @@ describe('SubmissionFilters', () => {
   });
 
   it('numbers the rows based on the number of filtered submissions', () => {
-    testData.extendedProjects.createPast(1, { forms: 1, appUsers: 2 });
+    testData.extendedProjects.createPast(1, { forms: 1, appUsers: 1 });
     testData.extendedForms.createPast(1, { submissions: 2 });
-    testData.extendedSubmissions.createPast(1, {
-      submitter: testData.extendedFieldKeys.createPast(1).last()
-    });
-    testData.extendedSubmissions.createPast(1, {
-      submitter: testData.extendedFieldKeys.createPast(1).last()
-    });
-    return loadComponent()
+    const submitter = testData.extendedFieldKeys.createPast(1).last();
+    testData.extendedSubmissions
+      .createPast(1, { reviewState: 'approved', submitter })
+      .createPast(1, { reviewState: null, submitter });
+    return loadComponent({ attachTo: document.body })
       .complete()
-      .request(component => {
-        const select = component.get('#submission-filters-submitter select');
-        return select.setValue(testData.extendedFieldKeys.last().id.toString());
-      })
+      .request(changeMultiselect('#submission-filters-review-state', [0]))
       .respondWithData(() => ({
-        value: [testData.extendedSubmissions.last()._odata],
+        ...testData.submissionOData(1),
         '@odata.count': 1
       }))
       .afterResponse(component => {
@@ -353,24 +356,19 @@ describe('SubmissionFilters', () => {
   });
 
   it('does not update form.submissions', () => {
-    testData.extendedProjects.createPast(1, { forms: 1, appUsers: 2 });
+    testData.extendedProjects.createPast(1, { forms: 1, appUsers: 1 });
     testData.extendedForms.createPast(1, { submissions: 2 });
-    testData.extendedSubmissions.createPast(1, {
-      submitter: testData.extendedFieldKeys.createPast(1).last()
-    });
-    testData.extendedSubmissions.createPast(1, {
-      submitter: testData.extendedFieldKeys.createPast(1).last()
-    });
-    return load('/projects/1/forms/f/submissions')
+    const submitter = testData.extendedFieldKeys.createPast(1).last();
+    testData.extendedSubmissions
+      .createPast(1, { reviewState: 'approved', submitter })
+      .createPast(1, { reviewState: null, submitter });
+    return load('/projects/1/forms/f/submissions', { attachTo: document.body })
       .afterResponses(app => {
         app.vm.$container.requestData.form.submissions.should.equal(2);
       })
-      .request(app => {
-        const select = app.get('#submission-filters-submitter select');
-        return select.setValue(testData.extendedFieldKeys.last().id.toString());
-      })
+      .request(changeMultiselect('#submission-filters-review-state', [0]))
       .respondWithData(() => ({
-        value: [testData.extendedSubmissions.last()._odata],
+        ...testData.submissionOData(1),
         '@odata.count': 1
       }))
       .afterResponse(app => {
@@ -379,19 +377,21 @@ describe('SubmissionFilters', () => {
   });
 
   describe('loading message', () => {
-    it('shows the correct message for the first chunk', () => {
+    const createData = (submissionCount) => {
       testData.extendedProjects.createPast(1, { forms: 1, appUsers: 1 });
-      testData.extendedForms.createPast(1, { submissions: 3 });
+      testData.extendedForms.createPast(1, { submissions: submissionCount });
       const fieldKey = testData.extendedFieldKeys.createPast(1).last();
-      testData.extendedSubmissions.createPast(3, { submitter: fieldKey });
-      return loadComponent({
-        props: { top: () => 2 }
-      })
+      testData.extendedSubmissions.createPast(submissionCount, {
+        reviewState: null,
+        submitter: fieldKey
+      });
+    };
+
+    it('shows the correct message for the first chunk', () => {
+      createData(3);
+      return loadComponent({ props: { top: () => 2 }, attachTo: document.body })
         .complete()
-        .request(component => {
-          const select = component.get('#submission-filters-submitter select');
-          return select.setValue(fieldKey.id.toString());
-        })
+        .request(changeMultiselect('#submission-filters-review-state', [0]))
         .beforeEachResponse(component => {
           const text = component.get('#submission-list-message-text').text();
           text.trim().should.equal('Loading matching Submissions…');
@@ -400,18 +400,10 @@ describe('SubmissionFilters', () => {
     });
 
     it('shows the correct message for the second chunk', () => {
-      testData.extendedProjects.createPast(1, { forms: 1, appUsers: 1 });
-      testData.extendedForms.createPast(1, { submissions: 5 });
-      const fieldKey = testData.extendedFieldKeys.createPast(1).last();
-      testData.extendedSubmissions.createPast(5, { submitter: fieldKey });
-      return loadComponent({
-        props: { top: () => 2 }
-      })
+      createData(5);
+      return loadComponent({ props: { top: () => 2 }, attachTo: document.body })
         .complete()
-        .request(component => {
-          const select = component.get('#submission-filters-submitter select');
-          return select.setValue(fieldKey.id.toString());
-        })
+        .request(changeMultiselect('#submission-filters-review-state', [0]))
         .respondWithData(() => testData.submissionOData(2, 0))
         .complete()
         .request(component => {
@@ -427,18 +419,10 @@ describe('SubmissionFilters', () => {
 
     describe('last chunk', () => {
       it('shows correct message if there is one submission remaining', () => {
-        testData.extendedProjects.createPast(1, { forms: 1, appUsers: 1 });
-        testData.extendedForms.createPast(1, { submissions: 3 });
-        const fieldKey = testData.extendedFieldKeys.createPast(1).last();
-        testData.extendedSubmissions.createPast(3, { submitter: fieldKey });
-        return loadComponent({
-          props: { top: () => 2 }
-        })
+        createData(3);
+        return loadComponent({ props: { top: () => 2 }, attachTo: document.body })
           .complete()
-          .request(component => {
-            const select = component.get('#submission-filters-submitter select');
-            return select.setValue(fieldKey.id.toString());
-          })
+          .request(changeMultiselect('#submission-filters-review-state', [0]))
           .respondWithData(() => testData.submissionOData(2, 0))
           .complete()
           .request(component => {
@@ -453,18 +437,10 @@ describe('SubmissionFilters', () => {
       });
 
       it('shows correct message if there is are multiple submissions remaining', () => {
-        testData.extendedProjects.createPast(1, { forms: 1, appUsers: 1 });
-        testData.extendedForms.createPast(1, { submissions: 4 });
-        const fieldKey = testData.extendedFieldKeys.createPast(1).last();
-        testData.extendedSubmissions.createPast(4, { submitter: fieldKey });
-        return loadComponent({
-          props: { top: () => 2 }
-        })
+        createData(4);
+        return loadComponent({ props: { top: () => 2 }, attachTo: document.body })
           .complete()
-          .request(component => {
-            const select = component.get('#submission-filters-submitter select');
-            return select.setValue(fieldKey.id.toString());
-          })
+          .request(changeMultiselect('#submission-filters-review-state', [0]))
           .respondWithData(() => testData.submissionOData(2, 0))
           .complete()
           .request(component => {
diff --git a/test/components/submission/filters/review-state.spec.js b/test/components/submission/filters/review-state.spec.js
new file mode 100644
index 000000000..7aedceb95
--- /dev/null
+++ b/test/components/submission/filters/review-state.spec.js
@@ -0,0 +1,98 @@
+import Multiselect from '../../../../src/components/multiselect.vue';
+import SubmissionFiltersReviewState from '../../../../src/components/submission/filters/review-state.vue';
+
+import { mergeMountOptions, mount } from '../../../util/lifecycle';
+
+const mountComponent = (options = undefined) =>
+  mount(SubmissionFiltersReviewState, mergeMountOptions(options, {
+    props: { modelValue: ['null'] }
+  }));
+const toggle = (multiselect) => multiselect.get('select').trigger('click');
+
+describe('SubmissionFiltersReviewState', () => {
+  it('renders the correct options', () => {
+    mountComponent().getComponent(Multiselect).props().options.should.eql([
+      { value: 'null', text: 'Received' },
+      { value: "'hasIssues'", text: 'Has issues' },
+      { value: "'edited'", text: 'Edited' },
+      { value: "'approved'", text: 'Approved' },
+      { value: "'rejected'", text: 'Rejected' }
+    ]);
+  });
+
+  it('passes the modelValue prop to the Multiselect', () => {
+    const component = mountComponent({
+      props: { modelValue: ['null', "'approved'"] }
+    });
+    const multiselect = component.getComponent(Multiselect);
+    multiselect.props().modelValue.should.eql(['null', "'approved'"]);
+  });
+
+  it('passes a new value for modelValue prop to Multiselect', async () => {
+    const component = mountComponent({
+      props: { modelValue: ['null', "'approved'"] }
+    });
+    await component.setProps({ modelValue: ['null'] });
+    component.getComponent(Multiselect).props().modelValue.should.eql(['null']);
+  });
+
+  it('passes up an update:modelValue event from the Multiselect', async () => {
+    const component = mountComponent({
+      props: { modelValue: ['null', "'approved'"] },
+      attachTo: document.body
+    });
+    const multiselect = component.getComponent(Multiselect);
+    await toggle(multiselect);
+    await multiselect.get('input[type="checkbox"]').setValue(false);
+    await toggle(multiselect);
+    multiselect.emitted('update:modelValue').should.eql([[["'approved'"]]]);
+    component.emitted('update:modelValue').should.eql([[["'approved'"]]]);
+  });
+
+  describe('no review states are selected', () => {
+    const all = ['null', "'hasIssues'", "'edited'", "'approved'", "'rejected'"];
+
+    it('falls back to all review states', async () => {
+      const component = mountComponent({
+        props: { modelValue: ['null'] },
+        attachTo: document.body
+      });
+      const multiselect = component.getComponent(Multiselect);
+      await toggle(multiselect);
+      await multiselect.get('.select-none').trigger('click');
+      await toggle(multiselect);
+      multiselect.emitted('update:modelValue').should.eql([[[]]]);
+      component.emitted('update:modelValue').should.eql([[all]]);
+    });
+
+    describe('all review states were already selected', () => {
+      it('does not emit an event', async () => {
+        const component = mountComponent({
+          props: { modelValue: all },
+          attachTo: document.body
+        });
+        const multiselect = component.getComponent(Multiselect);
+        await toggle(multiselect);
+        await multiselect.get('.select-none').trigger('click');
+        await toggle(multiselect);
+        multiselect.emitted('update:modelValue').should.eql([[[]]]);
+        should.not.exist(component.emitted('update:modelValue'));
+      });
+
+      it('updates the Multiselect', async () => {
+        const component = mountComponent({
+          props: { modelValue: all },
+          attachTo: document.body
+        });
+        const multiselect = component.getComponent(Multiselect);
+        await toggle(multiselect);
+        await multiselect.get('.select-none').trigger('click');
+        await toggle(multiselect);
+        multiselect.props().modelValue.should.eql(all);
+        await toggle(multiselect);
+        const inputs = multiselect.findAll('input[type="checkbox"]:checked');
+        inputs.length.should.equal(5);
+      });
+    });
+  });
+});
diff --git a/test/components/submission/filters/submitter.spec.js b/test/components/submission/filters/submitter.spec.js
index a9dd9257e..5bc935b96 100644
--- a/test/components/submission/filters/submitter.spec.js
+++ b/test/components/submission/filters/submitter.spec.js
@@ -1,44 +1,58 @@
+import Multiselect from '../../../../src/components/multiselect.vue';
 import SubmissionFiltersSubmitter from '../../../../src/components/submission/filters/submitter.vue';
 
+import useSubmissions from '../../../../src/request-data/submissions';
+
+import createTestContainer from '../../../util/container';
 import testData from '../../../data';
-import { load } from '../../../util/http';
-import { loadSubmissionList } from '../../../util/submission';
 import { mergeMountOptions, mount } from '../../../util/lifecycle';
-import { mockLogin } from '../../../util/session';
+import { mockHttp } from '../../../util/http';
 import { testRequestData } from '../../../util/request-data';
 
-const mountComponent = (options = undefined) =>
-  mount(SubmissionFiltersSubmitter, mergeMountOptions(options, {
-    props: { modelValue: '' },
+const mountComponent = (options = undefined) => {
+  const submitters = testData.extendedFieldKeys.sorted()
+    .sort((fieldKey1, fieldKey2) => (fieldKey1.id < fieldKey2.id ? -1 : 1))
+    .map(testData.toActor);
+  return mount(SubmissionFiltersSubmitter, mergeMountOptions(options, {
+    props: { modelValue: submitters.map(({ id }) => id) },
     container: {
-      requestData: testRequestData(['submitters'], {
-        submitters: testData.extendedFieldKeys
-          .sorted()
-          .sort((fieldKey1, fieldKey2) =>
-            fieldKey1.displayName.localeCompare(fieldKey2.displayName))
-          .map(testData.toActor)
-      })
+      requestData: testRequestData([useSubmissions], { submitters })
     }
   }));
+};
+const toggle = (multiselect) => multiselect.get('select').trigger('click');
 
 describe('SubmissionFiltersSubmitter', () => {
-  describe('submitters are loading', () => {
-    beforeEach(() => {
-      mockLogin();
-      testData.extendedForms.createPast(1);
+  it('indicates whether the submitters are loading', () => {
+    const container = createTestContainer({
+      requestData: testRequestData([useSubmissions])
     });
+    const { submitters } = container.requestData.localResources;
+    return mockHttp(container)
+      .mount(SubmissionFiltersSubmitter, {
+        props: { modelValue: [] },
+        container
+      })
+      .request(() => submitters.request({ url: '/v1/.../submitters' }))
+      .beforeAnyResponse(component => {
+        component.getComponent(Multiselect).props().loading.should.be.true();
+      })
+      .respondWithData(() => [])
+      .afterResponse(component => {
+        component.getComponent(Multiselect).props().loading.should.be.false();
+      });
+  });
 
-    it('disables the select element', () =>
-      loadSubmissionList().beforeAnyResponse(component => {
-        const select = component.get('#submission-filters-submitter select');
-        select.element.disabled.should.be.true();
-      }));
-
-    it('shows a loading message', () =>
-      loadSubmissionList().beforeAnyResponse(component => {
-        const options = component.findAll('#submission-filters-submitter option');
-        options.map(option => option.text()).should.eql(['Loading…']);
-      }));
+  it('renders correctly if there was an error loading submitters', () => {
+    const component = mount(SubmissionFiltersSubmitter, {
+      props: { modelValue: [] },
+      // !submitters.dataExists and also !submitters.awaitingResponse, meaning
+      // that there was an error response.
+      container: { requestData: testRequestData([useSubmissions]) }
+    });
+    const { options, loading } = component.getComponent(Multiselect).props();
+    should.not.exist(options);
+    loading.should.be.false();
   });
 
   it('renders the correct options', () => {
@@ -48,84 +62,138 @@ describe('SubmissionFiltersSubmitter', () => {
     const fieldKey2 = testData.extendedFieldKeys
       .createPast(1, { displayName: 'App User 2' })
       .last();
-    const options = mountComponent().findAll('option');
-    options.length.should.equal(3);
-    options[0].attributes().value.should.equal('');
-    options[0].text().should.equal('(Anybody)');
-    options[1].attributes().value.should.equal(fieldKey1.id.toString());
-    options[1].text().should.equal('App User 1');
-    options[2].attributes().value.should.equal(fieldKey2.id.toString());
-    options[2].text().should.equal('App User 2');
+    mountComponent().getComponent(Multiselect).props().options.should.eql([
+      { value: fieldKey1.id, text: 'App User 1' },
+      { value: fieldKey2.id, text: 'App User 2' }
+    ]);
   });
 
-  it('sets the value of the select element to the modelValue prop', () => {
-    const id = testData.extendedFieldKeys.createPast(1).last().id.toString();
+  it('passes the modelValue prop to the Multiselect', () => {
+    const { id } = testData.extendedFieldKeys.createPast(1).last();
     const component = mountComponent({
-      props: { modelValue: id }
+      props: { modelValue: [id] }
     });
-    component.get('select').element.value.should.equal(id);
+    component.getComponent(Multiselect).props().modelValue.should.eql([id]);
   });
 
-  it('sets value of select element once submitters have loaded', () => {
-    mockLogin();
-    testData.extendedProjects.createPast(1, { forms: 1, appUsers: 1 });
-    const submitter = testData.extendedFieldKeys.createPast(1).last();
-    testData.extendedSubmissions.createPast(1, { submitter });
-    const id = submitter.id.toString();
-    return load(`/projects/1/forms/f/submissions?submitterId=${id}`, { root: false })
-      .beforeEachResponse((component, _, i) => {
-        if (i !== 0) {
-          const select = component.get('#submission-filters-submitter select');
-          select.element.value.should.equal('');
-        }
-      })
-      .afterResponses(component => {
-        const select = component.get('#submission-filters-submitter select');
-        select.element.value.should.equal(id);
-      });
+  it('passes a new value for modelValue prop to Multiselect', async () => {
+    const fieldKey1 = testData.extendedFieldKeys.createPast(1).last();
+    const fieldKey2 = testData.extendedFieldKeys.createPast(1).last();
+    const component = mountComponent({
+      props: { modelValue: [fieldKey1.id, fieldKey2.id] }
+    });
+    await component.setProps({ modelValue: [fieldKey1.id] });
+    const multiselect = component.getComponent(Multiselect);
+    multiselect.props().modelValue.should.eql([fieldKey1.id]);
+  });
+
+  it('passes up an update:modelValue event from the Multiselect', async () => {
+    const fieldKey1 = testData.extendedFieldKeys.createPast(1).last();
+    const fieldKey2 = testData.extendedFieldKeys.createPast(1).last();
+    const component = mountComponent({
+      props: { modelValue: [fieldKey1.id, fieldKey2.id] },
+      attachTo: document.body
+    });
+    const multiselect = component.getComponent(Multiselect);
+    await toggle(multiselect);
+    await multiselect.get('input[type="checkbox"]').setValue(false);
+    await toggle(multiselect);
+    multiselect.emitted('update:modelValue').should.eql([[[fieldKey2.id]]]);
+    component.emitted('update:modelValue').should.eql([[[fieldKey2.id]]]);
   });
 
-  describe('modelValue prop is an unknown submitter', () => {
-    it('renders correctly if submitters were loaded', () => {
+  describe('no submitters are selected', () => {
+    it('falls back to all submitters', async () => {
+      const fieldKey1 = testData.extendedFieldKeys.createPast(1).last();
+      const fieldKey2 = testData.extendedFieldKeys.createPast(1).last();
       const component = mountComponent({
-        props: { modelValue: '42' }
+        props: { modelValue: [fieldKey1.id] },
+        attachTo: document.body
       });
-      const option = component.get('option[value="42"]');
-      option.text().should.equal('Unknown submitter');
+      const multiselect = component.getComponent(Multiselect);
+      await toggle(multiselect);
+      await multiselect.get('.select-none').trigger('click');
+      await toggle(multiselect);
+      multiselect.emitted('update:modelValue').should.eql([[[]]]);
+      component.emitted('update:modelValue').should.eql([[
+        [fieldKey1.id, fieldKey2.id]
+      ]]);
     });
 
-    it('renders correctly if there was an error loading submitters', () => {
-      const component = mount(SubmissionFiltersSubmitter, {
-        props: { modelValue: '42' },
-        // !submitters.dataExists and also !submitters.awaitingResponse, meaning
-        // that there was an error response.
-        container: { requestData: testRequestData(['submitters']) }
+    describe('all submitters were already selected', () => {
+      it('does not emit an event', async () => {
+        const fieldKey = testData.extendedFieldKeys.createPast(1).last();
+        const component = mountComponent({
+          props: { modelValue: [fieldKey.id] },
+          attachTo: document.body
+        });
+        const multiselect = component.getComponent(Multiselect);
+        await toggle(multiselect);
+        await multiselect.get('.select-none').trigger('click');
+        await toggle(multiselect);
+        multiselect.emitted('update:modelValue').should.eql([[[]]]);
+        should.not.exist(component.emitted('update:modelValue'));
+      });
+
+      it('updates the Multiselect', async () => {
+        const fieldKey = testData.extendedFieldKeys.createPast(1).last();
+        const component = mountComponent({
+          props: { modelValue: [fieldKey.id] },
+          attachTo: document.body
+        });
+        const multiselect = component.getComponent(Multiselect);
+        await toggle(multiselect);
+        await multiselect.get('.select-none').trigger('click');
+        await toggle(multiselect);
+        multiselect.props().modelValue.should.eql([fieldKey.id]);
+        await toggle(multiselect);
+        const input = multiselect.get('input[type="checkbox"]');
+        input.element.checked.should.be.true();
       });
-      const option = component.get('option[value="42"]');
-      option.text().should.equal('Unknown submitter');
     });
   });
 
-  it('updates value of select element after modelValue prop changes', async () => {
-    const id = testData.extendedFieldKeys.createPast(1).last().id.toString();
-    const component = mountComponent();
-    await component.setProps({ modelValue: id });
-    component.get('select').element.value.should.equal(id);
-  });
+  describe('modelValue prop includes an unknown submitter', () => {
+    it('renders an option for each unknown submitter', () => {
+      const fieldKey = testData.extendedFieldKeys
+        .createPast(1, { displayName: 'My App User' })
+        .last();
+      const component = mountComponent({
+        props: { modelValue: [23, 42] }
+      });
+      component.getComponent(Multiselect).props().options.should.eql([
+        { value: 23, text: 'Unknown submitter' },
+        { value: 42, text: 'Unknown submitter' },
+        { value: fieldKey.id, text: 'My App User' }
+      ]);
+    });
 
-  it('updates value of select after prop changes to unknown submitter', async () => {
-    testData.extendedFieldKeys.createPast(1);
-    const component = mountComponent();
-    await component.setProps({ modelValue: '42' });
-    component.get('select').element.value.should.equal('42');
-  });
+    it('does not emit unknown submitters if selection is changed', async () => {
+      const fieldKey = testData.extendedFieldKeys.createPast(1).last();
+      const component = mountComponent({
+        props: { modelValue: [23, 42] },
+        attachTo: document.body
+      });
+      const multiselect = component.getComponent(Multiselect);
+      await toggle(multiselect);
+      await multiselect.findAll('input[type="checkbox"]')[2].setValue(true);
+      await toggle(multiselect);
+      multiselect.emitted('update:modelValue').should.eql([[[23, 42, fieldKey.id]]]);
+      component.emitted('update:modelValue').should.eql([[[fieldKey.id]]]);
+    });
 
-  it('emits an update:modelValue event', () => {
-    const { id } = testData.extendedFieldKeys
-      .createPast(1, 'App User 1')
-      .last();
-    const component = mountComponent();
-    component.get('select').setValue(id.toString());
-    component.emitted('update:modelValue').should.eql([[id.toString()]]);
+    it('falls back to all submitters if only unknown submitters are selected', async () => {
+      const fieldKey = testData.extendedFieldKeys.createPast(1).last();
+      const component = mountComponent({
+        props: { modelValue: [23, 42] },
+        attachTo: document.body
+      });
+      const multiselect = component.getComponent(Multiselect);
+      await toggle(multiselect);
+      await multiselect.get('input[type="checkbox"]').setValue(false);
+      await toggle(multiselect);
+      multiselect.emitted('update:modelValue').should.eql([[[42]]]);
+      component.emitted('update:modelValue').should.eql([[[fieldKey.id]]]);
+    });
   });
 });
diff --git a/test/unit/router.spec.js b/test/unit/router.spec.js
index 19fa9827e..8b88b25e4 100644
--- a/test/unit/router.spec.js
+++ b/test/unit/router.spec.js
@@ -1,6 +1,6 @@
 import sinon from 'sinon';
 
-import { afterNextNavigation, forceReplace, routeProps } from '../../src/util/router';
+import { afterNextNavigation, arrayQuery, forceReplace, routeProps } from '../../src/util/router';
 
 import createTestContainer from '../util/container';
 import testData from '../data';
@@ -9,6 +9,46 @@ import { mockLogin } from '../util/session';
 import { testRouter } from '../util/router';
 
 describe('util/router', () => {
+  describe('arrayQuery()', () => {
+    it('returns an empty array for null', () => {
+      arrayQuery(null).should.eql([]);
+    });
+
+    it('wraps a string in an array', () => {
+      arrayQuery('foo').should.eql(['foo']);
+    });
+
+    it('filters out null', () => {
+      arrayQuery(['foo', null, 'bar']).should.eql(['foo', 'bar']);
+    });
+
+    it('deduplicates values', () => {
+      arrayQuery(['foo', 'foo']).should.eql(['foo']);
+    });
+
+    it('validates values', () => {
+      const validator = (value) => value !== 'bar';
+      arrayQuery(['foo', 'bar'], { validator }).should.eql(['foo']);
+    });
+
+    it('validates a string', () => {
+      const validator = (value) => value !== 'bar';
+      arrayQuery('bar', { validator }).should.eql([]);
+    });
+
+    it('returns a default', () => {
+      arrayQuery([], { default: ['foo'] }).should.eql(['foo']);
+    });
+
+    it('returns a default for null', () => {
+      arrayQuery(null, { default: ['foo'] }).should.eql(['foo']);
+    });
+
+    it('calls a default function', () => {
+      arrayQuery([], { default: () => ['foo'] }).should.eql(['foo']);
+    });
+  });
+
   describe('routeProps()', () => {
     const { router } = createTestContainer({ router: testRouter() });
     const route = router.resolve('/projects/1');
diff --git a/transifex/strings_en.json b/transifex/strings_en.json
index 31c50b0de..59e3dcf43 100644
--- a/transifex/strings_en.json
+++ b/transifex/strings_en.json
@@ -691,6 +691,9 @@
     "noSubmission": {
       "string": "(none)",
       "developer_comment": "This text is shown under the \"Latest Submission\" column of the tables for Projects and Forms. It is shown for a Project or Form with no Submissions."
+    },
+    "emptyTable": {
+      "string": "There are no Submissions yet."
     }
   },
   "common": {
@@ -722,6 +725,9 @@
       "string": "Docs",
       "developer_comment": "This is the text of a link that links to the documentation."
     },
+    "error": {
+      "string": "Error"
+    },
     "filter": {
       "string": "Filter",
       "developer_comment": "This text is shown next to options for filtering a table."
@@ -2394,6 +2400,14 @@
         "developer_comment": "This is text shown as a label above the preview of Markdown formatting (special formatting of user-submitted text)"
       }
     },
+    "Multiselect": {
+      "action": {
+        "select": {
+          "string": "Select {all} / {none}",
+          "developer_comment": "This text is shown in a dropdown that allows the user to make one or more selections. {all} has the text \"All\", and {none} has the text \"None\". {all} and {none} will be translated separately based on what is being selected."
+        }
+      }
+    },
     "Navbar": {
       "action": {
         "toggle": {
@@ -3396,24 +3410,20 @@
           "developer_comment": "This is the text of a form field."
         }
       },
-      "disabled": {
-        "string": "Cannot select more than 100 columns."
-      },
       "action": {
         "select": {
-          "full": {
-            "string": "Select {all} / {none}",
-            "developer_comment": "This text is shown in a dropdown that allows the user to select which columns to display in a table.\n\nThe following are separate strings that will be translated below. They will be formatted within ODK Central, for example, they might be bold or a link.\n\n- {all} has the text: All\n- {none} has the text: None"
-          },
           "all": {
             "string": "All",
-            "developer_comment": "This text is shown in a dropdown that allows the user to select which columns to display in a table.\n\nThis text will be formatted within ODK Central, for example, it might be bold or a link. It will be inserted where {all} is in the following text:\n\nSelect {all} / {none}"
+            "developer_comment": "This text is shown in a dropdown that allows the user to select which columns to display in a table. It will be inserted where {all} is in the following text:\n\nSelect {all} / {none}"
           },
           "none": {
             "string": "None",
-            "developer_comment": "This text is shown in a dropdown that allows the user to select which columns to display in a table.\n\nThis text will be formatted within ODK Central, for example, it might be bold or a link. It will be inserted where {none} is in the following text:\n\nSelect {all} / {none}"
+            "developer_comment": "This text is shown in a dropdown that allows the user to select which columns to display in a table. It will be inserted where {none} is in the following text:\n\nSelect {all} / {none}"
           }
         }
+      },
+      "warning": {
+        "string": "Selecting too many columns might slow down your computer."
       }
     },
     "SubmissionFilters": {
@@ -3425,16 +3435,48 @@
       }
     },
     "SubmissionFiltersReviewState": {
-      "anyState": {
-        "string": "(Any State)",
-        "developer_comment": "This text is shown in a dropdown that allows the user to filter to show only Submissions in a particular Review State."
+      "placeholder": {
+        "string": "{selected} of {total}",
+        "developer_comment": "This is the text of a dropdown that allows the user to select one or more Review States. {selected} is the number of selected Review States; {total} is the total number of Review States."
+      },
+      "action": {
+        "select": {
+          "all": {
+            "string": "All",
+            "developer_comment": "This text is shown in a dropdown that allows the user to select one or more Review States. It will be inserted where {all} is in the following text:\n\nSelect {all} / {none}"
+          },
+          "none": {
+            "string": "None",
+            "developer_comment": "This text is shown in a dropdown that allows the user to select one or more Review States. It will be inserted where {none} is in the following text:\n\nSelect {all} / {none}"
+          }
+        }
       }
     },
     "SubmissionFiltersSubmitter": {
       "field": {
         "submitter": {
           "string": "Submitted by",
-          "developer_comment": "This is the text of a form field that shows the names of users who have submitted data."
+          "developer_comment": "This is the text of a form field that shows the names of submitters."
+        },
+        "search": {
+          "string": "Search submitters…",
+          "developer_comment": "This is the text of a form field."
+        }
+      },
+      "placeholder": {
+        "string": "{selected} of {total}",
+        "developer_comment": "This is the text of a dropdown that allows the user to select one or more \"submitters\". A submitter can be a user, a team of users, a Public Access Link, or an automation. {selected} is the number of submitters selected; {total} is the total number of submitters."
+      },
+      "action": {
+        "select": {
+          "all": {
+            "string": "All",
+            "developer_comment": "This is the text of a dropdown that allows the user to select one or more submitters. It will be inserted where {all} is in the following text:\n\nSelect {all} / {none}"
+          },
+          "none": {
+            "string": "None",
+            "developer_comment": "This is the text of a dropdown that allows the user to select one or more submitters. It will be inserted where {none} is in the following text:\n\nSelect {all} / {none}"
+          }
         }
       },
       "unknown": {
@@ -3485,9 +3527,6 @@
           }
         }
       },
-      "emptyTable": {
-        "string": "There are no Submissions yet."
-      },
       "noMatching": {
         "string": "There are no matching Submissions."
       }