diff --git a/web/static/numerus.css b/web/static/numerus.css
index 2db0b16..4a46637 100644
--- a/web/static/numerus.css
+++ b/web/static/numerus.css
@@ -613,29 +613,6 @@ main > nav {
     min-width: 20rem;
 }
 
-.multiselect ul + .placeholder {
-    position: absolute;
-    font-style: italic;
-    pointer-events: none;
-    font-size: 1em;
-    background-color: initial;
-    top: 1rem;
-    left: 2rem;
-    transition: 0.2s;
-}
-
-.multiselect ul:not(.empty) + .placeholder {
-    background-color: var(--numerus--background-color);
-    top: -.9rem;
-    left: 2rem;
-    font-size: 0.8em;
-    padding: 0 .25rem;
-}
-
-.multiselect ul + .placeholder::after {
-    content: " (optional)";
-}
-
 .multiselect .tags:after {
     content: '';
     border-top: 6px solid black;
@@ -648,24 +625,38 @@ main > nav {
     cursor: pointer;
 }
 
-.multiselect .tags li {
+.multiselect .tag {
     background-color: var(--numerus--color--hay);
 }
 
-.multiselect .tags button {
+.multiselect .tag button {
     border: none;
     cursor: pointer;
     background: transparent;
     min-width: initial;
 }
 
-.multiselect .tags button:hover {
+.multiselect .tag button:hover {
     background: rgba(255, 255, 255, .4);
 }
 
+.multiselect .tags input {
+    flex: 1;
+    width: 100%;
+    border: 0;
+    outline: 0;
+    background: none;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    appearance: none;
+}
+
 .multiselect .options {
     padding: 0;
     border-top: 0;
+    position: absolute;
+    left: 0;
+    right: 0;
 }
 
 .multiselect .options li {
diff --git a/web/template/form.gohtml b/web/template/form.gohtml
index ac56505..6fb9908 100644
--- a/web/template/form.gohtml
+++ b/web/template/form.gohtml
@@ -42,15 +42,75 @@
     {{- /*gotype: dev.tandem.ws/tandem/numerus/pkg.SelectField*/ -}}
     <div class="input{{ if .Errors }} has-errors{{ end }}"
             {{- if .Multiple }}
+                @focusin.window="! $el.contains($event.target) && close() "
+                @click.away="close()"
                 x-data="{
-                    options: [
-                        {{- range $option := .Options }}
-                        { value: '{{ .Value }}', label: '{{ .Label }}', selected: {{ if $.IsSelected .Value }}true{{ else }}false{{ end }} },
-                        {{- end }}
-                    ],
+                    options: [],
+                    name: '',
+                    filter: '',
                     open: false,
                     init() {
-                        $el.querySelector('select').remove();
+                        const select = $el.querySelector('select');
+                        this.name = select.name;
+                        for (const option of select.options) {
+                            this.options.push({
+                                value: option.value,
+                                label: option.innerText,
+                                search: this.normalize(option.innerText),
+                                selected: option.getAttribute('selected') !== null,
+                            });
+                        }
+                        select.remove();
+                        const template = $el.querySelector('template');
+                        const input = template.content.querySelector('input');
+                        const label = $el.querySelector('label');
+                        input.after(label);
+                    },
+                    selected() {
+                        return this.options.filter(option => option.selected);
+                    },
+                    normalize(s) {
+                        return s.normalize('NFD').replace(/\p{Diacritic}/gu, '').toLowerCase();
+                    },
+                    unselected() {
+                        const filter = this.normalize(this.filter);
+                        return this.options.filter(option => !option.selected && (filter === '' || option.search.includes(filter)));
+                    },
+                    empty() {
+                        return this.selected().length === 0;
+                    },
+                    selectOption(option) {
+                        option.selected = true;
+                        this.filter = '';
+                    },
+                    selectFirst() {
+                        if (!this.open) {
+                            return;
+                        }
+                        const all = this.unselected();
+                        if (all.length === 0) {
+                            return;
+                        }
+                        this.selectOption(all[0]);
+                    },
+                    unselectLast() {
+                        if (this.filter !== '') {
+                            return;
+                        }
+                        const all = this.selected();
+                        if (all.length === 0) {
+                            return;
+                        }
+                        all[all.length - 1].selected = false;
+                    },
+                    toggle() {
+                        if (this.open) {
+                            return this.close();
+                        }
+                        this.open = true;
+                    },
+                    close() {
+                        this.open = false;
                     },
                 }"
             {{- end -}}
@@ -82,21 +142,28 @@
         {{- if .Multiple }}
             <template x-if="true">
                 <div class="multiselect">
-                    <ul class="tags" :class="{'empty': options.filter(option => option.selected).length === 0}"
-                        @click="open = !open" @click.away="open = false">
-                        <template x-for="(option) in options.filter(option => option.selected)">
-                            <li>
-                                <input type="hidden" name="{{ .Name }}" :value="option.value">
+                    <div class="tags" :class="{'empty': empty()}"
+                         @click="toggle()"
+                    >
+                        <template x-for="option in selected()">
+                            <div class="tag">
+                                <input type="hidden" :name="name" :value="option.value">
                                 <span x-text="option.label"></span>
                                 <button type="button" @click.stop="option.selected = false">×</button>
-                            </li>
+                            </div>
                         </template>
-                    </ul>
+                        <input id="{{ .Name }}-field" :placeholder="empty() && '{{ .Label }}'" x-model="filter"
+                               @input="open = true"
+                               @keydown.escape="close()"
+                               @keydown.prevent.enter="selectFirst()"
+                               @keydown.backspace="unselectLast()"
+                        >
+                    </div>
                     <ul class="options" x-show.transition="open">
-                        <template x-for="(option) in options.filter(option => !option.selected)">
+                        <template x-for="option in unselected()">
                             <li
                                     x-text="option.label"
-                                    @click.stop="option.selected = true"
+                                    @click.stop="selectOption(option)"
                             ></li>
                         </template>
                     </ul>