diff --git a/packages/core/src/constants/index.ts b/packages/core/src/constants/index.ts
index f9b7cf45..79501c59 100644
--- a/packages/core/src/constants/index.ts
+++ b/packages/core/src/constants/index.ts
@@ -10,6 +10,7 @@ export const FieldTypePrefixes = {
   SearchField: 'sf',
   FormGroup: 'fg',
   Select: 'se',
+  Option: 'opt',
 } as const;
 
 export const NOOP = () => {};
diff --git a/packages/core/src/useSelect/useListBox.ts b/packages/core/src/useSelect/useListBox.ts
index 99072217..da5103db 100644
--- a/packages/core/src/useSelect/useListBox.ts
+++ b/packages/core/src/useSelect/useListBox.ts
@@ -1,6 +1,7 @@
 import { Orientation, Reactivify } from '../types';
-import { computed, ref, Ref, shallowRef, toValue } from 'vue';
-import { getNextCycleArrIdx, isEqual, normalizeProps, withRefCapture } from '../utils/common';
+import { computed, InjectionKey, nextTick, onBeforeUnmount, provide, shallowRef, toValue, watch } from 'vue';
+import { normalizeProps, removeFirst, useUniqId } from '../utils/common';
+import { FieldTypePrefixes } from '../constants';
 
 export interface ListBoxProps<TOption> {
   options: TOption[];
@@ -13,56 +14,116 @@ export interface ListBoxDomProps {
   'aria-multiselectable'?: boolean;
 }
 
-export function useListBox<TOption>(_props: Reactivify<ListBoxProps<TOption>>, elementRef?: Ref<HTMLElement>) {
-  const listBoxRef = elementRef ?? ref();
+export interface OptionRegistration<TValue> {
+  isFocused(): boolean;
+  isSelected(): boolean;
+  isDisabled(): boolean;
+  getValue(): TValue;
+  focus(): void;
+  unfocus(): void;
+}
+
+export interface OptionRegistrationWithId<TValue> extends OptionRegistration<TValue> {
+  id: string;
+}
+
+export interface ListManagerCtx<TOption = unknown> {
+  useOptionRegistration(init: OptionRegistration<TOption>): string;
+}
+
+export const ListManagerKey: InjectionKey<ListManagerCtx> = Symbol('ListManagerKey');
+
+export function useListBox<TOption>(_props: Reactivify<ListBoxProps<TOption>>) {
   const props = normalizeProps(_props);
-  const getOptions = () => toValue(props.options) ?? [];
-  const highlightedOption = shallowRef<TOption>();
+  const options = shallowRef<OptionRegistrationWithId<TOption>[]>([]);
+  const isOpen = shallowRef(false);
+
+  const listManager: ListManagerCtx = {
+    useOptionRegistration(init: OptionRegistration<TOption>) {
+      const id = useUniqId(FieldTypePrefixes.Option);
+      options.value.push({ ...init, id });
+
+      onBeforeUnmount(() => {
+        removeFirst(options.value, reg => reg.id === id);
+      });
+
+      return id;
+    },
+  };
+
+  provide(ListManagerKey, listManager);
 
-  function highlightNext() {
-    const options = getOptions();
-    if (!highlightedOption.value) {
-      highlightedOption.value = options[0];
+  const handlers = {
+    onKeydown(e: KeyboardEvent) {
+      if (e.code === 'ArrowDown') {
+        e.preventDefault();
+        e.stopPropagation();
+        focusNext();
+        return;
+      }
+
+      if (e.code === 'ArrowUp') {
+        e.preventDefault();
+        e.stopPropagation();
+        focusPrev();
+        return;
+      }
+
+      if (e.code === 'Tab') {
+        isOpen.value = false;
+      }
+    },
+  };
+
+  function focusNext() {
+    const currentlyFocusedIdx = options.value.findIndex(o => o.isFocused());
+    // Focus first one if none is focused
+    if (currentlyFocusedIdx === -1) {
+      options.value[0]?.focus();
       return;
     }
 
-    const currentIdx = options.findIndex(opt => isHighlighted(opt));
-    const nextIdx = getNextCycleArrIdx(currentIdx + 1, options);
-    highlightedOption.value = options[nextIdx];
+    const nextIdx = Math.min(currentlyFocusedIdx + 1, options.value.length - 1);
+    options.value[currentlyFocusedIdx]?.unfocus();
+    options.value[nextIdx]?.focus();
   }
 
-  function highlightPrev() {
-    const options = getOptions();
-    if (!highlightedOption.value) {
-      highlightedOption.value = options[0];
+  function focusPrev() {
+    const currentlyFocusedIdx = options.value.findIndex(o => o.isFocused());
+    // Focus first one if none is focused
+    if (currentlyFocusedIdx === -1) {
+      options.value[0]?.focus();
       return;
     }
 
-    const currentIdx = options.findIndex(opt => isHighlighted(opt));
-    const nextIdx = getNextCycleArrIdx(currentIdx - 1, options);
-    highlightedOption.value = options[nextIdx];
-  }
-
-  function isHighlighted(opt: TOption) {
-    return isEqual(opt, highlightedOption.value);
+    const nextIdx = Math.max(currentlyFocusedIdx - 1, 0);
+    options.value[currentlyFocusedIdx]?.unfocus();
+    options.value[nextIdx]?.focus();
   }
 
   const listBoxProps = computed<ListBoxDomProps>(() => {
-    return withRefCapture(
-      {
-        role: 'listbox',
-        'aria-multiselectable': toValue(props.multiple) ?? undefined,
-      },
-      listBoxRef,
-      elementRef,
-    );
+    return {
+      role: 'listbox',
+      'aria-multiselectable': toValue(props.multiple) ?? undefined,
+      ...handlers,
+    };
+  });
+
+  watch(isOpen, async value => {
+    const currentlyFocused = options.value.findIndex(o => o.isFocused());
+    options.value[currentlyFocused]?.unfocus();
+    if (!value) {
+      return;
+    }
+
+    await nextTick();
+    const currentlySelected = options.value.findIndex(o => o.isSelected());
+    const toBeSelected = currentlySelected === -1 ? 0 : currentlySelected;
+    options.value[toBeSelected]?.focus();
   });
 
   return {
     listBoxProps,
-    highlightedOption,
-    isHighlighted,
-    highlightNext,
-    highlightPrev,
+    isOpen,
   };
 }
diff --git a/packages/core/src/useSelect/useOption.ts b/packages/core/src/useSelect/useOption.ts
index fca917b2..eba5f4a8 100644
--- a/packages/core/src/useSelect/useOption.ts
+++ b/packages/core/src/useSelect/useOption.ts
@@ -1,11 +1,16 @@
-import { Reactivify } from '../types';
-import { computed, inject, toValue } from 'vue';
+import { Maybe, Reactivify, RovingTabIndex } from '../types';
+import { computed, inject, nextTick, ref, Ref, shallowRef, toValue } from 'vue';
 import { SelectionContextKey } from './useSelect';
-import { normalizeProps, warn } from '../utils/common';
+import { normalizeProps, useUniqId, warn, withRefCapture } from '../utils/common';
+import { ListManagerKey } from '@core/useSelect/useListBox';
+import { FieldTypePrefixes } from '@core/constants';
 
 interface OptionDomProps {
+  id: string;
   role: 'option';
 
+  tabindex: RovingTabIndex;
+
   // Used when the listbox allows single selection
   'aria-selected'?: boolean;
   // Used when the listbox allows multiple selections
@@ -14,11 +19,13 @@ interface OptionDomProps {
 
 export interface OptionProps<TValue> {
   value: TValue;
+
   disabled?: boolean;
 }
 
-export function useOption<TValue>(_props: Reactivify<OptionProps<TValue>>) {
+export function useOption<TValue>(_props: Reactivify<OptionProps<TValue>>, elementRef?: Ref<Maybe<HTMLElement>>) {
   const props = normalizeProps(_props);
+  const optionRef = elementRef || ref<HTMLElement>();
   const selectionCtx = inject(SelectionContextKey, null);
   if (!selectionCtx) {
     warn(
@@ -26,8 +33,32 @@ export function useOption<TValue>(_props: Reactivify<OptionProps<TValue>>) {
     );
   }
 
-  const isSelected = computed(() => selectionCtx?.isSelected(toValue(props.value)) ?? false);
-  const isHighlighted = computed(() => selectionCtx?.isHighlighted(toValue(props.value)) ?? false);
+  const listManager = inject(ListManagerKey, null);
+  if (!listManager) {
+    warn(
+      'An option component must exist within a ListBox Context. Did you forget to call `useSelect` or `useListBox` in a parent component?',
+    );
+  }
+
+  const isFocused = shallowRef(false);
+
+  const isSelected = computed(() => selectionCtx?.isValueSelected(toValue(props.value)) ?? false);
+  const id =
+    listManager?.useOptionRegistration({
+      isDisabled: () => !!toValue(props.disabled),
+      isSelected: () => isSelected.value,
+      isFocused: () => isFocused.value,
+      getValue: () => toValue(props.value),
+      focus: () => {
+        isFocused.value = true;
+        nextTick(() => {
+          optionRef.value?.focus();
+        });
+      },
+      unfocus() {
+        isFocused.value = false;
+      },
+    }) ?? useUniqId(FieldTypePrefixes.Option);
 
   const handlers = {
     onClick() {
@@ -37,23 +68,35 @@ export function useOption<TValue>(_props: Reactivify<OptionProps<TValue>>) {
 
       selectionCtx?.toggleOption(toValue(props.value));
     },
+    onKeydown(e: KeyboardEvent) {
+      if (e.code === 'Space' || e.code === 'Enter') {
+        e.preventDefault();
+        e.stopPropagation();
+        selectionCtx?.toggleOption(toValue(props.value));
+      }
+    },
   };
 
   const optionProps = computed<OptionDomProps>(() => {
     const isMultiple = selectionCtx?.isMultiple() ?? false;
 
-    return {
-      role: 'option',
-      'aria-selected': isMultiple ? undefined : isSelected.value,
-      'aria-checked': isMultiple ? isSelected.value : undefined,
-      'aria-disabled': toValue(props.disabled),
-      ...handlers,
-    };
+    return withRefCapture(
+      {
+        id,
+        role: 'option',
+        tabindex: isFocused.value ? '0' : '-1',
+        'aria-selected': isMultiple ? undefined : isSelected.value,
+        'aria-checked': isMultiple ? isSelected.value : undefined,
+        'aria-disabled': toValue(props.disabled),
+        ...handlers,
+      },
+      optionRef,
+      elementRef,
+    );
   });
 
   return {
     optionProps,
     isSelected,
-    isHighlighted,
   };
 }
diff --git a/packages/core/src/useSelect/useSelect.ts b/packages/core/src/useSelect/useSelect.ts
index 8e4fa21f..bc1bfdf5 100644
--- a/packages/core/src/useSelect/useSelect.ts
+++ b/packages/core/src/useSelect/useSelect.ts
@@ -1,4 +1,4 @@
-import { computed, InjectionKey, provide, shallowRef, toValue } from 'vue';
+import { computed, InjectionKey, provide, toValue } from 'vue';
 import { useFormField } from '../useFormField';
 import { AriaLabelableProps, Arrayable, Orientation, Reactivify, TypedSchema } from '../types';
 import {
@@ -38,10 +38,11 @@ export interface SelectTriggerDomProps extends AriaLabelableProps {
 }
 
 export interface SelectionContext<TValue> {
-  isSelected(value: TValue): boolean;
+  isValueSelected(value: TValue): boolean;
+  getOptionIndex(value: TValue): number;
   isMultiple(): boolean;
-  isHighlighted(opt: TValue): boolean;
-  toggleOption(value: TValue): void;
+  toggleOption(value: TValue, force?: boolean): void;
+  toggleIdx(idx: number, force?: boolean): void;
 }
 
 export const SelectionContextKey: InjectionKey<SelectionContext<unknown>> = Symbol('SelectionContextKey');
@@ -50,7 +51,6 @@ const MENU_OPEN_KEYS = ['Enter', 'Space', 'ArrowDown', 'ArrowUp'];
 
 export function useSelect<TOption>(_props: Reactivify<SelectProps<TOption>, 'schema'>) {
   const inputId = useUniqId(FieldTypePrefixes.Select);
-  const isOpen = shallowRef(false);
   const props = normalizeProps(_props, ['schema']);
   const field = useFormField<Arrayable<TOption>>({
     path: props.name,
@@ -65,7 +65,7 @@ export function useSelect<TOption>(_props: Reactivify<SelectProps<TOption>, 'sch
     for: inputId,
   });
 
-  const { listBoxProps, isHighlighted, highlightPrev, highlightNext, highlightedOption } = useListBox<TOption>(props);
+  const { listBoxProps, isOpen } = useListBox<TOption>(props);
   const { updateValidity } = useInputValidity({ field });
   const { fieldValue, setValue, isTouched, errorMessage } = field;
   const { displayError } = useErrorDisplay(field);
@@ -84,12 +84,21 @@ export function useSelect<TOption>(_props: Reactivify<SelectProps<TOption>, 'sch
 
   const selectionCtx: SelectionContext<TOption> = {
     isMultiple: () => toValue(props.multiple) ?? false,
-    isSelected(value: TOption): boolean {
+    isValueSelected(value: TOption): boolean {
       const selectedOptions = normalizeArrayable(fieldValue.value ?? []);
 
       return selectedOptions.some(opt => isEqual(opt, value));
     },
-    isHighlighted,
+    getOptionIndex(value: TOption) {
+      const opts = toValue(props.options) || [];
+
+      return opts.findIndex(opt => isEqual(opt, value));
+    },
+    toggleIdx(idx: number, force?: boolean) {
+      const opts = toValue(props.options) || [];
+
+      this.toggleOption(opts[idx], force);
+    },
     toggleOption(optionValue: TOption, force?: boolean) {
       const isMultiple = toValue(props.multiple);
       if (!isMultiple) {
@@ -139,27 +148,6 @@ export function useSelect<TOption>(_props: Reactivify<SelectProps<TOption>, 'sch
           return;
         }
       }
-
-      if (e.code === 'ArrowDown') {
-        e.preventDefault();
-        highlightNext();
-        return;
-      }
-
-      if (e.code === 'ArrowUp') {
-        e.preventDefault();
-        highlightPrev();
-        return;
-      }
-
-      if (e.code === 'Space' || e.code === 'Enter') {
-        if (highlightedOption.value) {
-          e.preventDefault();
-          selectionCtx.toggleOption(highlightedOption.value);
-        }
-
-        return;
-      }
     },
   };
 
diff --git a/packages/core/src/utils/common.ts b/packages/core/src/utils/common.ts
index 7afd40f7..2e04bae1 100644
--- a/packages/core/src/utils/common.ts
+++ b/packages/core/src/utils/common.ts
@@ -65,7 +65,7 @@ export function createAccessibleErrorMessageProps({ inputId, errorMessage }: Cre
   };
 }
 
-export function createRefCapture<TEl extends HTMLElement>(elRef: Ref<TEl | undefined>) {
+export function createRefCapture<TEl extends HTMLElement>(elRef: Ref<Maybe<TEl>>) {
   return function captureRef(el: HTMLElement) {
     elRef.value = el as TEl;
   };
@@ -138,8 +138,8 @@ export function getNextCycleArrIdx(idx: number, arr: unknown[]): number {
  */
 export function withRefCapture<TProps>(
   props: TProps,
-  inputRef: Ref<HTMLElement | undefined>,
-  elementRef?: Ref<HTMLElement | undefined>,
+  inputRef: Ref<Maybe<HTMLElement>>,
+  elementRef?: Ref<Maybe<HTMLElement>>,
 ): TProps {
   if (!elementRef) {
     (props as any).ref = createRefCapture(inputRef);
@@ -339,3 +339,11 @@ export function toggleValueSelection<TValue>(current: Arrayable<TValue>, value:
 
   return nextValue;
 }
+
+export function removeFirst<TItem>(items: TItem[], predicate: (item: TItem) => boolean) {
+  const idx = items.findIndex(predicate);
+  if (idx >= 0) {
+    items.splice(idx, 1);
+    return;
+  }
+}
diff --git a/packages/playground/src/App.vue b/packages/playground/src/App.vue
index aaee40aa..db296a58 100644
--- a/packages/playground/src/App.vue
+++ b/packages/playground/src/App.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="flex gap-4 relative p-8">
     <form class="w-full">
-      <InputSelect name="select" label="Select Input" :options="['Hello', 'World', 'Foo', 'Bar']" />
+      <InputSelect name="select" label="Select Input" multiple :options="['Hello', 'World', 'Foo', 'Bar']" />
 
       <!--      <div class="flex flex-col gap-4">-->
       <!--        <InputText-->
diff --git a/packages/playground/src/components/InputSelect.vue b/packages/playground/src/components/InputSelect.vue
index fb72f1b8..2e208a95 100644
--- a/packages/playground/src/components/InputSelect.vue
+++ b/packages/playground/src/components/InputSelect.vue
@@ -1,11 +1,33 @@
 <script setup lang="ts" generic="TOption">
 import { useSelect, SelectProps } from '@formwerk/core';
 import OptionItem from '@/components/OptionItem.vue';
+import { onMounted, ref, watch } from 'vue';
 
 const props = defineProps<SelectProps<TOption>>();
 
 const { triggerProps, labelProps, errorMessageProps, isTouched, displayError, fieldValue, isOpen, listBoxProps } =
   useSelect(props);
+
+const popoverEl = ref<HTMLElement | null>(null);
+
+watch(isOpen, value => {
+  if (value === popoverEl.value?.matches(':popover-open')) {
+    return;
+  }
+
+  value ? popoverEl.value?.showPopover() : popoverEl.value?.hidePopover();
+});
+
+onMounted(() => {
+  popoverEl.value?.addEventListener('toggle', evt => {
+    const shouldBeOpen = evt.newState === 'open';
+    if (isOpen.value === shouldBeOpen) {
+      return;
+    }
+
+    isOpen.value = shouldBeOpen;
+  });
+});
 </script>
 
 <template>
@@ -18,17 +40,13 @@ const { triggerProps, labelProps, errorMessageProps, isTouched, displayError, fi
       <span class="ml-auto">⬇️</span>
     </div>
 
-    <ul
-      v-show="isOpen"
-      v-bind="listBoxProps"
-      class="absolute top-auto inset-x-0 bg-gray-100 shadow-sm border border-gray-200"
-    >
-      <li v-for="opt in options" :key="opt">
+    <div ref="popoverEl" v-bind="listBoxProps" popover class="listbox">
+      <div v-for="opt in options" :key="opt">
         <OptionItem :value="opt">
           {{ opt }}
         </OptionItem>
-      </li>
-    </ul>
+      </div>
+    </div>
 
     <span v-bind="errorMessageProps" class="error-message">
       {{ displayError() }}
@@ -46,7 +64,8 @@ const { triggerProps, labelProps, errorMessageProps, isTouched, displayError, fi
   }
 
   .trigger {
-    @apply text-gray-800 rounded-md border-2 border-transparent py-3 px-4 w-full bg-gray-100 focus:outline-none transition-colors duration-200 focus:border-blue-500  disabled:cursor-not-allowed;
+    @apply text-gray-800 rounded-md border-2 border-transparent py-3 px-4 w-full bg-gray-100 focus-within:outline-none transition-colors duration-200 focus-within:border-blue-500  disabled:cursor-not-allowed;
+    anchor-name: --trigger;
   }
 
   .error-message {
@@ -54,6 +73,14 @@ const { triggerProps, labelProps, errorMessageProps, isTouched, displayError, fi
     bottom: calc(-1.5 * 1em);
   }
 
+  .listbox {
+    margin: 0;
+    position-anchor: --trigger;
+    position-area: bottom;
+    inset-area: bottom;
+    @apply shadow-sm border border-gray-200 w-[300px];
+  }
+
   &.touched {
     input {
       @apply bg-blue-50;
diff --git a/packages/playground/src/components/OptionItem.vue b/packages/playground/src/components/OptionItem.vue
index ecf4abd7..2dbc834a 100644
--- a/packages/playground/src/components/OptionItem.vue
+++ b/packages/playground/src/components/OptionItem.vue
@@ -1,5 +1,5 @@
 <template>
-  <div v-bind="optionProps" :class="{ 'bg-gray-400': isHighlighted }">
+  <div v-bind="optionProps" class="option">
     <slot />
   </div>
 </template>
@@ -9,12 +9,16 @@ import { OptionProps, useOption } from '@formwerk/core';
 
 const props = defineProps<OptionProps<any>>();
 
-const { optionProps, isHighlighted, isSelected } = useOption(props);
+const { optionProps } = useOption(props);
 </script>
 
 <style scoped>
-[aria-selected='true'] {
+option:focus {
+  @apply bg-gray-200;
+}
+
+[aria-selected='true'],
+[aria-checked='true'] {
   @apply bg-gray-700 text-white;
 }
 </style>
-/