diff --git a/packages/documentation/pages/usage/components/filters.vue b/packages/documentation/pages/usage/components/filters.vue
index 8a35fbd186..923b279beb 100644
--- a/packages/documentation/pages/usage/components/filters.vue
+++ b/packages/documentation/pages/usage/components/filters.vue
@@ -273,6 +273,7 @@ export default defineComponent({
 			const component: ComponentValue = {
 				hasActions: false,
 				hasHelpTextSlot: false,
+				hasOptionSlot: false,
 				name: 'KtFilters',
 				props: cloneDeep(componentProps.value),
 				validation: 'empty',
diff --git a/packages/documentation/pages/usage/components/form-fields.vue b/packages/documentation/pages/usage/components/form-fields.vue
index 26d6e272ca..3ad2c7c5ff 100644
--- a/packages/documentation/pages/usage/components/form-fields.vue
+++ b/packages/documentation/pages/usage/components/form-fields.vue
@@ -19,7 +19,11 @@
 			<div class="overview">
 				<div class="overview__component">
 					<h4>Component</h4>
-					<KtForm v-model="values" :formId="settings.formId">
+					<KtForm
+						v-model="values"
+						:formId="settings.formId || undefined"
+						@submit="onSubmit"
+					>
 						<component
 							:is="componentRepresentation.name"
 							v-bind="componentRepresentation.props"
@@ -27,16 +31,28 @@
 							:validator="componentRepresentation.validator"
 							@update:query="updateQuery"
 						>
-							<div
+							<template
 								v-if="componentRepresentation.hasHelpTextSlot"
-								slot="helpText"
+								#helpText
 							>
 								<div>
 									Supports
 									<abbr title="Hypertext Markup Language">HTML</abbr> via
-									<code>&lt;template v-slot:helpText&gt;</code>
+									<code>&lt;template #helpText&gt;</code>
 								</div>
-							</div>
+							</template>
+							<template
+								v-if="componentRepresentation.hasOptionSlot"
+								#option="{ option }"
+							>
+								<div style="display: flex; gap: 10px; align-items: center">
+									<KtAvatar
+										size="sm"
+										:src="`https://picsum.photos/seed/${option.label}/100/100`"
+									/>
+									{{ option.label }}
+								</div>
+							</template>
 							<div slot="default">Default Slot</div>
 						</component>
 					</KtForm>
@@ -137,6 +153,111 @@
 							]"
 							type="switch"
 						/>
+						<KtFieldNumber
+							v-if="componentDefinition.supports.tabIndex"
+							formKey="tabIndex"
+							helpText="Support varies"
+							isOptional
+							label="tabIndex"
+						/>
+					</div>
+					<div>
+						<h4>Texts</h4>
+						<KtFieldText formKey="label" isOptional label="label" />
+						<KtFieldText
+							formKey="helpDescription"
+							isOptional
+							label="helpDescription"
+						/>
+						<div class="field-row">
+							<KtFieldText
+								formKey="helpText"
+								:helpText="
+									settings.hasHelpTextSlot
+										? 'Not supported when using a #helpText slot'
+										: null
+								"
+								:isDisabled="settings.hasHelpTextSlot"
+								isOptional
+								label="helpText"
+							/>
+							<KtFieldToggle
+								formKey="hasHelpTextSlot"
+								isOptional
+								label="Use #helpText Slot"
+								type="switch"
+							/>
+						</div>
+						<div class="field-row">
+							<KtFieldText
+								formKey="placeholder"
+								helpText="Support Varies"
+								:isDisabled="!componentDefinition.supports.placeholder"
+								isOptional
+								label="placeholder"
+							/>
+							<KtFieldText
+								v-if="isRangeComponent"
+								formKey="placeholder2"
+								helpText="On range components, placeholder is an array of two strings"
+								:isDisabled="!componentDefinition.supports.placeholder"
+								isOptional
+								label="placeholder2"
+							/>
+						</div>
+						<h4>Decoration</h4>
+						<div class="field-row">
+							<KtFieldText
+								formKey="prefix"
+								helpText="Support Varies"
+								:isDisabled="!componentDefinition.supports.decoration"
+								isOptional
+								label="prefix"
+							/>
+							<KtFieldText
+								formKey="suffix"
+								helpText="Support Varies"
+								:isDisabled="!componentDefinition.supports.decoration"
+								isOptional
+								label="suffix"
+							/>
+						</div>
+						<div class="field-row">
+							<KtFieldSingleSelect
+								formKey="leftIcon"
+								helpText="Support Varies"
+								:isDisabled="!componentDefinition.supports.decoration"
+								isOptional
+								label="leftIcon"
+								:options="yocoIconOptions"
+							>
+								<template #option="{ option }">
+									<i
+										class="yoco"
+										style="margin-right: 10px; font-size: 24px"
+										v-text="option.value"
+									/>
+									<span v-text="option.label" />
+								</template>
+							</KtFieldSingleSelect>
+							<KtFieldSingleSelect
+								formKey="rightIcon"
+								helpText="Support Varies"
+								:isDisabled="!componentDefinition.supports.decoration"
+								isOptional
+								label="rightIcon"
+								:options="yocoIconOptions"
+							>
+								<template #option="{ option }">
+									<i
+										class="yoco"
+										style="margin-right: 10px; font-size: 24px"
+										v-text="option.value"
+									/>
+									<span v-text="option.label" />
+								</template>
+							</KtFieldSingleSelect>
+						</div>
 						<KtFormControllerObject
 							v-if="componentDefinition.additionalProps.length > 0"
 							formKey="additionalProps"
@@ -270,6 +391,15 @@
 								label="isLoadingOptions"
 								type="switch"
 							/>
+							<KtFieldToggle
+								v-if="
+									componentDefinition.additionalProps.includes('isUnsorted')
+								"
+								formKey="isUnsorted"
+								isOptional
+								label="isUnsorted"
+								type="switch"
+							/>
 							<KtFieldDate
 								v-if="
 									componentDefinition.additionalProps.includes('maximumDate')
@@ -297,87 +427,16 @@
 								isOptional
 								label="minimumDate"
 							/>
-						</KtFormControllerObject>
-					</div>
-					<div>
-						<h4>Texts</h4>
-						<KtFieldText formKey="label" isOptional label="label" />
-						<KtFieldText
-							formKey="helpDescription"
-							isOptional
-							label="helpDescription"
-						/>
-						<div class="field-row">
-							<KtFieldText
-								formKey="helpText"
-								:helpText="
-									settings.hasHelpTextSlot
-										? 'Not supported when using a #helpText slot'
-										: null
-								"
-								:isDisabled="settings.hasHelpTextSlot"
-								isOptional
-								label="helpText"
-							/>
 							<KtFieldToggle
-								formKey="hasHelpTextSlot"
+								v-if="
+									componentDefinition.additionalProps.includes('hasOptionSlot')
+								"
+								formKey="hasOptionSlot"
 								isOptional
-								label="Use #helpText Slot"
+								label="option slot"
 								type="switch"
 							/>
-						</div>
-						<div class="field-row">
-							<KtFieldText
-								formKey="placeholder"
-								helpText="Support Varies"
-								:isDisabled="!componentDefinition.supports.placeholder"
-								isOptional
-								label="placeholder"
-							/>
-							<KtFieldText
-								v-if="isRangeComponent"
-								formKey="placeholder2"
-								helpText="On range components, placeholder is an array of two strings"
-								:isDisabled="!componentDefinition.supports.placeholder"
-								isOptional
-								label="placeholder2"
-							/>
-						</div>
-						<h4>Decoration</h4>
-						<div class="field-row">
-							<KtFieldText
-								formKey="prefix"
-								helpText="Support Varies"
-								:isDisabled="!componentDefinition.supports.decoration"
-								isOptional
-								label="prefix"
-							/>
-							<KtFieldText
-								formKey="suffix"
-								helpText="Support Varies"
-								:isDisabled="!componentDefinition.supports.decoration"
-								isOptional
-								label="suffix"
-							/>
-						</div>
-						<div class="field-row">
-							<KtFieldSingleSelect
-								formKey="leftIcon"
-								helpText="Support Varies"
-								:isDisabled="!componentDefinition.supports.decoration"
-								isOptional
-								label="leftIcon"
-								:options="yocoIconOptions"
-							/>
-							<KtFieldSingleSelect
-								formKey="rightIcon"
-								helpText="Support Varies"
-								:isDisabled="!componentDefinition.supports.decoration"
-								isOptional
-								label="rightIcon"
-								:options="yocoIconOptions"
-							/>
-						</div>
+						</KtFormControllerObject>
 					</div>
 				</div>
 			</KtForm>
@@ -430,6 +489,7 @@ import {
 	KtFieldDateTime,
 	KtFieldDateTimeRange,
 	KtFieldMultiSelect,
+	KtFieldMultiSelectRemote,
 	KtFieldNumber,
 	KtFieldPassword,
 	KtFieldRadioGroup,
@@ -441,6 +501,7 @@ import {
 	KtFieldToggleGroup,
 } from '@3yourmind/kotti-ui'
 import { Yoco } from '@3yourmind/yoco'
+import { TimeConversion } from '@metatypes/units'
 import { defineComponent, ref, computed } from '@vue/composition-api'
 import cloneDeep from 'lodash/cloneDeep'
 
@@ -508,11 +569,31 @@ const components: Array<{
 		supports: KtFieldDateTimeRange.meta.supports,
 	},
 	{
-		additionalProps: ['actions', 'collapseTagsAfter', 'maximumSelectable'],
+		additionalProps: [
+			'actions',
+			'collapseTagsAfter',
+			'hasOptionSlot',
+			'isUnsorted',
+			'maximumSelectable',
+		],
 		formKey: 'multiSelectValue',
 		name: 'KtFieldMultiSelect',
 		supports: KtFieldMultiSelect.meta.supports,
 	},
+	{
+		additionalProps: [
+			'actions',
+			'collapseTagsAfter',
+			'hasOptionSlot',
+			'isLoadingOptions',
+			'isUnsorted',
+			'maximumSelectable',
+			'query',
+		],
+		formKey: 'multiSelectValue',
+		name: 'KtFieldMultiSelectRemote',
+		supports: KtFieldMultiSelectRemote.meta.supports,
+	},
 	{
 		additionalProps: [
 			'numberDecimalPlaces',
@@ -539,13 +620,19 @@ const components: Array<{
 		supports: KtFieldRadioGroup.meta.supports,
 	},
 	{
-		additionalProps: ['actions'],
+		additionalProps: ['actions', 'hasOptionSlot', 'isUnsorted'],
 		formKey: 'singleSelectValue',
 		name: 'KtFieldSingleSelect',
 		supports: KtFieldSingleSelect.meta.supports,
 	},
 	{
-		additionalProps: ['actions', 'isLoadingOptions', 'query'],
+		additionalProps: [
+			'actions',
+			'hasOptionSlot',
+			'isLoadingOptions',
+			'isUnsorted',
+			'query',
+		],
 		formKey: 'singleSelectValue',
 		name: 'KtFieldSingleSelectRemote',
 		supports: KtFieldSingleSelectRemote.meta.supports,
@@ -635,10 +722,15 @@ const radioGroupOptions: Kotti.FieldRadioGroup.Props['options'] = [
 ]
 
 const singleOrMultiSelectOptions: Kotti.FieldSingleSelect.Props['options'] = [
-	{ label: 'Key 1', value: 'value1' },
 	{ label: 'Key 2', value: 'value2' },
+	{ label: 'Key 1', value: 'value1' },
 	{ isDisabled: true, label: 'Key 3', value: 'value3' },
+	{ label: 'Key 7', value: 'value7' },
 	{ label: 'Key 4', value: 'value4' },
+	{ label: 'Key 9', value: 'value9' },
+	{ label: 'Key 6', value: 'value6' },
+	{ label: 'Key 8', value: 'value8' },
+	{ label: 'Key 5', value: 'value5' },
 ]
 
 const toggleGroupOptions: Kotti.FieldToggleGroup.Props['options'] = [
@@ -674,9 +766,11 @@ export default defineComponent({
 				collapseTagsAfter: Kotti.FieldNumber.Value
 				currencyCurrency: string
 				hasActions: boolean
+				hasOptionSlot: boolean
 				hideChangeButtons: boolean
 				isInline: boolean
 				isLoadingOptions: boolean
+				isUnsorted: boolean
 				maximumDate: Kotti.FieldDate.Value
 				maximumSelectable: Kotti.FieldNumber.Value
 				minimumDate: Kotti.FieldDate.Value
@@ -708,8 +802,9 @@ export default defineComponent({
 			placeholder2: Kotti.FieldText.Value
 			prefix: Kotti.FieldText.Value
 			rightIcon: Yoco.Icon | null
-			size: 'small' | 'medium' | 'large'
+			size: Kotti.Field.Size
 			suffix: Kotti.FieldText.Value
+			tabIndex: Kotti.FieldNumber.Value
 			validation: Kotti.Field.Validation.Result['type']
 		}>({
 			additionalProps: {
@@ -717,9 +812,11 @@ export default defineComponent({
 				collapseTagsAfter: null,
 				currencyCurrency: 'USD',
 				hasActions: false,
+				hasOptionSlot: false,
 				hideChangeButtons: false,
 				isInline: false,
 				isLoadingOptions: false,
+				isUnsorted: false,
 				maximumDate: null,
 				maximumSelectable: null,
 				minimumDate: null,
@@ -751,8 +848,9 @@ export default defineComponent({
 			placeholder2: null,
 			prefix: null,
 			rightIcon: null,
-			size: 'medium',
+			size: Kotti.Field.Size.MEDIUM,
 			suffix: null,
+			tabIndex: null,
 			validation: 'empty',
 		})
 
@@ -818,6 +916,11 @@ export default defineComponent({
 						placeholder: settings.value.placeholder,
 					})
 
+			if (componentDefinition.value.supports.tabIndex)
+				Object.assign(additionalProps, {
+					tabIndex: settings.value.tabIndex,
+				})
+
 			if (
 				componentDefinition.value.additionalProps.includes('toggleType') &&
 				settings.value.additionalProps.toggleType !== 'checkbox' // Exclude Default Value
@@ -895,13 +998,21 @@ export default defineComponent({
 					isLoadingOptions: settings.value.additionalProps.isLoadingOptions,
 				})
 
+			if (componentDefinition.value.additionalProps.includes('isUnsorted'))
+				Object.assign(additionalProps, {
+					isUnsorted: settings.value.additionalProps.isUnsorted,
+				})
+
 			if (componentDefinition.value.additionalProps.includes('maximumDate'))
 				Object.assign(additionalProps, {
 					maximumDate: settings.value.additionalProps.maximumDate,
 				})
 
 			if (
-				componentDefinition.value.additionalProps.includes('maximumSelectable')
+				componentDefinition.value.additionalProps.includes(
+					'maximumSelectable',
+				) &&
+				settings.value.additionalProps.maximumSelectable !== null
 			)
 				Object.assign(additionalProps, {
 					maximumSelectable: settings.value.additionalProps.maximumSelectable,
@@ -925,12 +1036,15 @@ export default defineComponent({
 			if (
 				[
 					'KtFieldMultiSelect',
+					'KtFieldMultiSelectRemote',
 					'KtFieldSingleSelect',
 					'KtFieldSingleSelectRemote',
 				].includes(component)
 			) {
 				const options = (
-					component === 'KtFieldSingleSelectRemote'
+					['KtFieldMultiSelectRemote', 'KtFieldSingleSelectRemote'].includes(
+						component,
+					)
 						? singleOrMultiSelectOptions.filter((option) =>
 								option.label
 									.toLowerCase()
@@ -939,9 +1053,9 @@ export default defineComponent({
 									),
 						  )
 						: singleOrMultiSelectOptions
-				).map((option) => ({
+				).map((option, index) => ({
 					...option,
-					dataTest: `${String(option.value)}`,
+					dataTest: index % 2 === 0 ? `${String(option.value)}` : undefined,
 				}))
 
 				Object.assign(additionalProps, {
@@ -949,7 +1063,11 @@ export default defineComponent({
 				})
 			}
 
-			if (['KtFieldSingleSelectRemote'].includes(component)) {
+			if (
+				['KtFieldMultiSelectRemote', 'KtFieldSingleSelectRemote'].includes(
+					component,
+				)
+			) {
 				Object.assign(additionalProps, { query: remoteSingleSelectQuery.value })
 			}
 
@@ -987,6 +1105,7 @@ export default defineComponent({
 			(): ComponentValue => ({
 				hasActions: settings.value.additionalProps.hasActions,
 				hasHelpTextSlot: settings.value.hasHelpTextSlot,
+				hasOptionSlot: settings.value.additionalProps.hasOptionSlot,
 				name: settings.value.component,
 				props: cloneDeep(componentProps.value),
 				validation: settings.value.validation,
@@ -1003,6 +1122,7 @@ export default defineComponent({
 						KtFieldDateTimeRange,
 						KtFieldNumber,
 						KtFieldMultiSelect,
+						KtFieldMultiSelectRemote,
 						KtFieldPassword,
 						KtFieldRadioGroup,
 						KtFieldSingleSelect,
@@ -1034,6 +1154,8 @@ export default defineComponent({
 				}),
 			),
 			isRangeComponent,
+			onSubmit: (values: Record<string, unknown>) =>
+				window.alert(`@submit: ${JSON.stringify(values, null, '\t')}`),
 			reset: () => {
 				values.value = INITIAL_VALUES
 			},
@@ -1065,6 +1187,16 @@ export default defineComponent({
 				newQuery: Kotti.FieldSingleSelectRemote.Events.UpdateQuery,
 			) => {
 				remoteSingleSelectQuery.value = newQuery
+				settings.value.additionalProps = {
+					...settings.value.additionalProps,
+					isLoadingOptions: true,
+				}
+				setTimeout(() => {
+					settings.value.additionalProps = {
+						...settings.value.additionalProps,
+						isLoadingOptions: false,
+					}
+				}, TimeConversion.MILLISECONDS_PER_SECOND)
 			},
 			values,
 			yocoIconOptions: Object.values(Yoco.Icon).map((icon) => ({
diff --git a/packages/documentation/pages/utilities.ts b/packages/documentation/pages/utilities.ts
index c8da0b26e6..d0384a849f 100644
--- a/packages/documentation/pages/utilities.ts
+++ b/packages/documentation/pages/utilities.ts
@@ -6,6 +6,7 @@ export type ComponentNames =
 	| 'KtFieldDateTime'
 	| 'KtFieldDateTimeRange'
 	| 'KtFieldMultiSelect'
+	| 'KtFieldMultiSelectRemote'
 	| 'KtFieldNumber'
 	| 'KtFieldPassword'
 	| 'KtFieldRadioGroup'
@@ -20,6 +21,7 @@ export type ComponentNames =
 export type ComponentValue = {
 	hasActions: boolean
 	hasHelpTextSlot: boolean
+	hasOptionSlot: boolean
 	name: ComponentNames
 	props: Record<string, unknown>
 	validation: Kotti.Field.Validation.Result['type']
diff --git a/packages/kotti-ui/source/index.ts b/packages/kotti-ui/source/index.ts
index 51aa6cee28..35062447fa 100644
--- a/packages/kotti-ui/source/index.ts
+++ b/packages/kotti-ui/source/index.ts
@@ -44,8 +44,9 @@ export * from './kotti-field-password'
 import { KtFieldRadioGroup } from './kotti-field-radio-group'
 export * from './kotti-field-radio-group'
 import {
-	KtFieldSingleSelect,
 	KtFieldMultiSelect,
+	KtFieldMultiSelectRemote,
+	KtFieldSingleSelect,
 	KtFieldSingleSelectRemote,
 } from './kotti-field-select'
 export * from './kotti-field-select'
@@ -132,6 +133,7 @@ export default {
 			KtFieldDateTime,
 			KtFieldDateTimeRange,
 			KtFieldMultiSelect,
+			KtFieldMultiSelectRemote,
 			KtFieldNumber,
 			KtFieldPassword,
 			KtFieldRadioGroup,
diff --git a/packages/kotti-ui/source/kotti-avatar/KtAvatar.vue b/packages/kotti-ui/source/kotti-avatar/KtAvatar.vue
index a91c310099..45d4986a13 100644
--- a/packages/kotti-ui/source/kotti-avatar/KtAvatar.vue
+++ b/packages/kotti-ui/source/kotti-avatar/KtAvatar.vue
@@ -19,10 +19,10 @@ import { Yoco } from '@3yourmind/yoco'
 import { computed, defineComponent, Ref, ref } from '@vue/composition-api'
 import { roundArrow } from 'tippy.js'
 
+import { TIPPY_LIGHT_BORDER_ARROW_HEIGHT } from '../constants'
 import { makeProps } from '../make-props'
 
 import { KottiAvatar } from './types'
-const ARROW_HEIGHT = 7
 
 const useTooltip = (name: Ref<string | null>) => {
 	const tooltipTriggerRef = ref<Element | null>(null)
@@ -33,7 +33,7 @@ const useTooltip = (name: Ref<string | null>) => {
 			appendTo: () => document.body,
 			arrow: roundArrow,
 			content: name.value,
-			offset: [0, ARROW_HEIGHT],
+			offset: [0, TIPPY_LIGHT_BORDER_ARROW_HEIGHT],
 			theme: 'light-border',
 			...(name.value === null ? { trigger: 'manual' } : {}),
 		})),
diff --git a/packages/kotti-ui/source/kotti-field-select/KtFieldMultiSelect.vue b/packages/kotti-ui/source/kotti-field-select/KtFieldMultiSelect.vue
index 6b621c32cb..7a8e1b1f5f 100644
--- a/packages/kotti-ui/source/kotti-field-select/KtFieldMultiSelect.vue
+++ b/packages/kotti-ui/source/kotti-field-select/KtFieldMultiSelect.vue
@@ -1,229 +1,37 @@
 <template>
-	<!-- isComponent is necessary to prevent the dropdown from opening when removing a tag -->
-	<KtField
-		ref="ktFieldRef"
-		v-bind="{ field }"
-		class="kt-field-select kt-field-select--multiple"
-		:getEmptyValue="() => []"
+	<GenericSelectField
+		v-bind="props"
 		:helpTextSlot="$slots.helpText"
-		isComponent="div"
-		@click.stop="handleFieldClick"
-		@mousedown="handleFieldMouseDown"
+		isMultiple
+		@emit="onEmit"
 	>
-		<!-- needs to be on a separate element because it doesn’t work when put on ElSelect-->
-		<div @mousedown.stop>
-			<ElSelect
-				ref="elSelectRef"
-				v-bind="elMultipleSelectProps"
-				:multipleLimit="maximumSelectable"
-				@input="onChange"
-				@visible-change="(showPopper) => (isDropdownOpen = showPopper)"
-			>
-				<div
-					v-if="field.isEmpty && showPlaceholder"
-					slot="prefix"
-					class="kt-field-select__placeholder"
-					v-text="elMultipleSelectProps.placeholder"
-				/>
-				<div v-else-if="!field.isEmpty" slot="prefix" class="kt-tags">
-					<div
-						v-for="option in visibleSelectedOptions"
-						:key="option.value"
-						class="kt-tags__tag"
-					>
-						<div class="kt-tags__tag-text" v-text="option.label" />
-						<div
-							v-if="!(field.isDisabled || Boolean(option.isDisabled))"
-							class="kt-tags__tag-icon"
-							@click.stop="removeTag(option.value)"
-						>
-							<i class="yoco" v-text="Yoco.Icon.CLOSE" />
-						</div>
-					</div>
-					<div v-if="invisibleTagCount > 0" class="kt-tags__tag">
-						<div class="kt-tags__tag-text" v-text="`+${invisibleTagCount}`" />
-					</div>
-				</div>
-				<ElOption
-					v-for="option in options"
-					:key="option.value"
-					:data-test="option.dataTest"
-					:disabled="field.isDisabled || Boolean(option.isDisabled)"
-					:label="option.label"
-					:value="option.value"
-				/>
-				<div v-if="actions.length" class="kt-field-select__actions">
-					<div class="el-select-dropdown__item">
-						<div
-							v-for="(action, index) in actions"
-							:key="index"
-							class="kt-field-select__actions__item"
-							@click="action.onClick"
-							v-text="action.label"
-						/>
-					</div>
-				</div>
-			</ElSelect>
-		</div>
-		<template v-slot:actionIcon="{ classes, handleClear, showClear }">
-			<ActionIcon
-				v-bind="{
-					classes,
-					elSelectRef,
-					handleClear,
-					isDropdownOpen,
-					showClear,
-				}"
-			/>
+		<template #option="values">
+			<slot v-bind="values" name="option" />
 		</template>
-	</KtField>
+	</GenericSelectField>
 </template>
 
 <script lang="ts">
-import { Yoco } from '@3yourmind/yoco'
-import { defineComponent, computed, ref } from '@vue/composition-api'
-import { Select as ElSelect, Option as ElOption } from 'element-ui'
-import type Vue from 'vue'
+import { defineComponent } from '@vue/composition-api'
 
-import { KtField } from '../kotti-field'
-import { useField } from '../kotti-field/hooks'
-import { useTranslationNamespace } from '../kotti-i18n/hooks'
 import { makeProps } from '../make-props'
 
-import ActionIcon from './components/ActionIcon.vue'
-import { KOTTI_FIELD_SELECT_SUPPORTS } from './constants'
-import { useSelectFixes, ElSelectWithInternalAPI } from './hooks'
+import GenericSelectField from './components/GenericSelectField.vue'
 import { KottiFieldMultiSelect } from './types'
 
-type Entry = KottiFieldMultiSelect.Props['options'][0]
-
-export default defineComponent<KottiFieldMultiSelect.PropsInternal>({
+export default defineComponent({
 	name: 'KtFieldMultiSelect',
-	components: { ElOption, ElSelect, KtField, ActionIcon },
+	components: {
+		GenericSelectField,
+	},
 	props: makeProps(KottiFieldMultiSelect.propsSchema),
-	setup(props, { emit }) {
-		const field = useField<KottiFieldMultiSelect.Value>({
-			emit,
-			isEmpty: (value) => value.length === 0,
-			props,
-			supports: KOTTI_FIELD_SELECT_SUPPORTS,
-		})
-		const translations = useTranslationNamespace('KtFieldSelects')
-
-		const elSelectRef = ref<ElSelectWithInternalAPI | null>(null)
-		const ktFieldRef = ref<Vue | null>(null)
-
-		useSelectFixes({
-			field,
-			elSelectRef,
-			ktFieldRef,
-			inputSelectors: [
-				'.el-input__inner',
-				'.el-select__tags .el-select__input',
-			],
-		})
-
-		const isDropdownOpen = ref(false)
-
-		const scheduleFocusAfterFieldClick = ref(false)
-
+	setup(props: KottiFieldMultiSelect.PropsInternal, { emit }) {
 		return {
-			elMultipleSelectProps: computed(
-				(): Partial<ElSelect> => ({
-					defaultFirstOption: true,
-					disabled: field.isDisabled,
-					filterable: true,
-					loadingText: translations.value.loadingText,
-					multiple: true,
-					noDataText: translations.value.noDataText,
-					noMatchText: translations.value.noMatchText,
-					placeholder: props.placeholder ?? '',
-					value: field.currentValue,
-				}),
-			),
-			elSelectRef,
-			field,
-			handleFieldClick: () => {
-				const elSelect = elSelectRef.value
-				if (!elSelect) throw new Error('elSelect is not ready')
-
-				/**
-				 * the dropdown was previously closed and should not be opened
-				 */
-				if (scheduleFocusAfterFieldClick.value) {
-					;(elSelect as ElSelectWithInternalAPI).focus()
-					scheduleFocusAfterFieldClick.value = false // done, so reset flag
-				} else {
-					/**
-					 * the dropdown was previously open and input was focused.
-					 * clicking closes the dropdown but blurs the input
-					 * because the field is not part of the input (defined within `<ElSelect />`)
-					 * (i.e: from the perspective of the input, it's a different component, so the input blurs).
-					 *
-					 * For a smooth experience, we set `softFocus` which focuses on the input
-					 * without making the dropdown visible
-					 * [setSoftFocus()]{@link ./node_modules/element-ui/packages/select/src/select.vue}
-					 */
-					;(elSelect as ElSelectWithInternalAPI).setSoftFocus()
-				}
+			onEmit: ({ event, payload }: { event: string; payload: unknown }) => {
+				emit(event, payload)
 			},
-			handleFieldMouseDown: () => {
-				/**
-				 * mousedown handlers get triggered first
-				 * so we use them to set flags that should initiate actions
-				 * when their corresponding click handlers are called
-				 * the combination of a mouse-down handler and a click handler lets us define a start
-				 * and an end marker to a flow of events that uniquely identifies scenarios.
-				 *
-				 * If the dropdown was closed before, the field should be focused and the dropdown should open
-				 * on the corresponding click handler `handleFieldClick`
-				 */
-				if (!isDropdownOpen.value) scheduleFocusAfterFieldClick.value = true
-			},
-			invisibleTagCount: computed(
-				() => field.currentValue.length - props.collapseTagsAfter,
-			),
-			isDropdownOpen,
-			ktFieldRef,
-			onChange: (values: KottiFieldMultiSelect.Value) => {
-				const getOptionIndex = (value: Entry['value']) =>
-					props.options.findIndex((option) => option.value === value)
-
-				const sortedValues = values.sort(
-					(a, b) => getOptionIndex(a) - getOptionIndex(b),
-				)
-
-				field.setValue(sortedValues)
-			},
-			showPlaceholder: computed(() => {
-				const query = elSelectRef.value?.query
-				return query === ''
-			}),
-			removeTag: (value: Entry['value']) => {
-				field.setValue(field.currentValue.filter((v) => v !== value))
-			},
-			visibleSelectedOptions: computed(() => {
-				return field.currentValue
-					.filter((_, index) => index < props.collapseTagsAfter)
-					.map((value): Entry => {
-						const option = props.options.find(
-							(option) => option.value === value,
-						)
-
-						if (!option)
-							throw new Error(
-								`Couldn’t find option with value “${String(value)}”`,
-							)
-
-						return option
-					})
-			}),
-			Yoco,
+			props,
 		}
 	},
 })
 </script>
-
-<style lang="scss">
-@import 'styles';
-</style>
diff --git a/packages/kotti-ui/source/kotti-field-select/KtFieldMultiSelectRemote.vue b/packages/kotti-ui/source/kotti-field-select/KtFieldMultiSelectRemote.vue
new file mode 100644
index 0000000000..19586d0c6d
--- /dev/null
+++ b/packages/kotti-ui/source/kotti-field-select/KtFieldMultiSelectRemote.vue
@@ -0,0 +1,38 @@
+<template>
+	<GenericSelectField
+		v-bind="props"
+		:helpTextSlot="$slots.helpText"
+		isMultiple
+		isRemote
+		@emit="onEmit"
+	>
+		<template #option="values">
+			<slot v-bind="values" name="option" />
+		</template>
+	</GenericSelectField>
+</template>
+
+<script lang="ts">
+import { defineComponent } from '@vue/composition-api'
+
+import { makeProps } from '../make-props'
+
+import GenericSelectField from './components/GenericSelectField.vue'
+import { KottiFieldMultiSelectRemote } from './types'
+
+export default defineComponent({
+	name: 'KtFieldMultiSelectRemote',
+	components: {
+		GenericSelectField,
+	},
+	props: makeProps(KottiFieldMultiSelectRemote.propsSchema),
+	setup(props: KottiFieldMultiSelectRemote.PropsInternal, { emit }) {
+		return {
+			onEmit: ({ event, payload }: { event: string; payload: unknown }) => {
+				emit(event, payload)
+			},
+			props,
+		}
+	},
+})
+</script>
diff --git a/packages/kotti-ui/source/kotti-field-select/KtFieldSingleSelect.vue b/packages/kotti-ui/source/kotti-field-select/KtFieldSingleSelect.vue
index 4017ef066f..0502a68a3b 100644
--- a/packages/kotti-ui/source/kotti-field-select/KtFieldSingleSelect.vue
+++ b/packages/kotti-ui/source/kotti-field-select/KtFieldSingleSelect.vue
@@ -1,163 +1,36 @@
 <template>
-	<!-- isComponent is necessary to prevent the weird opening behavior when clicking the current value text inside the input -->
-	<KtField
-		ref="ktFieldRef"
-		v-bind="{ field }"
-		class="kt-field-select kt-field-select--single"
-		:getEmptyValue="() => null"
+	<GenericSelectField
+		v-bind="props"
 		:helpTextSlot="$slots.helpText"
-		isComponent="div"
-		@click.stop="handleFieldClick"
-		@mousedown="handleFieldMouseDown"
+		@emit="onEmit"
 	>
-		<!-- needs to be on a separate element because it doesn’t work when put on ElSelect-->
-		<div @mousedown.stop>
-			<ElSelect
-				ref="elSelectRef"
-				v-bind="elSingleSelectProps"
-				@input="onChange"
-				@visible-change="(showPopper) => (isDropdownOpen = showPopper)"
-			>
-				<ElOption
-					v-for="option in options"
-					:key="option.value"
-					:data-test="option.dataTest"
-					:disabled="field.isDisabled || Boolean(option.isDisabled)"
-					:label="option.label"
-					:value="option.value"
-				/>
-
-				<div v-if="actions.length" class="kt-field-select__actions">
-					<div class="el-select-dropdown__item">
-						<div
-							v-for="(action, index) in actions"
-							:key="index"
-							class="kt-field-select__actions__item"
-							@click="action.onClick"
-							v-text="action.label"
-						/>
-					</div>
-				</div>
-			</ElSelect>
-		</div>
-		<template v-slot:actionIcon="{ classes, handleClear, showClear }">
-			<ActionIcon
-				v-bind="{
-					classes,
-					elSelectRef,
-					handleClear,
-					isDropdownOpen,
-					showClear,
-				}"
-			/>
+		<template #option="values">
+			<slot v-bind="values" name="option" />
 		</template>
-	</KtField>
+	</GenericSelectField>
 </template>
 
 <script lang="ts">
-import { defineComponent, computed, ref } from '@vue/composition-api'
-import { Select as ElSelect, Option as ElOption } from 'element-ui'
-import type Vue from 'vue'
+import { defineComponent } from '@vue/composition-api'
 
-import { KtField } from '../kotti-field'
-import { useField } from '../kotti-field/hooks'
-import { useTranslationNamespace } from '../kotti-i18n/hooks'
 import { makeProps } from '../make-props'
 
-import ActionIcon from './components/ActionIcon.vue'
-import { KOTTI_FIELD_SELECT_SUPPORTS } from './constants'
-import { useSelectFixes, ElSelectWithInternalAPI } from './hooks'
+import GenericSelectField from './components/GenericSelectField.vue'
 import { KottiFieldSingleSelect } from './types'
 
-export default defineComponent<KottiFieldSingleSelect.PropsInternal>({
+export default defineComponent({
 	name: 'KtFieldSingleSelect',
-	components: { ElOption, ElSelect, KtField, ActionIcon },
+	components: {
+		GenericSelectField,
+	},
 	props: makeProps(KottiFieldSingleSelect.propsSchema),
-	setup(props, { emit }) {
-		const field = useField<KottiFieldSingleSelect.Value>({
-			emit,
-			isEmpty: (value) => value === null,
-			props,
-			supports: KOTTI_FIELD_SELECT_SUPPORTS,
-		})
-		const translations = useTranslationNamespace('KtFieldSelects')
-
-		const elSelectRef = ref<ElSelectWithInternalAPI | null>(null)
-		const ktFieldRef = ref<Vue | null>(null)
-
-		useSelectFixes({
-			elSelectRef,
-			field,
-			inputSelectors: ['.el-input__inner'],
-			ktFieldRef,
-		})
-
-		const isDropdownOpen = ref(false)
-		const scheduleFocusAfterFieldClick = ref(false)
-
+	setup(props: KottiFieldSingleSelect.PropsInternal, { emit }) {
 		return {
-			elSelectRef,
-			field,
-			handleFieldClick: () => {
-				const elSelect = elSelectRef.value
-				if (!elSelect) throw new Error('elSelect is not ready')
-
-				/**
-				 * the dropdown was previously closed and should not be opened
-				 */
-				if (scheduleFocusAfterFieldClick.value) {
-					;(elSelect as ElSelectWithInternalAPI).focus()
-					scheduleFocusAfterFieldClick.value = false // done, so reset flag
-				} else {
-					/**
-					 * the dropdown was previously open and input was focused.
-					 * clicking closes the dropdown but blurs the input
-					 * because the field is not part of the input (defined within `<ElSelect />`)
-					 * (i.e: from the perspective of the input, it's a different component, so the input blurs).
-					 *
-					 * For a smooth experience, we set `softFocus` which focuses on the input
-					 * without making the dropdown visible
-					 * [setSoftFocus()]{@link ./node_modules/element-ui/packages/select/src/select.vue}
-					 */
-					;(elSelect as ElSelectWithInternalAPI).setSoftFocus()
-				}
-			},
-			handleFieldMouseDown: () => {
-				/**
-				 * mousedown handlers get triggered first
-				 * so we use them to set flags that should initiate actions
-				 * when their corresponding click handlers are called
-				 * the combination of a mouse-down handler and a click handler lets us define a start
-				 * and an end marker to a flow of events that uniquely identifies scenarios.
-				 *
-				 * If the dropdown was closed before, the field should be focused and the dropdown should open
-				 * on the corresponding click handler `handleFieldClick`
-				 */
-				if (!isDropdownOpen.value) scheduleFocusAfterFieldClick.value = true
-			},
-
-			elSingleSelectProps: computed(
-				(): Partial<ElSelect> => ({
-					defaultFirstOption: true,
-					disabled: field.isDisabled,
-					filterable: true,
-					loadingText: translations.value.loadingText,
-					noDataText: translations.value.noDataText,
-					noMatchText: translations.value.noMatchText,
-					placeholder: props.placeholder ?? '',
-					value: field.currentValue,
-				}),
-			),
-			isDropdownOpen,
-			ktFieldRef,
-			onChange: (value: KottiFieldSingleSelect.Value) => {
-				field.setValue(value)
+			onEmit: ({ event, payload }: { event: string; payload: unknown }) => {
+				emit(event, payload)
 			},
+			props,
 		}
 	},
 })
 </script>
-
-<style lang="scss">
-@import 'styles';
-</style>
diff --git a/packages/kotti-ui/source/kotti-field-select/KtFieldSingleSelectRemote.vue b/packages/kotti-ui/source/kotti-field-select/KtFieldSingleSelectRemote.vue
index 7c8d67e515..72b622a9d6 100644
--- a/packages/kotti-ui/source/kotti-field-select/KtFieldSingleSelectRemote.vue
+++ b/packages/kotti-ui/source/kotti-field-select/KtFieldSingleSelectRemote.vue
@@ -1,280 +1,37 @@
 <template>
-	<div>
-		<div ref="tippyTriggerRef">
-			<KtField
-				v-bind="{ field }"
-				class="kt-field-select kt-field-select--single-remote"
-				:getEmptyValue="() => null"
-				:helpTextSlot="$slots.helpText"
-			>
-				<input
-					v-bind="inputProps"
-					@blur="handleInputBlur"
-					@click="handleInputClick"
-					@focus="handleInputFocus"
-					@input="updateQuery"
-				/>
-
-				<template v-slot:actionIcon="{ classes, handleClear, showClear }">
-					<ActionIconNext
-						v-bind="{
-							classes,
-							handleClear,
-							isDropdownOpen,
-							showClear,
-						}"
-					/>
-				</template>
-			</KtField>
-		</div>
-
-		<div ref="tippyContentRef" class="kt-field-select--single-remote__tippy">
-			<IconTextItem
-				v-for="(option, index) in modifiedOptions"
-				:key="index"
-				:dataTest="option.dataTest"
-				:isClickable="option.isClickable"
-				:isDisabled="option.isDisabled"
-				:isSelected="option.isSelected"
-				:label="option.label"
-				@click.stop="() => selectOption(option)"
-			/>
-		</div>
-	</div>
+	<GenericSelectField
+		v-bind="props"
+		:helpTextSlot="$slots.helpText"
+		isRemote
+		@emit="onEmit"
+	>
+		<template #option="values">
+			<slot v-bind="values" name="option" />
+		</template>
+	</GenericSelectField>
 </template>
 
 <script lang="ts">
-import { useTippy } from '@3yourmind/vue-use-tippy'
-import { computed, defineComponent, ref, watch } from '@vue/composition-api'
-import { castArray } from 'lodash'
-import { roundArrow } from 'tippy.js'
+import { defineComponent } from '@vue/composition-api'
 
-import { KtField } from '../kotti-field'
-import { useField } from '../kotti-field/hooks'
-import { useForceUpdate } from '../kotti-field/hooks'
-import { useTranslationNamespace } from '../kotti-i18n/hooks'
-import IconTextItem from '../kotti-popover/components/IconTextItem.vue'
 import { makeProps } from '../make-props'
 
-import ActionIconNext from './components/ActionIconNext.vue'
-import { KOTTI_FIELD_REMOTE_SELECT_SUPPORTS } from './constants'
-import { KottiFieldSingleSelectRemote, Shared } from './types'
-import { sameWidth } from './utils/tippy-utils'
-
-const ARROW_HEIGHT = 7
-const NO_DATA = Symbol('NO_DATA')
-const UPDATE_QUERY = 'update:query'
-
-const isTippyOrInTippy = (element: Element, tippy: Element | null): boolean => {
-	if (tippy === null) return false
-
-	let currentElement = element
-
-	while (currentElement) {
-		if (currentElement.isSameNode(tippy)) return true
-		currentElement = currentElement?.parentElement
-	}
-
-	return false
-}
-
-const isEqualValue = (
-	currentValue: KottiFieldSingleSelectRemote.Value,
-	newValue: KottiFieldSingleSelectRemote.Value,
-) => currentValue === newValue
-
-type ModifiedOptions = Array<
-	Omit<Shared.Entry, 'value'> & {
-		isClickable: boolean
-		isSelected: boolean
-		value: KottiFieldSingleSelectRemote.Value | symbol
-	}
->
+import GenericSelectField from './components/GenericSelectField.vue'
+import { KottiFieldSingleSelectRemote } from './types'
 
-export default defineComponent<KottiFieldSingleSelectRemote.PropsInternal>({
+export default defineComponent({
 	name: 'KtFieldSingleSelectRemote',
 	components: {
-		ActionIconNext,
-		IconTextItem,
-		KtField,
+		GenericSelectField,
 	},
 	props: makeProps(KottiFieldSingleSelectRemote.propsSchema),
-	setup(props, { emit }) {
-		const field = useField<KottiFieldSingleSelectRemote.Value>({
-			emit,
-			isEmpty: (value) => value === null,
-			props,
-			supports: KOTTI_FIELD_REMOTE_SELECT_SUPPORTS,
-		})
-		const translations = useTranslationNamespace('KtFieldSelects')
-
-		const tippyTriggerRef = ref<Element | null>(null)
-		const tippyContentRef = ref<Element | null>(null)
-
-		// track in a ref because the `tippy.state.isShown` doesn’t immediately update
-		const isDropdownOpen = ref(false)
-
-		const { tippy } = useTippy(
-			tippyTriggerRef,
-			computed(() => ({
-				appendTo: () => document.body,
-				arrow: roundArrow,
-				content: tippyContentRef.value,
-				// hides the tippy if we click-away from the tippy
-				hideOnClick: true,
-				interactive: true,
-				maxWidth: 'none',
-				offset: [0, ARROW_HEIGHT],
-				onShow: () => {
-					isDropdownOpen.value = true
-				},
-				onHide: () => {
-					isDropdownOpen.value = false
-				},
-				placement: 'bottom',
-				popperOptions: {
-					modifiers: [sameWidth],
-				},
-				theme: 'light-border',
-				trigger: 'manual',
-			})),
-		)
-
-		const isInputFocused = ref(false)
-		const selectedLabel = computed((): string | null => {
-			if (field.currentValue === null) return null
-			return (
-				props.options.find((option) => option.value === field.currentValue)
-					?.label ?? null
-			)
-		})
-
-		const { forceUpdateKey, forceUpdate } = useForceUpdate()
-
-		const setIsDropdownOpen = (showTippy: boolean) => {
-			if (!tippy.value) return
-
-			const tippys = castArray(tippy.value)
-
-			for (const tippy of tippys) {
-				if (showTippy) tippy.show()
-				else tippy.hide()
-			}
-		}
-
-		const isUserInteracting = computed(
-			() => isInputFocused.value || isDropdownOpen.value,
-		)
-		watch(isUserInteracting, (newValue) => {
-			if (!newValue) emit(UPDATE_QUERY, null)
-		})
-
+	setup(props: KottiFieldSingleSelectRemote.PropsInternal, { emit }) {
 		return {
-			field,
-			handleInputBlur: (event: { relatedTarget: HTMLElement }) => {
-				const blurToElement = event.relatedTarget
-				if (!isTippyOrInTippy(blurToElement, tippyContentRef.value)) {
-					setIsDropdownOpen(false)
-				}
-
-				isInputFocused.value = false
-			},
-			handleInputClick: () => {
-				// always show the dropdown if the input was clicked
-				setIsDropdownOpen(true)
-			},
-			handleInputFocus: () => {
-				// always show the dropdown if the input was focused
-				setIsDropdownOpen(true)
-
-				isInputFocused.value = true
-			},
-			inputProps: computed(() => ({
-				class: ['kt-field-select--single-remote__wrapper'],
-				forceUpdateKey: forceUpdateKey.value,
-				placeholder: props.placeholder ?? undefined,
-				size: 1,
-				type: 'text',
-				value: (() => {
-					if (isUserInteracting.value) return props.query ?? undefined
-
-					return selectedLabel.value ?? undefined
-				})(),
-			})),
-			isDropdownOpen,
-			modifiedOptions: computed<ModifiedOptions>(() =>
-				props.options.length > 0
-					? props.options.map((option) => ({
-							// Vetur parses Shared.Entry['value'] as optional
-							// eslint-disable-next-line @typescript-eslint/no-explicit-any
-							...(option as any),
-							isDisabled: (field.isDisabled || option.isDisabled) ?? false,
-							isSelected: isEqualValue(field.currentValue, option.value),
-							isClickable: true,
-					  }))
-					: [
-							{
-								dataTest: String(NO_DATA),
-								isDisabled: true,
-								isClickable: false,
-								isSelected: false,
-								label: translations.value.noDataText,
-								value: NO_DATA,
-							},
-					  ],
-			),
-			tippyTriggerRef,
-			tippyContentRef,
-			selectOption: (
-				option: KottiFieldSingleSelectRemote.Props['options'][number],
-			) => {
-				// ignore disabled options
-				if (option.isDisabled) return
-
-				// optimization: no need to change the value if it’s already set
-				if (!isEqualValue(field.currentValue, option.value))
-					field.setValue(option.value)
-
-				// close the tippy instance whenever a selection is made
-				setIsDropdownOpen(false)
-
-				// when a selection is made, intentionally reset the query
-				// so that the api-call (for example) can already trigger
-				// and load the non-filtered options
-				emit(UPDATE_QUERY, null)
-			},
-			updateQuery: (event: { target: HTMLInputElement }) => {
-				const newValue = event.target.value
-
-				emit(UPDATE_QUERY, newValue === '' ? null : newValue)
-
-				forceUpdate()
+			onEmit: ({ event, payload }: { event: string; payload: unknown }) => {
+				emit(event, payload)
 			},
+			props,
 		}
 	},
 })
 </script>
-
-<style lang="scss" scoped>
-.kt-field-select--single-remote {
-	&__wrapper {
-		display: flex;
-		width: 100%;
-		padding: 0;
-		margin: 0;
-		line-height: 1.6;
-		border: 0;
-	}
-
-	&__tippy {
-		max-height: 40vh;
-		/*
-		  undo padding from theme,
-		  alternatively fork theme and remove the left/right padding
-		*/
-		margin-right: -9px;
-		margin-left: -9px;
-		overflow-y: auto;
-	}
-}
-</style>
diff --git a/packages/kotti-ui/source/kotti-field-select/components/ActionIcon.vue b/packages/kotti-ui/source/kotti-field-select/components/ActionIcon.vue
index a068a81fd8..c0be40bf74 100644
--- a/packages/kotti-ui/source/kotti-field-select/components/ActionIcon.vue
+++ b/packages/kotti-ui/source/kotti-field-select/components/ActionIcon.vue
@@ -2,66 +2,45 @@
 	<div
 		:class="classes"
 		role="button"
-		@click="handleChevronClick"
-		@mouseenter="hoverOnClear = true"
-		@mouseleave="hoverOnClear = false"
+		@mouseenter="hoverOnClearIcon = true"
+		@mouseleave="hoverOnClearIcon = false"
 	>
-		<i class="yoco" v-text="icon" />
+		<i class="yoco" @click.stop="handleClearIfShown" v-text="icon" />
 	</div>
 </template>
 
 <script lang="ts">
 import { Yoco } from '@3yourmind/yoco'
 import { defineComponent, ref, computed } from '@vue/composition-api'
-import { Select as ElSelect } from 'element-ui'
 
 export default defineComponent({
 	name: 'ActionIcon',
 	props: {
 		classes: { required: true, type: Array },
-		elSelectRef: {
-			type: Object,
-			/**
-			 * Vue doesn’t appear to allow type: [Object, null]. Therefore, we need to work around
-			 * this by not using required and instead having a validator that can distinguish
-			 * between not passing a prop (undefined) and explicitly passing a value (null)
-			 */
-			validator: (value) => value !== undefined,
-		},
 		handleClear: { required: true, type: Function },
 		isDropdownOpen: { required: true, type: Boolean },
 		showClear: { required: true, type: Boolean },
 	},
 	setup(props: {
 		classes: string[]
-		elSelectRef:
-			| (ElSelect & {
-					inputWidth: number
-					setSoftFocus(): void
-			  })
-			| null
 		handleClear(): void
 		isDropdownOpen: boolean
 		showClear: boolean
 	}) {
-		const hoverOnClear = ref(false)
+		const hoverOnClearIcon = ref(false)
 
-		return {
-			handleChevronClick: ($event: { stopPropagation(): void }) => {
-				if (props.elSelectRef === null)
-					throw new Error('ElSelect is not ready yet')
-
-				if (props.showClear) {
-					$event.stopPropagation()
-					props.handleClear()
+		const canClear = computed<boolean>(
+			() => props.showClear && hoverOnClearIcon.value,
+		)
 
-					props.elSelectRef.setSoftFocus()
-				}
+		return {
+			handleClearIfShown: () => {
+				if (canClear.value) props.handleClear()
 			},
-			hoverOnClear,
+			hoverOnClearIcon,
 			icon: computed(
 				(): Yoco.Icon =>
-					hoverOnClear.value && props.showClear
+					canClear.value
 						? Yoco.Icon.CLOSE
 						: props.isDropdownOpen
 						? Yoco.Icon.CHEVRON_UP
diff --git a/packages/kotti-ui/source/kotti-field-select/components/ActionIconNext.vue b/packages/kotti-ui/source/kotti-field-select/components/ActionIconNext.vue
deleted file mode 100644
index 6f3386a64e..0000000000
--- a/packages/kotti-ui/source/kotti-field-select/components/ActionIconNext.vue
+++ /dev/null
@@ -1,55 +0,0 @@
-<template>
-	<div
-		:class="classes"
-		role="button"
-		@mouseenter="hoverOnClearIcon = true"
-		@mouseleave="hoverOnClearIcon = false"
-	>
-		<i class="yoco" @click.stop="handleClearIfShown" v-text="icon" />
-	</div>
-</template>
-
-<script lang="ts">
-import { Yoco } from '@3yourmind/yoco'
-import { defineComponent, ref, computed } from '@vue/composition-api'
-
-/**
- * eventually, when element-ui is no longer used (ActionIcon.vue is deleted) this should replace it.
- */
-export default defineComponent<{
-	classes: string[]
-	handleClear(): void
-	isDropdownOpen: boolean
-	showClear: boolean
-}>({
-	name: 'ActionIconNext',
-	props: {
-		classes: { required: true, type: Array },
-		handleClear: { required: true, type: Function },
-		isDropdownOpen: { required: true, type: Boolean },
-		showClear: { required: true, type: Boolean },
-	},
-	setup(props) {
-		const hoverOnClearIcon = ref(false)
-
-		const canClear = computed<boolean>(
-			() => props.showClear && hoverOnClearIcon.value,
-		)
-
-		return {
-			handleClearIfShown: () => {
-				if (canClear.value) props.handleClear()
-			},
-			hoverOnClearIcon,
-			icon: computed(
-				(): Yoco.Icon =>
-					canClear.value
-						? Yoco.Icon.CLOSE
-						: props.isDropdownOpen
-						? Yoco.Icon.CHEVRON_UP
-						: Yoco.Icon.CHEVRON_DOWN,
-			),
-		}
-	},
-})
-</script>
diff --git a/packages/kotti-ui/source/kotti-field-select/components/GenericSelectField.vue b/packages/kotti-ui/source/kotti-field-select/components/GenericSelectField.vue
new file mode 100644
index 0000000000..5b0f19546f
--- /dev/null
+++ b/packages/kotti-ui/source/kotti-field-select/components/GenericSelectField.vue
@@ -0,0 +1,398 @@
+<template>
+	<div :class="fieldSelectClasses">
+		<div ref="tippyTriggerRef">
+			<KtField
+				v-bind="{ field }"
+				:getEmptyValue="() => (isMultiple ? [] : null)"
+				:helpTextSlot="helpTextSlot"
+			>
+				<div class="kt-field-select__input-and-tags">
+					<div
+						v-for="option in visibleSelectedTags"
+						:key="option.value"
+						class="kt-field-select__tag"
+					>
+						<div class="kt-field-select__tag-text" v-text="option.label" />
+						<div
+							v-if="!(field.isDisabled || Boolean(option.isDisabled))"
+							class="kt-field-select__tag-icon"
+							@click.stop.prevent="removeTag(option.value)"
+						>
+							<i class="yoco" v-text="Yoco.Icon.CLOSE" />
+						</div>
+					</div>
+					<div v-if="collapsedTagCount > 0" class="kt-field-select__tag">
+						<div
+							class="kt-field-select__tag-text"
+							v-text="`+${collapsedTagCount}`"
+						/>
+					</div>
+					<input
+						ref="inputRef"
+						v-bind="inputProps"
+						@input="updateQuery"
+						@keydown.delete="onPressDelete"
+						@keydown.down.prevent
+						@keydown.enter.prevent
+						@keydown.up.prevent
+					/>
+				</div>
+				<template v-slot:actionIcon="{ classes, handleClear, showClear }">
+					<ActionIcon
+						v-bind="{
+							classes,
+							handleClear,
+							isDropdownOpen,
+							showClear,
+						}"
+					/>
+				</template>
+			</KtField>
+		</div>
+		<div ref="tippyContentRef">
+			<FieldSelectOptions
+				:actions="actions"
+				:dataTestPrefix="inputProps['data-test']"
+				:isDisabled="field.isDisabled"
+				:isDropdownOpen="isDropdownOpen"
+				:isLoading="isLoadingOptions"
+				:isMultiple="isMultiple"
+				:isUnsorted="isUnsorted"
+				:maximumSelectable="maximumSelectable"
+				:options="filteredOptions"
+				:value="optionsValue"
+				@close="setIsDropdownOpen(false)"
+				@input="onOptionsInput"
+			>
+				<template #option="values">
+					<slot v-bind="values" name="option" />
+				</template>
+			</FieldSelectOptions>
+		</div>
+	</div>
+</template>
+
+<script lang="ts">
+import { Yoco } from '@3yourmind/yoco'
+import { computed, defineComponent, ref, watch } from '@vue/composition-api'
+import { z } from 'zod'
+
+import { KtField } from '../../kotti-field'
+import { useField } from '../../kotti-field/hooks'
+import { useForceUpdate } from '../../kotti-field/hooks'
+import { makeProps } from '../../make-props'
+import { KOTTI_FIELD_SELECT_SUPPORTS } from '../constants'
+import { useSelectTippy } from '../hooks/use-select-tippy'
+import {
+	KottiFieldSingleSelectRemote,
+	KottiFieldSingleSelect,
+	KottiFieldMultiSelect,
+	KottiFieldMultiSelectRemote,
+	Shared,
+} from '../types'
+
+import ActionIcon from './ActionIcon.vue'
+import FieldSelectOptions from './Options.vue'
+
+const UPDATE_QUERY = 'update:query'
+
+const propsSchema = Shared.propsSchema
+	.merge(Shared.isMultipleSchema)
+	.merge(Shared.isRemoteSchema)
+	.merge(Shared.isSingleSchema)
+	.omit({ value: true })
+	.extend({
+		helpTextSlot: z.array(z.unknown()).default(() => []),
+		isMultiple: z.boolean().default(false),
+		isRemote: z.boolean().default(false),
+		value: z.union([
+			Shared.isMultipleSchema.shape.value,
+			Shared.isSingleSchema.shape.value,
+		]),
+	})
+
+type SingleValue =
+	| KottiFieldSingleSelect.Value
+	| KottiFieldSingleSelectRemote.Value
+
+type MultiValue =
+	| KottiFieldMultiSelect.Value
+	| KottiFieldMultiSelectRemote.Value
+
+export default defineComponent({
+	name: 'GenericSelectField',
+	components: {
+		ActionIcon,
+		FieldSelectOptions,
+		KtField,
+	},
+	props: makeProps(propsSchema),
+	setup(props: z.output<typeof propsSchema>, { emit: rawEmit }) {
+		const emit = (event: string, payload: unknown) =>
+			rawEmit('emit', { event, payload })
+
+		const field = useField<SingleValue | MultiValue>({
+			emit,
+			isEmpty: (value) =>
+				props.isMultiple
+					? (value as MultiValue).length === 0
+					: (value as SingleValue) === null,
+			props,
+			supports: KOTTI_FIELD_SELECT_SUPPORTS,
+		})
+
+		const inputRef = ref<HTMLInputElement | null>(null)
+
+		const localQuery = ref<string | null>(null)
+
+		const { forceUpdateKey, forceUpdate } = useForceUpdate()
+
+		const { isDropdownOpen, isDropdownMounted, ...selectTippy } =
+			useSelectTippy()
+
+		watch(isDropdownMounted, (isMounted) => {
+			if (isMounted) return
+
+			if (props.isRemote) {
+				if (props.query !== null) emit(UPDATE_QUERY, null)
+			} else localQuery.value = null
+		})
+
+		watch(isDropdownOpen, (isOpen) => {
+			if (!isOpen) return
+
+			inputRef.value?.focus()
+		})
+
+		const queryValue = computed(() =>
+			props.isRemote ? props.query : localQuery.value,
+		)
+
+		/**
+		 * keeps reference of already seen option labels so that
+		 * the tags can be rendered properly when filtering remotely
+		 */
+		const seenValueLabelMap = ref<Map<Shared.Value, Shared.Option['label']>>(
+			new Map(),
+		)
+
+		watch(
+			() => props.options,
+			() => {
+				seenValueLabelMap.value = new Map([
+					...seenValueLabelMap.value,
+					...props.options.map(
+						(option): [Shared.Value, Shared.Option['label']] => [
+							option.value,
+							option.label,
+						],
+					),
+				])
+			},
+			{ immediate: true },
+		)
+
+		const isInputVisible = computed(
+			// save some space in multi select when tags are shown
+			() => !props.isMultiple || isDropdownOpen.value || field.isEmpty,
+		)
+
+		return {
+			collapsedTagCount: computed(() =>
+				props.isMultiple
+					? (field.currentValue as MultiValue).length - props.collapseTagsAfter
+					: 0,
+			),
+			field,
+			fieldSelectClasses: computed(() => ({
+				'kt-field-select': true,
+				'kt-field-select--is-input-visible': !isInputVisible.value,
+			})),
+			filteredOptions: computed(() =>
+				props.isRemote
+					? props.options
+					: props.options.filter(
+							(o) =>
+								localQuery.value === null ||
+								o.label.toLowerCase().includes(localQuery.value.toLowerCase()),
+					  ),
+			),
+			inputProps: computed(() => ({
+				...field.inputProps,
+				class: ['kt-field-select__wrapper'],
+				forceUpdateKey: forceUpdateKey.value,
+				placeholder: props.placeholder ?? undefined,
+				size: 1,
+				type: 'text',
+				value: (() => {
+					if (isDropdownOpen.value) return queryValue.value ?? undefined
+
+					// can't bind multiple values to input (therefore, we just bind `undefined`)
+					if (field.currentValue === null || props.isMultiple) return undefined
+
+					return props.options.find(
+						(option) => option.value === field.currentValue,
+					)?.label
+				})(),
+			})),
+			inputRef,
+			isDropdownOpen,
+			tippyContentRef: selectTippy.tippyContentRef,
+			tippyTriggerRef: selectTippy.tippyTriggerRef,
+			onOptionsInput: (value: MultiValue) => {
+				field.setValue(props.isMultiple ? value : value?.[0] ?? null)
+
+				inputRef.value?.focus()
+				// single select: close the tippy instance whenever a selection is made.
+				// This (watcher on isDropdownMounted) also intentionally resets the query
+				// so that the api-call (for example) can already trigger and load the non-filtered options
+				if (!props.isMultiple) selectTippy.setIsDropdownOpen(false)
+			},
+			onPressDelete: () => {
+				if (queryValue.value || !props.isMultiple) return // only delete value if query is already empty
+
+				const value = field.currentValue as MultiValue
+				if (value.length > 0) field.setValue(value.slice(0, -1))
+			},
+			optionsValue: computed(() => {
+				if (props.isMultiple) return field.currentValue as MultiValue
+				else
+					return field.currentValue === null
+						? []
+						: [field.currentValue as SingleValue]
+			}),
+			removeTag: (value: Shared.Option['value']) => {
+				if (!props.isMultiple)
+					throw new Error(
+						'GenericSelectField: Unexpected multi function on single select',
+					)
+
+				field.setValue(
+					(field.currentValue as MultiValue).filter((v) => v !== value),
+				)
+			},
+			setIsDropdownOpen: selectTippy.setIsDropdownOpen,
+			updateQuery: ({ target: { value } }: { target: HTMLInputElement }) => {
+				if (!isDropdownOpen.value) {
+					selectTippy.setIsDropdownOpen(true)
+				} else {
+					const newValue = value === '' ? null : value
+
+					if (props.isRemote && props.query !== newValue)
+						emit(UPDATE_QUERY, newValue)
+					else localQuery.value = newValue
+				}
+
+				forceUpdate()
+			},
+			visibleSelectedTags: computed(() =>
+				props.isMultiple
+					? (field.currentValue as MultiValue)
+							.filter((_, index) => index < props.collapseTagsAfter)
+							.map(
+								(value): Shared.Option =>
+									props.options.find((option) => option.value === value) ?? {
+										label: seenValueLabelMap.value.get(value) ?? String(value),
+										value,
+									},
+							)
+					: [],
+			),
+			Yoco,
+		}
+	},
+})
+</script>
+
+<style lang="scss" scoped>
+.kt-field-select {
+	&:not(:last-child) {
+		margin-bottom: 0.8rem;
+	}
+
+	// can't rely on v-if because the field wouldn't be focusable
+	&.kt-field-select--is-input-visible {
+		position: relative;
+
+		.kt-field-select__wrapper {
+			position: absolute;
+			left: -10000px;
+			pointer-events: none;
+		}
+	}
+
+	&__query {
+		display: flex;
+		flex: 1;
+		width: 100%;
+		padding: 0;
+		margin: 0;
+		line-height: 1.6;
+		border: 0;
+	}
+
+	$vertical-tag-gap: 2px;
+	$horizontal-tag-gap: 4px;
+	$tag-padding: 0.4em;
+	$tag-border: 1px;
+
+	&__input-and-tags {
+		display: flex;
+		flex-wrap: wrap;
+
+		// HACK: use negative margins to align multi-line grids of tags
+		margin: #{-$vertical-tag-gap + 4px} #{-$horizontal-tag-gap};
+	}
+
+	&__tag {
+		display: flex;
+		align-items: center;
+		padding: $tag-padding;
+		margin: $vertical-tag-gap $horizontal-tag-gap;
+
+		font-size: 0.875em;
+
+		color: var(--text-02);
+		text-transform: capitalize;
+		white-space: nowrap;
+		background-color: var(--interactive-02);
+		border: $tag-border solid var(--ui-02);
+		border-radius: var(--field-border-radius);
+
+		&-icon {
+			$size: 1.25em;
+
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			width: $size;
+			height: $size;
+			margin-left: 4px;
+			cursor: pointer;
+
+			background-color: var(--ui-02);
+			border-radius: 50%;
+
+			// clipping also affects the clickable area
+			@supports (clip-path: circle(#{$size / 2} at center)) {
+				clip-path: circle(#{$size / 2} at center);
+				border-radius: 0;
+			}
+
+			&:hover {
+				background-color: var(--interactive-02-hover);
+			}
+		}
+	}
+
+	&__wrapper {
+		display: flex;
+		flex: 1;
+		min-width: 30%;
+		padding: 0;
+		margin: 0;
+		line-height: 1.6;
+		border: 0;
+	}
+}
+</style>
diff --git a/packages/kotti-ui/source/kotti-field-select/components/Options.vue b/packages/kotti-ui/source/kotti-field-select/components/Options.vue
new file mode 100644
index 0000000000..9a04293708
--- /dev/null
+++ b/packages/kotti-ui/source/kotti-field-select/components/Options.vue
@@ -0,0 +1,252 @@
+<template>
+	<div ref="optionsRef" class="kt-field-select__options">
+		<div v-if="isLoading" class="kt-field-select__options__loading">
+			<div class="loading" />
+		</div>
+		<FieldSelectOptionsItem
+			v-if="modifiedOptions.length === 0"
+			dataTest="NO_DATA"
+			isDisabled
+			:label="translations.noDataText"
+			type="option"
+			@scrollTo="scrollTo"
+		/>
+		<FieldSelectOptionsItem
+			v-for="(option, index) in modifiedOptions"
+			:key="`option-${index}`"
+			:dataTest="option.dataTest"
+			:isDisabled="option.isDisabled"
+			:isHovered="isHovered('option', index)"
+			:isSelected="option.isSelected"
+			:label="option.label"
+			type="option"
+			@click="() => selectOption(option)"
+			@scrollTo="scrollTo"
+		>
+			<slot
+				v-bind="{ index, option, select: () => selectOption(option) }"
+				name="option"
+			/>
+		</FieldSelectOptionsItem>
+		<div v-if="actions.length" class="kt-field-select__options__separator" />
+		<FieldSelectOptionsItem
+			v-for="(action, index) in actions"
+			:key="`action-${index}`"
+			:isHovered="isHovered('action', index)"
+			:label="action.label"
+			type="action"
+			@click="() => onAction(action)"
+			@scrollTo="scrollTo"
+		/>
+	</div>
+</template>
+
+<script lang="ts">
+import {
+	computed,
+	defineComponent,
+	onBeforeMount,
+	onUnmounted,
+	ref,
+	watch,
+} from '@vue/composition-api'
+import { z } from 'zod'
+
+import { useTranslationNamespace } from '../../kotti-i18n/hooks'
+import { makeProps } from '../../make-props'
+import { Shared } from '../types'
+
+import FieldSelectOptionsItem from './OptionsItem.vue'
+
+const propsSchema = z.object({
+	actions: z.array(Shared.actionSchema),
+	dataTestPrefix: z.string(),
+	isDisabled: z.boolean().default(false),
+	isDropdownOpen: z.boolean().default(false),
+	isLoading: z.boolean().default(false),
+	isMultiple: z.boolean().default(false),
+	isUnsorted: z.boolean().default(false),
+	maximumSelectable: z.number().int().min(0),
+	options: z.array(Shared.optionSchema),
+	value: z.array(Shared.valueSchema),
+})
+
+type ModifiedOption = z.output<
+	typeof propsSchema['shape']['options']
+>[number] & {
+	isSelected: boolean
+}
+
+const mod = (number: number, divisor: number) =>
+	((number % divisor) + divisor) % divisor
+
+export default defineComponent({
+	name: 'FieldSelectOptions',
+	components: {
+		FieldSelectOptionsItem,
+	},
+	props: makeProps(propsSchema),
+	setup(props: z.output<typeof propsSchema>, { emit }) {
+		const translations = useTranslationNamespace('KtFieldSelects')
+
+		const optionsRef = ref<HTMLDivElement | null>(null)
+
+		const modifiedOptions = computed(() => {
+			const isLimitReached =
+				props.isMultiple && props.value.length >= props.maximumSelectable
+
+			const modifiedOptions: ModifiedOption[] = props.options.map((option) => {
+				const isSelected = props.value.includes(option.value)
+
+				return {
+					...option,
+					dataTest:
+						option.dataTest ?? `${props.dataTestPrefix}.${option.value}`,
+					isDisabled:
+						props.isDisabled ||
+						option.isDisabled ||
+						(isLimitReached && !isSelected),
+					isSelected,
+				}
+			})
+
+			if (props.isUnsorted) return modifiedOptions
+
+			return modifiedOptions.sort((a, b) => a.label.localeCompare(b.label))
+		})
+
+		const hoveredIndex = ref(-1)
+		const resetHoveredIndex = () => (hoveredIndex.value = -1)
+
+		watch(
+			() => props.isDropdownOpen,
+			(isOpen) => {
+				if (!isOpen) resetHoveredIndex()
+			},
+		)
+
+		const itemCount = computed(
+			() => modifiedOptions.value.length + props.actions.length,
+		)
+
+		watch(itemCount, (newValue, oldValue) => {
+			if (newValue !== oldValue) resetHoveredIndex()
+		})
+
+		const selectOption = (option: ModifiedOption) => {
+			if (option.isDisabled) return
+
+			if (props.isMultiple)
+				emit(
+					'input',
+					props.value.includes(option.value)
+						? props.value.filter((v) => v !== option.value)
+						: [...props.value, option.value],
+				)
+			else
+				emit('input', props.value.includes(option.value) ? [] : [option.value])
+		}
+
+		const onAction = (action: z.output<typeof Shared.actionSchema>) => {
+			emit('close')
+
+			action.onClick()
+		}
+
+		const listener = (event: KeyboardEvent) => {
+			if (!props.isDropdownOpen) return
+
+			switch (event.key) {
+				case 'ArrowDown': {
+					hoveredIndex.value = mod(hoveredIndex.value + 1, itemCount.value)
+					return
+				}
+
+				case 'ArrowUp': {
+					hoveredIndex.value = mod(hoveredIndex.value - 1, itemCount.value)
+					return
+				}
+
+				case 'Enter': {
+					const index = hoveredIndex.value
+					const optionsLength = modifiedOptions.value.length
+
+					if (index < 0) return
+
+					if (index < optionsLength)
+						return selectOption(modifiedOptions.value[index])
+
+					return onAction(props.actions[index - optionsLength])
+				}
+			}
+		}
+
+		onBeforeMount(() => {
+			window.addEventListener('keydown', listener)
+		})
+
+		onUnmounted(() => {
+			window.removeEventListener('keydown', listener)
+		})
+
+		return {
+			isHovered: (type: 'action' | 'option', index: number) => {
+				const optionsCount = props.options.length
+
+				switch (type) {
+					case 'action':
+						return index === hoveredIndex.value - optionsCount
+
+					case 'option':
+						return index === hoveredIndex.value
+
+					default:
+						throw new Error(`Options.vue: unrecognized type “${type}”`)
+				}
+			},
+			modifiedOptions,
+			onAction,
+			optionsRef,
+			scrollTo: (optionDistanceToOptionsTop: number) => {
+				if (optionsRef.value === null)
+					throw new Error('Unexpected Unbound optionsRef: null')
+
+				optionsRef.value.scrollTo({ top: optionDistanceToOptionsTop })
+			},
+			selectOption,
+			translations,
+		}
+	},
+})
+</script>
+
+<style lang="scss" scoped>
+@import '../../kotti-field/mixins.scss';
+
+.kt-field-select__options {
+	position: relative;
+
+	@include prettify-scrollbar;
+
+	max-height: 40vh;
+	/*
+	  undo padding from theme,
+	  alternatively fork theme and remove the left/right padding
+	*/
+	margin-right: -9px;
+	margin-left: -9px;
+	overflow: auto;
+
+	&__loading {
+		position: absolute;
+		top: var(--unit-2);
+		right: var(--unit-6);
+	}
+
+	&__separator {
+		height: var(--unit-q);
+		margin: var(--unit-1) 0;
+		background-color: var(--gray-20);
+	}
+}
+</style>
diff --git a/packages/kotti-ui/source/kotti-field-select/components/OptionsItem.vue b/packages/kotti-ui/source/kotti-field-select/components/OptionsItem.vue
new file mode 100644
index 0000000000..4b7e8bc4a9
--- /dev/null
+++ b/packages/kotti-ui/source/kotti-field-select/components/OptionsItem.vue
@@ -0,0 +1,99 @@
+<template>
+	<div
+		ref="optionRef"
+		:class="classes"
+		:data-test="dataTest"
+		@click.stop="(e) => $emit('click', e)"
+	>
+		<slot>
+			{{ label }}
+		</slot>
+	</div>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, ref, watch } from '@vue/composition-api'
+import { z } from 'zod'
+
+import { makeProps } from '../../make-props'
+
+const propsSchema = z.object({
+	dataTest: z.string().nullable().default(null),
+	isDisabled: z.boolean().default(false),
+	isHovered: z.boolean().default(false),
+	isSelected: z.boolean().default(false),
+	label: z.string(),
+	type: z.enum(['action', 'option']),
+})
+
+export default defineComponent({
+	name: 'FieldSelectOptionsItem',
+	props: makeProps(propsSchema),
+	setup(props: z.output<typeof propsSchema>, { emit }) {
+		const optionRef = ref<HTMLDivElement | null>(null)
+
+		watch(
+			() => props.isHovered,
+			(isHovered, wasHovered) => {
+				if (optionRef.value === null)
+					throw new Error('Unexpected Unbound option ref: null')
+
+				if (isHovered && !wasHovered) {
+					const distanceFromParentTop = optionRef.value.offsetTop
+
+					emit('scrollTo', distanceFromParentTop)
+				}
+			},
+		)
+
+		return {
+			classes: computed(() => ({
+				'kt-field-select-options-item': true,
+				'kt-field-select-options-item--is-disabled': props.isDisabled,
+				'kt-field-select-options-item--is-hovered': props.isHovered,
+				'kt-field-select-options-item--is-selected': props.isSelected,
+				[`kt-field-select-options-item--is-type-${props.type}`]: true,
+			})),
+			optionRef,
+		}
+	},
+})
+</script>
+
+<style lang="scss" scoped>
+.kt-field-select-options-item {
+	display: flex;
+	align-items: center;
+	padding: var(--unit-2) var(--unit-4);
+	cursor: pointer;
+
+	&--is-disabled {
+		cursor: not-allowed;
+		opacity: 0.46;
+	}
+
+	&--is-selected {
+		font-weight: 700;
+		color: var(--interactive-03);
+	}
+
+	&--is-type-action {
+		color: var(--interactive-01);
+
+		&:hover {
+			background-color: var(--ui-01);
+		}
+	}
+
+	&:not(.kt-select-options-item--is-disabled) {
+		&:hover,
+		&.kt-field-select-options-item--is-hovered {
+			background-color: var(--ui-01);
+
+			&.kt-select-options-item--is-selected {
+				color: var(--interactive-01-hover);
+			}
+		}
+	}
+}
+</style>
diff --git a/packages/kotti-ui/source/kotti-field-select/constants.ts b/packages/kotti-ui/source/kotti-field-select/constants.ts
index 92d53e8655..10c9e9da42 100644
--- a/packages/kotti-ui/source/kotti-field-select/constants.ts
+++ b/packages/kotti-ui/source/kotti-field-select/constants.ts
@@ -1,15 +1,8 @@
 import { KottiField } from '../kotti-field/types'
 
-export const KOTTI_FIELD_REMOTE_SELECT_SUPPORTS: KottiField.Supports = {
-	clear: true,
-	decoration: true,
-	placeholder: true,
-	tabIndex: true,
-}
-
 export const KOTTI_FIELD_SELECT_SUPPORTS: KottiField.Supports = {
 	clear: true,
 	decoration: true,
 	placeholder: true,
-	tabIndex: false,
+	tabIndex: true,
 }
diff --git a/packages/kotti-ui/source/kotti-field-select/hooks.ts b/packages/kotti-ui/source/kotti-field-select/hooks.ts
deleted file mode 100644
index 8468cd1877..0000000000
--- a/packages/kotti-ui/source/kotti-field-select/hooks.ts
+++ /dev/null
@@ -1,221 +0,0 @@
-import { onMounted, Ref, watchEffect } from '@vue/composition-api'
-import { Select as ElSelect } from 'element-ui'
-
-import { KottiField } from '../kotti-field/types'
-
-import { KottiFieldSingleSelect, KottiFieldMultiSelect } from './types'
-
-export type ElSelectWithInternalAPI = ElSelect & {
-	inputWidth: number
-	query: string
-	setSoftFocus(): void
-	visible: boolean
-}
-
-type HookParameters<DATA_TYPE extends Values> = {
-	elSelectRef: Ref<ElSelectWithInternalAPI | null>
-	field: KottiField.Hook.Returns<DATA_TYPE>
-	inputSelectors: string[]
-	ktFieldRef: Ref<Vue | null>
-}
-
-type Values = KottiFieldSingleSelect.Value | KottiFieldMultiSelect.Value
-
-const getComponents = <DATA_TYPE extends Values>({
-	elSelectRef,
-	ktFieldRef,
-}: Pick<HookParameters<DATA_TYPE>, 'elSelectRef' | 'ktFieldRef'>) => {
-	const elSelectComponent = elSelectRef.value
-	const ktFieldComponent = ktFieldRef.value
-
-	if (elSelectComponent === null) throw new Error('el-select not available')
-
-	if (ktFieldComponent === null) throw new Error('kt-field not available')
-
-	return {
-		elSelectComponent: elSelectComponent as ElSelectWithInternalAPI,
-		ktFieldComponent: ktFieldComponent as Vue,
-	}
-}
-
-/**
- * Fixes the dropdown from appearing behind `KtPopover`
- */
-const useNestedPopperZIndexFix = <DATA_TYPE extends Values>({
-	elSelectRef,
-	ktFieldRef,
-}: Pick<HookParameters<DATA_TYPE>, 'elSelectRef' | 'ktFieldRef'>) => {
-	onMounted(() => {
-		watchEffect(() => {
-			const { elSelectComponent } = getComponents({ elSelectRef, ktFieldRef })
-
-			if (elSelectComponent.visible) {
-				const TIPPY_Z_INDEX = 9999
-				const popperComponent = elSelectComponent.$refs.popper as Vue
-				const popperElement = popperComponent.$el as HTMLElement
-				popperElement.style.zIndex = String(TIPPY_Z_INDEX + 1)
-			}
-		})
-	})
-}
-
-/**
- * If the field is loading, we want to unfocus in case the popper is open
- * so that when isLoading changes, the popper isn't misplaced
- */
-const usePopperMisplacementFix = <DATA_TYPE extends Values>({
-	elSelectRef,
-	field,
-	ktFieldRef,
-}: Pick<HookParameters<DATA_TYPE>, 'elSelectRef' | 'field' | 'ktFieldRef'>) => {
-	onMounted(() => {
-		watchEffect(() => {
-			const { elSelectComponent } = getComponents({ elSelectRef, ktFieldRef })
-			/**
-			 * [select.vue]{@link https://github.com/ElemeFE/element/blob/649670c55a45c7343eb7148565e2d873bc3d52dd/src/utils/vue-popper.js#L72 }
-			 * showPopper triggers on change of `visible`, which emits `updatePopper` which recomputes width/placement
-			 */
-			elSelectComponent.visible
-			if (field.isLoading || field.isDisabled) return elSelectComponent.blur()
-		})
-	})
-}
-
-/**
- * `popperComponent` is an internal `element-ui` component that computes the placement
- * of the dropdown based on the input element of `el-select`.
- *
- * [select.vue]{@link ./node_modules/element-ui/packages/select/src/select.vue} adds `ref="reference"`
- * to the input.
- *
- * [vue-popper.js]{@link ./node_modules/element-ui/src/utils/vue-popper.js} uses `parent.$ref.reference`
- * to obtain the `referenceElm`.
- *
- * So, here, we overwrite the internal property `referenceElm` of the component, to place the dropdown
- * in accordance to our input component instead (which is accessed by the `$refs.inputContainerRef`)
- */
-const usePopperPlacementFix = <DATA_TYPE extends Values>({
-	elSelectRef,
-	ktFieldRef,
-}: Pick<HookParameters<DATA_TYPE>, 'elSelectRef' | 'ktFieldRef'>) => {
-	onMounted(() => {
-		const { elSelectComponent, ktFieldComponent } = getComponents({
-			elSelectRef,
-			ktFieldRef,
-		})
-
-		const popperComponent = elSelectComponent.$refs.popper as Vue & {
-			referenceElm: Element
-		}
-		const ktFieldContainerElement = ktFieldComponent.$refs
-			.inputContainerRef as Element
-
-		popperComponent.referenceElm = ktFieldContainerElement
-	})
-}
-
-const usePopperWidthFix = <DATA_TYPE extends Values>({
-	elSelectRef,
-	ktFieldRef,
-}: Pick<HookParameters<DATA_TYPE>, 'elSelectRef' | 'ktFieldRef' | 'field'>) => {
-	onMounted(() => {
-		watchEffect(() => {
-			const { elSelectComponent, ktFieldComponent } = getComponents({
-				elSelectRef,
-				ktFieldRef,
-			})
-
-			// register dependencies
-			elSelectComponent.inputWidth
-			/**
-			 * [select.vue]{@link https://github.com/ElemeFE/element/blob/649670c55a45c7343eb7148565e2d873bc3d52dd/src/utils/vue-popper.js#L72 }
-			 * showPopper triggers on change of `visible`, which emits `updatePopper` which recomputes width/placement
-			 */
-			elSelectComponent.visible
-
-			const ktFieldContainerElement = ktFieldComponent.$refs
-				.inputContainerRef as Element
-			const newWidth = ktFieldContainerElement.getBoundingClientRect().width
-
-			const popperComponent = elSelectComponent.$refs.popper as Vue
-			const popperElement = popperComponent.$el as HTMLElement
-
-			popperElement.style.width = `${newWidth}px`
-
-			elSelectComponent.inputWidth = newWidth
-		})
-	})
-}
-
-/**
- * adds size attribute to avoid overflow of icons
- */
-const useSelectInputSizeFix = <DATA_TYPE extends Values>({
-	elSelectRef,
-	inputSelectors,
-	ktFieldRef,
-}: Pick<
-	HookParameters<DATA_TYPE>,
-	'elSelectRef' | 'ktFieldRef' | 'inputSelectors'
->) => {
-	onMounted(() => {
-		const { ktFieldComponent } = getComponents({ elSelectRef, ktFieldRef })
-
-		const ktFieldContainerElement = ktFieldComponent.$refs
-			.inputContainerRef as Element
-
-		inputSelectors.forEach((query) =>
-			ktFieldContainerElement.querySelector(query)?.setAttribute('size', '1'),
-		)
-	})
-}
-
-/**
- * @summary HACK: Prevent Google Chrome from autocompleting the search field
- *
- * @description
- * chrome 66+ shows suggestions for saved autofill data,
- * through intelligent detection, recognizing "address" fields, for instance,
- * and suggesting autofills.
- *
- * using `autocomplete="off" on `input` of `type="text"` would not work to disable autofill
- *
- * @see {@link https://gist.github.com/niksumeiko/360164708c3b326bd1c8#gistcomment-2032962} for suggested fixes
- * @see {@link https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill-expectation-mantle} for more information on the autocomplete attribute and accepted values
- * @see {@link https://bugs.chromium.org/p/chromium/issues/detail?id=370363#c7} for more information on the autocomplete tokens for password fields
- */
-const useSelectInputTypeFix = <DATA_TYPE extends Values>({
-	elSelectRef,
-	inputSelectors,
-	ktFieldRef,
-}: Pick<
-	HookParameters<DATA_TYPE>,
-	'elSelectRef' | 'inputSelectors' | 'ktFieldRef'
->) => {
-	onMounted(() => {
-		const { ktFieldComponent } = getComponents({ elSelectRef, ktFieldRef })
-
-		const ktFieldContainerElement = ktFieldComponent.$refs
-			.inputContainerRef as Element
-
-		inputSelectors.forEach((query) =>
-			ktFieldContainerElement
-				.querySelector(query)
-				?.setAttribute('type', 'search'),
-		)
-	})
-}
-
-export const useSelectFixes = <DATA_TYPE extends Values>({
-	elSelectRef,
-	field,
-	inputSelectors,
-	ktFieldRef,
-}: HookParameters<DATA_TYPE>) => {
-	useNestedPopperZIndexFix({ elSelectRef, ktFieldRef })
-	usePopperMisplacementFix({ elSelectRef, field, ktFieldRef })
-	usePopperPlacementFix({ elSelectRef, ktFieldRef })
-	usePopperWidthFix({ elSelectRef, field, ktFieldRef })
-	useSelectInputSizeFix({ elSelectRef, inputSelectors, ktFieldRef })
-	useSelectInputTypeFix({ elSelectRef, inputSelectors, ktFieldRef })
-}
diff --git a/packages/kotti-ui/source/kotti-field-select/hooks/use-select-tippy.ts b/packages/kotti-ui/source/kotti-field-select/hooks/use-select-tippy.ts
new file mode 100644
index 0000000000..689271d642
--- /dev/null
+++ b/packages/kotti-ui/source/kotti-field-select/hooks/use-select-tippy.ts
@@ -0,0 +1,72 @@
+import { useTippy } from '@3yourmind/vue-use-tippy'
+import { computed, ref } from '@vue/composition-api'
+import castArray from 'lodash.castarray'
+import { roundArrow } from 'tippy.js'
+
+import { TIPPY_LIGHT_BORDER_ARROW_HEIGHT } from '../../constants'
+import { sameWidth } from '../utils/tippy-utils'
+
+export const useSelectTippy = () => {
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any
+	const tippyTriggerRef = ref<any | null>(null)
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any
+	const tippyContentRef = ref<any | null>(null)
+
+	// track in a ref because the `tippy.state.isShown` doesn’t immediately update
+	const isDropdownOpen = ref(false)
+	const isDropdownMounted = ref(true)
+
+	const { tippy } = useTippy(
+		tippyTriggerRef,
+		computed(() => ({
+			appendTo: () => document.body,
+			arrow: roundArrow,
+			content: tippyContentRef.value,
+			// hides the tippy if we click-away from the tippy
+			hideOnClick: false,
+			interactive: true,
+			maxWidth: 'none',
+			offset: [0, TIPPY_LIGHT_BORDER_ARROW_HEIGHT],
+			onClickOutside: () => {
+				setIsDropdownOpen(false)
+			},
+			onShow: () => {
+				// More correct here, don't move to `onShown()`
+				isDropdownMounted.value = true
+
+				isDropdownOpen.value = true
+			},
+			onHide: () => {
+				isDropdownOpen.value = false
+			},
+			onHidden: () => {
+				isDropdownMounted.value = false
+			},
+			placement: 'bottom',
+			popperOptions: {
+				modifiers: [sameWidth],
+			},
+			theme: 'light-border',
+			trigger: 'click focusin',
+		})),
+	)
+
+	const setIsDropdownOpen = (showTippy: boolean) => {
+		if (!tippy.value) return
+
+		const tippys = castArray(tippy.value)
+
+		for (const tippy of tippys) {
+			if (showTippy) tippy.show()
+			else tippy.hide()
+		}
+	}
+
+	return {
+		isDropdownMounted,
+		isDropdownOpen,
+		setIsDropdownOpen,
+		tippyContentRef,
+		tippyTriggerRef,
+	}
+}
diff --git a/packages/kotti-ui/source/kotti-field-select/index.ts b/packages/kotti-ui/source/kotti-field-select/index.ts
index 2c623d45dd..e59c1e47ee 100644
--- a/packages/kotti-ui/source/kotti-field-select/index.ts
+++ b/packages/kotti-ui/source/kotti-field-select/index.ts
@@ -1,13 +1,15 @@
 import { FIELD_META_BASE_SLOTS } from '../kotti-field/meta'
-import { MetaDesignType } from '../types/kotti'
+import { Meta, MetaDesignType } from '../types/kotti'
 import { attachMeta, makeInstallable } from '../utilities'
 
 import { KOTTI_FIELD_SELECT_SUPPORTS } from './constants'
 import KtFieldMultiSelectVue from './KtFieldMultiSelect.vue'
+import KtFieldMultiSelectRemoteVue from './KtFieldMultiSelectRemote.vue'
 import KtFieldSingleSelectVue from './KtFieldSingleSelect.vue'
 import KtFieldSingleSelectRemoteVue from './KtFieldSingleSelectRemote.vue'
 import {
 	KottiFieldMultiSelect,
+	KottiFieldMultiSelectRemote,
 	KottiFieldSingleSelect,
 	KottiFieldSingleSelectRemote,
 } from './types'
@@ -15,6 +17,27 @@ import {
 const url =
 	'https://www.figma.com/file/0yFVivSWXgFf2ddEF92zkf/Kotti-Design-System?node-id=428%3A3482'
 
+const slots: Meta['slots'] = {
+	...FIELD_META_BASE_SLOTS,
+	option: {
+		description: null,
+		scope: {
+			index: {
+				description: 'option index (after filtering)',
+				type: 'integer',
+			},
+			select: {
+				description: 'select the current option',
+				type: 'function',
+			},
+			option: {
+				description: 'the entire option entry',
+				type: 'object',
+			},
+		},
+	},
+}
+
 export const KtFieldSingleSelect = attachMeta(
 	makeInstallable(KtFieldSingleSelectVue),
 	{
@@ -24,7 +47,7 @@ export const KtFieldSingleSelect = attachMeta(
 			type: MetaDesignType.FIGMA,
 			url,
 		},
-		slots: FIELD_META_BASE_SLOTS,
+		slots,
 		typeScript: {
 			namespace: 'Kotti.FieldSingleSelect',
 			schema: KottiFieldSingleSelect.propsSchema,
@@ -42,7 +65,7 @@ export const KtFieldSingleSelectRemote = attachMeta(
 			type: MetaDesignType.FIGMA,
 			url,
 		},
-		slots: FIELD_META_BASE_SLOTS,
+		slots,
 		typeScript: {
 			namespace: 'Kotti.FieldSingleSelectRemote',
 			schema: KottiFieldSingleSelectRemote.propsSchema,
@@ -60,7 +83,7 @@ export const KtFieldMultiSelect = attachMeta(
 			type: MetaDesignType.FIGMA,
 			url,
 		},
-		slots: FIELD_META_BASE_SLOTS,
+		slots,
 		typeScript: {
 			namespace: 'Kotti.FieldMultiSelect',
 			schema: KottiFieldMultiSelect.propsSchema,
@@ -69,4 +92,22 @@ export const KtFieldMultiSelect = attachMeta(
 	{ supports: KOTTI_FIELD_SELECT_SUPPORTS },
 )
 
+export const KtFieldMultiSelectRemote = attachMeta(
+	makeInstallable(KtFieldMultiSelectRemoteVue),
+	{
+		addedVersion: '3.0.0',
+		deprecated: null,
+		designs: {
+			type: MetaDesignType.FIGMA,
+			url,
+		},
+		slots,
+		typeScript: {
+			namespace: 'Kotti.FieldMultiSelectRemote',
+			schema: KottiFieldMultiSelectRemote.propsSchema,
+		},
+	},
+	{ supports: KOTTI_FIELD_SELECT_SUPPORTS },
+)
+
 export * from './constants'
diff --git a/packages/kotti-ui/source/kotti-field-select/styles.scss b/packages/kotti-ui/source/kotti-field-select/styles.scss
deleted file mode 100644
index 1d8a743e3b..0000000000
--- a/packages/kotti-ui/source/kotti-field-select/styles.scss
+++ /dev/null
@@ -1,220 +0,0 @@
-@import '../kotti-field/mixins.scss';
-
-.kt-field-select {
-	.el-select {
-		position: relative;
-		display: flex;
-
-		.el-input {
-			display: flex;
-
-			&__inner {
-				padding: 0;
-				margin: 0;
-				border: 0;
-			}
-		}
-	}
-
-	&--single {
-		.el-input {
-			flex: 1;
-		}
-
-		.el-input__inner {
-			display: flex;
-			align-self: center;
-			width: 100%;
-			line-height: 1.6;
-		}
-	}
-
-	&__actions {
-		&:before {
-			display: block;
-			height: 1px;
-			margin: 0 0.6rem;
-			content: '';
-			background: var(--gray-20);
-		}
-
-		&__item {
-			color: var(--interactive-01);
-			cursor: pointer;
-
-			&:hover {
-				background-color: var(--ui-01);
-			}
-		}
-	}
-
-	&--multiple {
-		$vertical-tag-gap: 2px;
-		$horizontal-tag-gap: 4px;
-		$tag-padding: 0.4em;
-		$tag-border: 1px;
-
-		.el-select {
-			flex-direction: row-reverse;
-			flex-wrap: wrap-reverse;
-
-			&__tags {
-				/* has the input we care about in multiple */
-				display: inline-flex;
-				flex: 1;
-				line-height: normal;
-				white-space: normal;
-
-				> span {
-					/* remove el-tag container */
-					display: none;
-				}
-
-				// only in case of multiple, we have this input
-				.el-select__input {
-					padding: 0;
-					margin: 0;
-					margin-left: calc(#{$tag-padding} + #{$tag-border});
-					line-height: 1.6;
-					border: 0;
-					appearance: none;
-				}
-			}
-
-			.el-input {
-				&__inner {
-					// display: none would break focusing
-					width: 0 !important;
-					height: 0 !important;
-				}
-
-				&__prefix {
-					width: 100%;
-				}
-			}
-		}
-
-		.kt-tags {
-			display: flex;
-			flex-wrap: wrap;
-
-			// HACK: use negative margins to align multi-line grids of tags
-			margin: #{-$vertical-tag-gap + 4px} #{-$horizontal-tag-gap};
-
-			&__tag {
-				display: flex;
-				align-items: center;
-				padding: $tag-padding;
-				margin: $vertical-tag-gap $horizontal-tag-gap;
-
-				font-size: 0.875em;
-
-				color: var(--text-02);
-				text-transform: capitalize;
-				white-space: nowrap;
-				background-color: var(--interactive-02);
-				border: $tag-border solid var(--ui-02);
-				border-radius: var(--field-border-radius);
-
-				&-icon {
-					$size: 1.25em;
-
-					display: flex;
-					align-items: center;
-					justify-content: center;
-					width: $size;
-					height: $size;
-					margin-left: 4px;
-					cursor: pointer;
-
-					background-color: var(--ui-02);
-					border-radius: 50%;
-
-					// clipping also affects the clickable area
-					@supports (clip-path: circle(#{$size / 2} at center)) {
-						clip-path: circle(#{$size / 2} at center);
-						border-radius: 0;
-					}
-
-					&:hover {
-						background-color: var(--interactive-02-hover);
-					}
-				}
-			}
-		}
-
-		.kt-field-select__placeholder {
-			color: var(--text-03);
-			opacity: 0.54; // appears to be the default user-agent opacity from the browser, in this case Firefox Developer Edition
-		}
-	}
-}
-
-.kt-field__wrapper--disabled {
-	.kt-tags__tag {
-		color: var(--text-05);
-	}
-}
-
-.el-select-dropdown,
-.el-select-dropdown.is-multiple {
-	&__empty {
-		width: 100%;
-		padding: 10px 0;
-		margin: 0;
-		color: var(--text-05);
-		text-align: center;
-	}
-
-	@include el-popper {
-		@include el-scrollbar {
-			.el-select-dropdown__list {
-				box-sizing: border-box;
-				display: flex;
-				flex-direction: column;
-				width: 100%;
-				padding: 0;
-				margin: 0;
-				list-style: none;
-
-				.el-select-dropdown__item {
-					position: relative;
-					box-sizing: border-box;
-					flex: 1;
-					padding: 0.4rem 0.6rem;
-					margin: 0;
-					overflow: hidden;
-					text-overflow: ellipsis;
-					white-space: nowrap;
-					cursor: pointer;
-
-					&.is-disabled {
-						color: var(--text-05);
-						cursor: not-allowed;
-					}
-
-					&.selected {
-						font-weight: 700;
-						color: var(--interactive-03);
-
-						&.hover,
-						&:hover {
-							color: var(--interactive-01-hover);
-						}
-					}
-
-					&:hover,
-					&.hover {
-						&:not(.is-disabled) {
-							background-color: var(--ui-01);
-						}
-					}
-				}
-			}
-		}
-
-		.el-scrollbar {
-			max-height: 40vh;
-		}
-	}
-}
diff --git a/packages/kotti-ui/source/kotti-field-select/types.ts b/packages/kotti-ui/source/kotti-field-select/types.ts
index 4ea84f5e48..04d08f333a 100644
--- a/packages/kotti-ui/source/kotti-field-select/types.ts
+++ b/packages/kotti-ui/source/kotti-field-select/types.ts
@@ -8,39 +8,43 @@ export namespace Shared {
 		.nullable()
 	export type Value = z.output<typeof valueSchema>
 
-	export const entrySchema = z.object({
+	export const optionSchema = z.object({
 		dataTest: z.string().optional(),
 		isDisabled: z.boolean().optional(),
 		label: z.string(),
 		value: valueSchema,
 	})
-	export type Entry = z.output<typeof entrySchema>
+	export type Option = z.output<typeof optionSchema>
 
-	const actionSchema = z.object({
+	export const actionSchema = z.object({
 		label: z.string(),
 		onClick: z.function(z.tuple([]), z.void()),
 	})
 	export type Action = z.output<typeof actionSchema>
 
-	export const propsSchema = z
-		.object({
+	export const propsSchema = KottiField.propsSchema
+		.merge(KottiField.potentiallySupportedPropsSchema)
+		.extend({
 			actions: z.array(actionSchema).default(() => []),
-			options: z.array(entrySchema),
+			isUnsorted: z.boolean().default(false),
+			options: z.array(optionSchema),
 			placeholder: z.string().nullable().default(null),
 		})
-		/**
-		 * tabIndex is not supported due to element-ui limitation
-		 * TODO: support with new select components
-		 **/
-		.merge(
-			KottiField.potentiallySupportedPropsSchema.pick({
-				hideClear: true,
-				leftIcon: true,
-				prefix: true,
-				rightIcon: true,
-				suffix: true,
-			}),
-		)
+
+	export const isMultipleSchema = z.object({
+		collapseTagsAfter: z.number().int().min(0).default(Number.MAX_SAFE_INTEGER),
+		maximumSelectable: z.number().int().min(0).default(Number.MAX_SAFE_INTEGER),
+		value: z.array(Shared.valueSchema).default(() => []),
+	})
+
+	export const isRemoteSchema = z.object({
+		isLoadingOptions: z.boolean().default(false),
+		query: z.string().nullable().default(null),
+	})
+
+	export const isSingleSchema = z.object({
+		value: Shared.valueSchema.default(null),
+	})
 
 	export type Props = z.input<typeof propsSchema>
 	export type PropsInternal = z.output<typeof propsSchema>
@@ -54,16 +58,10 @@ export namespace Shared {
 }
 
 export namespace KottiFieldMultiSelect {
-	export const valueSchema = z.array(Shared.valueSchema)
+	export const valueSchema = Shared.isMultipleSchema.shape.value._def.innerType
 	export type Value = z.output<typeof valueSchema>
 
-	export const propsSchema = KottiField.propsSchema
-		.merge(Shared.propsSchema)
-		.extend({
-			collapseTagsAfter: z.number().default(Number.MAX_SAFE_INTEGER),
-			maximumSelectable: z.number().default(Number.MAX_SAFE_INTEGER),
-			value: valueSchema.default(() => []),
-		})
+	export const propsSchema = Shared.propsSchema.merge(Shared.isMultipleSchema)
 
 	export type Props = z.input<typeof propsSchema>
 	export type PropsInternal = z.output<typeof propsSchema>
@@ -71,15 +69,29 @@ export namespace KottiFieldMultiSelect {
 	export type Translations = Shared.Translations
 }
 
+export namespace KottiFieldMultiSelectRemote {
+	export const valueSchema = Shared.isMultipleSchema.shape.value._def.innerType
+	export type Value = z.output<typeof valueSchema>
+
+	export const propsSchema = Shared.propsSchema
+		.merge(Shared.isMultipleSchema)
+		.merge(Shared.isRemoteSchema)
+
+	export type Props = z.input<typeof propsSchema>
+	export type PropsInternal = z.output<typeof propsSchema>
+
+	export type Translations = Shared.Translations
+
+	export namespace Events {
+		export type UpdateQuery = KottiFieldMultiSelectRemote.Props['query']
+	}
+}
+
 export namespace KottiFieldSingleSelect {
 	export const valueSchema = Shared.valueSchema
 	export type Value = z.output<typeof valueSchema>
 
-	export const propsSchema = KottiField.propsSchema
-		.merge(Shared.propsSchema)
-		.extend({
-			value: valueSchema.default(null),
-		})
+	export const propsSchema = Shared.propsSchema.merge(Shared.isSingleSchema)
 
 	export type Props = z.input<typeof propsSchema>
 	export type PropsInternal = z.output<typeof propsSchema>
@@ -88,17 +100,12 @@ export namespace KottiFieldSingleSelect {
 }
 
 export namespace KottiFieldSingleSelectRemote {
-	export const valueSchema = KottiFieldSingleSelect.valueSchema
+	export const valueSchema = Shared.valueSchema
 	export type Value = z.output<typeof valueSchema>
 
-	export const propsSchema = KottiFieldSingleSelect.propsSchema
-		// TODO: no need for this merge when element-ui is not used under the hood anymore
-		// since we rely on the KottiFieldSingleSelect merge which would include tabIndex
-		.merge(KottiField.potentiallySupportedPropsSchema.pick({ tabIndex: true }))
-		.extend({
-			isLoadingOptions: z.boolean().default(false),
-			query: z.string().nullable().default(null),
-		})
+	export const propsSchema = Shared.propsSchema
+		.merge(Shared.isSingleSchema)
+		.merge(Shared.isRemoteSchema)
 
 	export type Props = z.input<typeof propsSchema>
 	export type PropsInternal = z.output<typeof propsSchema>
diff --git a/packages/kotti-ui/source/kotti-field-toggle/KtFieldToggleGroup.vue b/packages/kotti-ui/source/kotti-field-toggle/KtFieldToggleGroup.vue
index 928e312da2..859936a897 100644
--- a/packages/kotti-ui/source/kotti-field-toggle/KtFieldToggleGroup.vue
+++ b/packages/kotti-ui/source/kotti-field-toggle/KtFieldToggleGroup.vue
@@ -43,7 +43,7 @@ export default defineComponent<KottiFieldToggleGroup.PropsInternal>({
 		ToggleInner,
 	},
 	props: makeProps(KottiFieldToggleGroup.propsSchema),
-	setup(props: KottiFieldToggleGroup.Props, { emit }) {
+	setup(props: KottiFieldToggleGroup.PropsInternal, { emit }) {
 		const field = useField<KottiFieldToggleGroup.Value>({
 			emit,
 			isEmpty: (value) =>
diff --git a/packages/kotti-ui/source/kotti-field/mixins.scss b/packages/kotti-ui/source/kotti-field/mixins.scss
index ddc43771fd..3cce327fd0 100644
--- a/packages/kotti-ui/source/kotti-field/mixins.scss
+++ b/packages/kotti-ui/source/kotti-field/mixins.scss
@@ -406,6 +406,7 @@
 
 		&::-webkit-scrollbar {
 			width: 5px;
+			height: 5px;
 			opacity: 1;
 			transition: opacity var(--transition-medium) ease-out;
 		}
diff --git a/packages/kotti-ui/source/kotti-filters/KtFilters.vue b/packages/kotti-ui/source/kotti-filters/KtFilters.vue
index 76de9803d6..d8cc395a3d 100644
--- a/packages/kotti-ui/source/kotti-filters/KtFilters.vue
+++ b/packages/kotti-ui/source/kotti-filters/KtFilters.vue
@@ -50,6 +50,7 @@ import { Yoco } from '@3yourmind/yoco'
 import { computed, defineComponent, ref } from '@vue/composition-api'
 import { roundArrow } from 'tippy.js'
 
+import { TIPPY_LIGHT_BORDER_ARROW_HEIGHT } from '../constants'
 import { useTranslationNamespace } from '../kotti-i18n/hooks'
 
 import ButtonLink from './components/ButtonLink.vue'
@@ -59,9 +60,7 @@ import FilterSearch from './components/FilterSearch.vue'
 import { KottiFilters } from './types'
 import { isValidColumn } from './validators'
 
-const ARROW_HEIGHT = 7
-
-export default defineComponent<KottiFilters.InternalProps>({
+export default defineComponent<KottiFilters.PropsInternal>({
 	name: 'KtFilters',
 	components: {
 		ButtonLink,
@@ -73,7 +72,7 @@ export default defineComponent<KottiFilters.InternalProps>({
 		columns: {
 			required: true,
 			type: Array,
-			validator: (value: KottiFilters.InternalProps['columns']) =>
+			validator: (value: KottiFilters.PropsInternal['columns']) =>
 				value.every((column) => isValidColumn(column)),
 		},
 		dataTest: {
@@ -177,7 +176,7 @@ export default defineComponent<KottiFilters.InternalProps>({
 				hideOnClick: false,
 				interactive: true,
 				maxWidth: 'none',
-				offset: [0, ARROW_HEIGHT],
+				offset: [0, TIPPY_LIGHT_BORDER_ARROW_HEIGHT],
 				onCreate(instance) {
 					tippyInstanceRef.value = instance
 				},
diff --git a/packages/kotti-ui/source/kotti-filters/types.ts b/packages/kotti-ui/source/kotti-filters/types.ts
index 003fbf04e9..d3a7cc692b 100644
--- a/packages/kotti-ui/source/kotti-filters/types.ts
+++ b/packages/kotti-ui/source/kotti-filters/types.ts
@@ -203,19 +203,19 @@ export namespace KottiFilters {
 
 	export type Value = Filter[]
 
-	export type InternalProps = {
+	export type PropsInternal = {
 		columns: Column.Any[]
 		dataTest: string | null
 		isLoading: boolean
 		value: Value
 	}
 
-	export type Props = SpecifyRequiredProps<InternalProps, 'columns' | 'value'>
+	export type Props = SpecifyRequiredProps<PropsInternal, 'columns' | 'value'>
 
 	export namespace Events {
-		export type UpdateColumns = InternalProps['columns']
+		export type UpdateColumns = PropsInternal['columns']
 
-		export type UpdateValue = InternalProps['value']
+		export type UpdateValue = PropsInternal['value']
 	}
 
 	export type Translations = {
diff --git a/packages/kotti-ui/source/types/kotti.ts b/packages/kotti-ui/source/types/kotti.ts
index f7878d7e00..15a2847a21 100644
--- a/packages/kotti-ui/source/types/kotti.ts
+++ b/packages/kotti-ui/source/types/kotti.ts
@@ -32,8 +32,9 @@ export {
 	KottiFieldToggleGroup as FieldToggleGroup,
 } from '../kotti-field-toggle/types'
 export {
-	KottiFieldSingleSelect as FieldSingleSelect,
 	KottiFieldMultiSelect as FieldMultiSelect,
+	KottiFieldMultiSelectRemote as FieldMultiSelectRemote,
+	KottiFieldSingleSelect as FieldSingleSelect,
 	KottiFieldSingleSelectRemote as FieldSingleSelectRemote,
 } from '../kotti-field-select/types'
 export { KottiFilters as Filters } from '../kotti-filters/types'
diff --git a/tsconfig.json b/tsconfig.json
index d1d7482f4a..44e2f48bc9 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -2,6 +2,7 @@
 	"compilerOptions": {
 		"esModuleInterop": true,
 		"lib": ["ESNext", "DOM", "DOM.Iterable"],
-		"resolveJsonModule": true
+		"resolveJsonModule": true,
+		"strict": true
 	}
 }