diff --git a/docs/app/components/content/examples/popover/PopoverCommandPaletteExample.vue b/docs/app/components/content/examples/popover/PopoverCommandPaletteExample.vue
index 62dc71fc85..8d0c1c65ba 100644
--- a/docs/app/components/content/examples/popover/PopoverCommandPaletteExample.vue
+++ b/docs/app/components/content/examples/popover/PopoverCommandPaletteExample.vue
@@ -1,5 +1,7 @@
 <script setup lang="ts">
-const items = ref([
+import type { CommandPaletteItem } from '@nuxt/ui'
+
+const items = ref<CommandPaletteItem[]>([
   {
     label: 'bug',
     value: 'bug',
@@ -22,7 +24,7 @@ const items = ref([
     }
   }
 ])
-const label = ref([])
+const label = ref<CommandPaletteItem[]>([])
 </script>
 
 <template>
diff --git a/playgrounds/nuxt/app/pages/components/command-palette.vue b/playgrounds/nuxt/app/pages/components/command-palette.vue
index 00eb6f7c00..cbd8c1ab40 100644
--- a/playgrounds/nuxt/app/pages/components/command-palette.vue
+++ b/playgrounds/nuxt/app/pages/components/command-palette.vue
@@ -1,6 +1,8 @@
 <script setup lang="ts">
 // import { createReusableTemplate, refDebounced } from '@vueuse/core'
 import { createReusableTemplate } from '@vueuse/core'
+import type { CommandPaletteItem } from '@nuxt/ui'
+
 import type { User } from '~/types'
 
 const [DefineTemplate, ReuseTemplate] = createReusableTemplate()
@@ -9,7 +11,7 @@ const toast = useToast()
 const open = ref(false)
 const searchTerm = ref('')
 // const searchTermDebounced = refDebounced(searchTerm, 200)
-const selected = ref([])
+const selected = ref<CommandPaletteItem[]>([])
 const virtualize = ref(false)
 const preserveGroupOrder = ref(false)
 
diff --git a/src/runtime/components/CommandPalette.vue b/src/runtime/components/CommandPalette.vue
index 435252fa3e..0ebb5001c1 100644
--- a/src/runtime/components/CommandPalette.vue
+++ b/src/runtime/components/CommandPalette.vue
@@ -7,7 +7,7 @@ import type { UseFuseOptions } from '@vueuse/integrations/useFuse'
 import theme from '#build/ui/command-palette'
 import type { UseComponentIconsProps } from '../composables/useComponentIcons'
 import type { AvatarProps, ButtonProps, ChipProps, KbdProps, InputProps, LinkProps, IconProps } from '../types'
-import type { GetItemKeys } from '../types/utils'
+import type { GetItemKeys, GetModelValue, GetModelValueEmits } from '../types/utils'
 import type { ComponentConfig } from '../types/tv'
 
 type CommandPalette = ComponentConfig<typeof theme, AppConfig, 'commandPalette'>
@@ -59,7 +59,7 @@ export interface CommandPaletteGroup<T extends CommandPaletteItem = CommandPalet
   highlightedIcon?: IconProps['name']
 }
 
-export interface CommandPaletteProps<G extends CommandPaletteGroup<T> = CommandPaletteGroup<any>, T extends CommandPaletteItem = CommandPaletteItem> extends Pick<ListboxRootProps, 'multiple' | 'disabled' | 'modelValue' | 'defaultValue' | 'highlightOnHover' | 'selectionBehavior'>, Pick<UseComponentIconsProps, 'loading' | 'loadingIcon'> {
+export interface CommandPaletteProps<T extends CommandPaletteItem = CommandPaletteItem, G extends CommandPaletteGroup<T> = CommandPaletteGroup<T>, VK extends GetItemKeys<T> | undefined = undefined, M extends boolean = false> extends Pick<ListboxRootProps, 'disabled' | 'highlightOnHover' | 'selectionBehavior'>, Pick<UseComponentIconsProps, 'loading' | 'loadingIcon'> {
   /**
    * The element or component this component should render as.
    * @defaultValue 'div'
@@ -125,6 +125,10 @@ export interface CommandPaletteProps<G extends CommandPaletteGroup<T> = CommandP
    */
   backIcon?: IconProps['name']
   groups?: G[]
+  /** The value of the InputMenu when initially rendered. Use when you do not need to control the state of the InputMenu. */
+  defaultValue?: GetModelValue<T, VK, M>
+  /** The controlled value of the InputMenu. Can be binded-with with `v-model`. */
+  modelValue?: GetModelValue<T, VK, M>
   /**
    * Options for [useFuse](https://vueuse.org/integrations/useFuse).
    * @defaultValue {
@@ -165,6 +169,18 @@ export interface CommandPaletteProps<G extends CommandPaletteGroup<T> = CommandP
    * @defaultValue 'description'
    */
   descriptionKey?: GetItemKeys<T>
+  /**
+   * When `items` is an array of objects, select the field to use as the value.
+   * @defaultValue 'undefined'
+   */
+  valueKey?: VK
+  /** Whether multiple options can be selected or not. */
+  multiple?: M & boolean
+  /**
+   * Use this to compare objects by a particular field, or pass your own
+   * comparison function for complete control over how objects are compared.
+   */
+  by?: GetItemKeys<T> | ((a: GetModelValue<T, VK, M>, b: GetModelValue<T, VK, M>) => boolean)
   /**
    * Whether to preserve the order of groups as defined in the `groups` prop when filtering.
    * When `false`, groups will appear based on item matches.
@@ -175,13 +191,13 @@ export interface CommandPaletteProps<G extends CommandPaletteGroup<T> = CommandP
   ui?: CommandPalette['slots']
 }
 
-export type CommandPaletteEmits<T extends CommandPaletteItem = CommandPaletteItem> = ListboxRootEmits<T> & {
+export type CommandPaletteEmits<T extends CommandPaletteItem = CommandPaletteItem, VK extends GetItemKeys<T> | undefined = undefined, M extends boolean = false> = ListboxRootEmits<T> & {
   'update:open': [value: boolean]
-}
+} & GetModelValueEmits<T, VK, M>
 
 type SlotProps<T> = (props: { item: T, index: number, ui: CommandPalette['ui'] }) => any
 
-export type CommandPaletteSlots<G extends CommandPaletteGroup<T> = CommandPaletteGroup<any>, T extends CommandPaletteItem = CommandPaletteItem> = {
+export type CommandPaletteSlots<T extends CommandPaletteItem = CommandPaletteItem, G extends CommandPaletteGroup<T> = CommandPaletteGroup<T>> = {
   'empty'(props: { searchTerm?: string }): any
   'footer'(props: { ui: CommandPalette['ui'] }): any
   'back'(props: { ui: CommandPalette['ui'] }): any
@@ -195,7 +211,7 @@ export type CommandPaletteSlots<G extends CommandPaletteGroup<T> = CommandPalett
 
 </script>
 
-<script setup lang="ts" generic="G extends CommandPaletteGroup<T>, T extends CommandPaletteItem">
+<script setup lang="ts" generic="T extends CommandPaletteItem, G extends CommandPaletteGroup<T>, VK extends GetItemKeys<T> | undefined = undefined, M extends boolean = false">
 import { computed, ref, useTemplateRef, toRef } from 'vue'
 import { ListboxRoot, ListboxFilter, ListboxContent, ListboxGroup, ListboxGroupLabel, ListboxVirtualizer, ListboxItem, ListboxItemIndicator, useForwardProps, useForwardPropsEmits } from 'reka-ui'
 import { defu } from 'defu'
@@ -216,8 +232,7 @@ import ULink from './Link.vue'
 import UInput from './Input.vue'
 import UKbd from './Kbd.vue'
 
-const props = withDefaults(defineProps<CommandPaletteProps<G, T>>(), {
-  modelValue: '',
+const props = withDefaults(defineProps<CommandPaletteProps<T, G, VK, M>>(), {
   labelKey: 'label',
   descriptionKey: 'description',
   autofocus: true,
@@ -226,8 +241,8 @@ const props = withDefaults(defineProps<CommandPaletteProps<G, T>>(), {
   virtualize: false,
   highlightOnHover: true
 })
-const emits = defineEmits<CommandPaletteEmits<T>>()
-const slots = defineSlots<CommandPaletteSlots<G, T>>()
+const emits = defineEmits<CommandPaletteEmits<T, VK, M>>()
+const slots = defineSlots<CommandPaletteSlots<T, G>>()
 
 const searchTerm = defineModel<string>('searchTerm', { default: '' })
 
@@ -413,15 +428,15 @@ function onSelect(e: Event, item: T) {
 <template>
   <DefineItemTemplate v-slot="{ item, index, group }">
     <ListboxItem
-      :value="omit(item, ['matches' as any, 'group' as any, 'onSelect', 'labelHtml', 'suffixHtml', 'children'])"
+      :value="props.valueKey ? get(item, props.valueKey as string) : omit(item, ['matches' as any, 'group' as any, 'onSelect', 'labelHtml', 'suffixHtml', 'children'])"
       :disabled="item.disabled"
       as-child
       @select="onSelect($event, item as T)"
     >
       <ULink v-slot="{ active, ...slotProps }" v-bind="pickLinkProps(item)" custom>
         <ULinkBase v-bind="slotProps" :class="ui.item({ class: [props.ui?.item, item.ui?.item, item.class], active: active || item.active })">
-          <slot :name="((item.slot || group?.slot || 'item') as keyof CommandPaletteSlots<G, T>)" :item="(item as any)" :index="index" :ui="ui">
-            <slot :name="((item.slot ? `${item.slot}-leading` : group?.slot ? `${group.slot}-leading` : `item-leading`) as keyof CommandPaletteSlots<G, T>)" :item="(item as any)" :index="index" :ui="ui">
+          <slot :name="((item.slot || group?.slot || 'item') as keyof CommandPaletteSlots<T, G>)" :item="(item as any)" :index="index" :ui="ui">
+            <slot :name="((item.slot ? `${item.slot}-leading` : group?.slot ? `${group.slot}-leading` : `item-leading`) as keyof CommandPaletteSlots<T, G>)" :item="(item as any)" :index="index" :ui="ui">
               <UIcon v-if="item.loading" :name="loadingIcon || appConfig.ui.icons.loading" :class="ui.itemLeadingIcon({ class: [props.ui?.itemLeadingIcon, item.ui?.itemLeadingIcon], loading: true })" />
               <UIcon v-else-if="item.icon" :name="item.icon" :class="ui.itemLeadingIcon({ class: [props.ui?.itemLeadingIcon, item.ui?.itemLeadingIcon], active: active || item.active })" />
               <UAvatar v-else-if="item.avatar" :size="((item.ui?.itemLeadingAvatarSize || props.ui?.itemLeadingAvatarSize || ui.itemLeadingAvatarSize()) as AvatarProps['size'])" v-bind="item.avatar" :class="ui.itemLeadingAvatar({ class: [props.ui?.itemLeadingAvatar, item.ui?.itemLeadingAvatar], active: active || item.active })" />
@@ -435,9 +450,9 @@ function onSelect(e: Event, item: T) {
               />
             </slot>
 
-            <span v-if="(item.prefix || (item.labelHtml || get(item, props.labelKey as string)) || (item.suffixHtml || item.suffix) || !!slots[(item.slot ? `${item.slot}-label` : group?.slot ? `${group.slot}-label` : `item-label`) as keyof CommandPaletteSlots<G, T>]) || (get(item, props.descriptionKey as string) || !!slots[(item.slot ? `${item.slot}-description` : group?.slot ? `${group.slot}-description` : `item-description`) as keyof CommandPaletteSlots<G, T>])" :class="ui.itemWrapper({ class: [props.ui?.itemWrapper, item.ui?.itemWrapper] })">
+            <span v-if="(item.prefix || (item.labelHtml || get(item, props.labelKey as string)) || (item.suffixHtml || item.suffix) || !!slots[(item.slot ? `${item.slot}-label` : group?.slot ? `${group.slot}-label` : `item-label`) as keyof CommandPaletteSlots<T, G>]) || (get(item, props.descriptionKey as string) || !!slots[(item.slot ? `${item.slot}-description` : group?.slot ? `${group.slot}-description` : `item-description`) as keyof CommandPaletteSlots<T, G>])" :class="ui.itemWrapper({ class: [props.ui?.itemWrapper, item.ui?.itemWrapper] })">
               <span :class="ui.itemLabel({ class: [props.ui?.itemLabel, item.ui?.itemLabel], active: active || item.active })">
-                <slot :name="((item.slot ? `${item.slot}-label` : group?.slot ? `${group.slot}-label` : `item-label`) as keyof CommandPaletteSlots<G, T>)" :item="(item as any)" :index="index" :ui="ui">
+                <slot :name="((item.slot ? `${item.slot}-label` : group?.slot ? `${group.slot}-label` : `item-label`) as keyof CommandPaletteSlots<T, G>)" :item="(item as any)" :index="index" :ui="ui">
                   <span v-if="item.prefix" :class="ui.itemLabelPrefix({ class: [props.ui?.itemLabelPrefix, item.ui?.itemLabelPrefix] })">{{ item.prefix }}</span>
 
                   <span :class="ui.itemLabelBase({ class: [props.ui?.itemLabelBase, item.ui?.itemLabelBase], active: active || item.active })" v-html="item.labelHtml || get(item, props.labelKey as string)" />
@@ -447,14 +462,14 @@ function onSelect(e: Event, item: T) {
               </span>
 
               <span v-if="get(item, props.descriptionKey as string)" :class="ui.itemDescription({ class: [props.ui?.itemDescription, item.ui?.itemDescription] })">
-                <slot :name="((item.slot ? `${item.slot}-description` : group?.slot ? `${group.slot}-description` : `item-description`) as keyof CommandPaletteSlots<G, T>)" :item="(item as any)" :index="index" :ui="ui">
+                <slot :name="((item.slot ? `${item.slot}-description` : group?.slot ? `${group.slot}-description` : `item-description`) as keyof CommandPaletteSlots<T, G>)" :item="(item as any)" :index="index" :ui="ui">
                   {{ get(item, props.descriptionKey as string) }}
                 </slot>
               </span>
             </span>
 
             <span :class="ui.itemTrailing({ class: [props.ui?.itemTrailing, item.ui?.itemTrailing] })">
-              <slot :name="((item.slot ? `${item.slot}-trailing` : group?.slot ? `${group.slot}-trailing` : `item-trailing`) as keyof CommandPaletteSlots<G, T>)" :item="(item as any)" :index="index" :ui="ui">
+              <slot :name="((item.slot ? `${item.slot}-trailing` : group?.slot ? `${group.slot}-trailing` : `item-trailing`) as keyof CommandPaletteSlots<T, G>)" :item="(item as any)" :index="index" :ui="ui">
                 <UIcon
                   v-if="item.children && item.children.length > 0"
                   :name="childrenIcon || appConfig.ui.icons.chevronRight"
@@ -478,7 +493,13 @@ function onSelect(e: Event, item: T) {
     </ListboxItem>
   </DefineItemTemplate>
 
-  <ListboxRoot v-bind="rootProps" ref="listboxRootRef" :selection-behavior="selectionBehavior" :class="ui.root({ class: [props.ui?.root, props.class] })">
+  <ListboxRoot
+    v-bind="rootProps"
+    ref="listboxRootRef"
+    :by="(by as any)"
+    :selection-behavior="selectionBehavior"
+    :class="ui.root({ class: [props.ui?.root, props.class] })"
+  >
     <ListboxFilter v-model="searchTerm" as-child>
       <UInput
         :placeholder="placeholder"
diff --git a/src/runtime/components/DashboardSearch.vue b/src/runtime/components/DashboardSearch.vue
index 89ad40a6c8..4b1db44b01 100644
--- a/src/runtime/components/DashboardSearch.vue
+++ b/src/runtime/components/DashboardSearch.vue
@@ -63,10 +63,10 @@ export interface DashboardSearchProps<T extends CommandPaletteItem = CommandPale
    */
   colorMode?: boolean
   class?: any
-  ui?: DashboardSearch['slots'] & CommandPaletteProps<CommandPaletteGroup<CommandPaletteItem>, CommandPaletteItem>['ui']
+  ui?: DashboardSearch['slots'] & CommandPaletteProps<T>['ui']
 }
 
-export type DashboardSearchSlots = CommandPaletteSlots<CommandPaletteGroup<CommandPaletteItem>, CommandPaletteItem> & {
+export type DashboardSearchSlots<T extends CommandPaletteItem = CommandPaletteItem> = CommandPaletteSlots<T> & {
   content(props: { close: () => void }): any
 }
 
diff --git a/src/runtime/components/InputMenu.vue b/src/runtime/components/InputMenu.vue
index 73dbe7db3a..1860fbbcce 100644
--- a/src/runtime/components/InputMenu.vue
+++ b/src/runtime/components/InputMenu.vue
@@ -147,6 +147,11 @@ export interface InputMenuProps<T extends ArrayOrNested<InputMenuItem> = ArrayOr
    * @defaultValue false
    */
   ignoreFilter?: boolean
+  /**
+   * Use this to compare objects by a particular field, or pass your own
+   * comparison function for complete control over how objects are compared.
+   */
+  by?: GetItemKeys<T> | ((a: GetModelValue<T, VK, M>, b: GetModelValue<T, VK, M>) => boolean)
   class?: any
   ui?: InputMenu['slots']
 }
@@ -513,6 +518,7 @@ defineExpose({
     :disabled="disabled"
     :class="ui.root({ class: [props.ui?.root, props.class] })"
     :as-child="!!multiple"
+    :by="(by as any)"
     ignore-filter
     @update:model-value="onUpdate"
     @update:open="onUpdateOpen"
diff --git a/src/runtime/components/Select.vue b/src/runtime/components/Select.vue
index 901dbb4c53..1ff45acb23 100644
--- a/src/runtime/components/Select.vue
+++ b/src/runtime/components/Select.vue
@@ -101,6 +101,11 @@ export interface SelectProps<T extends ArrayOrNested<SelectItem> = ArrayOrNested
   highlight?: boolean
   autofocus?: boolean
   autofocusDelay?: number
+  /**
+   * Use this to compare objects by a particular field, or pass your own
+   * comparison function for complete control over how objects are compared.
+   */
+  by?: GetItemKeys<T> | ((a: GetModelValue<T, VK, M>, b: GetModelValue<T, VK, M>) => boolean)
   class?: any
   ui?: Select['slots']
 }
@@ -267,6 +272,7 @@ defineExpose({
     :disabled="disabled"
     :default-value="(defaultValue as Exclude<SelectItem, boolean> | Exclude<SelectItem, boolean>[])"
     :model-value="(modelValue as Exclude<SelectItem, boolean> | Exclude<SelectItem, boolean>[])"
+    :by="(by as any)"
     @update:model-value="onUpdate"
     @update:open="onUpdateOpen"
   >
diff --git a/src/runtime/components/SelectMenu.vue b/src/runtime/components/SelectMenu.vue
index 4f3738552c..c43eecf7bc 100644
--- a/src/runtime/components/SelectMenu.vue
+++ b/src/runtime/components/SelectMenu.vue
@@ -141,6 +141,11 @@ export interface SelectMenuProps<T extends ArrayOrNested<SelectMenuItem> = Array
   ignoreFilter?: boolean
   autofocus?: boolean
   autofocusDelay?: number
+  /**
+   * Use this to compare objects by a particular field, or pass your own
+   * comparison function for complete control over how objects are compared.
+   */
+  by?: GetItemKeys<T> | ((a: GetModelValue<T, VK, M>, b: GetModelValue<T, VK, M>) => boolean)
   class?: any
   ui?: SelectMenu['slots']
 }
@@ -495,6 +500,7 @@ defineExpose({
     as-child
     :name="name"
     :disabled="disabled"
+    :by="(by as any)"
     @update:model-value="onUpdate"
     @update:open="onUpdateOpen"
   >
diff --git a/src/runtime/components/content/ContentSearch.vue b/src/runtime/components/content/ContentSearch.vue
index 056d95e18d..2906f7e7c5 100644
--- a/src/runtime/components/content/ContentSearch.vue
+++ b/src/runtime/components/content/ContentSearch.vue
@@ -95,10 +95,10 @@ export interface ContentSearchProps<T extends ContentSearchLink = ContentSearchL
    */
   colorMode?: boolean
   class?: any
-  ui?: ContentSearch['slots'] & CommandPaletteProps<CommandPaletteGroup<ContentSearchItem>, ContentSearchItem>['ui']
+  ui?: ContentSearch['slots'] & CommandPaletteProps<ContentSearchItem>['ui']
 }
 
-export type ContentSearchSlots = CommandPaletteSlots<CommandPaletteGroup<ContentSearchItem>, ContentSearchItem> & {
+export type ContentSearchSlots = CommandPaletteSlots<ContentSearchItem> & {
   content(props: { close: () => void }): any
 }
 
diff --git a/test/components/CommandPalette.spec.ts b/test/components/CommandPalette.spec.ts
index cd2ef2aeb3..241a30fa28 100644
--- a/test/components/CommandPalette.spec.ts
+++ b/test/components/CommandPalette.spec.ts
@@ -2,7 +2,7 @@ import { describe, it, expect } from 'vitest'
 import { axe } from 'vitest-axe'
 import { mountSuspended } from '@nuxt/test-utils/runtime'
 import CommandPalette from '../../src/runtime/components/CommandPalette.vue'
-import type { CommandPaletteProps, CommandPaletteSlots } from '../../src/runtime/components/CommandPalette.vue'
+import type { CommandPaletteGroup, CommandPaletteProps, CommandPaletteSlots } from '../../src/runtime/components/CommandPalette.vue'
 import ComponentRender from '../component-render'
 
 describe('CommandPalette', () => {
@@ -63,7 +63,7 @@ describe('CommandPalette', () => {
       to: 'https://github.com/benjamincanac',
       target: '_blank'
     }]
-  }]
+  }] satisfies CommandPaletteGroup[]
 
   const groupsWithDescription = [{
     id: 'actions',
@@ -108,6 +108,7 @@ describe('CommandPalette', () => {
     ['with defaultValue', { props: { ...props, defaultValue: groups[2]?.items[0] } }],
     ['with searchTerm', { props: { ...props, searchTerm: 'f' } }],
     ['with searchTerm and preserveGroupOrder', { props: { ...props, searchTerm: 'f', preserveGroupOrder: true } }],
+    ['with valueKey', { props: { ...props, valueKey: 'label' as any } }],
     ['with labelKey', { props: { ...props, labelKey: 'icon' } }],
     ['with descriptionKey', { props: { groups: groupsWithDescription, descriptionKey: 'label' } }],
     ['with placeholder', { props: { ...props, placeholder: 'Search...' } }],
diff --git a/test/components/__snapshots__/CommandPalette-vue.spec.ts.snap b/test/components/__snapshots__/CommandPalette-vue.spec.ts.snap
index 8342709227..66b0594e6f 100644
--- a/test/components/__snapshots__/CommandPalette-vue.spec.ts.snap
+++ b/test/components/__snapshots__/CommandPalette-vue.spec.ts.snap
@@ -348,8 +348,8 @@ exports[`CommandPalette > renders with defaultValue correctly 1`] = `
         </button>
       </div>
       <div role="group" aria-labelledby="reka-listbox-group-v-9" class="p-1 isolate">
-        <div id="reka-listbox-group-v-9" class="p-1.5 text-xs font-semibold text-highlighted">Users</div><a href="https://github.com/benjamincanac" role="option" tabindex="-1" target="_blank" data-reka-collection-item="" id="reka-listbox-item-v-10" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamin Canac" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">benjamincanac</span><span class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary"></span></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+        <div id="reka-listbox-group-v-9" class="p-1.5 text-xs font-semibold text-highlighted">Users</div><a href="https://github.com/benjamincanac" role="option" tabindex="-1" target="_blank" data-reka-collection-item="" id="reka-listbox-item-v-10" aria-selected="true" data-state="checked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamin Canac" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">benjamincanac</span><span class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary"></span></span>
+          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg></span>
         </a>
       </div>
     </div>
@@ -1249,6 +1249,52 @@ exports[`CommandPalette > renders with ui correctly 1`] = `
 </div>"
 `;
 
+exports[`CommandPalette > renders with valueKey correctly 1`] = `
+"<div dir="ltr" class="flex flex-col min-h-0 min-w-0 divide-y divide-default">
+  <div class="relative inline-flex items-center [&amp;>input]:h-12"><input type="text" placeholder="Type a command or search…" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent ps-9" autocomplete="off" aria-disabled="false" value=""><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed size-5"></svg></span>
+    <!--v-if-->
+  </div>
+  <div class="relative overflow-hidden flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
+    <div role="presentation" class="relative scroll-py-1 overflow-y-auto flex-1 focus:outline-none divide-y divide-default">
+      <div role="group" aria-labelledby="reka-listbox-group-v-0" class="p-1 isolate">
+        <!--v-if--><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-1" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-highlighted before:bg-elevated"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 text-default"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add new file</span><span class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Create a new file in the current directory or workspace.</span></span>
+          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">N</kbd></span>
+          <!--v-if--></span>
+        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-2" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add new folder</span><span class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Create a new folder in the current directory or workspace.</span></span>
+          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">F</kbd></span>
+          <!--v-if--></span>
+        </button><button type="button" disabled="" data-reka-collection-item="" id="reka-listbox-item-v-3" role="option" tabindex="-1" aria-selected="false" data-disabled="" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add hashtag</span><span class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add a hashtag to the current item.</span></span>
+          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">H</kbd></span>
+          <!--v-if--></span>
+        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-4" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add label</span><span class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add a label to the current item.</span></span>
+          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">L</kbd></span>
+          <!--v-if--></span>
+        </button>
+      </div>
+      <div role="group" aria-labelledby="reka-listbox-group-v-5" class="p-1 isolate">
+        <div id="reka-listbox-group-v-5" class="p-1.5 text-xs font-semibold text-highlighted">Labels</div><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-6" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">
+          <div class="relative inline-flex items-center justify-center shrink-0 size-5"><span class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-error h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">bug</span><span class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary"></span></span>
+          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-7" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">
+          <div class="relative inline-flex items-center justify-center shrink-0 size-5"><span class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-success h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">feature</span><span class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary"></span></span>
+          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-8" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">
+          <div class="relative inline-flex items-center justify-center shrink-0 size-5"><span class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-info h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">enhancement</span><span class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary"></span></span>
+          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+        </button>
+      </div>
+      <div role="group" aria-labelledby="reka-listbox-group-v-9" class="p-1 isolate">
+        <div id="reka-listbox-group-v-9" class="p-1.5 text-xs font-semibold text-highlighted">Users</div><a href="https://github.com/benjamincanac" role="option" tabindex="-1" target="_blank" data-reka-collection-item="" id="reka-listbox-item-v-10" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamin Canac" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">benjamincanac</span><span class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary"></span></span>
+          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+        </a>
+      </div>
+    </div>
+  </div>
+  <!--v-if-->
+  <!--v-if-->
+</div>"
+`;
+
 exports[`CommandPalette > renders with virtualize correctly 1`] = `
 "<div dir="ltr" class="flex flex-col min-h-0 min-w-0 divide-y divide-default">
   <div class="relative inline-flex items-center [&amp;>input]:h-12"><input type="text" placeholder="Type a command or search…" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent ps-9" autocomplete="off" aria-disabled="false" value=""><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed size-5"></svg></span>
diff --git a/test/components/__snapshots__/CommandPalette.spec.ts.snap b/test/components/__snapshots__/CommandPalette.spec.ts.snap
index c5aac09fa5..684ef1c587 100644
--- a/test/components/__snapshots__/CommandPalette.spec.ts.snap
+++ b/test/components/__snapshots__/CommandPalette.spec.ts.snap
@@ -321,13 +321,13 @@ exports[`CommandPalette > renders with custom slot correctly 1`] = `
 
 exports[`CommandPalette > renders with defaultValue correctly 1`] = `
 "<div dir="ltr" class="flex flex-col min-h-0 min-w-0 divide-y divide-default">
-  <div class="relative inline-flex items-center [&amp;>input]:h-12"><input type="text" placeholder="Type a command or search…" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent ps-9" autocomplete="off" aria-disabled="false" value="" aria-activedescendant="reka-listbox-item-v-0-0-1"><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="iconify i-lucide:search shrink-0 text-dimmed size-5" aria-hidden="true"></span></span>
+  <div class="relative inline-flex items-center [&amp;>input]:h-12"><input type="text" placeholder="Type a command or search…" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent ps-9" autocomplete="off" aria-disabled="false" value="" aria-activedescendant="reka-listbox-item-v-0-0-10"><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="iconify i-lucide:search shrink-0 text-dimmed size-5" aria-hidden="true"></span></span>
     <!--v-if-->
   </div>
   <div class="relative overflow-hidden flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
     <div role="presentation" class="relative scroll-py-1 overflow-y-auto flex-1 focus:outline-none divide-y divide-default">
       <div role="group" aria-labelledby="reka-listbox-group-v-0-0-0" class="p-1 isolate">
-        <!--v-if--><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-1" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-highlighted before:bg-elevated" data-highlighted=""><span class="iconify i-lucide:file-plus shrink-0 size-5 text-default" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add new file</span><span class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Create a new file in the current directory or workspace.</span></span>
+        <!--v-if--><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-1" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-highlighted before:bg-elevated"><span class="iconify i-lucide:file-plus shrink-0 size-5 text-default" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add new file</span><span class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Create a new file in the current directory or workspace.</span></span>
           <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">N</kbd></span>
           <!--v-if--></span>
         </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-2" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:folder-plus shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add new folder</span><span class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Create a new folder in the current directory or workspace.</span></span>
@@ -354,8 +354,8 @@ exports[`CommandPalette > renders with defaultValue correctly 1`] = `
         </button>
       </div>
       <div role="group" aria-labelledby="reka-listbox-group-v-0-0-9" class="p-1 isolate">
-        <div id="reka-listbox-group-v-0-0-9" class="p-1.5 text-xs font-semibold text-highlighted">Users</div><a href="https://github.com/benjamincanac" role="option" tabindex="-1" rel="noopener noreferrer" target="_blank" data-reka-collection-item="" id="reka-listbox-item-v-0-0-10" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamin Canac" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">benjamincanac</span><span class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary"></span></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+        <div id="reka-listbox-group-v-0-0-9" class="p-1.5 text-xs font-semibold text-highlighted">Users</div><a href="https://github.com/benjamincanac" role="option" tabindex="-1" rel="noopener noreferrer" target="_blank" data-reka-collection-item="" id="reka-listbox-item-v-0-0-10" aria-selected="true" data-state="checked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors" data-highlighted=""><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamin Canac" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">benjamincanac</span><span class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary"></span></span>
+          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><span class="iconify i-lucide:check shrink-0 size-5" aria-hidden="true"></span></span>
         </a>
       </div>
     </div>
@@ -1255,6 +1255,52 @@ exports[`CommandPalette > renders with ui correctly 1`] = `
 </div>"
 `;
 
+exports[`CommandPalette > renders with valueKey correctly 1`] = `
+"<div dir="ltr" class="flex flex-col min-h-0 min-w-0 divide-y divide-default">
+  <div class="relative inline-flex items-center [&amp;>input]:h-12"><input type="text" placeholder="Type a command or search…" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent ps-9" autocomplete="off" aria-disabled="false" value="" aria-activedescendant="reka-listbox-item-v-0-0-1"><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="iconify i-lucide:search shrink-0 text-dimmed size-5" aria-hidden="true"></span></span>
+    <!--v-if-->
+  </div>
+  <div class="relative overflow-hidden flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
+    <div role="presentation" class="relative scroll-py-1 overflow-y-auto flex-1 focus:outline-none divide-y divide-default">
+      <div role="group" aria-labelledby="reka-listbox-group-v-0-0-0" class="p-1 isolate">
+        <!--v-if--><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-1" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-highlighted before:bg-elevated" data-highlighted=""><span class="iconify i-lucide:file-plus shrink-0 size-5 text-default" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add new file</span><span class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Create a new file in the current directory or workspace.</span></span>
+          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">N</kbd></span>
+          <!--v-if--></span>
+        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-2" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:folder-plus shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add new folder</span><span class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Create a new folder in the current directory or workspace.</span></span>
+          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">F</kbd></span>
+          <!--v-if--></span>
+        </button><button type="button" disabled="" data-reka-collection-item="" id="reka-listbox-item-v-0-0-3" role="option" tabindex="-1" aria-selected="false" data-disabled="" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:hash shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add hashtag</span><span class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add a hashtag to the current item.</span></span>
+          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">H</kbd></span>
+          <!--v-if--></span>
+        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-4" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:tag shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add label</span><span class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add a label to the current item.</span></span>
+          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">L</kbd></span>
+          <!--v-if--></span>
+        </button>
+      </div>
+      <div role="group" aria-labelledby="reka-listbox-group-v-0-0-5" class="p-1 isolate">
+        <div id="reka-listbox-group-v-0-0-5" class="p-1.5 text-xs font-semibold text-highlighted">Labels</div><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-6" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">
+          <div class="relative inline-flex items-center justify-center shrink-0 size-5"><span class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-error h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">bug</span><span class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary"></span></span>
+          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-7" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">
+          <div class="relative inline-flex items-center justify-center shrink-0 size-5"><span class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-success h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">feature</span><span class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary"></span></span>
+          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-8" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">
+          <div class="relative inline-flex items-center justify-center shrink-0 size-5"><span class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-info h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">enhancement</span><span class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary"></span></span>
+          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+        </button>
+      </div>
+      <div role="group" aria-labelledby="reka-listbox-group-v-0-0-9" class="p-1 isolate">
+        <div id="reka-listbox-group-v-0-0-9" class="p-1.5 text-xs font-semibold text-highlighted">Users</div><a href="https://github.com/benjamincanac" role="option" tabindex="-1" rel="noopener noreferrer" target="_blank" data-reka-collection-item="" id="reka-listbox-item-v-0-0-10" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamin Canac" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">benjamincanac</span><span class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary"></span></span>
+          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+        </a>
+      </div>
+    </div>
+  </div>
+  <!--v-if-->
+  <!--v-if-->
+</div>"
+`;
+
 exports[`CommandPalette > renders with virtualize correctly 1`] = `
 "<div dir="ltr" class="flex flex-col min-h-0 min-w-0 divide-y divide-default">
   <div class="relative inline-flex items-center [&amp;>input]:h-12"><input type="text" placeholder="Type a command or search…" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent ps-9" autocomplete="off" aria-disabled="false" value=""><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="iconify i-lucide:search shrink-0 text-dimmed size-5" aria-hidden="true"></span></span>