diff --git a/package-lock.json b/package-lock.json
index b04d0d651..d7a8628c6 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -2587,6 +2587,63 @@
 			"dev": true,
 			"license": "MIT"
 		},
+		"node_modules/@floating-ui/core": {
+			"version": "1.6.8",
+			"resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.6.8.tgz",
+			"integrity": "sha512-7XJ9cPU+yI2QeLS+FCSlqNFZJq8arvswefkZrYI1yQBbftw6FyrZOxYSh+9S7z7TpeWlRt9zJ5IhM1WIL334jA==",
+			"dependencies": {
+				"@floating-ui/utils": "^0.2.8"
+			}
+		},
+		"node_modules/@floating-ui/dom": {
+			"version": "1.6.12",
+			"resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.6.12.tgz",
+			"integrity": "sha512-NP83c0HjokcGVEMeoStg317VD9W7eDlGK7457dMBANbKA6GJZdc7rjujdgqzTaz93jkGgc5P/jeWbaCHnMNc+w==",
+			"dependencies": {
+				"@floating-ui/core": "^1.6.0",
+				"@floating-ui/utils": "^0.2.8"
+			}
+		},
+		"node_modules/@floating-ui/utils": {
+			"version": "0.2.8",
+			"resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.8.tgz",
+			"integrity": "sha512-kym7SodPp8/wloecOpcmSnWJsK7M0E5Wg8UcFA+uO4B9s5d0ywXOEro/8HM9x0rW+TljRzul/14UYz3TleT3ig=="
+		},
+		"node_modules/@floating-ui/vue": {
+			"version": "1.1.5",
+			"resolved": "https://registry.npmjs.org/@floating-ui/vue/-/vue-1.1.5.tgz",
+			"integrity": "sha512-ynL1p5Z+woPVSwgMGqeDrx6HrJfGIDzFyESFkyqJKilGW1+h/8yVY29Khn0LaU6wHBRwZ13ntG6reiHWK6jyzw==",
+			"dependencies": {
+				"@floating-ui/dom": "^1.0.0",
+				"@floating-ui/utils": "^0.2.8",
+				"vue-demi": ">=0.13.0"
+			}
+		},
+		"node_modules/@floating-ui/vue/node_modules/vue-demi": {
+			"version": "0.14.10",
+			"resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.10.tgz",
+			"integrity": "sha512-nMZBOwuzabUO0nLgIcc6rycZEebF6eeUfaiQx9+WSk8e29IbLvPU9feI6tqW4kTo3hvoYAJkMh8n8D0fuISphg==",
+			"hasInstallScript": true,
+			"bin": {
+				"vue-demi-fix": "bin/vue-demi-fix.js",
+				"vue-demi-switch": "bin/vue-demi-switch.js"
+			},
+			"engines": {
+				"node": ">=12"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/antfu"
+			},
+			"peerDependencies": {
+				"@vue/composition-api": "^1.0.0-rc.1",
+				"vue": "^3.0.0-0 || ^2.6.0"
+			},
+			"peerDependenciesMeta": {
+				"@vue/composition-api": {
+					"optional": true
+				}
+			}
+		},
 		"node_modules/@fontsource-variable/material-symbols-outlined": {
 			"version": "5.0.34",
 			"resolved": "https://registry.npmjs.org/@fontsource-variable/material-symbols-outlined/-/material-symbols-outlined-5.0.34.tgz",
@@ -22903,6 +22960,7 @@
 			"version": "0.0.0",
 			"dependencies": {
 				"@apache-arrow/ts": "^15.0.2",
+				"@floating-ui/vue": "^1.1.5",
 				"@fontsource-variable/material-symbols-outlined": "^5.0.34",
 				"@fontsource/poppins": "^5.0.14",
 				"@googlemaps/js-api-loader": "^1.16.6",
diff --git a/src/ui/package.json b/src/ui/package.json
index aaffca429..5bfa9560b 100644
--- a/src/ui/package.json
+++ b/src/ui/package.json
@@ -17,6 +17,7 @@
 	},
 	"dependencies": {
 		"@apache-arrow/ts": "^15.0.2",
+		"@floating-ui/vue": "^1.1.5",
 		"@fontsource-variable/material-symbols-outlined": "^5.0.34",
 		"@fontsource/poppins": "^5.0.14",
 		"@googlemaps/js-api-loader": "^1.16.6",
diff --git a/src/ui/src/builder/BuilderFieldsAlign.vue b/src/ui/src/builder/BuilderFieldsAlign.vue
index 44b0dd2af..9ed4ba948 100644
--- a/src/ui/src/builder/BuilderFieldsAlign.vue
+++ b/src/ui/src/builder/BuilderFieldsAlign.vue
@@ -42,9 +42,9 @@
 		<div v-if="mode == 'pick' || mode == 'css'" class="main">
 			<div v-if="mode == 'pick'" class="pickerContainer">
 				<BuilderSelect
-					:default-value="subMode"
+					:value="subMode"
 					:options="selectOptions"
-					@select="handleInputSelect"
+					@input="handleInputSelect"
 				/>
 			</div>
 
diff --git a/src/ui/src/builder/BuilderFieldsPadding.vue b/src/ui/src/builder/BuilderFieldsPadding.vue
index 77f4bceba..14464d2c5 100644
--- a/src/ui/src/builder/BuilderFieldsPadding.vue
+++ b/src/ui/src/builder/BuilderFieldsPadding.vue
@@ -42,9 +42,9 @@
 		<div v-if="mode == 'pick' || mode == 'css'" class="main">
 			<div v-if="mode == 'pick'" class="pickerContainer">
 				<BuilderSelect
-					:default-value="subMode"
+					:model-value="subMode"
 					:options="selectOptions"
-					@select="handleInputSelect"
+					@update:model-value="handleInputSelect"
 				/>
 				<div v-if="subMode == SubMode.all_sides" class="row">
 					<i>All</i>
diff --git a/src/ui/src/builder/BuilderFieldsWidth.vue b/src/ui/src/builder/BuilderFieldsWidth.vue
index 1c80e49e9..bb3eaf0ba 100644
--- a/src/ui/src/builder/BuilderFieldsWidth.vue
+++ b/src/ui/src/builder/BuilderFieldsWidth.vue
@@ -42,9 +42,9 @@
 		<div v-if="mode == 'pick' || mode == 'css'" class="main">
 			<div v-if="mode == 'pick'" class="pickerContainer">
 				<BuilderSelect
-					:default-value="subMode"
+					:model-value="subMode"
 					:options="selectOptions"
-					@select="handleInputSelect"
+					@update:model-value="handleInputSelect"
 				/>
 				<div v-if="subMode == SubMode.fixed" class="fixedContainer">
 					<input
diff --git a/src/ui/src/builder/BuilderSelect.vue b/src/ui/src/builder/BuilderSelect.vue
index 19439813c..d454a3171 100644
--- a/src/ui/src/builder/BuilderSelect.vue
+++ b/src/ui/src/builder/BuilderSelect.vue
@@ -1,190 +1,170 @@
 <template>
-	<!-- inspired from https://andrejgajdos.com/custom-select-dropdown -->
-	<div class="selectWrapper" @click="open">
-		<div ref="selectEl" class="select">
-			<div class="selectTrigger">
-				<div class="selectContent">
-					<div v-if="currentLabel != null" class="flexRow">
-						<div>
-							<i class="material-symbols-outlined">{{
-								currentIcon
-							}}</i>
-						</div>
-						<div>{{ currentLabel }}</div>
-					</div>
-				</div>
-				<div class="selectArrow">
-					<i class="material-symbols-outlined">expand_more</i>
-				</div>
+	<div
+		ref="trigger"
+		class="BuilderSelect"
+		:class="{ 'BuilderSelect--embedded': variant === 'embedded' }"
+	>
+		<button
+			class="BuilderSelect__trigger"
+			role="button"
+			@click="isOpen = !isOpen"
+		>
+			<i v-if="!hideIcons" class="material-symbols-outlined">{{
+				currentIcon
+			}}</i>
+			<div class="BuilderSelect__trigger__label">{{ currentLabel }}</div>
+			<div class="BuilderSelect__trigger__arrow">
+				<i class="material-symbols-outlined">{{ expandIcon }}</i>
 			</div>
-			<div class="selectOptions">
-				<div
-					v-for="option in compOptions"
-					:key="option.value"
-					class="selectOption"
-					:data-value="option.value"
-					:class="option.class"
-					@click="select"
-				>
-					<div class="flexRow">
-						<div>
-							<i class="material-symbols-outlined">{{
-								option.icon
-							}}</i>
-						</div>
-						<div>{{ option.label }}</div>
-					</div>
-				</div>
-			</div>
-		</div>
+		</button>
+		<WdsMenu
+			v-if="isOpen"
+			ref="dropdown"
+			:enable-search="enableSearch"
+			:options="options"
+			:selected="currentValue"
+			:style="floatingStyles"
+			@select="onSelect"
+			@search="updateFloatingStyle"
+		/>
 	</div>
 </template>
 
+<script lang="ts">
+export type { WdsDropdownMenuOption as Option } from "@/wds/WdsDropdownMenu.vue";
+</script>
+
 <script setup lang="ts">
-import { computed, ref, Ref } from "vue";
+import {
+	computed,
+	defineAsyncComponent,
+	nextTick,
+	PropType,
+	ref,
+	watch,
+} from "vue";
+import { useFloating, autoPlacement } from "@floating-ui/vue";
+import type { WdsDropdownMenuOption } from "@/wds/WdsDropdownMenu.vue";
+import { useFocusWithin } from "@/composables/useFocusWithin";
+
+const WdsMenu = defineAsyncComponent(() => import("@/wds/WdsDropdownMenu.vue"));
+
+const props = defineProps({
+	options: {
+		type: Array as PropType<WdsDropdownMenuOption[]>,
+		default: () => [],
+	},
+	defaultIcon: { type: String, required: false, default: undefined },
+	hideIcons: { type: Boolean, required: false },
+	enableSearch: { type: Boolean, required: false },
+	/**
+	 * Customize the appareance of the selector.
+	 * In embeded mode, we remove the padding and the border around the trigger. Usefull when the selector is embed into a field wrapper.
+	 */
+	variant: {
+		type: String as PropType<"normal" | "embedded">,
+		default: "normal",
+	},
+});
 
-const selectEl: Ref<HTMLElement> = ref(null);
+const currentValue = defineModel({ type: String, required: false });
+const isOpen = ref(false);
+const trigger = ref<HTMLElement>();
+const dropdown = ref<HTMLElement>();
 
-const props = defineProps<{
-	options?: Array<{ value: string; label: string; icon?: string }>;
-	defaultValue?: string;
-	defaultIcon?: string;
-}>();
+const { floatingStyles, update: updateFloatingStyle } = useFloating(
+	trigger,
+	dropdown,
+	{
+		placement: "bottom",
+		middleware: [autoPlacement()],
+	},
+);
 
-let currentValue = ref(props.defaultValue);
+const expandIcon = computed(() =>
+	isOpen.value ? "keyboard_arrow_up" : "expand_more",
+);
 
-const currentLabel = computed(() => {
-	const option = props.options.find(
-		(option) => option.value == currentValue.value,
-	);
-	return option ? option.label : "";
-});
+const selectedOption = computed(() =>
+	props.options.find((o) => o.value === currentValue.value),
+);
+
+const currentLabel = computed(() => selectedOption.value?.label ?? "");
 
 const currentIcon = computed(() => {
-	const defaultIcon = props.defaultIcon ? props.defaultIcon : "help_center";
-	const option = props.options.find(
-		(option) => option.value == currentValue.value,
-	);
-	return option && option.icon ? option.icon : defaultIcon;
+	if (props.hideIcons) return "";
+	return selectedOption.value?.icon ?? props.defaultIcon ?? "help_center";
 });
 
-const emit = defineEmits(["select"]);
-
-let compOptions = computed(() => {
-	const options_list = props.options.map((option) => {
-		let new_option = { ...option, class: "" };
-		if (new_option.value == currentValue.value) {
-			new_option.class = "selected";
-			new_option.icon = new_option.icon ? new_option.icon : "help_center";
-		} else {
-			new_option.class = "";
-			new_option.icon = new_option.icon ? new_option.icon : "help_center";
+// close the dropdown when clicking outside
+const hasFocus = useFocusWithin(trigger);
+watch(
+	hasFocus,
+	() => {
+		if (!hasFocus.value) {
+			// wait next tick to let event propagate
+			nextTick().then(() => (isOpen.value = false));
 		}
-		return new_option;
-	});
+	},
+	{ immediate: true },
+);
 
-	return options_list;
-});
-
-const open = () => {
-	selectEl.value.classList.toggle("open");
-};
-
-const select = (event) => {
-	const value = event.currentTarget.getAttribute("data-value");
+function onSelect(value: string) {
+	isOpen.value = false;
 	currentValue.value = value;
-	emit("select", value);
-};
+}
 </script>
 
 <style scoped>
-@import "./ico.css";
-
-.selectWrapper {
+.BuilderSelect {
 	position: relative;
 	user-select: none;
 	width: 100%;
 	font-size: 0.875rem;
 }
 
-.select {
-	position: relative;
+.BuilderSelect__trigger {
 	display: flex;
-	flex-direction: column;
-}
+	height: 32px;
+	width: 100%;
+
+	gap: 8px;
 
-.selectTrigger {
-	position: relative;
-	display: flex;
 	align-items: center;
-	justify-content: space-between;
 	padding: 8px;
 	font-weight: 400;
 	color: #3b3b3b;
-	height: 32px;
 	background: #ffffff;
-	cursor: pointer;
 }
 
-.selectOptions {
-	position: absolute;
-	display: block;
-	top: 100%;
-	left: 0;
-	right: 0;
-	border: 1px solid #394a6d;
-	background: #fff;
-	transition: all 0.2s;
-	opacity: 0;
-	visibility: hidden;
-	pointer-events: none;
-	z-index: 2;
-}
-
-.select.open .selectOptions {
-	opacity: 1;
-	visibility: visible;
-	pointer-events: all;
-}
-
-.selectOption {
-	position: relative;
-	display: block;
-	padding: 8px;
-	font-weight: 400;
-	font-size: 0.75rem;
-	color: #000000e6;
+.BuilderSelect__trigger {
+	/* reset button */
+	border: none;
 	cursor: pointer;
-	transition: all 0.2s;
-}
 
-.selectOption:hover {
-	cursor: pointer;
-	background-color: #000000b3;
-	color: #fff;
+	font-size: 0.75rem;
+	display: flex;
+	align-items: center;
 }
-
-.selected {
-	background-color: #000000b3;
-	color: #fff;
+.BuilderSelect__trigger__label {
+	text-overflow: ellipsis;
+	overflow: hidden;
+	flex-grow: 1;
+	text-align: left;
 }
-
-.selectArrow {
-	position: relative;
+.BuilderSelect__trigger__arrow {
+	border: none;
+	background-color: transparent;
 	display: flex;
 	align-items: center;
 	justify-content: space-between;
 	font-weight: 300;
 	color: #000000e6;
+	cursor: pointer;
 }
 
-.flexRow {
-	display: flex;
-	flex-direction: row;
-	gap: 8px;
-}
-
-.selectContent {
-	font-size: 0.75rem;
+.BuilderSelect--embedded .BuilderSelect__trigger {
+	padding: 0;
+	height: 18px;
 }
 </style>
diff --git a/src/ui/src/builder/BuilderSettingsHandlers.vue b/src/ui/src/builder/BuilderSettingsHandlers.vue
index fa1a71af1..eca2728cd 100644
--- a/src/ui/src/builder/BuilderSettingsHandlers.vue
+++ b/src/ui/src/builder/BuilderSettingsHandlers.vue
@@ -13,48 +13,19 @@
 				<div class="columns">
 					<div class="fieldWrapperMain">
 						<span class="name">{{ eventType }}</span>
-						<select
-							class="content"
-							:value="component.handlers?.[eventType]"
-							@input="handleHandlerChange($event, eventType)"
-						>
-							<option
-								key="No handler"
-								value=""
-								:selected="!component.handlers?.[eventType]"
-							>
-								(No handler)
-							</option>
-							<option
-								v-for="userFunction in userFunctions"
-								:key="userFunction.name"
-								:value="userFunction.name"
-							>
-								{{ userFunction.name }}
-							</option>
-							<option
-								v-for="pageKey in pageKeys"
-								:key="`$goToPage_${pageKey}`"
-								:value="`$goToPage_${pageKey}`"
-							>
-								Go to page "{{ pageKey }}"
-							</option>
-							<option
-								v-for="workflowKey in workflowKeys"
-								:key="`$runWorkflow_${workflowKey}`"
-								:value="`$runWorkflow_${workflowKey}`"
-							>
-								Run workflow "{{ workflowKey }}"
-							</option>
-							<template v-if="isHandlerInvalid(eventType)">
-								<option
-									:value="component.handlers?.[eventType]"
-								>
-									{{ component.handlers?.[eventType] }} (Not
-									Found)
-								</option>
-							</template>
-						</select>
+						<div class="content">
+							<BuilderSelect
+								:model-value="
+									component.handlers?.[eventType] ?? ''
+								"
+								:options="getOptions(eventType)"
+								variant="embedded"
+								enable-search
+								@update:model-value="
+									handleHandlerChange($event, eventType)
+								"
+							/>
+						</div>
 					</div>
 					<div class="fieldActions">
 						<button
@@ -177,6 +148,8 @@ import { useComponentActions } from "./useComponentActions";
 import injectionKeys from "../injectionKeys";
 import BuilderModal, { ModalAction } from "./BuilderModal.vue";
 import { WriterComponentDefinition } from "@/writerTypes";
+import BuilderSelect from "./BuilderSelect.vue";
+import type { Option } from "./BuilderSelect.vue";
 
 const wf = inject(injectionKeys.core);
 const ssbm = inject(injectionKeys.builderManager);
@@ -184,6 +157,44 @@ const ssbm = inject(injectionKeys.builderManager);
 const { setHandlerValue } = useComponentActions(wf, ssbm);
 const component = computed(() => wf.getComponentById(ssbm.getSelectedId()));
 
+const options = computed<Option[]>(() => {
+	const userFunctionsOptions: Option[] = userFunctions.value
+		.map((v) => v.name)
+		.map((v) => ({ value: v, label: v, icon: "function" }));
+
+	const pageKeyOptions: Option[] = pageKeys.value
+		.map((v) => `$goToPage_${v}`)
+		.map((v) => ({
+			icon: "link",
+			value: v,
+			label: v,
+		}));
+
+	const workflowKeyOptions: Option[] = workflowKeys.value.map((v) => ({
+		label: `$runWorkflow_${v}`,
+		value: `Run workflow "${v}"`,
+		icon: "move_down",
+	}));
+
+	return [
+		{ label: "(No handler)", value: "", icon: "block" },
+		...userFunctionsOptions,
+		...pageKeyOptions,
+		...workflowKeyOptions,
+	];
+});
+
+function getOptions(eventType: string): Option[] {
+	if (!isHandlerInvalid(eventType)) return options.value;
+
+	const handler = component.value.handlers?.[eventType];
+
+	return [
+		...options.value,
+		{ value: handler, label: `${handler} (Not found)` },
+	];
+}
+
 const recognisedEvents: ComputedRef<WriterComponentDefinition["events"]> =
 	computed(() => {
 		const { type } = component.value;
@@ -233,9 +244,8 @@ const isHandlerInvalid = (eventType: string) => {
 	return true;
 };
 
-const handleHandlerChange = (ev: Event, eventType: string) => {
-	const handlerFunctionName = (ev.target as HTMLInputElement).value;
-	setHandlerValue(component.value.id, eventType, handlerFunctionName);
+const handleHandlerChange = (functionName: string, eventType: string) => {
+	setHandlerValue(component.value.id, eventType, functionName);
 };
 
 type StubModal = {
@@ -356,20 +366,28 @@ const copyToClipboard = (text: string) => {
 }
 .list {
 	border-radius: 4px;
-	overflow: hidden;
 }
 
 .fieldWrapper .columns {
-	display: flex;
+	display: grid;
+	grid-template-columns: minmax(0, 100%) auto;
 	gap: 12px;
 	align-items: center;
 	max-width: 100%;
 }
 
+.fieldWrapperMain {
+	width: 100%;
+}
+
 .fieldWrapper .content {
 	padding: 16px 8px 12px 8px;
 	width: 100%;
 }
+.fieldWrapper .content .select {
+	padding: 0;
+	height: auto;
+}
 
 .fieldActions > button {
 	border-radius: 16px;
diff --git a/src/ui/src/composables/useFocusWithin.ts b/src/ui/src/composables/useFocusWithin.ts
new file mode 100644
index 000000000..31181128d
--- /dev/null
+++ b/src/ui/src/composables/useFocusWithin.ts
@@ -0,0 +1,55 @@
+import { ComputedRef, onBeforeUnmount, readonly, Ref, ref, watch } from "vue";
+
+/**
+ * Detect if a given element or its children has focus.
+ * Inspired from <https://danburzo.ro/focus-within>.
+ */
+export function useFocusWithin(
+	element: ComputedRef<HTMLElement> | Ref<HTMLElement>,
+) {
+	const focus = ref(false);
+
+	function onFocusIn() {
+		focus.value = true;
+	}
+
+	function onFocusOut(e: FocusEvent) {
+		const target = e.currentTarget as HTMLElement;
+		// If the document has lost focus, don't hide the container just yet, wait until the focus is returned.
+		if (!document.hasFocus()) {
+			window.addEventListener("focus", function focusReturn() {
+				// We want the listener to be triggered just once, so we have it remove itself from the `focus` event.
+				window.removeEventListener("focus", focusReturn);
+
+				// Test whether the container is still in the DOM and whether the active element is contained within.
+				if (
+					target.isConnected &&
+					!target.contains(document.activeElement)
+				) {
+					focus.value = false;
+				}
+			});
+		} else if (!target.contains(e.relatedTarget as HTMLElement)) {
+			focus.value = false;
+		}
+	}
+
+	watch(element, (_, previous) => {
+		if (previous) {
+			previous.removeEventListener("focusin", onFocusIn);
+			previous.removeEventListener("focusout", onFocusOut);
+		}
+
+		if (!element) return;
+
+		element.value.addEventListener("focusin", onFocusIn);
+		element.value.addEventListener("focusout", onFocusOut);
+	});
+
+	onBeforeUnmount(() => {
+		element.value.removeEventListener("focusin", onFocusIn);
+		element.value.removeEventListener("focusout", onFocusOut);
+	});
+
+	return readonly(focus);
+}
diff --git a/src/ui/src/wds/WdsDropdownMenu.vue b/src/ui/src/wds/WdsDropdownMenu.vue
new file mode 100644
index 000000000..04d893e70
--- /dev/null
+++ b/src/ui/src/wds/WdsDropdownMenu.vue
@@ -0,0 +1,189 @@
+<template>
+	<div class="WdsDropdownMenu">
+		<div v-if="enableSearch" class="WdsDropdownMenu__search">
+			<i class="material-symbols-outlined">search</i>
+			<input
+				ref="searchInput"
+				v-model="searchTerm"
+				class="WdsDropdownMenu__search__input"
+				type="text"
+				placeholder="Search"
+				autocomplete="off"
+			/>
+		</div>
+		<button
+			v-for="option in optionsFiltered"
+			:key="option.value"
+			class="WdsDropdownMenu__item"
+			:class="{
+				'WdsDropdownMenu__item--selected': option.value === selected,
+			}"
+			@click="$emit('select', option.value)"
+		>
+			<i v-if="!hideIcons" class="material-symbols-outlined">{{
+				getOptionIcon(option)
+			}}</i>
+			<div class="WdsDropdownMenu__item__label">
+				{{ option.label }}
+			</div>
+			<i
+				v-if="option.value === selected"
+				class="material-symbols-outlined"
+			>
+				check
+			</i>
+		</button>
+	</div>
+</template>
+
+<script lang="ts">
+export type WdsDropdownMenuOption = {
+	value: string;
+	label: string;
+	icon?: string;
+};
+</script>
+
+<script setup lang="ts">
+// from https://www.figma.com/design/jgLDtwVwg3hReC1t4Vw20D/.WDS-Writer-Design-System?node-id=128-396&t=9Gy9MYDycjVV8C2Y-1
+import { computed, PropType, ref, watch } from "vue";
+
+const props = defineProps({
+	options: {
+		type: Array as PropType<WdsDropdownMenuOption[]>,
+		default: () => [],
+	},
+	hideIcons: { type: Boolean, required: false },
+	enableSearch: { type: Boolean, required: false },
+	selected: { type: String, required: false, default: undefined },
+});
+
+const emits = defineEmits({
+	select: (value: string) => typeof value === "string",
+	search: (value: string) => typeof value === "string",
+});
+
+const searchInput = ref<HTMLElement>();
+const searchTerm = ref("");
+
+function getOptionIcon(option: WdsDropdownMenuOption) {
+	if (props.hideIcons) return "";
+	return option.icon ?? "help_center";
+}
+
+const optionsFiltered = computed(() => {
+	if (!props.enableSearch) return props.options;
+
+	const query = searchTerm.value.toLowerCase();
+	return props.options.filter((option) =>
+		option.label.toLowerCase().includes(query),
+	);
+});
+
+watch(searchTerm, () => emits("search", searchTerm.value));
+</script>
+
+<style scoped>
+.WdsDropdownMenu {
+	position: absolute;
+	border: 1px solid #394a6d;
+	border: none;
+	background: #fff;
+	z-index: 2;
+	width: 100%;
+	max-height: 40vh;
+	overflow-y: auto;
+	border-radius: 8px;
+
+	padding: 8px 10px;
+
+	box-shadow: 0px 1px 8px 0px #bfcbff40;
+	box-sizing: border-box;
+}
+.WdsDropdownMenu:has(.WdsDropdownMenu__search) {
+	padding-top: 0px;
+}
+
+.WdsDropdownMenu__item {
+	background-color: transparent;
+	border: none;
+	display: block;
+	width: 100%;
+
+	display: grid;
+	grid-template-columns: auto 1fr auto;
+	gap: 8px;
+	align-items: center;
+
+	border-radius: 4px;
+
+	padding: 8px;
+	font-weight: 400;
+	font-size: 0.75rem;
+	color: #000000e6;
+	cursor: pointer;
+	transition: all 0.2s;
+	pointer-events: all;
+}
+
+.WdsDropdownMenu__item:hover {
+	cursor: pointer;
+	background-color: #f3f5ff;
+}
+
+.WdsDropdownMenu__item--selected {
+	background-color: #e4e9ff;
+}
+.WdsDropdownMenu__item__label {
+	text-overflow: ellipsis;
+	overflow: hidden;
+	text-align: left;
+}
+
+.WdsDropdownMenu__search {
+	background-color: #fafafa;
+	border-radius: 4px;
+	height: 36px;
+	width: 100%;
+
+	margin-bottom: 8px;
+
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	gap: 4px;
+
+	padding: 8px;
+	padding-top: 16px;
+	border: 1px solid transparent;
+
+	color: currentcolor;
+}
+.WdsDropdownMenu__search:hover {
+	border-color: #bfcbff;
+}
+.WdsDropdownMenu__search:focus-within {
+	background-color: white;
+	outline: 4px solid #f3f5ff;
+}
+
+.WdsDropdownMenu__search__input {
+	letter-spacing: inherit;
+	color: currentcolor;
+	padding: 4px 0px 5px;
+	border: 0px;
+	box-sizing: content-box;
+	background: none;
+	height: 1.4375em;
+	margin: 0px;
+	display: block;
+	min-width: 0px;
+	width: 100%;
+	animation-name: mui-auto-fill-cancel;
+	animation-duration: 10ms;
+	appearance: textfield;
+}
+.WdsDropdownMenu__search__input:focus-visible {
+	outline: none;
+}
+</style>