diff --git a/resources/js/components/fieldtypes/DictionaryFieldtype.vue b/resources/js/components/fieldtypes/DictionaryFieldtype.vue
index 9322a0d517d..e3d5581b366 100644
--- a/resources/js/components/fieldtypes/DictionaryFieldtype.vue
+++ b/resources/js/components/fieldtypes/DictionaryFieldtype.vue
@@ -1,105 +1,79 @@
 <template>
-    <div class="flex">
-        <v-select
-            ref="input"
-            :input-id="fieldId"
-            class="flex-1"
-            append-to-body
-            searchable
-            close-on-select
-            :calculate-position="positionOptions"
-            :name="name"
-            :disabled="config.disabled || isReadOnly || (multiple && limitReached)"
-            :options="normalizeInputOptions(options)"
-            :placeholder="__(config.placeholder)"
-            :multiple="multiple"
-            :model-value="selectedOptions"
-            :get-option-key="(option) => option.value"
-            @update:model-value="vueSelectUpdated"
-            @focus="$emit('focus')"
-            @search="search"
-            @search:focus="$emit('focus')"
-            search:blur="$emit('blur')"
-        >
-            <template #selected-option-container v-if="multiple"><i class="hidden"></i></template>
-            <template #search="{ events, attributes }" v-if="multiple">
-                <input
-                    :placeholder="__(config.placeholder)"
-                    class="vs__search"
-                    type="search"
-                    v-on="events"
-                    v-bind="attributes"
-                />
-            </template>
-            <template #option="{ label }">
-                <div v-html="label" />
-            </template>
-            <template #selected-option="{ label }">
-                <div v-html="label" />
-            </template>
-            <template #no-options>
-                <div
-                    class="px-4 py-2 text-sm text-gray-700 ltr:text-left rtl:text-right"
-                    v-text="__('No options to choose from.')"
-                />
-            </template>
-            <template #footer="{ deselect }" v-if="multiple">
-                <sortable-list
-                    item-class="sortable-item"
-                    handle-class="sortable-item"
-                    :model-value="value"
-                    :distance="5"
-                    :mirror="false"
-                    @update:model-value="update"
-                >
-                    <div class="vs__selected-options-outside flex flex-wrap">
-                        <span
-                            v-for="option in selectedOptions"
-                            :key="option.value"
-                            class="vs__selected sortable-item mt-2"
-                            :class="{ invalid: option.invalid }"
-                        >
-                            <div v-html="option.label" />
+    <Combobox
+        class="w-full"
+        searchable
+        ignore-filter
+        :disabled="config.disabled || isReadOnly"
+        :max-selections="config.max_items"
+        :options="normalizedOptions"
+        :placeholder="__(config.placeholder)"
+        :multiple
+        :model-value="value"
+        @update:modelValue="comboboxUpdated"
+        @search="search"
+    >
+        <!--
+            This slot is *basically* exactly the same as the default selected-options slot in Combobox. We're just looping
+            through the Dictionary Fieldtype's selectedOptions state, rather than the one maintained by the Combobox component.
+        -->
+        <template #selected-options="{ disabled, getOptionLabel, getOptionValue, labelHtml, deselect }">
+            <sortable-list
+                v-if="multiple"
+                item-class="sortable-item"
+                handle-class="sortable-item"
+                :distance="5"
+                :mirror="false"
+                :disabled
+                :model-value="value"
+                @update:modelValue="comboboxUpdated"
+            >
+                <div class="vs__selected-options-outside flex flex-wrap gap-2 pt-3">
+                    <div
+                        v-for="option in selectedOptions"
+                        :key="getOptionValue(option)"
+                        class="vs__selected sortable-item cursor-grab"
+                    >
+                        <Badge pill size="lg">
+                            <div v-if="labelHtml" v-html="getOptionLabel(option)"></div>
+                            <div v-else>{{ __(getOptionLabel(option)) }}</div>
+
                             <button
-                                v-if="!readOnly"
-                                @click="deselect(option)"
+                                v-if="!disabled"
                                 type="button"
+                                class="-mx-3 cursor-pointer px-3 text-gray-400 hover:text-gray-700"
                                 :aria-label="__('Deselect option')"
-                                class="vs__deselect"
+                                @click="deselect(option.value)"
                             >
-                                <span>×</span>
+                                <span>&times;</span>
                             </button>
-                            <button v-else type="button" class="vs__deselect">
-                                <span class="text-gray-500">×</span>
+                            <button
+                                v-else
+                                type="button"
+                                class="-mx-3 cursor-pointer px-3 text-gray-400 hover:text-gray-700"
+                            >
+                                <span>&times;</span>
                             </button>
-                        </span>
+                        </Badge>
                     </div>
-                </sortable-list>
-            </template>
-        </v-select>
-        <div class="mt-3 text-xs ltr:ml-2 rtl:mr-2" :class="limitIndicatorColor" v-if="config.max_items > 1">
-            <span v-text="currentLength"></span>/<span v-text="config.max_items"></span>
-        </div>
-    </div>
+                </div>
+            </sortable-list>
+        </template>
+    </Combobox>
 </template>
 
-<style scoped>
-.draggable-source--is-dragging {
-    @apply border-dashed bg-transparent opacity-75;
-}
-</style>
-
 <script>
 import Fieldtype from './Fieldtype.vue';
 import HasInputOptions from './HasInputOptions.js';
 import { SortableList } from '../sortable/Sortable';
-import PositionsSelectOptions from '../../mixins/PositionsSelectOptions';
 import debounce from '@statamic/util/debounce.js';
+import { Badge, Combobox } from '@statamic/ui';
 
 export default {
-    mixins: [Fieldtype, HasInputOptions, PositionsSelectOptions],
+    mixins: [Fieldtype, HasInputOptions],
 
     components: {
+        Badge,
+        Combobox,
         SortableList,
     },
 
@@ -115,6 +89,10 @@ export default {
             return this.config.max_items !== 1;
         },
 
+        normalizedOptions() {
+            return this.normalizeInputOptions(this.options);
+        },
+
         selectedOptions() {
             let selections = this.value || [];
 
@@ -137,36 +115,6 @@ export default {
             return this.selectedOptions.map((option) => option.label).join(', ');
         },
 
-        limitReached() {
-            if (!this.config.max_items) return false;
-
-            return this.currentLength >= this.config.max_items;
-        },
-
-        limitExceeded() {
-            if (!this.config.max_items) return false;
-
-            return this.currentLength > this.config.max_items;
-        },
-
-        currentLength() {
-            if (this.value) {
-                return typeof this.value == 'string' ? 1 : this.value.length;
-            }
-
-            return 0;
-        },
-
-        limitIndicatorColor() {
-            if (this.limitExceeded) {
-                return 'text-red-500';
-            } else if (this.limitReached) {
-                return 'text-green-600';
-            }
-
-            return 'text-gray';
-        },
-
         configParameter() {
             return utf8btoa(JSON.stringify(this.config));
         },
@@ -181,18 +129,24 @@ export default {
             this.$refs.input.focus();
         },
 
-        vueSelectUpdated(value) {
-            if (this.multiple) {
-                this.update(value.map((v) => v.value));
-                value.forEach((option) => this.selectedOptionData.push(option));
-            } else {
-                if (value) {
-                    this.update(value.value);
-                    this.selectedOptionData.push(value);
-                } else {
-                    this.update(null);
-                }
+        comboboxUpdated(value) {
+            this.update(value || null);
+
+            let selections = value || [];
+
+            if (typeof selections === 'string' || typeof selections === 'number') {
+                selections = [selections];
             }
+
+            selections.forEach((value) => {
+                if (this.selectedOptionData.find((option) => option.value === value)) {
+                    return;
+                }
+
+                let option = this.normalizedOptions.find((option) => option.value === value);
+
+                this.selectedOptionData.push(option);
+            });
         },
 
         request(params = {}) {
diff --git a/resources/js/components/fieldtypes/IconFieldtype.vue b/resources/js/components/fieldtypes/IconFieldtype.vue
index 11e955b04ea..9da4824ab5f 100644
--- a/resources/js/components/fieldtypes/IconFieldtype.vue
+++ b/resources/js/components/fieldtypes/IconFieldtype.vue
@@ -1,60 +1,47 @@
 <template>
-    <div class="icon-fieldtype-wrapper flex">
-        <v-select
-            v-if="!loading"
-            ref="input"
-            class="w-full"
-            append-to-body
-            :calculate-position="positionOptions"
-            clearable
-            :name="name"
-            :disabled="config.disabled || isReadOnly"
-            :options="options"
-            :placeholder="__(config.placeholder || 'Search...')"
-            :searchable="true"
-            :multiple="false"
-            :close-on-select="true"
-            :model-value="selectedOption"
-            :create-option="(value) => ({ value, label: value })"
-            @update:model-value="vueSelectUpdated"
-            @search:focus="$emit('focus')"
-            search:blur="$emit('blur')"
-        >
-            <template #option="option">
-                <div class="flex items-center">
-                    <svg-icon v-if="!option.html" :name="`${meta.set}/${option.label}`" class="h-5 w-5" />
-                    <div v-if="option.html" v-html="option.html" class="h-5 w-5" />
-                    <span class="truncate text-xs text-gray-800 dark:text-dark-150 ltr:ml-4 rtl:mr-4">{{
-                        __(option.label)
-                    }}</span>
-                </div>
-            </template>
-            <template #selected-option="option">
-                <div class="flex items-center">
-                    <svg-icon
-                        v-if="!option.html"
-                        :name="`${meta.set}/${option.label}`"
-                        class="flex h-5 w-5 items-center"
-                    />
-                    <div v-if="option.html" v-html="option.html" class="h-5 w-5" />
-                    <span class="truncate text-xs text-gray-800 dark:text-dark-150 ltr:ml-4 rtl:mr-4">{{
-                        __(option.label)
-                    }}</span>
-                </div>
-            </template>
-        </v-select>
-    </div>
+    <Combobox
+        v-if="!loading"
+        class="w-full"
+        clearable
+        :disabled="config.disabled || isReadOnly"
+        :options="options"
+        :placeholder="__(config.placeholder || 'Search...')"
+        :searchable="true"
+        :multiple="false"
+        :model-value="value"
+        @update:modelValue="comboboxUpdated"
+    >
+        <template #option="option">
+            <div class="flex items-center">
+                <svg-icon v-if="!option.html" :name="`${meta.set}/${option.label}`" class="size-4" />
+                <div v-if="option.html" v-html="option.html" class="size-4" />
+                <span class="ms-3 truncate">
+                    {{ __(option.label) }}
+                </span>
+            </div>
+        </template>
+        <template #selected-option="{ option }">
+            <div class="flex items-center">
+                <svg-icon v-if="!option.html" :name="`${meta.set}/${option.label}`" class="flex size-4 items-center" />
+                <div v-if="option.html" v-html="option.html" class="size-4" />
+                <span class="ms-3 truncate text-sm text-gray-800 dark:text-gray-200">
+                    {{ __(option.label) }}
+                </span>
+            </div>
+        </template>
+    </Combobox>
 </template>
 
 <script>
 import Fieldtype from './Fieldtype.vue';
-import PositionsSelectOptions from '../../mixins/PositionsSelectOptions';
 import { ref, watch } from 'vue';
+import { Combobox } from '@statamic/ui';
 const iconsCache = ref({});
 const loaders = ref({});
 
 export default {
-    mixins: [Fieldtype, PositionsSelectOptions],
+    components: { Combobox },
+    mixins: [Fieldtype],
 
     data() {
         return {
@@ -79,10 +66,6 @@ export default {
             }
             return options;
         },
-
-        selectedOption() {
-            return this.options.find((option) => option.value === this.value);
-        },
     },
 
     created() {
@@ -98,16 +81,8 @@ export default {
     },
 
     methods: {
-        focus() {
-            this.$refs.input.focus();
-        },
-
-        vueSelectUpdated(value) {
-            if (value) {
-                this.update(value.value);
-            } else {
-                this.update(null);
-            }
+        comboboxUpdated(value) {
+            this.update(value || null);
         },
 
         request() {
diff --git a/resources/js/components/fieldtypes/LinkFieldtype.vue b/resources/js/components/fieldtypes/LinkFieldtype.vue
index 972fe0d0100..fd482a0ab0d 100644
--- a/resources/js/components/fieldtypes/LinkFieldtype.vue
+++ b/resources/js/components/fieldtypes/LinkFieldtype.vue
@@ -1,24 +1,13 @@
 <template>
-    <div class="flex items-center">
+    <div class="flex items-center gap-3">
         <!-- Link type selector -->
-        <div class="w-28 ltr:mr-4 rtl:ml-4">
-            <v-select
-                v-model="option"
-                append-to-body
-                :calculate-position="positionOptions"
-                :options="options"
-                :clearable="false"
-                :reduce="(option) => option.value"
-            >
-                <template #option="{ label }">
-                    {{ __(label) }}
-                </template>
-            </v-select>
+        <div class="w-28">
+            <Select :options v-model="option" />
         </div>
 
         <div class="flex-1 truncate">
             <!-- URL text input -->
-            <text-input v-if="option === 'url'" v-model="urlValue" />
+            <Input v-if="option === 'url'" v-model="urlValue" />
 
             <!-- Entry select -->
             <relationship-fieldtype
@@ -49,10 +38,11 @@
 
 <script>
 import Fieldtype from './Fieldtype.vue';
-import PositionsSelectOptions from '../../mixins/PositionsSelectOptions';
+import { Input, Select } from '@statamic/ui';
 
 export default {
-    mixins: [Fieldtype, PositionsSelectOptions],
+    components: { Input, Text, Select },
+    mixins: [Fieldtype],
 
     provide: {
         isInLinkField: true,
diff --git a/resources/js/components/fieldtypes/SelectFieldtype.vue b/resources/js/components/fieldtypes/SelectFieldtype.vue
index bc59e329dde..663b1f1105f 100644
--- a/resources/js/components/fieldtypes/SelectFieldtype.vue
+++ b/resources/js/components/fieldtypes/SelectFieldtype.vue
@@ -1,120 +1,45 @@
 <template>
-    <div class="flex">
-        <v-select
-            ref="input"
-            :input-id="fieldId"
-            class="flex-1"
-            append-to-body
-            :calculate-position="positionOptions"
-            :name="name"
-            :clearable="config.clearable"
-            :disabled="config.disabled || isReadOnly || (config.multiple && limitReached)"
-            :options="options"
-            :placeholder="__(config.placeholder)"
-            :searchable="config.searchable || config.taggable"
-            :taggable="config.taggable"
-            :push-tags="config.push_tags"
-            :multiple="config.multiple"
-            :reset-on-options-change="resetOnOptionsChange"
-            :close-on-select="true"
-            :model-value="selectedOptions"
-            :create-option="(value) => ({ value, label: value })"
-            @update:model-value="vueSelectUpdated"
-            @focus="$emit('focus')"
-            @search:focus="$emit('focus')"
-            search:blur="$emit('blur')"
-        >
-            <template #selected-option-container v-if="config.multiple"><i class="hidden"></i></template>
-            <template #search="{ events, attributes }" v-if="config.multiple">
-                <input
-                    :placeholder="__(config.placeholder)"
-                    class="vs__search"
-                    type="search"
-                    v-on="events"
-                    v-bind="attributes"
-                />
-            </template>
-            <template #option="{ label }">
-                <div v-if="config.label_html" v-html="label"></div>
-                <template v-else v-text="label"></template>
-            </template>
-            <template #selected-option="{ label }">
-                <div v-if="config.label_html" v-html="label"></div>
-                <template v-else v-text="label"></template>
-            </template>
-            <template #no-options>
-                <div
-                    class="px-4 py-2 text-sm text-gray-700 ltr:text-left rtl:text-right"
-                    v-text="__('No options to choose from.')"
-                />
-            </template>
-            <template #footer="{ deselect }" v-if="config.multiple">
-                <sortable-list
-                    item-class="sortable-item"
-                    handle-class="sortable-item"
-                    :model-value="value"
-                    :distance="5"
-                    :mirror="false"
-                    @update:model-value="update"
-                >
-                    <div class="vs__selected-options-outside flex flex-wrap">
-                        <span
-                            v-for="option in selectedOptions"
-                            :key="option.value"
-                            class="vs__selected sortable-item mt-2"
-                        >
-                            <div v-if="config.label_html" v-html="option.label"></div>
-                            <template v-else>{{ __(option.label) }}</template>
-                            <button
-                                v-if="!readOnly"
-                                @click="deselect(option)"
-                                type="button"
-                                :aria-label="__('Deselect option')"
-                                class="vs__deselect"
-                            >
-                                <span>×</span>
-                            </button>
-                            <button v-else type="button" class="vs__deselect">
-                                <span class="text-gray-500">×</span>
-                            </button>
-                        </span>
-                    </div>
-                </sortable-list>
-            </template>
-        </v-select>
-        <div class="mt-3 text-xs ltr:ml-2 rtl:mr-2" :class="limitIndicatorColor" v-if="config.max_items">
-            <span v-text="currentLength"></span>/<span v-text="config.max_items"></span>
-        </div>
-    </div>
+    <Combobox
+        class="w-full"
+        :options="options"
+        :clearable="config.clearable"
+        :placeholder="__(config.placeholder)"
+        :multiple="config.multiple"
+        :searchable="config.searchable || config.taggable"
+        :taggable="config.taggable"
+        :disabled="config.disabled || isReadOnly"
+        :max-selections="config.max_items"
+        :label-html="config.label_html"
+        :model-value="value"
+        @update:modelValue="comboboxUpdated"
+    />
 </template>
 
-<style scoped>
-.draggable-source--is-dragging {
-    @apply border-dashed bg-transparent opacity-75;
-}
-</style>
-
 <script>
 import Fieldtype from './Fieldtype.vue';
 import HasInputOptions from './HasInputOptions.js';
 import { SortableList } from '../sortable/Sortable';
-import PositionsSelectOptions from '../../mixins/PositionsSelectOptions';
+import { Badge, Combobox } from '@statamic/ui';
 
 export default {
-    mixins: [Fieldtype, HasInputOptions, PositionsSelectOptions],
+    mixins: [Fieldtype, HasInputOptions],
 
     components: {
+        Badge,
+        Combobox,
         SortableList,
     },
 
     computed: {
         selectedOptions() {
             let selections = this.value === null ? [] : this.value;
+
             if (typeof selections === 'string' || typeof selections === 'number') {
                 selections = [selections];
             }
+
             return selections.map((value) => {
-                return this.options.find((o) => o.value === value) || { value, label: value };
+                return props.options.find((option) => option.value === value) ?? { label: value, value };
             });
         },
 
@@ -127,65 +52,11 @@ export default {
 
             return this.selectedOptions.map((option) => option.label).join(', ');
         },
-
-        resetOnOptionsChange() {
-            // Reset logic should only happen when the config value is true.
-            // Nothing should be reset when it's false or undefined.
-            if (this.config.reset_on_options_change !== true) return false;
-
-            // Reset the value if the value doesn't exist in the new set of options.
-            return (options, old, val) => {
-                let opts = options.map((o) => o.value);
-                return !val.some((v) => opts.includes(v.value));
-            };
-        },
-
-        limitReached() {
-            if (!this.config.max_items) return false;
-
-            return this.currentLength >= this.config.max_items;
-        },
-
-        limitExceeded() {
-            if (!this.config.max_items) return false;
-
-            return this.currentLength > this.config.max_items;
-        },
-
-        currentLength() {
-            if (this.value) {
-                return typeof this.value == 'string' ? 1 : this.value.length;
-            }
-
-            return 0;
-        },
-
-        limitIndicatorColor() {
-            if (this.limitExceeded) {
-                return 'text-red-500';
-            } else if (this.limitReached) {
-                return 'text-green-600';
-            }
-
-            return 'text-gray';
-        },
     },
 
     methods: {
-        focus() {
-            this.$refs.input.focus();
-        },
-
-        vueSelectUpdated(value) {
-            if (this.config.multiple) {
-                this.update(value.map((v) => v.value));
-            } else {
-                if (value) {
-                    this.update(value.value);
-                } else {
-                    this.update(null);
-                }
-            }
+        comboboxUpdated(value) {
+            this.update(value || null);
         },
     },
 };
diff --git a/resources/js/components/fieldtypes/TemplateFieldtype.vue b/resources/js/components/fieldtypes/TemplateFieldtype.vue
index 39cd78043dd..f61e1277a45 100644
--- a/resources/js/components/fieldtypes/TemplateFieldtype.vue
+++ b/resources/js/components/fieldtypes/TemplateFieldtype.vue
@@ -1,37 +1,29 @@
 <template>
-    <div class="template-fieldtype-container">
-        <v-select
-            ref="input"
-            :name="name"
-            @update:model-value="update"
-            append-to-body
-            :calculate-position="positionOptions"
-            :clearable="config.clearable"
-            :placeholder="__(config.placeholder)"
-            :disabled="isReadOnly"
-            :options="options"
-            :reduce="(selection) => selection.value"
-            :searchable="true"
-            :push-tags="false"
-            :multiple="false"
-            :model-value="value"
-        >
-            <template #no-options>
-                <div
-                    class="px-4 py-2 text-sm text-gray-700 ltr:text-left rtl:text-right"
-                    v-text="__('No templates to choose from.')"
-                />
-            </template>
-        </v-select>
-    </div>
+    <Combobox
+        v-if="!loading"
+        class="w-full"
+        :clearable="config.clearable"
+        :placeholder="__(config.placeholder)"
+        :disabled="isReadOnly"
+        :options="options"
+        :searchable="true"
+        :multiple="false"
+        :model-value="value"
+        @update:modelValue="update"
+    >
+        <template #no-options>
+            <div v-text="__('No templates to choose from.')" />
+        </template>
+    </Combobox>
 </template>
 
 <script>
 import Fieldtype from './Fieldtype.vue';
-import PositionsSelectOptions from '../../mixins/PositionsSelectOptions';
+import { Combobox } from '@statamic/ui';
 
 export default {
-    mixins: [Fieldtype, PositionsSelectOptions],
+    components: { Combobox },
+    mixins: [Fieldtype],
 
     data: function () {
         return {
diff --git a/resources/js/components/inputs/relationship/Item.vue b/resources/js/components/inputs/relationship/Item.vue
index c1b388a8299..a6c2c30c84a 100644
--- a/resources/js/components/inputs/relationship/Item.vue
+++ b/resources/js/components/inputs/relationship/Item.vue
@@ -1,20 +1,24 @@
 <template>
-    <div class="item select-none" :class="{ invalid: item.invalid }">
-        <div class="item-move" v-if="sortable">&nbsp;</div>
-        <div class="item-inner">
-            <div v-if="statusIcon" class="little-dot hidden @sm:block ltr:mr-2 rtl:ml-2" :class="item.status" />
+    <div
+        class="shadow-ui-sm relative z-2 flex w-full items-center gap-2 rounded-lg border border-gray-200 bg-white px-1.5 py-2 text-base dark:border-x-0 dark:border-t-0 dark:border-white/15 dark:bg-gray-900 dark:inset-shadow-2xs dark:inset-shadow-black"
+        :class="{ invalid: item.invalid }"
+    >
+        <ui-icon name="handles" class="item-move sortable-handle size-4 cursor-grab text-gray-400" v-if="sortable" />
+        <div class="flex flex-1 items-center">
+            <ui-status-indicator v-if="item.status" :status="item.status" class="me-2" />
 
             <div
                 v-if="item.invalid"
-                v-tooltip.top="__('An item with this ID could not be found')"
+                v-tooltip.top="__('ID not found')"
                 v-text="__(item.title)"
+                class="line-clamp-1 text-sm text-gray-600 dark:text-gray-300"
             />
 
             <a
                 v-if="!item.invalid && editable"
                 @click.prevent="edit"
                 v-text="__(item.title)"
-                class="truncate"
+                class="line-clamp-1 text-sm text-gray-600 dark:text-gray-300"
                 v-tooltip="item.title"
                 :href="item.edit_url"
             />
@@ -35,7 +39,7 @@
                 <div
                     v-if="item.hint"
                     v-text="item.hint"
-                    class="hidden whitespace-nowrap text-4xs uppercase text-gray-600 @sm:block ltr:mr-2 rtl:ml-2"
+                    class="text-4xs me-2 hidden whitespace-nowrap text-gray-600 uppercase @sm:block"
                 />
 
                 <div class="flex items-center" v-if="!readOnly">
diff --git a/resources/js/components/inputs/relationship/RelationshipInput.vue b/resources/js/components/inputs/relationship/RelationshipInput.vue
index 5c12e7925db..9726424871f 100644
--- a/resources/js/components/inputs/relationship/RelationshipInput.vue
+++ b/resources/js/components/inputs/relationship/RelationshipInput.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="relationship-input" :class="{ 'relationship-input-empty': items.length == 0 }">
+    <div class="relationship-input @container" :class="{ 'relationship-input-empty': items.length == 0 }">
         <relationship-select-field
             v-if="!initializing && usesSelectField"
             :config="config"
@@ -7,6 +7,7 @@
             :multiple="maxItems > 1"
             :typeahead="mode === 'typeahead'"
             :taggable="taggable"
+            :max-selections="maxItems"
             :read-only="readOnly"
             :url="selectionsUrl"
             :site="site"
@@ -20,8 +21,8 @@
         <template v-if="shouldShowSelectedItems">
             <div
                 ref="items"
-                class="relationship-input-items space-y-1 outline-hidden"
-                :class="{ 'mt-4': usesSelectField && items.length }"
+                class="grid grid-cols-1 gap-2 outline-hidden @xl:grid-cols-2"
+                :class="{ 'mt-2': usesSelectField && items.length }"
             >
                 <component
                     :is="itemComponent"
@@ -36,18 +37,18 @@
                     :form-component="formComponent"
                     :form-component-props="formComponentProps"
                     :form-stack-size="formStackSize"
-                    class="item outline-hidden"
+                    class="related-item"
                     @removed="remove(i)"
                 />
             </div>
 
-            <div class="py-2 text-xs text-gray" v-if="maxItemsReached && maxItems != 1">
+            <div class="text-gray py-2 text-xs" v-if="maxItemsReached && maxItems != 1">
                 <span>{{ __('Maximum items selected:') }}</span>
                 <span>{{ maxItems }}/{{ maxItems }}</span>
             </div>
             <div
                 v-if="canSelectOrCreate"
-                class="relationship-input-buttons relative @container"
+                class="relationship-input-buttons @container relative"
                 :class="{ 'mt-4': items.length > 0 }"
             >
                 <div class="-mb-2 flex flex-wrap items-center text-sm">
@@ -64,7 +65,7 @@
                     </div>
                     <button
                         ref="existing"
-                        class="mb-2 flex items-center text-blue outline-hidden hover:text-gray-800 dark:text-dark-blue-100 dark:hover:text-dark-100"
+                        class="text-blue dark:text-dark-blue-100 dark:hover:text-dark-100 mb-2 flex items-center outline-hidden hover:text-gray-800"
                         @click.prevent="isSelecting = true"
                     >
                         <svg-icon name="light/hyperlink" class="flex h-4 w-4 items-center ltr:mr-1 rtl:ml-1"></svg-icon>
@@ -152,6 +153,8 @@ export default {
         },
     },
 
+    emits: ['input', 'focus', 'blur', 'item-data-updated', 'loading'],
+
     components: {
         ItemSelector,
         RelatedItem,
@@ -281,7 +284,7 @@ export default {
 
         makeSortable() {
             this.sortable = new Sortable(this.$refs.items, {
-                draggable: '.item',
+                draggable: '.related-item',
                 handle: '.item-move',
                 mirror: { constrainDimensions: true, xAxis: false, appendTo: 'body' },
                 swapAnimation: { vertical: true },
diff --git a/resources/js/components/inputs/relationship/SelectField.vue b/resources/js/components/inputs/relationship/SelectField.vue
index de9d1ddf5da..dcdd46f3a8e 100644
--- a/resources/js/components/inputs/relationship/SelectField.vue
+++ b/resources/js/components/inputs/relationship/SelectField.vue
@@ -1,67 +1,51 @@
 <template>
     <div>
-        <v-select
-            ref="input"
-            label="title"
-            append-to-body
-            :calculate-position="positionOptions"
-            :close-on-select="true"
+        <Combobox
+            class="w-full"
+            searchable
+            :options
+            :multiple
+            option-value="id"
+            option-label="title"
+            :taggable="isTaggable"
+            :max-selections="maxSelections"
             :disabled="readOnly"
-            :multiple="multiple"
-            :options="options"
-            :get-option-key="(option) => option.id"
-            :get-option-label="(option) => __(option.title)"
-            :create-option="(value) => createOption(value)"
+            :ignore-filter="typeahead"
             :placeholder="__(config.placeholder) || __('Choose...')"
-            :searchable="true"
-            :taggable="isTaggable"
-            :model-value="items"
-            @update:model-value="input"
+            :model-value="items.map((item) => item.id)"
+            @update:modelValue="itemsSelected"
             @search="search"
-            @search:focus="$emit('focus')"
-            search:blur="$emit('blur')"
         >
             <template #option="{ title, hint, status }">
-                <div class="flex items-center justify-between">
+                <div class="flex w-full items-center justify-between">
                     <div class="flex items-center">
-                        <div v-if="status" class="little-dot hidden@sm:block ltr:mr-2 rtl:ml-2" :class="status" />
-                        <div v-text="title" />
+                        <StatusIndicator v-if="status" class="me-2" :status="status" />
+                        <div v-text="title" class="truncate" />
                     </div>
-                    <div v-if="hint" class="whitespace-nowrap text-4xs uppercase text-gray-600" v-text="hint" />
+                    <ui-badge v-if="hint" size="sm" variant="flat" v-text="hint" />
                 </div>
             </template>
-            <template #selected-option-container v-if="multiple"><i class="hidden"></i></template>
-            <template #search="{ events, attributes }" v-if="multiple">
-                <input
-                    :placeholder="__(config.placeholder) || __('Choose...')"
-                    class="vs__search"
-                    type="search"
-                    v-on="events"
-                    v-bind="attributes"
-                />
-            </template>
             <template #no-options>
-                <div class="px-4 py-2 text-sm text-gray-700 ltr:text-left rtl:text-right" v-text="noOptionsText" />
+                <div v-text="noOptionsText" />
             </template>
-        </v-select>
+            <template #selected-option>
+                <span v-if="items.length === 1" v-text="items[0].title"></span>
+            </template>
+            <template #selected-options>
+                <!-- We don't want to display the selected options here. The RelationshipInput component does that for us. -->
+                <div></div>
+            </template>
+        </Combobox>
     </div>
 </template>
 
-<style scoped>
-.draggable-source--is-dragging {
-    @apply border-dashed bg-transparent opacity-75;
-}
-</style>
-
 <script>
-import PositionsSelectOptions from '../../../mixins/PositionsSelectOptions';
-import { SortableList } from '../../sortable/Sortable';
+import { Combobox, StatusIndicator } from '@statamic/ui';
 
 export default {
-    mixins: [PositionsSelectOptions],
-
     components: {
-        SortableList,
+        StatusIndicator,
+        Combobox,
     },
 
     props: {
@@ -70,6 +54,7 @@ export default {
         typeahead: Boolean,
         multiple: Boolean,
         taggable: Boolean,
+        maxSelections: Number,
         config: Object,
         readOnly: Boolean,
         site: String,
@@ -82,6 +67,8 @@ export default {
         };
     },
 
+    emits: ['input'],
+
     computed: {
         isTaggable() {
             if (data_get(this.config, 'create') === false) return false;
@@ -133,11 +120,18 @@ export default {
             this.request({ search }).then((response) => loading(false));
         },
 
-        input(items) {
+        itemsSelected(items) {
             if (!this.multiple) {
                 items = items === null ? [] : [items];
             }
 
+            items = items.map((id) => {
+                let option = this.options.find((option) => option.id === id);
+                let existing = this.items.find((item) => item.id === id);
+
+                return existing || option || { id: value, title: value };
+            });
+
             this.$emit('input', items);
         },
 
diff --git a/resources/js/components/ui/Combobox.vue b/resources/js/components/ui/Combobox.vue
new file mode 100644
index 00000000000..8a1b1bc98d4
--- /dev/null
+++ b/resources/js/components/ui/Combobox.vue
@@ -0,0 +1,335 @@
+<script setup>
+import { cva } from 'cva';
+import {
+    ComboboxAnchor,
+    ComboboxContent,
+    ComboboxEmpty,
+    ComboboxInput,
+    ComboboxItem,
+    ComboboxRoot,
+    ComboboxTrigger,
+    ComboboxPortal,
+    ComboboxViewport,
+} from 'reka-ui';
+import { computed, nextTick, ref, useAttrs, useTemplateRef, watch } from 'vue';
+import { Button, WithField, Icon, Badge } from '@statamic/ui';
+import fuzzysort from 'fuzzysort';
+import { SortableList } from '@statamic/components/sortable/Sortable.js';
+
+const emit = defineEmits(['update:modelValue', 'search']);
+
+const props = defineProps({
+    description: { type: String, default: null },
+    label: { type: String, default: null },
+    modelValue: { type: [Object, String], default: null },
+    size: { type: String, default: 'base' },
+    placeholder: { type: String, default: 'Select...' },
+    multiple: { type: Boolean, default: false },
+    clearable: { type: Boolean, default: false },
+    searchable: { type: Boolean, default: true },
+    taggable: { type: Boolean, default: false },
+    disabled: { type: Boolean, default: false },
+    maxSelections: { type: Number, default: null },
+    optionLabel: { type: String, default: 'label' },
+    optionValue: { type: String, default: 'value' },
+    labelHtml: { type: Boolean, default: false },
+    ignoreFilter: { type: Boolean, default: false },
+    options: { type: Array, default: null },
+    flat: { type: Boolean, default: false },
+});
+
+defineOptions({
+    inheritAttrs: false,
+});
+
+const attrs = useAttrs();
+
+const anchorClasses = cva({
+    base: 'focus-within:outline w-full flex items-center justify-between border border-gray-300 dark:border-b-0 dark:ring-3 dark:ring-gray-900 dark:border-white/15 text-gray-600 dark:text-gray-300 antialiased appearance-none shadow-ui-sm dark:shadow-md',
+    variants: {
+        size: {
+            base: 'text-base rounded-lg ps-3 py-2 h-10 leading-[1.375rem]',
+            sm: 'text-sm rounded-md ps-2.5 py-1.5 h-8 leading-[1.125rem]',
+            xs: 'text-xs rounded-xs ps-2 py-1.5 h-6 leading-[1.125rem]',
+        },
+        flat: {
+            true: 'shadow-none',
+            false: 'bg-linear-to-b from-white to-gray-50 hover:to-gray-100 dark:from-gray-800/30 dark:to-gray-800 dark:hover:to-gray-850 shadow-ui-sm',
+        },
+    },
+})({ ...props });
+
+const itemClasses = cva({
+    base: [
+        'w-full flex items-center gap-2 relative select-none cursor-pointer',
+        'py-1.5 px-2 antialiased rounded-lg',
+        'data-disabled:text-gray-300 data-disabled:pointer-events-none data-highlighted:outline-hidden',
+    ],
+    variants: {
+        size: {
+            base: '',
+            sm: 'text-sm',
+            xs: 'text-xs',
+        },
+        selected: {
+            false: 'text-gray-600 dark:text-gray-300 data-highlighted:bg-gray-50 data-highlighted:text-gray-900 dark:data-highlighted:bg-gray-700 dark:data-highlighted:text-gray-300',
+            true: 'bg-blue-50 text-blue-500!',
+        },
+    },
+});
+
+const selectedOptions = computed(() => {
+    let selections = props.modelValue === null ? [] : props.modelValue;
+
+    if (typeof selections === 'string' || typeof selections === 'number') {
+        selections = [selections];
+    }
+
+    return selections.map((value) => {
+        return props.options.find((option) => getOptionValue(option) === value) ?? { label: value, value };
+    });
+});
+
+const selectedOption = computed(() => {
+    if (props.multiple || !props.modelValue || selectedOptions.value.length !== 1) {
+        return null;
+    }
+
+    return selectedOptions.value[0];
+});
+
+function getOptionLabel(option) {
+    if (!option) {
+        return;
+    }
+
+    return option[props.optionLabel];
+}
+
+function getOptionValue(option) {
+    if (!option) {
+        return;
+    }
+
+    return option[props.optionValue];
+}
+
+function isSelected(option) {
+    return selectedOptions.value.filter((item) => getOptionValue(item) === getOptionValue(option)).length > 0;
+}
+
+const limitReached = computed(() => {
+    if (!props.maxSelections) {
+        return false;
+    }
+
+    return selectedOptions.value.length >= props.maxSelections;
+});
+
+const limitExceeded = computed(() => {
+    if (!props.maxSelections) {
+        return false;
+    }
+
+    return selectedOptions.value.length > props.maxSelections;
+});
+
+const limitIndicatorColor = computed(() => {
+    if (limitExceeded.value) {
+        return 'text-red-500';
+    } else if (limitReached.value) {
+        return 'text-green-600';
+    }
+
+    return 'text-gray';
+});
+
+const searchQuery = ref('');
+
+const filteredOptions = computed(() => {
+    if (!props.searchable || props.ignoreFilter) {
+        return props.options;
+    }
+
+    let options = JSON.parse(JSON.stringify(props.options));
+
+    if (props.taggable && searchQuery.value) {
+        options.push({
+            [props.optionLabel]: searchQuery.value,
+            [props.optionValue]: searchQuery.value,
+        });
+    }
+
+    return fuzzysort
+        .go(searchQuery.value, options, {
+            all: true,
+            key: props.optionLabel,
+        })
+        .map((result) => result.obj);
+});
+
+watch(searchQuery, (value) => {
+    emit('search', value, () => {});
+});
+
+const inputRef = useTemplateRef('input');
+
+function clear() {
+    searchQuery.value = '';
+    emit('update:modelValue', null);
+
+    if (props.searchable) {
+        nextTick(() => {
+            inputRef.value.$el.focus();
+        });
+    }
+}
+
+function deselect(option) {
+    emit(
+        'update:modelValue',
+        props.modelValue.filter((item) => item !== option),
+    );
+}
+
+const dropdownOpen = ref(false);
+
+function updateModelValue(value) {
+    searchQuery.value = '';
+    emit('update:modelValue', value);
+}
+</script>
+
+<template>
+    <WithField :label :description>
+        <div class="flex">
+            <ComboboxRoot
+                v-bind="attrs"
+                ignore-filter
+                :multiple
+                :reset-search-term-on-blur="false"
+                :reset-search-term-on-select="false"
+                :disabled="disabled || (multiple && limitReached)"
+                v-model:open="dropdownOpen"
+                :model-value="modelValue"
+                @update:model-value="updateModelValue"
+            >
+                <ComboboxAnchor :class="[anchorClasses, $attrs.class]" data-ui-combobox-anchor>
+                    <ComboboxTrigger as="div" class="min-h-full w-full">
+                        <ComboboxInput
+                            v-if="searchable && (dropdownOpen || !modelValue)"
+                            ref="input"
+                            class="w-full focus:outline-none"
+                            v-model="searchQuery"
+                            :placeholder
+                        />
+                        <div v-else-if="!searchable && (dropdownOpen || !modelValue)">
+                            <span class="text-gray-400 dark:text-gray-600" v-text="placeholder" />
+                        </div>
+                        <div v-else class="cursor-pointer">
+                            <slot name="selected-option" v-bind="{ option: selectedOption }">
+                                <span v-text="getOptionLabel(selectedOption)" />
+                            </slot>
+                        </div>
+                    </ComboboxTrigger>
+                    <div class="flex items-center space-x-2 px-2">
+                        <Button
+                            icon="x"
+                            variant="filled"
+                            size="xs"
+                            round
+                            v-if="clearable && modelValue"
+                            @click="clear"
+                        />
+                        <ComboboxTrigger class="flex items-center">
+                            <Icon name="ui/chevron-down" />
+                        </ComboboxTrigger>
+                    </div>
+                </ComboboxAnchor>
+
+                <ComboboxPortal>
+                    <ComboboxContent
+                        position="popper"
+                        :side-offset="5"
+                        :class="[
+                            'shadow-ui-sm z-100 rounded-lg border border-gray-200 bg-white p-2 dark:border-white/10 dark:bg-gray-800',
+                            'max-h-[var(--reka-combobox-content-available-height)] w-[var(--reka-combobox-trigger-width)]',
+                        ]"
+                    >
+                        <ComboboxViewport>
+                            <ComboboxEmpty class="text-mauve8 py-2 text-center text-xs font-medium">
+                                <slot name="no-options">
+                                    {{ __('No options to choose from.') }}
+                                </slot>
+                            </ComboboxEmpty>
+
+                            <ComboboxItem
+                                v-if="filteredOptions"
+                                v-for="(option, index) in filteredOptions"
+                                :key="index"
+                                :value="getOptionValue(option)"
+                                :text-value="getOptionLabel(option)"
+                                :class="itemClasses({ size: size, selected: isSelected(option) })"
+                                as="button"
+                                @select="dropdownOpen = false"
+                            >
+                                <slot name="option" v-bind="option">
+                                    <img v-if="option.image" :src="option.image" class="size-5 rounded-full" />
+                                    <span v-if="labelHtml" v-html="getOptionLabel(option)" />
+                                    <span v-else>{{ __(getOptionLabel(option)) }}</span>
+                                </slot>
+                            </ComboboxItem>
+                        </ComboboxViewport>
+                    </ComboboxContent>
+                </ComboboxPortal>
+            </ComboboxRoot>
+
+            <div
+                v-if="maxSelections && maxSelections !== Infinity"
+                class="ms-2 mt-3 text-xs"
+                :class="limitIndicatorColor"
+            >
+                <span v-text="selectedOptions.length"></span>/<span v-text="maxSelections"></span>
+            </div>
+        </div>
+
+        <slot name="selected-options" v-bind="{ disabled, getOptionLabel, getOptionValue, labelHtml, deselect }">
+            <sortable-list
+                v-if="multiple"
+                item-class="sortable-item"
+                handle-class="sortable-item"
+                :distance="5"
+                :mirror="false"
+                :disabled
+                :model-value="modelValue"
+                @update:modelValue="updateModelValue"
+            >
+                <div class="vs__selected-options-outside flex flex-wrap gap-2">
+                    <div
+                        v-for="option in selectedOptions"
+                        :key="getOptionValue(option)"
+                        class="vs__selected sortable-item mt-2"
+                    >
+                        <Badge pill size="lg">
+                            <div v-if="labelHtml" v-html="getOptionLabel(option)"></div>
+                            <div v-else>{{ __(getOptionLabel(option)) }}</div>
+
+                            <button
+                                v-if="!disabled"
+                                type="button"
+                                class="vs__deselect"
+                                :aria-label="__('Deselect option')"
+                                @click="deselect(option.value)"
+                            >
+                                <span>×</span>
+                            </button>
+                            <button v-else type="button" class="vs__deselect">
+                                <span class="text-gray-300">×</span>
+                            </button>
+                        </Badge>
+                    </div>
+                </div>
+            </sortable-list>
+        </slot>
+    </WithField>
+</template>
diff --git a/resources/js/components/ui/Select/Select.vue b/resources/js/components/ui/Select/Select.vue
index be464a5e6ce..24c1298f779 100644
--- a/resources/js/components/ui/Select/Select.vue
+++ b/resources/js/components/ui/Select/Select.vue
@@ -1,17 +1,6 @@
 <script setup>
-import { cva } from 'cva';
-import {
-    SelectContent,
-    SelectItem,
-    SelectItemText,
-    SelectPortal,
-    SelectRoot,
-    SelectTrigger,
-    SelectValue,
-    SelectViewport,
-} from 'reka-ui';
 import { useAttrs } from 'vue';
-import { WithField, Icon } from '@statamic/ui';
+import { WithField, Combobox } from '@statamic/ui';
 
 const emit = defineEmits(['update:modelValue']);
 
@@ -21,6 +10,10 @@ const props = defineProps({
     modelValue: { type: [Object, String], default: null },
     size: { type: String, default: 'base' },
     placeholder: { type: String, default: 'Select...' },
+    clearable: { type: Boolean, default: false },
+    disabled: { type: Boolean, default: false },
+    optionLabel: { type: String, default: 'label' },
+    optionValue: { type: String, default: 'value' },
     options: { type: Array, default: null },
     flat: { type: Boolean, default: false },
 });
@@ -30,68 +23,21 @@ defineOptions({
 });
 
 const attrs = useAttrs();
-
-const triggerClasses = cva({
-    base: 'w-full flex items-center justify-between border border-gray-300 dark:border-b-0 dark:ring-3 dark:ring-gray-900 dark:border-white/15 text-gray-600 dark:text-gray-300 antialiased appearance-none shadow-ui-sm dark:shadow-md not-prose',
-    variants: {
-        size: {
-            base: 'text-base rounded-lg ps-3 py-2 h-10 leading-[1.375rem]',
-            sm: 'text-sm rounded-md ps-2.5 py-1.5 h-8 leading-[1.125rem]',
-            xs: 'text-xs rounded-xs ps-2 py-1.5 h-6 leading-[1.125rem]',
-        },
-        flat: {
-            true: 'shadow-none',
-            false: 'bg-linear-to-b from-white to-gray-50 hover:to-gray-100 dark:from-gray-800/30 dark:to-gray-800 dark:hover:to-gray-850 shadow-ui-sm',
-        },
-    },
-})({ ...props });
-
-const itemClasses = cva({
-    base: 'antialiased rounded-lg py-1.5 px-2 flex items-center gap-2 text-gray-600 dark:text-gray-300 relative select-none data-disabled:text-gray-300 data-disabled:pointer-events-none data-highlighted:outline-hidden data-highlighted:bg-gray-50 data-highlighted:text-gray-900 dark:data-highlighted:bg-gray-700 dark:data-highlighted:text-gray-300',
-    variants: {
-        size: {
-            base: '',
-            sm: 'text-sm',
-            xs: 'text-xs',
-        },
-    },
-})({ size: props.size });
 </script>
 
 <template>
     <WithField :label :description>
-        <SelectRoot v-bind="attrs" :model-value="modelValue" @update:model-value="emit('update:model-value', $event)">
-            <SelectTrigger :class="[triggerClasses, $attrs.class]" data-ui-select-trigger>
-                <SelectValue :placeholder="placeholder" class="select-none" />
-                <Icon name="ui/chevron-down" class="me-2" />
-            </SelectTrigger>
-
-            <SelectPortal>
-                <SelectContent
-                    position="popper"
-                    :side-offset="5"
-                    :class="[
-                        'shadow-ui-sm z-100 rounded-lg border border-gray-200 bg-white p-2 dark:border-white/10 dark:bg-gray-800',
-                        'max-h-[var(--reka-select-content-available-height)] w-[var(--reka-select-trigger-width)]',
-                    ]"
-                >
-                    <SelectViewport>
-                        <SelectItem
-                            v-if="options"
-                            v-for="(option, index) in options"
-                            :key="index"
-                            :value="option.value"
-                            :text-value="option.label"
-                            :class="itemClasses"
-                        >
-                            <slot name="option" v-bind="option">
-                                <img v-if="option.image" :src="option.image" class="size-5 rounded-full" />
-                                <SelectItemText v-html="option.label" />
-                            </slot>
-                        </SelectItem>
-                    </SelectViewport>
-                </SelectContent>
-            </SelectPortal>
-        </SelectRoot>
+        <Combobox
+            v-bind="attrs"
+            :size
+            :clearable
+            :disabled
+            :option-label
+            :option-value
+            :options
+            :searchable="false"
+            :model-value="modelValue"
+            @update:modelValue="emit('update:modelValue', $event)"
+        />
     </WithField>
 </template>
diff --git a/resources/js/components/ui/index.js b/resources/js/components/ui/index.js
index 22f3061d709..11038c37300 100644
--- a/resources/js/components/ui/index.js
+++ b/resources/js/components/ui/index.js
@@ -5,6 +5,7 @@ import { default as Description } from './Description.vue';
 import { default as Calendar } from './Calendar/Calendar.vue';
 import { default as Card } from './Card/Card.vue';
 import { default as CardPanel } from './Card/Panel.vue';
+import { default as Combobox } from './Combobox.vue';
 import { default as CardList } from './Card/List.vue';
 import { default as CardListItem } from './Card/ListItem.vue';
 import { default as DatePicker } from './DatePicker/DatePicker.vue';
@@ -45,6 +46,7 @@ export {
     Calendar,
     Card,
     CardPanel,
+    Combobox,
     DatePicker,
     DateRangePicker,
     TimePicker,
diff --git a/resources/lang/ar/fieldtypes.php b/resources/lang/ar/fieldtypes.php
index 5d40f876fbd..9bca5b5800b 100644
--- a/resources/lang/ar/fieldtypes.php
+++ b/resources/lang/ar/fieldtypes.php
@@ -157,7 +157,6 @@
     'select.config.multiple' => 'السماح بتحديدات متعددة.',
     'select.config.options' => 'حدد المفاتيح والتسميات الاختيارية لها.',
     'select.config.placeholder' => 'تعيين نص العنصر النائب.',
-    'select.config.push_tags' => 'إضافة العلامات التي تم إنشاؤها حديثًا إلى قائمة الخيارات.',
     'select.config.searchable' => 'تمكين البحث من خلال الخيارات الممكنة.',
     'select.config.taggable' => 'السماح بإضافة خيارات جديدة بالإضافة إلى الخيارات المعرفة مسبقًا',
     'select.title' => 'تحديد',
diff --git a/resources/lang/az/fieldtypes.php b/resources/lang/az/fieldtypes.php
index 5ddd6810ec8..e73d272f7c3 100644
--- a/resources/lang/az/fieldtypes.php
+++ b/resources/lang/az/fieldtypes.php
@@ -157,7 +157,6 @@
     'select.config.multiple' => 'Birdən çox seçim etməyə icazə ver.',
     'select.config.options' => 'Açarları və isteğe bağlı etiketlərini təyin edin.',
     'select.config.placeholder' => 'Yer tutucu mətnini təyin edin.',
-    'select.config.push_tags' => 'Yeni yaradılmış etiketləri seçimlər siyahısına əlavə edin.',
     'select.config.searchable' => 'Mümkün seçimlər arasında axtarış etməyə icazə ver.',
     'select.config.taggable' => 'Öncədən təyin edilmiş seçimlərə əlavə olaraq yeni seçimlər əlavə etməyə icazə ver.',
     'select.title' => 'Seç',
diff --git a/resources/lang/cs/fieldtypes.php b/resources/lang/cs/fieldtypes.php
index 45081f70fc5..64ce05aa06d 100644
--- a/resources/lang/cs/fieldtypes.php
+++ b/resources/lang/cs/fieldtypes.php
@@ -157,7 +157,6 @@
     'select.config.multiple' => 'Povolit vícenásobný výběr.',
     'select.config.options' => 'Nastavení klíčů pole a jejich volitelných popisků.',
     'select.config.placeholder' => 'Nastavení zástupného textu.',
-    'select.config.push_tags' => 'Přidání nově vytvořených značek do seznamu možností.',
     'select.config.searchable' => 'Aktivujte vyhledávání podle dostupných možností.',
     'select.config.taggable' => 'Aktivujte možnost označování.',
     'select.title' => 'Výběr',
diff --git a/resources/lang/da/fieldtypes.php b/resources/lang/da/fieldtypes.php
index 2112621abb3..67d9cbf63b6 100644
--- a/resources/lang/da/fieldtypes.php
+++ b/resources/lang/da/fieldtypes.php
@@ -157,7 +157,6 @@
     'select.config.multiple' => 'Tillad flere valg.',
     'select.config.options' => 'Indstil tasterne og deres valgfri etiketter.',
     'select.config.placeholder' => 'Indstil standard, ikke-valgbar pladsholdertekst.',
-    'select.config.push_tags' => 'Føj nyoprettede tags til valglisten.',
     'select.config.searchable' => 'Aktiver søgning gennem mulige muligheder.',
     'select.config.taggable' => 'Tillad at tilføje nye indstillinger ud over foruddefinerede indstillinger',
     'select.title' => 'Udvælg',
diff --git a/resources/lang/de/fieldtypes.php b/resources/lang/de/fieldtypes.php
index 67f84d8671a..8ba939dfc20 100644
--- a/resources/lang/de/fieldtypes.php
+++ b/resources/lang/de/fieldtypes.php
@@ -158,7 +158,6 @@
     'select.config.multiple' => 'Mehrfachauswahl zulassen.',
     'select.config.options' => 'Arrayschlüssel und deren optionale Beschriftungen festlegen.',
     'select.config.placeholder' => 'Platzhaltertext festlegen.',
-    'select.config.push_tags' => 'Neu erstellte Tags zur Optionsliste hinzufügen.',
     'select.config.searchable' => 'Die Suche durch verfügbare Optionen aktivieren.',
     'select.config.taggable' => 'Das Hinzufügen neuer Optionen zusätzlich zu den vordefinierten zulassen.',
     'select.title' => 'Auswahl',
diff --git a/resources/lang/de_CH/fieldtypes.php b/resources/lang/de_CH/fieldtypes.php
index f672a5fa9d6..d16cdc8aa6d 100644
--- a/resources/lang/de_CH/fieldtypes.php
+++ b/resources/lang/de_CH/fieldtypes.php
@@ -158,7 +158,6 @@
     'select.config.multiple' => 'Mehrfachauswahl zulassen.',
     'select.config.options' => 'Arrayschlüssel und deren optionale Beschriftungen festlegen.',
     'select.config.placeholder' => 'Platzhaltertext festlegen.',
-    'select.config.push_tags' => 'Neu erstellte Tags zur Optionsliste hinzufügen.',
     'select.config.searchable' => 'Die Suche durch verfügbare Optionen aktivieren.',
     'select.config.taggable' => 'Das Hinzufügen neuer Optionen zusätzlich zu den vordefinierten zulassen.',
     'select.title' => 'Auswahl',
diff --git a/resources/lang/en/fieldtypes.php b/resources/lang/en/fieldtypes.php
index f493e2394d8..d430aba0a42 100644
--- a/resources/lang/en/fieldtypes.php
+++ b/resources/lang/en/fieldtypes.php
@@ -159,7 +159,6 @@
     'select.config.multiple' => 'Allow multiple selections.',
     'select.config.options' => 'Set the keys and their optional labels.',
     'select.config.placeholder' => 'Set placeholder text.',
-    'select.config.push_tags' => 'Add newly created tags to the options list.',
     'select.config.searchable' => 'Enable searching through possible options.',
     'select.config.taggable' => 'Allow adding new options in addition to pre-defined options',
     'select.title' => 'Select',
diff --git a/resources/lang/es/fieldtypes.php b/resources/lang/es/fieldtypes.php
index 10756e90185..383f1bb6986 100644
--- a/resources/lang/es/fieldtypes.php
+++ b/resources/lang/es/fieldtypes.php
@@ -158,7 +158,6 @@
     'select.config.multiple' => 'Permitir selección múltiple.',
     'select.config.options' => 'Establecer las teclas y sus etiquetas opcionales.',
     'select.config.placeholder' => 'Establecer texto predeterminado en el campo.',
-    'select.config.push_tags' => 'Agregar etiquetas recién creadas a la lista de opciones.',
     'select.config.searchable' => 'Habilita la búsqueda a través de las opciones posibles.',
     'select.config.taggable' => 'Permitir agregar nuevas opciones además de las opciones predefinidas',
     'select.title' => 'Selección',
diff --git a/resources/lang/fa/fieldtypes.php b/resources/lang/fa/fieldtypes.php
index d339eb20915..cf49d1c9adf 100644
--- a/resources/lang/fa/fieldtypes.php
+++ b/resources/lang/fa/fieldtypes.php
@@ -157,7 +157,6 @@
     'select.config.multiple' => 'امکان انتخاب چندین گزینه را میسر سازید.',
     'select.config.options' => 'کلید‌ها و عناوین آنها را بیفزائید.',
     'select.config.placeholder' => 'متن مکان نگهدار را مشخص کنید.',
-    'select.config.push_tags' => 'آیتم‌های تازه ساخته شده به لیست گزینه‌ها افزوده شوند.',
     'select.config.searchable' => 'امکان جستجو بین گزینه‌ها فراهم باشد.',
     'select.config.taggable' => 'امکان افزودن گزینه‌های جدید در کنار گزینه‌های موجود فراهم باشد',
     'select.title' => 'انتخاب',
diff --git a/resources/lang/fr/fieldtypes.php b/resources/lang/fr/fieldtypes.php
index f32171a0a24..9ad9f23e3c5 100644
--- a/resources/lang/fr/fieldtypes.php
+++ b/resources/lang/fr/fieldtypes.php
@@ -158,7 +158,6 @@
     'select.config.multiple' => 'Autorisez des sélections multiples.',
     'select.config.options' => 'Définissez les clés et leurs étiquettes facultatives.',
     'select.config.placeholder' => 'Définissez un texte d’espace réservé.',
-    'select.config.push_tags' => 'Ajoutez les étiquettes nouvellement créées à la liste d’options.',
     'select.config.searchable' => 'Activez la recherche parmi les options possibles.',
     'select.config.taggable' => 'Autorisez l’ajout de nouvelles options en plus des options prédéfinies.',
     'select.title' => 'Select',
diff --git a/resources/lang/hu/fieldtypes.php b/resources/lang/hu/fieldtypes.php
index de02533d05e..0e7658283c0 100644
--- a/resources/lang/hu/fieldtypes.php
+++ b/resources/lang/hu/fieldtypes.php
@@ -157,7 +157,6 @@
     'select.config.multiple' => 'Több opció kiválasztásának engedélyezése.',
     'select.config.options' => 'Állítsa be a kulcsokat és az opcionális címkéket.',
     'select.config.placeholder' => 'Placeholder szöveg beállítása.',
-    'select.config.push_tags' => 'Újonnan létrehozott címkék hozzáadása az opciók listájához.',
     'select.config.searchable' => 'Engedélyezze a lehetséges opciók közötti keresést.',
     'select.config.taggable' => 'Új opciók hozzáadásának engedélyezése, az előre meghatározott opciókon felül',
     'select.title' => 'Választó',
diff --git a/resources/lang/id/fieldtypes.php b/resources/lang/id/fieldtypes.php
index 3acc007983f..3880391ef9a 100644
--- a/resources/lang/id/fieldtypes.php
+++ b/resources/lang/id/fieldtypes.php
@@ -157,7 +157,6 @@
     'select.config.multiple' => 'Izinkan banyak pilihan.',
     'select.config.options' => 'Atur kunci dan label opsionalnya.',
     'select.config.placeholder' => 'Tetapkan teks placeholder default yang tidak dapat dipilih.',
-    'select.config.push_tags' => 'Tambahkan tag yang baru dibuat ke daftar opsi.',
     'select.config.searchable' => 'Aktifkan pencarian melalui opsi yang memungkinkan.',
     'select.config.taggable' => 'Izinkan menambahkan opsi baru selain opsi yang telah ditentukan sebelumnya',
     'select.title' => 'Select',
diff --git a/resources/lang/it/fieldtypes.php b/resources/lang/it/fieldtypes.php
index 68319e3cb4b..698c32ab14a 100644
--- a/resources/lang/it/fieldtypes.php
+++ b/resources/lang/it/fieldtypes.php
@@ -158,7 +158,6 @@
     'select.config.multiple' => 'Consenti la selezione multipla delle opzioni.',
     'select.config.options' => 'Imposta le chiavi e le loro etichette opzionali.',
     'select.config.placeholder' => 'Imposta il testo del _placeholder_.',
-    'select.config.push_tags' => 'Consenti l\'aggiunta al volo dei tag all\'elenco delle opzioni.',
     'select.config.searchable' => 'Abilita la ricerca delle opzioni.',
     'select.config.taggable' => 'Consenti l\'inserimento di nuove opzioni oltre a quelle predefinite',
     'select.title' => 'Select',
diff --git a/resources/lang/ja/fieldtypes.php b/resources/lang/ja/fieldtypes.php
index ee3d7a5d6de..aa90dce156f 100644
--- a/resources/lang/ja/fieldtypes.php
+++ b/resources/lang/ja/fieldtypes.php
@@ -157,7 +157,6 @@
     'select.config.multiple' => '複数の選択を許可します。',
     'select.config.options' => 'キーとそのオプションのラベルを設定します。',
     'select.config.placeholder' => 'プレースホルダーテキストを設定します。',
-    'select.config.push_tags' => '新しく作成したタグをオプション リストに追加します。',
     'select.config.searchable' => '可能なオプションによる検索を有効にします。',
     'select.config.taggable' => '事前定義されたオプションに加えて新しいオプションを追加できるようにする',
     'select.title' => '選択する',
diff --git a/resources/lang/ms/fieldtypes.php b/resources/lang/ms/fieldtypes.php
index 669890618ca..fa5b3d35b67 100644
--- a/resources/lang/ms/fieldtypes.php
+++ b/resources/lang/ms/fieldtypes.php
@@ -157,7 +157,6 @@
     'select.config.multiple' => 'Dayakan berbilang pilihan.',
     'select.config.options' => 'Tetapkan kunci dan label pilihannya.',
     'select.config.placeholder' => 'Tetapkan teks pemegang tempat.',
-    'select.config.push_tags' => 'Tambahkan teg yang baru dibuat pada senarai pilihan.',
     'select.config.searchable' => 'Dayakan carian melalui pilihan yang mungkin.',
     'select.config.taggable' => 'Dayakan menambah pilihan baharu sebagai tambahan kepada pilihan pilihan yang telah ditetapkan.',
     'select.title' => 'Pilih',
diff --git a/resources/lang/nb/fieldtypes.php b/resources/lang/nb/fieldtypes.php
index 866a39d932e..0dde3f3a557 100644
--- a/resources/lang/nb/fieldtypes.php
+++ b/resources/lang/nb/fieldtypes.php
@@ -157,7 +157,6 @@
     'select.config.multiple' => 'Tillat flere valg.',
     'select.config.options' => 'Angi nøkler og tilknyttede valgfrie etiketter.',
     'select.config.placeholder' => 'Angi plassholdertekst.',
-    'select.config.push_tags' => 'Legg til nyopprettede koder til valglisten.',
     'select.config.searchable' => 'Aktiver søk gjennom mulige alternativer.',
     'select.config.taggable' => 'Tillat å tilføye nye alternativer i tillegg til forhåndsdefinerte alternativer',
     'select.title' => 'Velg',
diff --git a/resources/lang/nl/fieldtypes.php b/resources/lang/nl/fieldtypes.php
index 1ea942fc325..60dd57e087a 100644
--- a/resources/lang/nl/fieldtypes.php
+++ b/resources/lang/nl/fieldtypes.php
@@ -157,7 +157,6 @@
     'select.config.multiple' => 'Sta meerdere selecties toe',
     'select.config.options' => 'Stel de keys hun optionele labels in.',
     'select.config.placeholder' => 'Stel de standaard, niet selecteerbare, placeholdertekst in.',
-    'select.config.push_tags' => 'Voeg nieuw aangemaakte tags toe aan de optie-lijst.',
     'select.config.searchable' => 'Sta zoeken door mogelijke opties toe.',
     'select.config.taggable' => 'Sta het toevoegen van nieuwe opties toe.',
     'select.title' => 'Select',
diff --git a/resources/lang/pl/fieldtypes.php b/resources/lang/pl/fieldtypes.php
index a0722466961..74c6d4444e2 100644
--- a/resources/lang/pl/fieldtypes.php
+++ b/resources/lang/pl/fieldtypes.php
@@ -157,7 +157,6 @@
     'select.config.multiple' => 'Zezwalaj na wiele wyborów.',
     'select.config.options' => 'Ustaw klucze i ich opcjonalne etykiety.',
     'select.config.placeholder' => 'Ustaw tekst zastępczy.',
-    'select.config.push_tags' => 'Dodaj nowo utworzone tagi do listy opcji.',
     'select.config.searchable' => 'Włącz przeszukiwanie dostępnych opcji.',
     'select.config.taggable' => 'Zezwól na dodawanie nowych opcji oprócz predefiniowanych.',
     'select.title' => 'Wybierz',
diff --git a/resources/lang/pt/fieldtypes.php b/resources/lang/pt/fieldtypes.php
index 3d013d6d875..a72e00ba344 100644
--- a/resources/lang/pt/fieldtypes.php
+++ b/resources/lang/pt/fieldtypes.php
@@ -157,7 +157,6 @@
     'select.config.multiple' => 'Permitir selecções múltiplas.',
     'select.config.options' => 'Defina as chaves e as suas etiquetas opcionais.',
     'select.config.placeholder' => 'Defina o texto padrão, não seleccionável, dos espaços reservados.',
-    'select.config.push_tags' => 'Adicione etiquetas recentemente criadas à lista de opções.',
     'select.config.searchable' => 'Habilitar a pesquisa através de opções possíveis.',
     'select.config.taggable' => 'Permitir a adição de novas opções para além das opções pré-definidas',
     'select.title' => 'Select',
diff --git a/resources/lang/pt_BR/fieldtypes.php b/resources/lang/pt_BR/fieldtypes.php
index 60359ac5049..a1989b2353c 100644
--- a/resources/lang/pt_BR/fieldtypes.php
+++ b/resources/lang/pt_BR/fieldtypes.php
@@ -157,7 +157,6 @@
     'select.config.multiple' => 'Permitir múltiplas seleções.',
     'select.config.options' => 'Defina as chaves e seus rótulos opcionais.',
     'select.config.placeholder' => 'Defina o texto do espaço reservado.',
-    'select.config.push_tags' => 'Adicione tags recém-criadas à lista de opções.',
     'select.config.searchable' => 'Habilitar a busca por opções possíveis.',
     'select.config.taggable' => 'Permitir adicionar novas opções além das opções predefinidas',
     'select.title' => 'Selecione',
diff --git a/resources/lang/ru/fieldtypes.php b/resources/lang/ru/fieldtypes.php
index 0cc4436e598..c53f268c0e5 100644
--- a/resources/lang/ru/fieldtypes.php
+++ b/resources/lang/ru/fieldtypes.php
@@ -157,7 +157,6 @@
     'select.config.multiple' => 'Разрешить множественный выбор.',
     'select.config.options' => 'Установите клавиши и их дополнительные метки.',
     'select.config.placeholder' => 'Задайте текст заполнителя.',
-    'select.config.push_tags' => 'Добавить вновь созданные теги в список опций.',
     'select.config.searchable' => 'Включить поиск по возможным вариантам.',
     'select.config.taggable' => 'Разрешить добавление новых опций в дополнение к предварительно заданным',
     'select.title' => 'Выбор',
diff --git a/resources/lang/sl/fieldtypes.php b/resources/lang/sl/fieldtypes.php
index c74753ad45f..b7589a32b4a 100644
--- a/resources/lang/sl/fieldtypes.php
+++ b/resources/lang/sl/fieldtypes.php
@@ -157,7 +157,6 @@
     'select.config.multiple' => 'Dovoli več izbir.',
     'select.config.options' => 'Nastavite tipke in njihove izbirne nalepke.',
     'select.config.placeholder' => 'Nastavite nadomestno besedilo.',
-    'select.config.push_tags' => 'Na seznam možnosti dodajte novo ustvarjene oznake.',
     'select.config.searchable' => 'Omogočite iskanje po možnih možnostih.',
     'select.config.taggable' => 'Dovoli dodajanje novih možnosti poleg vnaprej določenih možnosti',
     'select.title' => 'Select',
diff --git a/resources/lang/sv/fieldtypes.php b/resources/lang/sv/fieldtypes.php
index 63b098a1ece..a131c004316 100644
--- a/resources/lang/sv/fieldtypes.php
+++ b/resources/lang/sv/fieldtypes.php
@@ -157,7 +157,6 @@
     'select.config.multiple' => 'Tillåt flera val.',
     'select.config.options' => 'Ställ in nycklarna och deras valfria etiketter.',
     'select.config.placeholder' => 'Ställ in platshållartext.',
-    'select.config.push_tags' => 'Lägg till nyskapade taggar i alternativlistan.',
     'select.config.searchable' => 'Aktivera sökning genom möjliga alternativ.',
     'select.config.taggable' => 'Tillåt tillägg av nya alternativ utöver fördefinierade alternativ',
     'select.title' => 'Rullgardinsmeny',
diff --git a/resources/lang/tr/fieldtypes.php b/resources/lang/tr/fieldtypes.php
index 72d4b26d93b..23393f6e0ab 100644
--- a/resources/lang/tr/fieldtypes.php
+++ b/resources/lang/tr/fieldtypes.php
@@ -157,7 +157,6 @@
     'select.config.multiple' => 'Çoklu seçime izin ver.',
     'select.config.options' => 'Anahtarları ve isteğe bağlı etiketlerini ayarlayın.',
     'select.config.placeholder' => 'Yer tutucu metni ayarlayın.',
-    'select.config.push_tags' => 'Seçenekler listesine yeni oluşturulan etiketleri ekleyin.',
     'select.config.searchable' => 'Olası seçenekler arasında aramayı etkinleştirin.',
     'select.config.taggable' => 'Önceden tanımlanmış seçeneklere ek olarak yeni seçenekler eklemeye izin ver',
     'select.title' => 'Seçiniz',
diff --git a/resources/lang/uk/fieldtypes.php b/resources/lang/uk/fieldtypes.php
index 3e8a437afb5..671c077803c 100644
--- a/resources/lang/uk/fieldtypes.php
+++ b/resources/lang/uk/fieldtypes.php
@@ -159,7 +159,6 @@
     'select.config.multiple' => 'Дозволити кілька виборів.',
     'select.config.options' => 'Встановіть ключі та їх необов’язкові мітки.',
     'select.config.placeholder' => 'Встановіть текст заповнювача.',
-    'select.config.push_tags' => 'Додати новостворені теги до списку опцій.',
     'select.config.searchable' => 'Дозволити пошук серед можливих опцій.',
     'select.config.taggable' => 'Дозволити додавання нових опцій, крім попередньо визначених',
     'select.title' => 'Вибір',
diff --git a/resources/lang/zh_CN/fieldtypes.php b/resources/lang/zh_CN/fieldtypes.php
index 23bbdf18f0f..116e804435f 100644
--- a/resources/lang/zh_CN/fieldtypes.php
+++ b/resources/lang/zh_CN/fieldtypes.php
@@ -157,7 +157,6 @@
     'select.config.multiple' => '允许多项选择。',
     'select.config.options' => '设置键及其可选标签。',
     'select.config.placeholder' => '设置默认的，不可选择的占位符文本。',
-    'select.config.push_tags' => '将新创建的标签添加到选项列表中。',
     'select.config.searchable' => '启用可能的选项搜索。',
     'select.config.taggable' => '除了预定义的选项外，还允许添加新的选项',
     'select.title' => '选择',
diff --git a/resources/lang/zh_TW/fieldtypes.php b/resources/lang/zh_TW/fieldtypes.php
index 5220f47f52d..e2570d52c43 100644
--- a/resources/lang/zh_TW/fieldtypes.php
+++ b/resources/lang/zh_TW/fieldtypes.php
@@ -157,7 +157,6 @@
     'select.config.multiple' => '允許多選。',
     'select.config.options' => '設定鍵值與其標籤。',
     'select.config.placeholder' => '設定預留位置文字。',
-    'select.config.push_tags' => '新增新建立的標籤至選項列表。',
     'select.config.searchable' => '啟用在各個可能選項間的搜尋。',
     'select.config.taggable' => '允許新增除了預定義選項外的新選項',
     'select.title' => '選擇',
diff --git a/resources/views/playground.blade.php b/resources/views/playground.blade.php
index 31a3a79a197..30e742a498e 100644
--- a/resources/views/playground.blade.php
+++ b/resources/views/playground.blade.php
@@ -183,6 +183,7 @@
         <ui-heading size="lg">Select</ui-heading>
         <div class="flex">
             <ui-select
+                class="w-full"
                 label="Favorite band"
                 :options="[
                     { label: 'The Midnight', value: 'the_midnight' },
diff --git a/src/Fieldtypes/Select.php b/src/Fieldtypes/Select.php
index 55813533f5b..acfaef9bcd4 100644
--- a/src/Fieldtypes/Select.php
+++ b/src/Fieldtypes/Select.php
@@ -34,12 +34,6 @@ protected function configFieldItems(): array
                         'type' => 'toggle',
                         'default' => false,
                     ],
-                    'push_tags' => [
-                        'display' => __('Push Tags'),
-                        'instructions' => __('statamic::fieldtypes.select.config.push_tags'),
-                        'type' => 'toggle',
-                        'default' => false,
-                    ],
                 ],
             ],
             [