diff --git a/components/SelectDropdown.vue b/components/SelectDropdown.vue
new file mode 100644
index 0000000..fb67d24
--- /dev/null
+++ b/components/SelectDropdown.vue
@@ -0,0 +1,244 @@
+<template>
+	<div class="input">
+		<input
+			type="text"
+			v-model="inputText"
+			ref="input"
+			@keydown.up="keyUp"
+			@keydown.down="keyDown"
+			@keydown.enter="toggleActive"
+			@keydown.backspace="keyBackspace"
+		>
+		<button
+			@click="manualToggle()"
+			@keydown.up="keyUp"
+			@keydown.down="keyDown"
+			@keydown.enter.space="dropdownKey"
+		>
+			v
+		</button>
+		<div
+			v-if="showDropdown"
+			class="dropdown"
+		>
+			<ul class="options">
+				<li
+					v-for="entity of matchingEntities"
+					:class="{ active: activeId === entity.id, selected: selectedIds.has(entity.id) }"
+					@click="activeId = entity.id; toggleActive($event)"
+					tabindex="-1"
+				>
+					{{ entity.name }}
+				</li>
+				<li v-if="matchingEntities.length === 0">
+					no results
+				</li>
+			</ul>
+		</div>
+	</div>
+</template>
+
+<script lang="ts" setup>
+import type { ApiEntity } from '~/shared/types/api';
+import type { Id } from '~/shared/types/common';
+import type { ClientEntity } from '~/utils/client-entity';
+
+const selectedIds = defineModel<Set<Id>>({ required: true });
+const activeId = ref<Id>();
+const props = defineProps<{
+	entities: ClientMap<ClientEntity<ApiEntity> & { name?: string }>,
+	multi: boolean,
+}>();
+
+// Reset manualToggle if the focus leaves this component and doesn't come back.
+const focusTimer = ref<ReturnType<typeof setTimeout>>();
+function focusout() {
+	focusTimer.value = setTimeout(() => {
+		manualState.value = "closed";
+	}, 0);
+}
+function focusin() {
+	clearTimeout(focusTimer.value);
+}
+function esc() {
+	manualState.value = undefined;
+}
+function windowBlur() {
+	clearTimeout(focusTimer.value);
+}
+onMounted(() => {
+	window.addEventListener("blur", windowBlur);
+});
+onUnmounted(() => {
+	window.removeEventListener("blur", windowBlur);
+});
+
+defineExpose({
+	activeId,
+	focusin,
+	focusout,
+	esc,
+});
+
+const inputText = ref("");
+const manualState = ref<"open" | "closed">();
+const showDropdown = computed(() => {
+	if (manualState.value) {
+		return manualState.value === "open";
+	}
+	return Boolean(inputText.value)
+});
+
+function manualToggle() {
+	if (showDropdown.value) {
+		manualState.value = "closed";
+		activeId.value = undefined;
+	} else {
+		manualState.value = "open";
+	}
+}
+
+function dropdownKey(event: KeyboardEvent) {
+	if (showDropdown.value) {
+		toggleActive(event);
+	}
+}
+
+function ensureActive(match: "first" | "last") {
+	const active = props.entities.get(activeId.value!);
+	if (!active || !active.name || !fuzzyMatch(inputText.value, active.name)) {
+		// Set active id to the first match in the chosen direction
+		const entities = match === "first" ? matchingEntities.value : [...matchingEntities.value].reverse();
+		for (const entity of entities) {
+			if (entity.name && fuzzyMatch(inputText.value, entity.name)) {
+				activeId.value = entity.id;
+				return;
+			}
+		}
+		// No matches
+		activeId.value = undefined;
+	}
+}
+watch(inputText, () => {
+	if (manualState.value === "closed") {
+		manualState.value = undefined;
+	}
+	if (!inputText.value) {
+		return;
+	}
+	ensureActive("first");
+})
+function keyUp(event: KeyboardEvent) {
+	if (activeId.value === undefined) {
+		ensureActive("last");
+		event.preventDefault();
+		return;
+	}
+	const index = matchingEntities.value.findIndex(entity => entity.id === activeId.value);
+	if (index !== -1 && index !== 0) {
+		activeId.value = matchingEntities.value[index - 1].id;
+		event.preventDefault();
+	}
+}
+function keyDown(event: KeyboardEvent) {
+	if (activeId.value === undefined) {
+		ensureActive("first");
+		event.preventDefault();
+		return;
+	}
+	const index = matchingEntities.value.findIndex(entity => entity.id === activeId.value);
+	if (index !== -1 && index !== matchingEntities.value.length) {
+		activeId.value = matchingEntities.value[index + 1].id;
+		event.preventDefault();
+	}
+}
+const inputElement = useTemplateRef("input");
+function keyBackspace(event: KeyboardEvent) {
+	if (
+		inputElement.value?.selectionStart === 0
+		&& inputElement.value?.selectionEnd === 0
+	) {
+		const lastId = [...selectedIds.value].slice(-1)[0];
+		if (lastId === undefined) {
+			return;
+		}
+		if (props.multi) {
+			selectedIds.value.delete(lastId);
+		} else {
+			selectedIds.value = new Set();
+		}
+		const entity = props.entities.get(lastId);
+		inputText.value = `${entity?.name ?? lastId}${inputText.value ? " " : ""}${inputText.value}`;
+	}
+}
+function toggleActive(event: MouseEvent | KeyboardEvent) {
+	if (activeId.value !== undefined) {
+		if (props.multi) {
+			if (selectedIds.value.has(activeId.value)) {
+				selectedIds.value.delete(activeId.value);
+			} else {
+				selectedIds.value.add(activeId.value);
+			}
+		} else {
+			selectedIds.value = new Set([activeId.value]);
+		}
+		if (!props.multi || !event.ctrlKey) {
+			manualState.value = undefined;
+			activeId.value = undefined;
+			inputText.value = "";
+		}
+		event.preventDefault();
+	}
+}
+
+const fuzzyMatch = useFuzzyMatch();
+const stringSort = useStringSort();
+const matchingEntities = computed(() => {
+	let entities = [...props.entities.values()];
+	if (inputText.value) {
+		entities = entities.filter(entity => entity.name && fuzzyMatch(inputText.value, entity.name));
+	}
+	return entities.sort((a, b) => stringSort(a.name ?? "", b.name ?? ""));
+});
+</script>
+
+<style scoped>
+.input {
+	display: flex;
+	flex-grow: 1;
+}
+
+input {
+	width: 2rem;
+	flex-grow: 1;
+}
+.dropdown {
+	position: absolute;
+	z-index: 1;
+	background: Canvas;
+	color: CanvasText;
+	left: 0;
+	right: 0;
+	top: 100%;
+	max-height: 50lvh;
+	overflow-y: auto;
+}
+.options {
+	list-style: none;
+	padding-inline-start: 0;
+}
+.options li:focus,
+.options .active {
+	color: Canvas;
+	background-color: CanvasText;
+}
+.options .selected {
+	color: color-mix(in oklab, CanvasText, orange 30%);
+	background-color: color-mix(in oklab, Canvas, orange 30%);
+}
+.options li:focus.selected,
+.options .active.selected {
+	color: color-mix(in oklab, Canvas, orange 30%);
+	background-color: color-mix(in oklab, CanvasText, orange 30%);
+}
+</style>
diff --git a/components/SelectMultiEntity.vue b/components/SelectMultiEntity.vue
new file mode 100644
index 0000000..38ebbe8
--- /dev/null
+++ b/components/SelectMultiEntity.vue
@@ -0,0 +1,64 @@
+<template>
+	<div
+		class="select"
+		@focusin="dropdownComponent?.focusin()"
+		@focusout="dropdownComponent?.focusout()"
+		@keyup.esc="dropdownComponent?.esc()"
+	>
+		<div class="selected">
+			<div
+				v-for="id of selectedIds"
+				:key="id"
+				class="item"
+			>
+				{{ entities.get(id)?.name ?? id }}
+				<button
+					@click="selectedIds.delete(id)"
+				>x</button>
+			</div>
+		</div>
+		<SelectDropdown
+			ref="dropdown"
+			v-model="selectedIds"
+			:multi="true"
+			:entities
+		/>
+	</div>
+</template>
+
+<script lang="ts" setup>
+import type { ApiEntity } from '~/shared/types/api';
+import type { Id } from '~/shared/types/common';
+import type { ClientEntity } from '~/utils/client-entity';
+
+const selectedIds = defineModel<Set<Id>>({ required: true });
+defineProps<{
+	entities: ClientMap<ClientEntity<ApiEntity> & { name?: string }>,
+}>();
+
+const dropdownComponent = useTemplateRef("dropdown");
+</script>
+
+<style scoped>
+.select {
+	display: flex;
+	flex-wrap: wrap;
+	position: relative;
+}
+.selected {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 0.2rem;
+}
+.item {
+	background-color: color-mix(in srgb, Canvas, CanvasText 10%);
+	border-radius: 0.3rem;
+	padding-inline: 0.2rem;
+	padding-block: 0.1rem;
+	margin-inline-end: 0.2rem;
+	white-space: pre-wrap;
+}
+.item button {
+	line-height: 0.7;
+}
+</style>
diff --git a/components/SelectSingleEntity.vue b/components/SelectSingleEntity.vue
new file mode 100644
index 0000000..3d4ed29
--- /dev/null
+++ b/components/SelectSingleEntity.vue
@@ -0,0 +1,55 @@
+<template>
+	<div
+		class="select"
+		@focusin="dropdownComponent?.focusin()"
+		@focusout="dropdownComponent?.focusout()"
+		@keyup.esc="dropdownComponent?.esc()"
+	>
+		<div
+			v-if="selectedId !== undefined"
+			:title="entities.get(selectedId)?.name ?? String(selectedId)"
+			class="item"
+		>
+			{{ entities.get(selectedId)?.name ?? selectedId }}
+		</div>
+		<SelectDropdown
+			ref="dropdown"
+			:modelValue="new Set(selectedId !== undefined ? [selectedId] : [])"
+			@update:modelValue="selectedId = $event.size ? [...$event][0] : undefined"
+			:multi="false"
+			:entities
+		/>
+	</div>
+</template>
+
+<script lang="ts" setup>
+import type { ApiEntity } from '~/shared/types/api';
+import type { Id } from '~/shared/types/common';
+import type { ClientEntity } from '~/utils/client-entity';
+
+const selectedId = defineModel<Id | undefined>();
+defineProps<{
+	entities: ClientMap<ClientEntity<ApiEntity> & { name?: string }>,
+}>();
+
+const dropdownComponent = useTemplateRef("dropdown");
+</script>
+
+<style scoped>
+.select {
+	display: flex;
+	flex-wrap: wrap;
+	position: relative;
+}
+.item {
+	background-color: color-mix(in srgb, Canvas, CanvasText 10%);
+	border-radius: 0.3rem;
+	padding-inline: 0.2rem;
+	padding-block: 0.1rem;
+	margin-inline-end: 0.2rem;
+	white-space: pre-wrap;
+}
+.item button {
+	line-height: 0.7;
+}
+</style>