diff --git a/playground/app/app.vue b/playground/app/app.vue
index 7348fbd70f..a2ca7263be 100644
--- a/playground/app/app.vue
+++ b/playground/app/app.vue
@@ -52,6 +52,7 @@ const components = [
'radio-group',
'select',
'select-menu',
+ 'select-menu-virtualized',
'separator',
'shortcuts',
'skeleton',
diff --git a/playground/app/pages/components/select-menu-virtualized.vue b/playground/app/pages/components/select-menu-virtualized.vue
new file mode 100644
index 0000000000..de7953007c
--- /dev/null
+++ b/playground/app/pages/components/select-menu-virtualized.vue
@@ -0,0 +1,16 @@
+
+
+
+
+
diff --git a/src/runtime/components/SelectMenu.vue b/src/runtime/components/SelectMenu.vue
index 983a219642..e7490e94a9 100644
--- a/src/runtime/components/SelectMenu.vue
+++ b/src/runtime/components/SelectMenu.vue
@@ -117,6 +117,17 @@ export interface SelectMenuProps = Array
ignoreFilter?: boolean
autofocus?: boolean
autofocusDelay?: number
+ /**
+ * When `true` the items in the SelectMenu are virtualized. Keep in mind that this only works with a single group due to a limitation of RekaUI (https://github.com/unovue/reka-ui/issues/1885).
+ * @defaultValue false
+ */
+ virtualize?: boolean
+ /**
+ * The height of items to be used by the virtualizer to determine the amount of items to render.
+ * Keep in mind that virtualization only works when you have no groups due to a limitation of RekaUI (https://github.com/unovue/reka-ui/issues/1885).
+ * @defaultValue 20
+ */
+ virtualItemEstimateSize?: number
class?: any
ui?: SelectMenu['slots']
}
@@ -168,7 +179,7 @@ export interface SelectMenuSlots<