diff --git a/apps/website/src/routes/docs/headless/select/examples/bind-open.tsx b/apps/website/src/routes/docs/headless/select/examples/bind-open.tsx
index e2af01c91..cdf9560ee 100644
--- a/apps/website/src/routes/docs/headless/select/examples/bind-open.tsx
+++ b/apps/website/src/routes/docs/headless/select/examples/bind-open.tsx
@@ -17,7 +17,7 @@ export default component$(() => {
   return (
     <>
       <button onClick$={() => (isOpen.value = true)}>Toggle open state</button>
-      <Select bind:open={isOpen} class="select" aria-label="hero">
+      <Select bind:open={isOpen} class="select">
         <SelectTrigger class="select-trigger">
           <SelectValue placeholder="Select an option" />
         </SelectTrigger>
diff --git a/apps/website/src/routes/docs/headless/select/examples/controlled-value.tsx b/apps/website/src/routes/docs/headless/select/examples/controlled-value.tsx
index ccff33a55..4a37a5d38 100644
--- a/apps/website/src/routes/docs/headless/select/examples/controlled-value.tsx
+++ b/apps/website/src/routes/docs/headless/select/examples/controlled-value.tsx
@@ -15,13 +15,7 @@ export default component$(() => {
 
   return (
     <>
-      <Select
-        onChange$={$((value: string) => {
-          selected.value = value;
-        })}
-        bind:value={selected}
-        class="select"
-      >
+      <Select bind:value={selected} class="select">
         <SelectTrigger class="select-trigger">
           <SelectValue placeholder="Select an option" />
         </SelectTrigger>
diff --git a/apps/website/src/routes/docs/headless/select/examples/form.tsx b/apps/website/src/routes/docs/headless/select/examples/form.tsx
index b33cc3055..416ac7e43 100644
--- a/apps/website/src/routes/docs/headless/select/examples/form.tsx
+++ b/apps/website/src/routes/docs/headless/select/examples/form.tsx
@@ -15,7 +15,7 @@ export default component$(() => {
 
   return (
     <form preventdefault:submit>
-      <Select required class="select" aria-label="hero">
+      <Select required class="select">
         <SelectTrigger class="select-trigger">
           <SelectValue placeholder="Select an option" />
         </SelectTrigger>
diff --git a/apps/website/src/routes/docs/headless/select/examples/group.tsx b/apps/website/src/routes/docs/headless/select/examples/group.tsx
index 94edba40c..084b3707b 100644
--- a/apps/website/src/routes/docs/headless/select/examples/group.tsx
+++ b/apps/website/src/routes/docs/headless/select/examples/group.tsx
@@ -3,7 +3,7 @@ import {
   Select,
   SelectPopover,
   SelectGroup,
-  SelectLabel,
+  SelectGroupLabel,
   SelectListbox,
   SelectOption,
   SelectTrigger,
@@ -24,13 +24,13 @@ export default component$(() => {
       <SelectPopover class="select-popover">
         <SelectListbox class="select-listbox">
           <SelectGroup>
-            <SelectLabel class="select-label">People</SelectLabel>
+            <SelectGroupLabel class="select-label">People</SelectGroupLabel>
             {users.map((user) => (
               <SelectOption key={user}>{user}</SelectOption>
             ))}
           </SelectGroup>
           <SelectGroup>
-            <SelectLabel class="select-label">Animals</SelectLabel>
+            <SelectGroupLabel class="select-group-label">Animals</SelectGroupLabel>
             {animals.map((animal) => (
               <SelectOption class="select-option" key={animal}>
                 {animal}
diff --git a/apps/website/src/routes/docs/headless/select/examples/hero.tsx b/apps/website/src/routes/docs/headless/select/examples/hero.tsx
index 8ae05557b..7c5c45f92 100644
--- a/apps/website/src/routes/docs/headless/select/examples/hero.tsx
+++ b/apps/website/src/routes/docs/headless/select/examples/hero.tsx
@@ -1,6 +1,7 @@
 import { component$, useStyles$ } from '@builder.io/qwik';
 import {
   Select,
+  SelectLabel,
   SelectListbox,
   SelectOption,
   SelectPopover,
@@ -14,7 +15,8 @@ export default component$(() => {
   const users = ['Tim', 'Ryan', 'Jim', 'Jessie', 'Abby'];
 
   return (
-    <Select class="select" aria-label="hero">
+    <Select class="select">
+      <SelectLabel>Logged in users</SelectLabel>
       <SelectTrigger class="select-trigger">
         <SelectValue placeholder="Select an option" />
       </SelectTrigger>
diff --git a/apps/website/src/routes/docs/headless/select/examples/multiple.tsx b/apps/website/src/routes/docs/headless/select/examples/multiple.tsx
new file mode 100644
index 000000000..34f878d23
--- /dev/null
+++ b/apps/website/src/routes/docs/headless/select/examples/multiple.tsx
@@ -0,0 +1,31 @@
+import { component$, useSignal, useStyles$ } from '@builder.io/qwik';
+import {
+  Select,
+  SelectListbox,
+  SelectOption,
+  SelectPopover,
+  SelectTrigger,
+  SelectValue,
+} from '@qwik-ui/headless';
+import styles from '../snippets/select.css?inline';
+
+export default component$(() => {
+  useStyles$(styles);
+  const users = ['Tim', 'Ryan', 'Jim', 'Jessie', 'Abby'];
+  const selected = useSignal<string[]>([]);
+
+  return (
+    <Select multiple bind:value={selected} class="select">
+      <SelectTrigger class="select-trigger">
+        <SelectValue>{selected.value}</SelectValue>
+      </SelectTrigger>
+      <SelectPopover class="select-popover">
+        <SelectListbox class="select-listbox">
+          {users.map((user) => (
+            <SelectOption key={user}>{user}</SelectOption>
+          ))}
+        </SelectListbox>
+      </SelectPopover>
+    </Select>
+  );
+});
diff --git a/apps/website/src/routes/docs/headless/select/examples/scrollable.tsx b/apps/website/src/routes/docs/headless/select/examples/scrollable.tsx
index f5b09d5c6..d80c564c5 100644
--- a/apps/website/src/routes/docs/headless/select/examples/scrollable.tsx
+++ b/apps/website/src/routes/docs/headless/select/examples/scrollable.tsx
@@ -3,7 +3,7 @@ import {
   Select,
   SelectPopover,
   SelectGroup,
-  SelectLabel,
+  SelectGroupLabel,
   SelectListbox,
   SelectOption,
   SelectTrigger,
@@ -24,7 +24,7 @@ export default component$(() => {
       <SelectPopover class="select-popover">
         <SelectListbox class="select-listbox select-max-height">
           <SelectGroup>
-            <SelectLabel class="select-label">People</SelectLabel>
+            <SelectGroupLabel class="select-label">People</SelectGroupLabel>
             {users.map((user) => (
               <SelectOption class="select-option" key={user}>
                 {user}
@@ -32,7 +32,7 @@ export default component$(() => {
             ))}
           </SelectGroup>
           <SelectGroup>
-            <SelectLabel class="select-label">Animals</SelectLabel>
+            <SelectGroupLabel class="select-label">Animals</SelectGroupLabel>
             {animals.map((animal) => (
               <SelectOption key={animal}>{animal}</SelectOption>
             ))}
diff --git a/apps/website/src/routes/docs/headless/select/index.mdx b/apps/website/src/routes/docs/headless/select/index.mdx
index 603d96b67..1228b9652 100644
--- a/apps/website/src/routes/docs/headless/select/index.mdx
+++ b/apps/website/src/routes/docs/headless/select/index.mdx
@@ -207,6 +207,12 @@ A common use case is the addition of options dynamically. For example, an infini
 
 Clicking the `Add Users` button adds a couple new users mapped to the list. Taking this further, we could grab more data from the server and add it to the list, or even hitting a database to get more users.
 
+### Multiple selections
+
+<Showcase name="multiple" />
+
+The `multiple` prop allows the user to select multiple options.
+
 ## Menu behavior
 
 ### Typeahead
diff --git a/apps/website/src/routes/docs/headless/select/snippets/building-blocks.tsx b/apps/website/src/routes/docs/headless/select/snippets/building-blocks.tsx
index ed3b39181..9cd67f844 100644
--- a/apps/website/src/routes/docs/headless/select/snippets/building-blocks.tsx
+++ b/apps/website/src/routes/docs/headless/select/snippets/building-blocks.tsx
@@ -4,7 +4,7 @@ import {
   SelectPopover,
   SelectTrigger,
   SelectGroup,
-  SelectLabel,
+  SelectGroupLabel,
   SelectValue,
   SelectListbox,
   SelectOption,
@@ -22,7 +22,7 @@ export default component$(() => (
 
         {/* optional */}
         <SelectGroup>
-          <SelectLabel>group label</SelectLabel>
+          <SelectGroupLabel>group label</SelectGroupLabel>
           <SelectOption>group option</SelectOption>
         </SelectGroup>
       </SelectListbox>
diff --git a/apps/website/src/routes/docs/headless/select/snippets/select.css b/apps/website/src/routes/docs/headless/select/snippets/select.css
index 678dfded2..ac5cc6cd0 100644
--- a/apps/website/src/routes/docs/headless/select/snippets/select.css
+++ b/apps/website/src/routes/docs/headless/select/snippets/select.css
@@ -28,7 +28,7 @@
   color: hsl(var(--foreground));
 }
 
-.select-label {
+.select-group-label {
   font-size: 0.875rem;
   line-height: 1.25rem;
   color: hsla(var(--foreground) / 0.8);
diff --git a/packages/kit-headless/src/components/select/hidden-select.tsx b/packages/kit-headless/src/components/select/hidden-select.tsx
index 71594c353..b947a461a 100644
--- a/packages/kit-headless/src/components/select/hidden-select.tsx
+++ b/packages/kit-headless/src/components/select/hidden-select.tsx
@@ -55,7 +55,7 @@ export const HiddenSelect = component$(
               {options?.map((opt: Opt) => (
                 <option
                   value={opt.value}
-                  selected={context.selectedIndexSig.value === opt.index}
+                  selected={context.selectedIndexesSig.value.includes(opt.index)}
                   key={opt.value}
                 >
                   {opt.displayValue}
diff --git a/packages/kit-headless/src/components/select/index.ts b/packages/kit-headless/src/components/select/index.ts
index f9d593d30..a692f45e4 100644
--- a/packages/kit-headless/src/components/select/index.ts
+++ b/packages/kit-headless/src/components/select/index.ts
@@ -1,4 +1,5 @@
 export * from './select';
+export * from './select-label';
 export * from './select-inline';
 export * from './select-listbox';
 export * from './select-option';
@@ -6,5 +7,5 @@ export * from './select-popover';
 export * from './select-trigger';
 export * from './select-value';
 export * from './select-group';
-export * from './select-label';
+export * from './select-group-label';
 export * from './hidden-select';
diff --git a/packages/kit-headless/src/components/select/select-context.ts b/packages/kit-headless/src/components/select/select-context.ts
index dcdcb160c..5bb48f7d8 100644
--- a/packages/kit-headless/src/components/select/select-context.ts
+++ b/packages/kit-headless/src/components/select/select-context.ts
@@ -13,21 +13,23 @@ export type SelectContext = {
   popoverRef: Signal<HTMLElement | undefined>;
   listboxRef: Signal<HTMLUListElement | undefined>;
   groupRef: Signal<HTMLDivElement | undefined>;
+  labelRef: Signal<HTMLDivElement | undefined>;
 
   // core state
   localId: string;
   optionsSig: Signal<Opt[]>;
   highlightedIndexSig: Signal<number | null>;
   isListboxOpenSig: Signal<boolean>;
-  selectedIndexSig: Signal<number | null>;
+  selectedIndexesSig: Signal<Array<number | null>>;
 
   // user configurable
   scrollOptions?: ScrollIntoViewOptions;
   loop: boolean;
+  multiple: boolean | undefined;
 };
 
 export const groupContextId = createContextId<GroupContext>('Select-Group');
 
 export type GroupContext = {
-  labelId: string;
+  groupLabelId: string;
 };
diff --git a/packages/kit-headless/src/components/select/select-group-label.tsx b/packages/kit-headless/src/components/select/select-group-label.tsx
new file mode 100644
index 000000000..29ea9a92f
--- /dev/null
+++ b/packages/kit-headless/src/components/select/select-group-label.tsx
@@ -0,0 +1,14 @@
+import { PropsOf, Slot, component$, useContext } from '@builder.io/qwik';
+import { groupContextId } from './select-context';
+
+type SelectLabelProps = PropsOf<'li'>;
+
+export const SelectGroupLabel = component$<SelectLabelProps>((props) => {
+  const groupContext = useContext(groupContextId);
+
+  return (
+    <li id={groupContext.groupLabelId} {...props}>
+      <Slot />
+    </li>
+  );
+});
diff --git a/packages/kit-headless/src/components/select/select-group.tsx b/packages/kit-headless/src/components/select/select-group.tsx
index 4bc9fc6dc..7996ef46d 100644
--- a/packages/kit-headless/src/components/select/select-group.tsx
+++ b/packages/kit-headless/src/components/select/select-group.tsx
@@ -4,7 +4,6 @@ import {
   component$,
   useContext,
   useContextProvider,
-  useId,
 } from '@builder.io/qwik';
 
 import SelectContextId, { groupContextId } from './select-context';
@@ -13,16 +12,16 @@ type SelectGroupProps = PropsOf<'div'>;
 
 export const SelectGroup = component$<SelectGroupProps>((props) => {
   const context = useContext(SelectContextId);
-  const labelId = useId();
+  const groupLabelId = `${context.localId}-group-label`;
 
   const groupContext = {
-    labelId,
+    groupLabelId,
   };
 
   useContextProvider(groupContextId, groupContext);
 
   return (
-    <div aria-labelledby={labelId} role="group" {...props} ref={context.groupRef}>
+    <div aria-labelledby={groupLabelId} role="group" {...props} ref={context.groupRef}>
       <Slot />
     </div>
   );
diff --git a/packages/kit-headless/src/components/select/select-inline.tsx b/packages/kit-headless/src/components/select/select-inline.tsx
index ad2ee773e..d261adcee 100644
--- a/packages/kit-headless/src/components/select/select-inline.tsx
+++ b/packages/kit-headless/src/components/select/select-inline.tsx
@@ -1,6 +1,7 @@
 import { type JSXNode, Component } from '@builder.io/qwik';
 import { SelectImpl, type SelectProps } from './select';
 import { SelectOption } from './select-option';
+import { SelectLabel } from './select-label';
 
 export type Opt = {
   isDisabled: boolean;
@@ -18,6 +19,7 @@ export const Select: Component<SelectProps> = (props: SelectProps) => {
   const opts: Opt[] = [];
   let currentIndex = 0;
   let valuePropIndex = null;
+  let label = false;
 
   const childrenToProcess = (
     Array.isArray(myChildren) ? [...myChildren] : [myChildren]
@@ -70,6 +72,11 @@ export const Select: Component<SelectProps> = (props: SelectProps) => {
         break;
       }
 
+      case SelectLabel: {
+        label = true;
+        break;
+      }
+
       default: {
         if (child) {
           const anyChildren = Array.isArray(child.children)
@@ -95,7 +102,7 @@ export const Select: Component<SelectProps> = (props: SelectProps) => {
   }
 
   return (
-    <SelectImpl {...rest} _valuePropIndex={valuePropIndex} _options={opts}>
+    <SelectImpl {...rest} _label={label} _valuePropIndex={valuePropIndex} _options={opts}>
       {props.children}
     </SelectImpl>
   );
diff --git a/packages/kit-headless/src/components/select/select-label.tsx b/packages/kit-headless/src/components/select/select-label.tsx
index f69bed225..01794e9fe 100644
--- a/packages/kit-headless/src/components/select/select-label.tsx
+++ b/packages/kit-headless/src/components/select/select-label.tsx
@@ -1,14 +1,13 @@
 import { PropsOf, Slot, component$, useContext } from '@builder.io/qwik';
-import { groupContextId } from './select-context';
+import SelectContextId from './select-context';
 
-type SelectLabelProps = PropsOf<'li'>;
-
-export const SelectLabel = component$<SelectLabelProps>((props) => {
-  const groupContext = useContext(groupContextId);
+export const SelectLabel = component$((props: PropsOf<'div'>) => {
+  const context = useContext(SelectContextId);
+  const labelId = `${context.localId}-label`;
 
   return (
-    <li id={groupContext.labelId} {...props}>
+    <div ref={context.labelRef} id={labelId} {...props}>
       <Slot />
-    </li>
+    </div>
   );
 });
diff --git a/packages/kit-headless/src/components/select/select-option.tsx b/packages/kit-headless/src/components/select/select-option.tsx
index d956a8837..8d93bbae6 100644
--- a/packages/kit-headless/src/components/select/select-option.tsx
+++ b/packages/kit-headless/src/components/select/select-option.tsx
@@ -10,6 +10,7 @@ import {
 } from '@builder.io/qwik';
 import { isServer, isBrowser } from '@builder.io/qwik/build';
 import SelectContextId from './select-context';
+import { useSelect } from './use-select';
 
 export type SelectOptionProps = PropsOf<'li'> & {
   /** Internal index we get from the inline component. Please see select-inline.tsx */
@@ -30,8 +31,11 @@ export const SelectOption = component$<SelectOptionProps>((props) => {
   const localIndexSig = useSignal<number | null>(null);
   const optionId = `${context.localId}-${_index}`;
 
+  const { addUniqueIndex } = useSelect();
+
   const isSelectedSig = useComputed$(() => {
-    return !disabled && context.selectedIndexSig.value === _index;
+    const index = _index ?? null;
+    return !disabled && context.selectedIndexesSig.value.includes(index);
   });
 
   const isHighlightedSig = useComputed$(() => {
@@ -78,8 +82,12 @@ export const SelectOption = component$<SelectOptionProps>((props) => {
   const handleClick$ = $(() => {
     if (disabled) return;
 
-    context.selectedIndexSig.value = localIndexSig.value;
-    context.isListboxOpenSig.value = false;
+    if (context.multiple) {
+      addUniqueIndex(context.selectedIndexesSig, localIndexSig.value);
+    } else {
+      context.selectedIndexesSig.value = [localIndexSig.value];
+      context.isListboxOpenSig.value = false;
+    }
   });
 
   const handlePointerOver$ = $(() => {
diff --git a/packages/kit-headless/src/components/select/select-trigger.tsx b/packages/kit-headless/src/components/select/select-trigger.tsx
index 6ae765c38..59bb3170d 100644
--- a/packages/kit-headless/src/components/select/select-trigger.tsx
+++ b/packages/kit-headless/src/components/select/select-trigger.tsx
@@ -8,6 +8,7 @@ export const SelectTrigger = component$<SelectTriggerProps>((props) => {
   const { getNextEnabledOptionIndex, getPrevEnabledOptionIndex } = useSelect();
   const openKeys = ['ArrowUp', 'ArrowDown'];
   const closedKeys = [`Escape`];
+  const labelId = `${context.localId}-label`;
 
   const { typeahead$ } = useTypeahead();
 
@@ -64,48 +65,57 @@ export const SelectTrigger = component$<SelectTriggerProps>((props) => {
     }
 
     if (!context.isListboxOpenSig.value) {
+      if (context.multiple) return;
+
       if (e.key === 'ArrowRight' && context.highlightedIndexSig.value === null) {
-        context.selectedIndexSig.value = await getNextEnabledOptionIndex(
+        const firstIndex = await getNextEnabledOptionIndex(
           -1,
           context.optionsSig.value,
           context.loop,
         );
+        context.selectedIndexesSig.value = [firstIndex];
 
-        context.highlightedIndexSig.value = context.selectedIndexSig.value;
+        context.highlightedIndexSig.value = context.selectedIndexesSig.value[0];
         return;
       }
 
       if (e.key === 'ArrowRight' && context.highlightedIndexSig.value !== null) {
-        context.selectedIndexSig.value = await getNextEnabledOptionIndex(
-          context.selectedIndexSig.value!,
+        const nextIndex = await getNextEnabledOptionIndex(
+          context.selectedIndexesSig.value[0]!,
           context.optionsSig.value,
           context.loop,
         );
 
-        console.log('selectedIndex', context.selectedIndexSig.value);
+        context.selectedIndexesSig.value = [nextIndex];
+
+        console.log('selectedIndex', context.selectedIndexesSig.value);
 
-        context.highlightedIndexSig.value = context.selectedIndexSig.value;
+        context.highlightedIndexSig.value = context.selectedIndexesSig.value[0];
       }
 
       if (e.key === 'ArrowLeft' && context.highlightedIndexSig.value === null) {
-        context.selectedIndexSig.value = await getPrevEnabledOptionIndex(
+        const lastIndex = await getPrevEnabledOptionIndex(
           context.optionsSig.value.length,
           context.optionsSig.value,
           context.loop,
         );
 
-        context.highlightedIndexSig.value = context.selectedIndexSig.value;
+        context.selectedIndexesSig.value = [lastIndex];
+
+        context.highlightedIndexSig.value = context.selectedIndexesSig.value[0];
         return;
       }
 
       if (e.key === 'ArrowLeft' && context.highlightedIndexSig.value !== null) {
-        context.selectedIndexSig.value = await getPrevEnabledOptionIndex(
+        const prevIndex = await getPrevEnabledOptionIndex(
           context.highlightedIndexSig.value,
           context.optionsSig.value,
           context.loop,
         );
 
-        context.highlightedIndexSig.value = context.selectedIndexSig.value;
+        context.selectedIndexesSig.value = [prevIndex];
+
+        context.highlightedIndexSig.value = context.selectedIndexesSig.value[0];
       }
     }
 
@@ -126,7 +136,7 @@ export const SelectTrigger = component$<SelectTriggerProps>((props) => {
 
       // select options
       if (e.key === 'Enter' || e.key === ' ') {
-        context.selectedIndexSig.value = context.highlightedIndexSig.value;
+        context.selectedIndexesSig.value = [context.highlightedIndexSig.value];
       }
 
       if (e.key === 'ArrowDown') {
@@ -150,12 +160,14 @@ export const SelectTrigger = component$<SelectTriggerProps>((props) => {
   return (
     <button
       {...props}
+      id={`${context.localId}-trigger`}
       ref={context.triggerRef}
       onClick$={[handleClick$, props.onClick$]}
       onKeyDown$={[handleKeyDownSync$, handleKeyDown$, props.onKeyDown$]}
       data-open={context.isListboxOpenSig.value ? '' : undefined}
       data-closed={!context.isListboxOpenSig.value ? '' : undefined}
       aria-expanded={context.isListboxOpenSig.value}
+      aria-labelledby={labelId}
       preventdefault:blur
     >
       <Slot />
diff --git a/packages/kit-headless/src/components/select/select-value.tsx b/packages/kit-headless/src/components/select/select-value.tsx
index 9b97ea662..cf8d7ac56 100644
--- a/packages/kit-headless/src/components/select/select-value.tsx
+++ b/packages/kit-headless/src/components/select/select-value.tsx
@@ -11,13 +11,17 @@ type SelectValueProps = PropsOf<'span'> & {
 
 export const SelectValue = component$((props: SelectValueProps) => {
   const { placeholder, ...rest } = props;
-
   const context = useContext(SelectContextId);
+  const valueId = `${context.localId}-value`;
   if (!context.optionsSig.value) return;
 
   const displayStrSig = useComputed$(() => {
-    if (context.selectedIndexSig.value !== null) {
-      return context.optionsSig.value[context.selectedIndexSig.value].displayValue;
+    if (context.multiple) {
+      return `${context.selectedIndexesSig.value}`;
+    }
+
+    if (context.selectedIndexesSig.value[0] !== null) {
+      return context.optionsSig.value[context.selectedIndexesSig.value[0]].displayValue;
     } else {
       return placeholder;
     }
@@ -25,6 +29,7 @@ export const SelectValue = component$((props: SelectValueProps) => {
 
   return (
     <span
+      id={valueId}
       data-open={context.isListboxOpenSig.value ? '' : undefined}
       data-closed={!context.isListboxOpenSig.value ? '' : undefined}
       data-value
diff --git a/packages/kit-headless/src/components/select/select.driver.ts b/packages/kit-headless/src/components/select/select.driver.ts
index ecde41f2a..8e03ae949 100644
--- a/packages/kit-headless/src/components/select/select.driver.ts
+++ b/packages/kit-headless/src/components/select/select.driver.ts
@@ -16,7 +16,9 @@ export function createTestDriver<T extends DriverLocator>(rootLocator: T) {
   };
 
   // we use data-option so that it doesn't grab native select options.
-  const getOptions = () => {
+  const getOptions = (hidden?: 'hidden') => {
+    if (hidden === 'hidden') return getRoot().locator('[data-option]:hidden');
+
     return getRoot().locator('[data-option]');
   };
 
@@ -29,11 +31,6 @@ export function createTestDriver<T extends DriverLocator>(rootLocator: T) {
     return getOptions().nth(index);
   };
 
-  const getHiddenOptionAt = (index: number | 'last') => {
-    if (index === 'last') return getOptions().last();
-    return getOptions().nth(index);
-  };
-
   const getValueElement = () => {
     return getTrigger().locator('[data-value]');
   };
@@ -60,7 +57,6 @@ export function createTestDriver<T extends DriverLocator>(rootLocator: T) {
     getOptions,
     getOptionsLength,
     getOptionAt,
-    getHiddenOptionAt,
     getValueElement,
     openListbox,
   };
diff --git a/packages/kit-headless/src/components/select/select.test.ts b/packages/kit-headless/src/components/select/select.test.ts
index 772747006..1f4aa975f 100644
--- a/packages/kit-headless/src/components/select/select.test.ts
+++ b/packages/kit-headless/src/components/select/select.test.ts
@@ -7,15 +7,8 @@ async function setup(page: Page, exampleName: string) {
 
   const driver = createTestDriver(page.getByRole('combobox'));
 
-  const {
-    getRoot,
-    getListbox,
-    getTrigger,
-    getOptionAt,
-    getHiddenOptionAt,
-    getValueElement,
-    openListbox,
-  } = driver;
+  const { getRoot, getListbox, getTrigger, getOptionAt, getValueElement, openListbox } =
+    driver;
 
   return {
     driver,
@@ -23,7 +16,6 @@ async function setup(page: Page, exampleName: string) {
     getListbox,
     getTrigger,
     getOptionAt,
-    getHiddenOptionAt,
     getValueElement,
     openListbox,
   };
@@ -72,29 +64,26 @@ test.describe('Mouse Behavior', () => {
   test(`GIVEN a hero select with an open listbox
         WHEN the 2nd option is clicked
         THEN the 2nd option should have aria-selected`, async ({ page }) => {
-    const { getOptionAt, getHiddenOptionAt, openListbox } = await setup(page, 'hero');
+    const { getOptionAt, openListbox } = await setup(page, 'hero');
 
     await openListbox('click');
 
     await getOptionAt(1).click();
 
-    await expect(getHiddenOptionAt(1)).toHaveAttribute('aria-selected', 'true');
+    await expect(getOptionAt(1)).toHaveAttribute('aria-selected', 'true');
   });
 
   test(`GIVEN a hero select with an open listbox
         WHEN the 3rd option is clicked
         THEN the 3rd option should be the selected value`, async ({ page }) => {
-    const { getOptionAt, getHiddenOptionAt, getValueElement, openListbox } = await setup(
-      page,
-      'hero',
-    );
+    const { getOptionAt, getValueElement, openListbox } = await setup(page, 'hero');
 
     await openListbox('click');
 
     const thirdOptStr = await getOptionAt(2).textContent();
     await getOptionAt(2).click();
 
-    await expect(getHiddenOptionAt(2)).toHaveAttribute('aria-selected', 'true');
+    await expect(getOptionAt(2)).toHaveAttribute('aria-selected', 'true');
     await expect(getValueElement()).toHaveText(thirdOptStr!);
   });
 
@@ -449,18 +438,15 @@ test.describe('Keyboard Behavior', () => {
           THEN the first enabled option should be selected and have aria-selected`, async ({
       page,
     }) => {
-      const { getTrigger, getHiddenOptionAt, getValueElement } = await setup(
-        page,
-        'hero',
-      );
+      const { getTrigger, getOptionAt, getValueElement } = await setup(page, 'hero');
 
-      const firstItemValue = await getHiddenOptionAt(0).textContent();
+      const firstItemValue = await getOptionAt(0).textContent();
       await getTrigger().focus();
       await getTrigger().press('ArrowRight');
 
       expect(getValueElement()).toHaveText(firstItemValue!);
-      await expect(getHiddenOptionAt(0)).toHaveAttribute('aria-selected', 'true');
-      await expect(getHiddenOptionAt(0)).toHaveAttribute('data-highlighted');
+      await expect(getOptionAt(0)).toHaveAttribute('aria-selected', 'true');
+      await expect(getOptionAt(0)).toHaveAttribute('data-highlighted');
     });
 
     test(`GIVEN no selected item and a placeholder
@@ -470,16 +456,16 @@ test.describe('Keyboard Behavior', () => {
     }) => {
       const { driver: d } = await setup(page, 'hero');
 
-      const firstItemValue = await d.getHiddenOptionAt(0).textContent();
-      const secondItemValue = await d.getHiddenOptionAt(1).textContent();
+      const firstItemValue = await d.getOptionAt(0).textContent();
+      const secondItemValue = await d.getOptionAt(1).textContent();
 
       await d.getTrigger().press('ArrowRight');
       await expect(d.getValueElement()).toHaveText(firstItemValue!);
       await d.getTrigger().press('ArrowRight');
 
       await expect(d.getValueElement()).toHaveText(secondItemValue!);
-      await expect(d.getHiddenOptionAt(1)).toHaveAttribute('aria-selected', 'true');
-      await expect(d.getHiddenOptionAt(1)).toHaveAttribute('data-highlighted');
+      await expect(d.getOptionAt(1)).toHaveAttribute('aria-selected', 'true');
+      await expect(d.getOptionAt(1)).toHaveAttribute('data-highlighted');
     });
 
     test(`GIVEN the second item is selected
@@ -487,13 +473,10 @@ test.describe('Keyboard Behavior', () => {
           THEN the first item should be selected and have aria-selected & data-highlighted`, async ({
       page,
     }) => {
-      const { getTrigger, getHiddenOptionAt, getValueElement } = await setup(
-        page,
-        'hero',
-      );
+      const { getTrigger, getOptionAt, getValueElement } = await setup(page, 'hero');
 
       // get initial selected value
-      // const firstItemValue = await getHiddenOptionAt(0).textContent();
+      // const firstItemValue = await getOptionAt(0).textContent();
       await getTrigger().focus();
       await getTrigger().press('ArrowRight');
       await expect(getValueElement()).toHaveText('Tim');
@@ -501,8 +484,8 @@ test.describe('Keyboard Behavior', () => {
 
       await getTrigger().press('ArrowLeft');
       await expect(getValueElement()).toHaveText('Tim');
-      await expect(getHiddenOptionAt(0)).toHaveAttribute('aria-selected', 'true');
-      await expect(getHiddenOptionAt(0)).toHaveAttribute('data-highlighted');
+      await expect(getOptionAt(0)).toHaveAttribute('aria-selected', 'true');
+      await expect(getOptionAt(0)).toHaveAttribute('data-highlighted');
     });
   });
 
@@ -654,7 +637,7 @@ test.describe('Keyboard Behavior', () => {
           AND the last option is selected
           WHEN the right arrow key is pressed
           THEN it should stay on the last option`, async ({ page }) => {
-        const { getTrigger, getHiddenOptionAt, getListbox, openListbox } = await setup(
+        const { getTrigger, getOptionAt, getListbox, openListbox } = await setup(
           page,
           'hero',
         );
@@ -664,22 +647,22 @@ test.describe('Keyboard Behavior', () => {
         await getTrigger().focus();
         await getTrigger().press('End');
 
-        await expect(getHiddenOptionAt('last')).toHaveAttribute('data-highlighted');
+        await expect(getOptionAt('last')).toHaveAttribute('data-highlighted');
         await getTrigger().press('Enter');
-        await expect(getHiddenOptionAt('last')).toHaveAttribute('aria-selected', 'true');
+        await expect(getOptionAt('last')).toHaveAttribute('aria-selected', 'true');
         await expect(getListbox()).toBeHidden();
 
         await getTrigger().focus();
         await getTrigger().press('ArrowRight');
-        await expect(getHiddenOptionAt('last')).toHaveAttribute('data-highlighted');
-        await expect(getHiddenOptionAt('last')).toHaveAttribute('aria-selected', 'true');
+        await expect(getOptionAt('last')).toHaveAttribute('data-highlighted');
+        await expect(getOptionAt('last')).toHaveAttribute('aria-selected', 'true');
       });
 
       test(`GIVEN a closed basic select
           AND the first option is selected
           WHEN the left arrow key is pressed
           THEN it should stay on the first option`, async ({ page }) => {
-        const { getTrigger, getHiddenOptionAt, getListbox, openListbox } = await setup(
+        const { getTrigger, getOptionAt, getListbox, openListbox } = await setup(
           page,
           'hero',
         );
@@ -690,14 +673,14 @@ test.describe('Keyboard Behavior', () => {
         await getTrigger().focus();
         await getTrigger().press('Enter');
 
-        await expect(getHiddenOptionAt(0)).toHaveAttribute('data-highlighted');
-        await expect(getHiddenOptionAt(0)).toHaveAttribute('aria-selected', 'true');
+        await expect(getOptionAt(0)).toHaveAttribute('data-highlighted');
+        await expect(getOptionAt(0)).toHaveAttribute('aria-selected', 'true');
         await expect(getListbox()).toBeHidden();
 
         await getTrigger().focus();
         await getTrigger().press('ArrowLeft');
-        await expect(getHiddenOptionAt(0)).toHaveAttribute('data-highlighted');
-        await expect(getHiddenOptionAt(0)).toHaveAttribute('aria-selected', 'true');
+        await expect(getOptionAt(0)).toHaveAttribute('data-highlighted');
+        await expect(getOptionAt(0)).toHaveAttribute('aria-selected', 'true');
       });
     });
 
@@ -706,17 +689,14 @@ test.describe('Keyboard Behavior', () => {
             AND the last option is data-highlighted
             WHEN the down arrow key is pressed
             THEN the first option should have data-highlighted`, async ({ page }) => {
-        const { getTrigger, getOptionAt, getHiddenOptionAt, openListbox } = await setup(
-          page,
-          'loop',
-        );
+        const { getTrigger, getOptionAt, openListbox } = await setup(page, 'loop');
 
         // initially last option is highlighted
         await openListbox('Enter');
         await getTrigger().focus();
         await getTrigger().press('End');
 
-        await expect(getHiddenOptionAt('last')).toHaveAttribute('data-highlighted');
+        await expect(getOptionAt('last')).toHaveAttribute('data-highlighted');
 
         await getTrigger().focus();
         await getTrigger().press('ArrowDown');
@@ -727,10 +707,7 @@ test.describe('Keyboard Behavior', () => {
             AND the first option is data-highlighted
             WHEN the up arrow key is pressed
             THEN the last option should have data-highlighted`, async ({ page }) => {
-        const { getTrigger, getOptionAt, getHiddenOptionAt, openListbox } = await setup(
-          page,
-          'loop',
-        );
+        const { getTrigger, getOptionAt, openListbox } = await setup(page, 'loop');
 
         // initially last option is highlighted
         await openListbox('Enter');
@@ -738,14 +715,14 @@ test.describe('Keyboard Behavior', () => {
 
         await getTrigger().focus();
         await getTrigger().press('ArrowUp');
-        await expect(getHiddenOptionAt('last')).toHaveAttribute('data-highlighted');
+        await expect(getOptionAt('last')).toHaveAttribute('data-highlighted');
       });
 
       test(`GIVEN a closed select with loop enabled
             AND the last option is selected
             WHEN the right arrow key is pressed
             THEN it should loop to the first option`, async ({ page }) => {
-        const { getTrigger, getHiddenOptionAt, openListbox, getListbox } = await setup(
+        const { getTrigger, getOptionAt, openListbox, getListbox } = await setup(
           page,
           'loop',
         );
@@ -758,19 +735,19 @@ test.describe('Keyboard Behavior', () => {
 
         await expect(getListbox()).toBeHidden();
 
-        await expect(getHiddenOptionAt('last')).toHaveAttribute('aria-selected', 'true');
+        await expect(getOptionAt('last')).toHaveAttribute('aria-selected', 'true');
 
         await getTrigger().focus();
         await getTrigger().press('ArrowRight');
-        await expect(getHiddenOptionAt(0)).toHaveAttribute('data-highlighted');
-        await expect(getHiddenOptionAt(0)).toHaveAttribute('aria-selected', 'true');
+        await expect(getOptionAt(0)).toHaveAttribute('data-highlighted');
+        await expect(getOptionAt(0)).toHaveAttribute('aria-selected', 'true');
       });
 
       test(`GIVEN a closed select with loop enabled
             AND the first option is selected
             WHEN the right arrow key is pressed
             THEN it should loop to the first option`, async ({ page }) => {
-        const { getTrigger, getHiddenOptionAt, openListbox, getListbox } = await setup(
+        const { getTrigger, getOptionAt, openListbox, getListbox } = await setup(
           page,
           'loop',
         );
@@ -782,12 +759,12 @@ test.describe('Keyboard Behavior', () => {
 
         await expect(getListbox()).toBeHidden();
 
-        await expect(getHiddenOptionAt(0)).toHaveAttribute('aria-selected', 'true');
+        await expect(getOptionAt(0)).toHaveAttribute('aria-selected', 'true');
 
         await getTrigger().focus();
         await getTrigger().press('ArrowLeft');
-        await expect(getHiddenOptionAt('last')).toHaveAttribute('data-highlighted');
-        await expect(getHiddenOptionAt('last')).toHaveAttribute('aria-selected', 'true');
+        await expect(getOptionAt('last')).toHaveAttribute('data-highlighted');
+        await expect(getOptionAt('last')).toHaveAttribute('aria-selected', 'true');
       });
     });
   });
@@ -937,13 +914,13 @@ test.describe('Props', () => {
           THEN the selected value should be the data passed to the value prop
           AND the fourth option should have data-highlighted
           AND aria-selected set to true`, async ({ page }) => {
-      const { getValueElement, getHiddenOptionAt } = await setup(page, 'uncontrolled');
+      const { getValueElement, getOptionAt } = await setup(page, 'uncontrolled');
 
-      const expectedValue = await getHiddenOptionAt(3).textContent();
+      const expectedValue = await getOptionAt(3).textContent();
 
       await expect(getValueElement()).toHaveText(expectedValue!);
-      await expect(getHiddenOptionAt(3)).toHaveAttribute('data-highlighted');
-      await expect(getHiddenOptionAt(3)).toHaveAttribute('aria-selected', 'true');
+      await expect(getOptionAt(3)).toHaveAttribute('data-highlighted');
+      await expect(getOptionAt(3)).toHaveAttribute('aria-selected', 'true');
     });
 
     test(`GIVEN an uncontrolled select with a value prop on the root component
@@ -964,13 +941,13 @@ test.describe('Props', () => {
           THEN the selected value should be the data passed to the bind:value prop
           AND should should have data-highlighted
           AND aria-selected set to true`, async ({ page }) => {
-      const { getValueElement, getHiddenOptionAt } = await setup(page, 'controlled');
+      const { getValueElement, getOptionAt } = await setup(page, 'controlled');
 
-      const expectedValue = await getHiddenOptionAt(1).textContent();
+      const expectedValue = await getOptionAt(1).textContent();
 
       await expect(getValueElement()).toContainText(expectedValue!);
-      await expect(getHiddenOptionAt(1)).toHaveAttribute('data-highlighted');
-      await expect(getHiddenOptionAt(1)).toHaveAttribute('aria-selected', 'true');
+      await expect(getOptionAt(1)).toHaveAttribute('data-highlighted');
+      await expect(getOptionAt(1)).toHaveAttribute('aria-selected', 'true');
     });
 
     test(`GIVEN a controlled closed select with a bind:open prop on the root component
@@ -1012,6 +989,27 @@ test.describe('Props', () => {
 
       await expect(getTrigger()).toHaveText(`Abby`);
     });
+
+    test(`GIVEN a select with distinct display and option values
+          WHEN the 5th option is selected
+          AND it clicks another option
+          AND it goes back to the 5th option programmatically
+          THEN the bind:value signal should update to reflect the 5th option's value`, async ({
+      page,
+    }) => {
+      const { driver: d } = await setup(page, 'controlled-value');
+
+      await expect(d.getTrigger()).toHaveText('Select an option');
+      // setup
+      await page.getByRole('button', { name: 'Change to Abby' }).click();
+      await expect(d.getTrigger()).toHaveText(`Abby`);
+
+      await d.openListbox('click');
+      await d.getOptionAt(1).click();
+      await expect(d.getTrigger()).toHaveText(`Ryan`);
+      await page.getByRole('button', { name: 'Change to Abby' }).click();
+      await expect(d.getTrigger()).toHaveText(`Abby`);
+    });
   });
 });
 
@@ -1088,3 +1086,54 @@ test.describe('A11y', () => {
     await expect(getRoot()).toHaveAttribute('aria-controls', `${listboxId}`);
   });
 });
+
+test.describe('Multiple Selection', () => {
+  test(`GIVEN a multi select
+        WHEN clicking an option
+        THEN the option should be selected
+        AND the listbox should remain open`, async ({ page }) => {
+    const { driver: d } = await setup(page, 'multiple');
+    await d.openListbox('click');
+    await d.getOptionAt(0).click();
+    await expect(d.getOptionAt(0)).toHaveAttribute('aria-selected', 'true');
+    await expect(d.getListbox()).toBeVisible();
+  });
+
+  test(`GIVEN a multi select
+        WHEN clicking one option
+        AND another option
+        THEN both options should be selected`, async ({ page }) => {
+    const { driver: d } = await setup(page, 'multiple');
+    await d.openListbox('click');
+    await d.getOptionAt(0).click();
+    await d.getOptionAt(1).click();
+    await expect(d.getOptionAt(0)).toHaveAttribute('aria-selected', 'true');
+    await expect(d.getOptionAt(1)).toHaveAttribute('aria-selected', 'true');
+  });
+
+  test(`GIVEN a multi select
+        WHEN clicking one option
+        AND hitting the escape key
+        THEN both listbox should close`, async ({ page }) => {
+    const { driver: d } = await setup(page, 'multiple');
+    await d.openListbox('click');
+    await d.getOptionAt(0).click();
+    await expect(d.getOptionAt(0)).toHaveAttribute('aria-selected', 'true');
+    await d.getTrigger().press('Escape');
+    await expect(d.getListbox()).toBeHidden();
+  });
+
+  test(`GIVEN a multi select
+        WHEN clicking one option
+        AND clicking another option
+        THEN the selected value should contain both options`, async ({ page }) => {
+    const { driver: d } = await setup(page, 'multiple');
+    await d.openListbox('click');
+    await d.getOptionAt(0).click();
+    await expect(d.getOptionAt(0)).toHaveAttribute('aria-selected', 'true');
+    await d.getOptionAt(1).click();
+    await expect(d.getOptionAt(1)).toHaveAttribute('aria-selected', 'true');
+
+    await expect(d.getValueElement()).toHaveText('Tim, Ryan');
+  });
+});
diff --git a/packages/kit-headless/src/components/select/select.tsx b/packages/kit-headless/src/components/select/select.tsx
index f79cff01d..7dfff4dfb 100644
--- a/packages/kit-headless/src/components/select/select.tsx
+++ b/packages/kit-headless/src/components/select/select.tsx
@@ -10,7 +10,7 @@ import {
   useId,
   useComputed$,
 } from '@builder.io/qwik';
-import { isBrowser } from '@builder.io/qwik/build';
+import { isBrowser, isServer } from '@builder.io/qwik/build';
 import SelectContextId, { type SelectContext } from './select-context';
 import { Opt } from './select-inline';
 import { HiddenSelect } from './hidden-select';
@@ -24,14 +24,19 @@ export type InternalSelectProps = {
   /** When a value is passed, we check if it's an actual option value, and get its index at pre-render time.
    **/
   _valuePropIndex?: number | null;
+
+  /** Checks if the consumer added the label in their JSX */
+  _label?: boolean;
 };
 
-export type SelectProps = PropsOf<'div'> & {
+type TMultiple<M> = M extends true ? string[] : string;
+
+export type SelectProps<M extends boolean = boolean> = PropsOf<'div'> & {
   /** The initial selected value (uncontrolled). */
-  value?: string;
+  value?: TMultiple<M>;
 
   /** A signal that controls the current selected value (controlled). */
-  'bind:value'?: Signal<string>;
+  'bind:value'?: Signal<TMultiple<M>>;
 
   /** A signal that controls the current open state (controlled). */
   'bind:open'?: Signal<boolean>;
@@ -73,11 +78,16 @@ export type SelectProps = PropsOf<'div'> & {
    * If `true`, prevents the user from interacting with the select.
    */
   disabled?: boolean;
+
+  /**
+   * If `true`, allows multiple selections.
+   */
+  multiple?: M;
 };
 
 /* root component in select-inline.tsx */
-export const SelectImpl = component$<SelectProps & InternalSelectProps>(
-  (props: SelectProps & InternalSelectProps) => {
+export const SelectImpl = component$<SelectProps<boolean> & InternalSelectProps>(
+  (props: SelectProps<boolean> & InternalSelectProps) => {
     const {
       _options,
       _valuePropIndex: givenValuePropIndex,
@@ -88,6 +98,8 @@ export const SelectImpl = component$<SelectProps & InternalSelectProps>(
       name,
       required,
       disabled,
+      multiple = false,
+      _label,
       ...rest
     } = props;
 
@@ -98,10 +110,15 @@ export const SelectImpl = component$<SelectProps & InternalSelectProps>(
     const triggerRef = useSignal<HTMLButtonElement>();
     const popoverRef = useSignal<HTMLElement>();
     const listboxRef = useSignal<HTMLUListElement>();
+    const labelRef = useSignal<HTMLDivElement>();
     const groupRef = useSignal<HTMLDivElement>();
     const loop = givenLoop ?? false;
+
+    // ids
     const localId = useId();
     const listboxId = `${localId}-listbox`;
+    const labelId = `${localId}-label`;
+    const valueId = `${localId}-value`;
 
     /**
      * Updates the options when the options change
@@ -114,12 +131,10 @@ export const SelectImpl = component$<SelectProps & InternalSelectProps>(
       return _options;
     });
 
-    const optionsIndexMap = new Map(
-      optionsSig.value?.map((option, index) => [option.value, index]),
-    );
-
     // core state
-    const selectedIndexSig = useSignal<number | null>(givenValuePropIndex ?? null);
+    const selectedIndexesSig = useSignal<Array<number | null>>([
+      givenValuePropIndex ?? null,
+    ]);
     const highlightedIndexSig = useSignal<number | null>(givenValuePropIndex ?? null);
     const isListboxOpenSig = useSignal<boolean>(false);
     const scrollOptions = givenScrollOptions ?? {
@@ -127,15 +142,24 @@ export const SelectImpl = component$<SelectProps & InternalSelectProps>(
       block: 'nearest',
     };
 
-    // we use a map here to efficiently access the matching index of the signal value
+    const optionsIndexMap = useComputed$(() => {
+      return new Map(optionsSig.value?.map((option, index) => [option.value, index]));
+    });
+
     useTask$(function reactiveValueTask({ track }) {
       const signalValue = track(() => props['bind:value']?.value);
       if (!signalValue) return;
 
-      const matchingIndex = optionsIndexMap.get(signalValue) ?? -1;
-      if (matchingIndex !== -1) {
-        selectedIndexSig.value = matchingIndex;
-        highlightedIndexSig.value = matchingIndex;
+      const values = Array.isArray(signalValue) ? signalValue : [signalValue];
+
+      const matchingIndexes = values.map(
+        (value) => optionsIndexMap.value.get(value) ?? null,
+      );
+
+      if (matchingIndexes) {
+        selectedIndexesSig.value = matchingIndexes.filter((index) => index !== -1);
+
+        highlightedIndexSig.value = matchingIndexes[0];
       }
     });
 
@@ -146,10 +170,16 @@ export const SelectImpl = component$<SelectProps & InternalSelectProps>(
     });
 
     useTask$(async function onChangeTask({ track }) {
-      track(() => selectedIndexSig.value);
-      if (isBrowser && selectedIndexSig.value !== null) {
-        await onChange$?.(optionsSig.value[selectedIndexSig.value].value);
+      track(() => selectedIndexesSig.value);
+      const firstOption = selectedIndexesSig.value[0];
+      if (isBrowser && firstOption !== null) {
+        await onChange$?.(optionsSig.value[firstOption].value);
       }
+
+      if (!props['bind:value'] || !props['bind:value'].value) return;
+      if (firstOption === null) return;
+      if (isServer) return;
+      props['bind:value'].value = optionsSig.value[firstOption].value;
     });
 
     useTask$(function onOpenChangeTask({ track }) {
@@ -175,14 +205,16 @@ export const SelectImpl = component$<SelectProps & InternalSelectProps>(
       triggerRef,
       popoverRef,
       listboxRef,
+      labelRef,
       groupRef,
       optionsSig,
       localId,
       highlightedIndexSig,
-      selectedIndexSig,
+      selectedIndexesSig,
       isListboxOpenSig,
       scrollOptions,
       loop,
+      multiple,
     };
 
     useContextProvider(SelectContextId, context);
@@ -197,6 +229,7 @@ export const SelectImpl = component$<SelectProps & InternalSelectProps>(
         aria-expanded={context.isListboxOpenSig.value}
         aria-haspopup="listbox"
         aria-activedescendant={activeDescendantSig.value}
+        aria-labelledby={_label ? labelId : valueId}
         {...rest}
       >
         <Slot />
diff --git a/packages/kit-headless/src/components/select/use-select.tsx b/packages/kit-headless/src/components/select/use-select.tsx
index d9f366b47..0676abd03 100644
--- a/packages/kit-headless/src/components/select/use-select.tsx
+++ b/packages/kit-headless/src/components/select/use-select.tsx
@@ -1,4 +1,4 @@
-import { useContext, useSignal, $, useComputed$ } from '@builder.io/qwik';
+import { useContext, useSignal, $, useComputed$, Signal } from '@builder.io/qwik';
 import SelectContextId from './select-context';
 import { Opt } from './select-inline';
 
@@ -7,6 +7,14 @@ import { Opt } from './select-inline';
  * This is because outside of the component$ boundary Qwik core wakes up.
  */
 export function useSelect() {
+  const addUniqueIndex = $(
+    (selectedIndexesSig: Signal<Array<number | null>>, index: number | null) => {
+      if (index !== null && !selectedIndexesSig.value.includes(index)) {
+        selectedIndexesSig.value = [...selectedIndexesSig.value, index];
+      }
+    },
+  );
+
   const getNextEnabledOptionIndex = $((index: number, options: Opt[], loop: boolean) => {
     let offset = 1;
     const len = options.length;
@@ -61,7 +69,12 @@ export function useSelect() {
     return `${localId}-${index}`;
   });
 
-  return { getNextEnabledOptionIndex, getPrevEnabledOptionIndex, getActiveDescendant };
+  return {
+    getNextEnabledOptionIndex,
+    getPrevEnabledOptionIndex,
+    getActiveDescendant,
+    addUniqueIndex,
+  };
 }
 
 export function useTypeahead() {
@@ -97,7 +110,7 @@ export function useTypeahead() {
         context.highlightedIndexSig.value = firstCharIndex;
 
         if (!context.isListboxOpenSig.value) {
-          context.selectedIndexSig.value = firstCharIndex;
+          context.selectedIndexesSig.value = [firstCharIndex];
         }
 
         return;
@@ -120,7 +133,7 @@ export function useTypeahead() {
 
           context.highlightedIndexSig.value = nextIndex;
           if (!context.isListboxOpenSig.value) {
-            context.selectedIndexSig.value = nextIndex;
+            context.selectedIndexesSig.value = [nextIndex];
           }
           indexDiffSig.value = nextIndex + 1;
           return;
@@ -129,14 +142,14 @@ export function useTypeahead() {
         indexDiffSig.value = undefined;
         context.highlightedIndexSig.value = firstCharIndex;
         if (!context.isListboxOpenSig.value) {
-          context.selectedIndexSig.value = firstCharIndex;
+          context.selectedIndexesSig.value = [firstCharIndex];
         }
         return;
       }
       indexDiffSig.value = firstCharIndex + 1;
       context.highlightedIndexSig.value = firstCharIndex;
       if (!context.isListboxOpenSig.value) {
-        context.selectedIndexSig.value = firstCharIndex;
+        context.selectedIndexesSig.value = [firstCharIndex];
       }
 
       return;
@@ -157,7 +170,7 @@ export function useTypeahead() {
       if (firstPossibleOpt !== -1) {
         context.highlightedIndexSig.value = firstPossibleOpt;
         if (!context.isListboxOpenSig.value) {
-          context.selectedIndexSig.value = firstPossibleOpt;
+          context.selectedIndexesSig.value = [firstPossibleOpt];
         }
         return;
       }