diff --git a/apps/metadata-utils/src/types.ts b/apps/metadata-utils/src/types.ts
index 111f907ccc..3c1e5567ec 100644
--- a/apps/metadata-utils/src/types.ts
+++ b/apps/metadata-utils/src/types.ts
@@ -104,3 +104,10 @@ export type columnValue = string | number | boolean | columnValueObject;
 interface columnValueObject {
   [x: string]: columnValue;
 }
+
+export type IInputValue = string | number | boolean;
+
+export type IInputValueLabel = {
+  value: IInputValue | IInputValue[] | null;
+  label?: string;
+};
diff --git a/apps/tailwind-components/assets/css/main.css b/apps/tailwind-components/assets/css/main.css
index 81f2ffc914..c423815896 100644
--- a/apps/tailwind-components/assets/css/main.css
+++ b/apps/tailwind-components/assets/css/main.css
@@ -79,6 +79,9 @@
     --background-color-invalid: var(--color-red-200);
     --background-color-input: var(--color-white);
     --background-color-input-checked: var(--color-yellow-500);
+    --background-color-listbox: var(--color-white);
+    --background-color-listbox-hover: var(--color-gray-100);
+    --background-color-listbox-selected: var(--color-blue-500);
     --background-color-table: var(--color-white);
     --background-color-notification: var(--color-red-700);
 
@@ -128,6 +131,10 @@
     --text-color-pagination-input: var(--text-color-title);
     --text-color-pagination-hover: var(--text-color-title);
     --text-color-footer-link: var(--color-yellow-500);
+    --text-color-listbox: var(--color-black);
+    --text-color-listbox-hover: var(--color-black);
+    --text-color-listbox-selected: var(--color-blue-50);
+    --text-color-button-input-toggle: var(--color-black);
     --text-color-table-column-header: var(--color-gray-600);
     --text-color-form-header: var(--color-blue-800);
     --text-color-input-description: var(--color-blue-800);
@@ -157,6 +164,8 @@
     --border-color-pagination: var(--color-transparent);
     --border-color-input: #C0C0C0;
     --border-color-input-inverted: var(--color-gray-600);
+    --border-color-listbox-option: var(--color-gray-100);
+    --border-color-listbox: var(--border-color-input);
 
     --border-radius-3px: 3px;
     --border-radius-50px: 50px;
diff --git a/apps/tailwind-components/components/form/Field.vue b/apps/tailwind-components/components/form/Field.vue
index 5f2dacf3cc..ed72ccbb49 100644
--- a/apps/tailwind-components/components/form/Field.vue
+++ b/apps/tailwind-components/components/form/Field.vue
@@ -35,30 +35,54 @@ function validate(value: columnValue) {
 
   formFieldInput.value.validate(value);
 }
+
+const refData = ref();
+
+onMounted(async () => {
+  if (["ONTOLOGY", "ONTOLOGY_ARRAY"].includes(props.column.columnType)) {
+    const response = await fetchTableData(
+      props.column.refSchemaId as string,
+      props.column.refTableId as string
+    );
+    refData.value = response.rows.map((row) => row.name);
+  }
+});
 </script>
 
 <template>
   <div class="flex flex-col gap-1">
     <div>
-      <label :for="column.id" class="capitalize text-title font-bold">{{
-        column.label
-      }}</label>
+      <label
+        :id="`${column.id}-label`"
+        :for="column.id"
+        class="capitalize text-title font-bold"
+        >{{ column.label }}</label
+      >
       <span class="text-disabled text-body-sm ml-3" v-show="column.required"
         >Required</span
       >
     </div>
-    <div class="text-input-description text-body-sm" v-if="column.description">
+    <span
+      :id="`${column.id}-description`"
+      class="text-input-description text-body-sm"
+      v-if="column.description"
+    >
       {{ column.description }}
-    </div>
+    </span>
     <div>
       <FormFieldInput
         :type="column.columnType"
         :id="column.id"
         :label="column.label"
         :data="data"
+        :options="refData ? refData : null"
         :required="!!column.required"
         :aria-invalid="hasError"
-        :aria-desribedBy="`${column.id}-input-error`"
+        :aria-desribedBy="
+          column.description
+            ? `${column.id}-description ${column.id}-input-error`
+            : `${column.id}-input-error`
+        "
         @focus="touched = true"
         @input="pristine = false"
         @update:modelValue="$emit('update:modelValue', $event)"
diff --git a/apps/tailwind-components/components/form/FieldInput.vue b/apps/tailwind-components/components/form/FieldInput.vue
index b15b55b1b6..fb8fb3350f 100644
--- a/apps/tailwind-components/components/form/FieldInput.vue
+++ b/apps/tailwind-components/components/form/FieldInput.vue
@@ -8,6 +8,7 @@ import type {
   columnId,
   columnValue,
   CellValueType,
+  IInputValueLabel,
 } from "../../../metadata-utils/src/types";
 
 type inputComponent =
@@ -21,6 +22,7 @@ defineProps<{
   label: string;
   required: boolean;
   data: columnValue;
+  options?: IInputValueLabel[];
 }>();
 
 defineEmits(["focus", "error", "update:modelValue"]);
@@ -47,7 +49,7 @@ function validate(value: columnValue) {
     :id="id"
     :label="label"
     :required="required"
-    :value="data as string"
+    :value="(data as string)"
     @focus="$emit('focus')"
     @update:modelValue="$emit('update:modelValue', $event)"
     @error="$emit('error', $event)"
@@ -58,7 +60,7 @@ function validate(value: columnValue) {
     :id="id"
     :label="label"
     :required="required"
-    :value="data as string"
+    :value="(data as string)"
     @focus="$emit('focus')"
     @update:modelValue="$emit('update:modelValue', $event)"
     @error="$emit('error', $event)"
diff --git a/apps/tailwind-components/components/input/Listbox.vue b/apps/tailwind-components/components/input/Listbox.vue
new file mode 100644
index 0000000000..19faaabe6d
--- /dev/null
+++ b/apps/tailwind-components/components/input/Listbox.vue
@@ -0,0 +1,370 @@
+<template>
+  <div class="w-full relative">
+    <InputListboxToggle
+      :id="id"
+      ref="btnElemRef"
+      :aria-controls="`listbox-${id}-options`"
+      :required="required"
+      :disabled="disabled"
+      :aria-labelledby="labelId"
+      :selected-element-id="selectedElementId"
+      @keydown="onListboxButtonKeyDown"
+    >
+      <span class="w-full">
+        {{ displayText }}
+      </span>
+    </InputListboxToggle>
+    <InputListboxList
+      :id="`listbox-${id}-options`"
+      :isExpanded="isExpanded"
+      :hasFixedHeight="listboxOptions.length > 5"
+      @keydown.prevent="onListboxKeyDown"
+    >
+      <InputListboxListItem
+        v-for="option in listboxOptions"
+        ref="listbox-li"
+        :id="option.elemId"
+        :isSelected="option.value === '' || isSelected(option.value as IInputValue)"
+        :label="(option.label as string) || (option.value as string)"
+        @click="onListboxOptionClick(option)"
+        @blur="blurListOption(option)"
+        @keydown="(event: KeyboardEvent) => onListboxOptionKeyDown(event, option)"
+      />
+    </InputListboxList>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, useTemplateRef, nextTick, watch, onMounted } from "vue";
+import type {
+  columnValue,
+  IFieldError,
+  IInputValue,
+  IInputValueLabel,
+} from "../../../metadata-utils/src/types";
+import type {
+  IInternalListboxOption,
+  IListboxLiRef,
+} from "../../types/listbox";
+
+import { InputListboxToggle } from "#components";
+
+const props = withDefaults(
+  defineProps<{
+    id: string;
+    labelId: string;
+    options: IInputValue[] | IInputValueLabel[];
+    value?: IInputValue | IInputValueLabel;
+    required?: boolean;
+    hasError?: boolean;
+    placeholder?: string;
+    disabled?: boolean;
+  }>(),
+  {
+    disabled: false,
+    required: false,
+    hasError: false,
+    placeholder: "Select an option",
+  }
+);
+
+const emit = defineEmits<{
+  (e: "update:modelValue", value: IInputValue | IInputValueLabel): void;
+  (e: "error", value: IFieldError[]): void;
+  (e: "blur", value: null): void;
+  (e: "focus", value: null): void;
+}>();
+
+defineExpose({
+  validate,
+});
+
+const sourceDataType = ref<string>("");
+const sourceData = ref<IInputValueLabel[]>();
+const focusCounter = ref<number>(0);
+const modelValue = defineModel<IInputValue | IInputValueLabel | null>();
+const liElemRefs = useTemplateRef<IListboxLiRef[]>("listbox-li");
+const btnElemRef = ref<InstanceType<typeof InputListboxToggle>>();
+const displayText = ref<string>(props.placeholder);
+const startingCounter = ref<number>(0);
+const selectedElementId = ref<string>("");
+
+const isExpanded = computed<boolean>(() => {
+  return btnElemRef.value?.expanded as boolean;
+});
+
+onMounted(() => {
+  if (props.value && listboxOptions.value) {
+    const initalValue: IInternalListboxOption[] = listboxOptions.value.filter(
+      (row: IInternalListboxOption) => {
+        return (
+          row.value === (props.value as IInputValueLabel).value ||
+          row.value === (props.value as IInputValue)
+        );
+      }
+    );
+    if (initalValue) {
+      updateModelValue(initalValue[0], false);
+    }
+  }
+});
+
+watch(
+  () => props.placeholder,
+  () => (displayText.value = props.placeholder)
+);
+
+function counterIsInRange(value: number) {
+  return value <= listboxOptions.value.length - 1 && value >= 0;
+}
+
+const listboxOptions = computed<IInternalListboxOption[]>(() => {
+  const testDataValue: IInputValue | IInputValueLabel = props.options[0];
+  if (
+    typeof testDataValue === "object" &&
+    Object.hasOwn(testDataValue as IInputValueLabel, "value")
+  ) {
+    sourceDataType.value = "ListboxOptions";
+    sourceData.value = props.options as IInputValueLabel[];
+  } else {
+    sourceDataType.value = "ListboxValue";
+    const inputData = props.options as IInputValue[];
+    const processedData = inputData.map(
+      (value: IInputValue): IInputValueLabel => {
+        return { value: value };
+      }
+    );
+    sourceData.value = processedData as IInputValueLabel[];
+  }
+
+  const defaultOption: IInputValueLabel = {
+    value: null,
+    label: props.placeholder,
+  };
+  const inputData = sourceData.value as IInputValueLabel[];
+  const data: IInputValueLabel[] = [defaultOption, ...inputData];
+
+  return data.map((option: IInputValueLabel, index: number) => {
+    return {
+      ...option,
+      index: index,
+      elemId: `listbox-${props.id}-options-${index}`,
+    };
+  });
+});
+
+function updateCounter(value: number) {
+  if (counterIsInRange(value)) {
+    focusCounter.value = value;
+  } else {
+    if (value > listboxOptions.value.length - 1) {
+      focusCounter.value = listboxOptions.value.length - 1;
+    } else {
+      focusCounter.value = 0;
+    }
+  }
+}
+
+function focusListOption() {
+  nextTick(() => {
+    if (liElemRefs.value) {
+      const targetElem = liElemRefs.value[focusCounter.value].li;
+      targetElem.setAttribute("tabindex", "0");
+      targetElem.focus();
+    }
+  });
+}
+
+function blurListOption(option: IInternalListboxOption) {
+  nextTick(() => {
+    if (liElemRefs.value) {
+      const targetElem = liElemRefs.value[option.index].li;
+      targetElem.setAttribute("tabindex", "-1");
+      targetElem.blur();
+    }
+  });
+}
+
+function updateDisplayText(text: string | undefined | null): string {
+  console.log(text);
+  if (typeof text === "undefined" || text === null) {
+    return props.placeholder;
+  }
+  return text;
+}
+
+function updateModelValue(
+  selection: IInternalListboxOption,
+  enableToggling: boolean = true
+) {
+  focusCounter.value = selection.index;
+  startingCounter.value = selection.index;
+
+  if (sourceDataType.value === "ListboxOptions") {
+    const selectedOption: IInputValueLabel = { value: selection.value };
+    if (Object.hasOwn(selection, "label")) {
+      selectedOption.label = selection.label;
+      displayText.value = updateDisplayText(selectedOption.label);
+    } else {
+      displayText.value = updateDisplayText(selectedOption.value as string);
+    }
+
+    modelValue.value = selectedOption;
+  } else {
+    modelValue.value = selection.value as IInputValue;
+    displayText.value = updateDisplayText(selection.value as string);
+  }
+  selectedElementId.value = selection.elemId;
+  emit("update:modelValue", modelValue.value);
+
+  if (enableToggling) {
+    openCloseListbox();
+  }
+}
+
+function isSelected(value: IInputValue): boolean {
+  if (modelValue.value) {
+    return (
+      value === (modelValue.value as IInputValueLabel).value ||
+      value === (modelValue.value as IInputValue)
+    );
+  } else {
+    return value === null;
+  }
+}
+
+function focusPreviousOption(by: number = 1) {
+  const newCounterValue = focusCounter.value - by;
+  updateCounter(newCounterValue);
+  focusListOption();
+}
+
+function focusNextOption(by: number = 1) {
+  const newCounterValue = focusCounter.value + by;
+  updateCounter(newCounterValue);
+  focusListOption();
+}
+
+function focusListboxButton() {
+  btnElemRef.value?.button?.focus();
+}
+
+function openCloseListbox() {
+  btnElemRef.value!.expanded = !btnElemRef.value!.expanded;
+  if (isExpanded.value) {
+    if (modelValue.value) {
+      updateCounter(startingCounter.value);
+    } else {
+      updateCounter(0);
+    }
+    focusListOption();
+  } else {
+    focusListboxButton();
+  }
+}
+
+function onListboxButtonKeyDown(event: KeyboardEvent) {
+  const key = event.key;
+  switch (key) {
+    case "ArrowUp":
+      openCloseListbox();
+      focusPreviousOption();
+      break;
+
+    case "ArrowDown":
+      openCloseListbox();
+      break;
+
+    case "Enter":
+      openCloseListbox();
+      break;
+
+    case "Space":
+      openCloseListbox();
+      break;
+
+    case "Home":
+      focusCounter.value = 0;
+      focusListOption();
+      break;
+
+    case "End":
+      focusCounter.value = listboxOptions.value.length - 1;
+      focusListOption();
+      break;
+  }
+}
+
+function onListboxKeyDown(event: KeyboardEvent) {
+  const key = event.key;
+  switch (key) {
+    case "ArrowUp":
+      focusPreviousOption();
+      break;
+
+    case "ArrowDown":
+      focusNextOption();
+      break;
+
+    case "PageUp":
+      focusPreviousOption(10);
+      break;
+
+    case "PageDown":
+      focusNextOption(10);
+      break;
+
+    case "Home":
+      focusCounter.value = 0;
+      focusListOption();
+      break;
+
+    case "End":
+      focusCounter.value = listboxOptions.value.length - 1;
+      focusListOption();
+      break;
+  }
+}
+
+function onListboxOptionKeyDown(
+  event: KeyboardEvent,
+  option: IInternalListboxOption
+) {
+  const key: string = event.key;
+  switch (key) {
+    case "Enter":
+      updateModelValue(option);
+      break;
+
+    case "Spacebar":
+      updateModelValue(option);
+      break;
+
+    // spacebar (for older browser support)
+    case " ":
+      updateModelValue(option);
+      break;
+
+    case "Tab":
+      updateModelValue(option);
+      break;
+
+    case "Escape":
+      blurListOption(option);
+      openCloseListbox();
+      break;
+  }
+}
+
+function onListboxOptionClick(option: IInternalListboxOption) {
+  updateModelValue(option);
+}
+
+function validate(value: columnValue) {
+  if (props.required && value === "") {
+    emit("error", [{ message: `${props.id} required to complete the form` }]);
+  } else {
+    emit("error", []);
+  }
+}
+</script>
diff --git a/apps/tailwind-components/components/input/listbox/List.vue b/apps/tailwind-components/components/input/listbox/List.vue
new file mode 100644
index 0000000000..a7f28414d9
--- /dev/null
+++ b/apps/tailwind-components/components/input/listbox/List.vue
@@ -0,0 +1,34 @@
+<template>
+  <ul
+    role="listbox"
+    ref="ul"
+    :aria-expanded="isExpanded"
+    class="absolute b-0 w-full overflow-y-scroll z-10 bg-listbox border"
+    :class="{
+      hidden: !isExpanded,
+      'h-44': isExpanded && hasFixedHeight,
+      'shadow-inner': isExpanded,
+    }"
+    :tabindex="isExpanded ? 1 : 0"
+  >
+    <slot></slot>
+  </ul>
+</template>
+
+<script lang="ts" setup>
+withDefaults(
+  defineProps<{
+    isExpanded: boolean;
+    hasFixedHeight: boolean;
+  }>(),
+  {
+    isExpanded: false,
+    hasFixedHeight: false,
+  }
+);
+
+const ul = useTemplateRef<HTMLUListElement>("ul");
+defineExpose({
+  ul,
+});
+</script>
diff --git a/apps/tailwind-components/components/input/listbox/ListItem.vue b/apps/tailwind-components/components/input/listbox/ListItem.vue
new file mode 100644
index 0000000000..dc67261d01
--- /dev/null
+++ b/apps/tailwind-components/components/input/listbox/ListItem.vue
@@ -0,0 +1,38 @@
+<template>
+  <li
+    ref="li"
+    role="option"
+    class="flex justify-start items-center gap-3 pl-3 py-1 bg-listbox text-listbox border-t-[1px] border-t-listbox-option hover:cursor-pointer hover:bg-listbox-hover hover:text-listbox focus:bg-listbox-hover focus:text-listbox focus:ring-blue-300"
+    :class="{
+      '!bg-listbox-selected !text-listbox-selected': isSelected,
+    }"
+    :aria-selected="isSelected"
+  >
+    <BaseIcon
+      name="Check"
+      class="fill-listbox-selected invisible"
+      :class="{
+        '!visible': isSelected,
+      }"
+      :width="18"
+    />
+    <span>{{ label }}</span>
+  </li>
+</template>
+
+<script lang="ts" setup>
+withDefaults(
+  defineProps<{
+    isSelected: boolean;
+    label: string | number | boolean;
+  }>(),
+  {
+    isSelected: false,
+  }
+);
+
+const li = useTemplateRef<HTMLLIElement>("li");
+defineExpose({
+  li,
+});
+</script>
diff --git a/apps/tailwind-components/components/input/listbox/Toggle.vue b/apps/tailwind-components/components/input/listbox/Toggle.vue
new file mode 100644
index 0000000000..7e3229930e
--- /dev/null
+++ b/apps/tailwind-components/components/input/listbox/Toggle.vue
@@ -0,0 +1,50 @@
+<template>
+  <button
+    role="combobox"
+    ref="button"
+    aria-haspopup="listbox"
+    :aria-required="required"
+    :aria-expanded="isExpanded"
+    :aria-activedescendant="selectedElementId"
+    class="flex justify-start items-center h-10 w-full text-left pl-11 border bg-input rounded-search-input text-button-input-toggle focus:ring-blue-300"
+    :class="{
+      'border-disabled text-disabled bg-disabled': disabled,
+      'border-invalid text-invalid': hasError,
+    }"
+    @click="onClick()"
+  >
+    <slot></slot>
+    <div class="w-[60px] flex flex-col">
+      <BaseIcon :width="18" name="caret-up" class="mx-auto -my-1" />
+      <BaseIcon :width="18" name="caret-down" class="mx-auto -my-1" />
+    </div>
+  </button>
+</template>
+
+<script lang="ts" setup>
+withDefaults(
+  defineProps<{
+    required?: boolean;
+    disabled?: boolean;
+    hasError?: boolean;
+    selectedElementId?: string;
+  }>(),
+  {
+    required: false,
+    disabled: false,
+    hasError: false,
+  }
+);
+
+const isExpanded = ref<boolean>(false);
+
+function onClick() {
+  isExpanded.value = !isExpanded.value;
+}
+
+const button = useTemplateRef<HTMLButtonElement>("button");
+defineExpose({
+  button,
+  expanded: isExpanded,
+});
+</script>
diff --git a/apps/tailwind-components/pages/Form.story.vue b/apps/tailwind-components/pages/Form.story.vue
index 7c3df99dfa..a71f339e82 100644
--- a/apps/tailwind-components/pages/Form.story.vue
+++ b/apps/tailwind-components/pages/Form.story.vue
@@ -6,16 +6,22 @@ import type {
   IFieldError,
   ISchemaMetaData,
   ITableMetaData,
+  IInputValueLabel,
 } from "../../metadata-utils/src/types";
 
-const sampleType = ref("simple");
+const exampleForms: IInputValueLabel[] = [
+  { value: "simple", label: "Simple form example" },
+  { value: "complex", label: "Complex form example" },
+];
+
+const formType = ref<IInputValueLabel>(exampleForms[0]);
 
 // just assuming that the table is there for the demo
 const schemaId = computed(() =>
-  sampleType.value === "simple" ? "pet store" : "catalogue-demo"
+  formType.value.value === "simple" ? "pet store" : "catalogue-demo"
 );
 const tableId = computed(() =>
-  sampleType.value === "simple" ? "Pet" : "Resources"
+  formType.value.value === "simple" ? "Pet" : "Resources"
 );
 
 const {
@@ -31,7 +37,8 @@ const tableMeta = computed(
     ) as ITableMetaData
 );
 
-function refetch() {
+function refetch(value: IInputValueLabel) {
+  formType.value = value;
   refetchMetadata();
 }
 
diff --git a/apps/tailwind-components/pages/input/Listbox.story.vue b/apps/tailwind-components/pages/input/Listbox.story.vue
new file mode 100644
index 0000000000..72c5391219
--- /dev/null
+++ b/apps/tailwind-components/pages/input/Listbox.story.vue
@@ -0,0 +1,150 @@
+<template>
+  <article
+    aria-labelledby="listbox-component-title"
+    class="[&>p]:mt-3 [&_p]:mb-4"
+  >
+    <h2 id="listbox-component-title" class="text-heading-2xl">
+      Listbox component
+    </h2>
+    <p>
+      The <code>InputListbox</code> component an alternative to the
+      <code>InputSelect</code> component. This component functions and behaves
+      in the same manner as the select element, but it allows the component to
+      be styled with greater detail. The component is flexible in that it allows
+      for multiple input types. Options can be generated from an array of values
+      (string, number, boolean) or as an array of objects that follow the
+      <code>IListboxOption</code> type (<code
+        >[{value: "...", label: "..."},...]</code
+      >). The return value will always match the input type. When passing data
+      into the component, you must also supply the listbox type. There are two
+      types to use.
+    </p>
+    <ul class="pl-6 mb-4 list-disc">
+      <li>
+        <code>IListboxValue</code>: an array of values (as strings, or
+        string[]). For now, this component only supports string arrays.
+      </li>
+      <li>
+        <code>IListboxOption</code>: an array of objects that have a value and a
+        label key.(<code>[{value: "...", label: "..."},...]</code>).
+      </li>
+    </ul>
+    <p>
+      The following examples demonstrate the use of the listbox components and
+      the various configurations that area allowed.
+    </p>
+  </article>
+  <form class="mb-6 bg-white rounded p-4">
+    <legend class="mb-2 text-heading-lg">
+      Configure the listbox component
+    </legend>
+    <div class="flex flex-row flex-wrap justify-center items-start gap-4">
+      <div class="p-2 grow">
+        <InputLabel for="listbox-data-type" class="pl-0">
+          <span>Select the input data type</span>
+        </InputLabel>
+        <InputRadioGroup
+          id="listbox-data-type"
+          v-model="listboxDataType"
+          :radio-options="[
+            { value: 'string', label: 'String array' },
+            { value: 'array', label: 'Array of options' },
+          ]"
+        />
+      </div>
+      <div class="p-2 grow">
+        <InputLabel for="listbox-component-state" class="pl-0">
+          Change the component state
+        </InputLabel>
+        <InputRadioGroup
+          id="listbox-component-state"
+          v-model="listboxState"
+          :radioOptions="[
+            {
+              value: 'disabled',
+              label: 'Disabled: disable interactivity with the component',
+            },
+            {
+              value: 'error',
+              label: 'Error: simulate an instance where an error occurred',
+            },
+          ]"
+          :showClearButton="true"
+        />
+      </div>
+      <div class="bg-white p-2 grow">
+        <InputLabel for="listbox-placeholder">
+          Change the default placeholder text
+        </InputLabel>
+        <InputString id="listbox-placeholder" v-model="listboxPlaceholder" />
+      </div>
+    </div>
+  </form>
+  <div class="mb-6 bg-white rounded px-6 py-8">
+    <h3 class="text-heading-lg mb-2">Listbox example</h3>
+    <InputLabel
+      id="listbox-input-label"
+      for="listbox-input"
+      class="block mb-3 pl-0"
+      :disabled="listboxState === 'disabled'"
+      :has-error="listboxState === 'error'"
+    >
+      <span>Select a group assignment</span>
+    </InputLabel>
+    <InputListbox
+      id="listbox-input"
+      labelId="listbox-input-label"
+      :options="listboxData"
+      :hasError="listboxState === 'error'"
+      :disabled="listboxState === 'disabled'"
+      :placeholder="listboxPlaceholder"
+      @update:model-value="(value) => (modelValue = value)"
+    />
+    <output class="block w-full mt-6 bg-gray-100 py-3 px-2 pl-6">
+      <code
+        >Output {{ listboxDataType === "true" ? "Value" : "Object" }}:
+        {{ modelValue }}</code
+      >
+    </output>
+  </div>
+  <div class="mb-2 bg-white rounded p-6">
+    <h3 class="text-heading-lg mb-2">Input data structure</h3>
+    <p>Based on the selection above, the input data is shown below.</p>
+    <output
+      class="block w-full mt-6 bg-gray-100 py-3 px-2 pl-6 h-60 overflow-y-scroll shadow-inner"
+    >
+      <pre class="indent-[-5em]">
+        {{ listboxData }}
+      </pre>
+    </output>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, computed } from "vue";
+import type {
+  IInputValue,
+  IInputValueLabel,
+} from "../../../metadata-utils/src/types";
+
+const modelValue = defineModel<IInputValue | IInputValueLabel>();
+const letters: string[] = [...Array(26).keys()].map((num) =>
+  String.fromCharCode(num + 65)
+);
+
+const lettersWithLabels: IInputValueLabel[] = letters.map((letter: string) => {
+  return { value: letter, label: `Group ${letter}` };
+});
+
+const listboxState = ref<string>("");
+const listboxPlaceholder = ref<string>("Select an option");
+const listboxDataType = ref<string>("string");
+
+const listboxData = computed<IInputValue[] | IInputValueLabel[]>(() => {
+  if (listboxDataType.value === "string") {
+    return letters as IInputValue[];
+  } else {
+    return lettersWithLabels as IInputValueLabel[];
+  }
+});
+</script>
diff --git a/apps/tailwind-components/tailwind.config.js b/apps/tailwind-components/tailwind.config.js
index d0c18cb5b0..838007af18 100644
--- a/apps/tailwind-components/tailwind.config.js
+++ b/apps/tailwind-components/tailwind.config.js
@@ -154,6 +154,9 @@ module.exports = {
         "disabled": "var(--background-color-disabled)",
         "invalid": "var(--background-color-invalid)",
         "input": "var(--background-color-input)",
+        "listbox": "var(--background-color-listbox)",
+        "listbox-hover": "var(--background-color-listbox-hover)",
+        "listbox-selected": "var(--background-color-listbox-selected)",
         "table": "var(--background-color-table)",
         "notification": "var(--background-color-notification)",
       }),
@@ -208,6 +211,10 @@ module.exports = {
         "valid": "var(--text-color-valid)",
         "disabled": "var(--text-color-disabled)",
         "required": "var(--text-color-required)",
+        "listbox": "var(--text-color-listbox)",
+        "listbox-hover": "var(--text-color-listbox-hover)",
+        "listbox-selected": "var(--text-color-listbox-selected)",
+        "button-input-toggle": "var(--text-color-button-input-toggle)",
         "legend-error-count": "var(--text-color-legend-error-count)",
       }),
       borderColor: ({ theme }) => ({
@@ -232,6 +239,8 @@ module.exports = {
         "disabled": "var(--border-color-disabled)",
         "input": "var(--border-color-input)",
         "input-inverted": "var(--border-color-input-inverted)",
+        "listbox": "var(--border-color-search-input)",
+        "listbox-option": "var(--border-color-listbox-option)"
       }),
       stroke: ({ theme }) => ({
         "input": "var(--border-color-input)",
@@ -240,6 +249,7 @@ module.exports = {
       fill: ({ theme }) => ({
         "input": "var(--background-color-input)",
         "input-checked": "var(--background-color-input-checked)",
+        "listbox-selected": "var(--text-color-listbox-selected)",
         "notification": "var(--background-color-notification)",
         "notification-text": "var(--text-color-legend-error-count)",
       }),
diff --git a/apps/tailwind-components/types/listbox.ts b/apps/tailwind-components/types/listbox.ts
new file mode 100644
index 0000000000..d7d02e26b3
--- /dev/null
+++ b/apps/tailwind-components/types/listbox.ts
@@ -0,0 +1,11 @@
+
+import type { IInputValueLabel } from "../../metadata-utils/src/types"; 
+
+export interface IInternalListboxOption extends IInputValueLabel {
+  index: number;
+  elemId: string;
+}
+
+export interface IListboxLiRef {
+  li: HTMLLIElement;
+}
\ No newline at end of file
diff --git a/apps/yarn.lock b/apps/yarn.lock
index 0d98292f35..872b7cf21e 100644
--- a/apps/yarn.lock
+++ b/apps/yarn.lock
@@ -14248,6 +14248,7 @@ wordwrap@^1.0.0, wordwrap@~1.0.0:
   integrity sha512-gvVzJFlPycKc5dZN4yPkP8w7Dc37BtP1yczEneOb4uq34pXZcvrtRTmWV8W+Ume+XCxKgbjM+nevkyFPMybd4Q==
 
 "wrap-ansi-cjs@npm:wrap-ansi@^7.0.0", wrap-ansi@^7.0.0:
+  name wrap-ansi-cjs
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
   integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
diff --git a/backend/molgenis-emx2-rdf/src/test/java/org/molgenis/emx2/rdf/ColumnTypeRdfMapperTest.java b/backend/molgenis-emx2-rdf/src/test/java/org/molgenis/emx2/rdf/ColumnTypeRdfMapperTest.java
index 0b1021b645..2f9cd0b641 100644
--- a/backend/molgenis-emx2-rdf/src/test/java/org/molgenis/emx2/rdf/ColumnTypeRdfMapperTest.java
+++ b/backend/molgenis-emx2-rdf/src/test/java/org/molgenis/emx2/rdf/ColumnTypeRdfMapperTest.java
@@ -283,7 +283,6 @@ void validateValuesRetrieval() {
                             // Not sure how to retrieve more directly as changes everytime
                             + firstRow.getString(ColumnType.FILE.name()))),
                 retrieveValues(ColumnType.FILE.name())),
-
         // STRING
         () ->
             Assertions.assertEquals(
@@ -378,7 +377,6 @@ void validateValuesRetrieval() {
             Assertions.assertEquals(
                 Set.of(Values.iri(rdfApiUrlPrefix + REFBACK_TABLE + "?id=1")),
                 retrieveValues(ColumnType.REFBACK.name())),
-
         // LAYOUT and other constants -> should return empty sets as they should be excluded
         () -> Assertions.assertEquals(Set.of(), retrieveValues(ColumnType.HEADING.name())),
         // format flavors that extend a baseType
diff --git a/e2e/tests/tailwind-components/input/listbox.spec.ts b/e2e/tests/tailwind-components/input/listbox.spec.ts
new file mode 100644
index 0000000000..3589c0f0fc
--- /dev/null
+++ b/e2e/tests/tailwind-components/input/listbox.spec.ts
@@ -0,0 +1,187 @@
+import { test, expect } from "@playwright/test";
+
+
+test.describe("Listbox component", {
+  tag: "@tw-components @tw-forms @tw-listbox"
+}, () => {
+  
+  test(
+    "toggle has correct aria attributes",
+    async({ page }) => {
+      await page.goto("/apps/tailwind-components/#/input/Listbox.story");
+      const combobox = await page.getByRole("combobox");
+      await expect(combobox).toHaveAttribute("aria-required");
+      await expect(combobox).toHaveAttribute("aria-expanded");
+      await expect(combobox).toHaveAttribute("aria-labelledby");
+      await expect(combobox).toHaveAttribute("role", "combobox");
+      await expect(combobox).toHaveAttribute("aria-haspopup", "listbox");
+    }
+  );
+  
+  test(
+    "options list is properly linked to the listbox",
+    async ({ page }) => {
+      await page.goto("/apps/tailwind-components/#/input/Listbox.story");
+      const combobox = await page.getByRole("combobox");
+      const listbox = await page.getByRole("listbox");
+      await combobox.click();
+      
+      const comboxId = await combobox.getAttribute("aria-controls");
+      const listboxId = await listbox.getAttribute("id");
+      await expect(comboxId).toEqual(listboxId);   
+    }
+  )
+  
+  test(
+    "listbox is properly labelled",
+    async ({ page }) => {
+      await page.goto("/apps/tailwind-components/#/input/Listbox.story");
+      const combobox = await page.getByRole("combobox");
+      const comboxId = await combobox.getAttribute("aria-labelledby");
+      await page.locator(`label[for='${comboxId}']`);
+    }
+  )
+  
+  test(
+    "aria expand properties correctly update when opened",
+    async({ page }) => {
+      await page.goto("/apps/tailwind-components/#/input/Listbox.story");
+      const combobox = await page.getByRole("combobox");
+      await expect(combobox).toHaveAttribute("aria-expanded", "false");
+    }
+  );
+  
+  test(
+    "placeholder is always the first element in the list",
+    async ({ page }) => {
+      await page.goto("/apps/tailwind-components/#/input/Listbox.story");
+      const combobox = await page.getByRole("combobox");
+      await combobox.click();
+      const option = await page.getByRole("option").first();
+      await expect(option).toHaveText("Select an option");
+    }
+  );
+  
+  test(
+    "list items have the proper attributes",
+    async ({ page }) => {
+      await page.goto("/apps/tailwind-components/#/input/Listbox.story");
+      const combobox = await page.getByRole("combobox");
+      await combobox.click();
+      await expect(combobox).toHaveAttribute("aria-expanded", "true");
+      for (const option of await page.getByRole("option").all()) { 
+        if (await option.innerText() === "Select an option") {
+          await expect(option).toHaveAttribute("aria-selected", "true");
+        } else {
+          await expect(option).toHaveAttribute("aria-selected", "false");
+        }
+      }
+    }
+  );
+  
+  test(
+    "down key opens listbox",
+    {
+      tag: '@keyboard-events'
+    },
+    async ({ page }) => {
+      await page.goto("/apps/tailwind-components/#/input/Listbox.story");
+      const combobox = await page.getByRole("combobox");
+      const listbox = await page.getByRole("listbox");
+
+      await combobox.focus();
+      await page.keyboard.press("ArrowDown");
+      await expect(combobox).toHaveAttribute("aria-expanded", "true");
+      await expect(listbox).toHaveAttribute("aria-expanded", "true");
+    }
+  );
+  
+  test(
+    "enter key opens and closes listbox",
+    {
+      tag: '@keyboard-events'
+    },
+    async({ page }) => {
+      await page.goto("/apps/tailwind-components/#/input/Listbox.story");
+      const combobox = await page.getByRole("combobox");
+      const listbox = await page.getByRole("listbox");
+
+      await combobox.focus();
+      await page.keyboard.press("Enter");
+      await expect(combobox).toHaveAttribute("aria-expanded", "true");
+      await expect(listbox).toHaveAttribute("aria-expanded", "true");
+      
+      await page.keyboard.press("Enter");
+      await expect(combobox).toHaveAttribute("aria-expanded", "false");
+      await expect(listbox).toBeHidden();
+      
+    }
+  );
+  
+  test(
+    "space key opens and closes listbox",
+    {
+      tag: '@keyboard-events'
+    },
+    async({ page }) => {
+      await page.goto("/apps/tailwind-components/#/input/Listbox.story");
+      const combobox = await page.getByRole("combobox");
+      const listbox = await page.getByRole("listbox");
+
+      await combobox.focus();
+      await page.keyboard.press("Space");
+      await expect(combobox).toHaveAttribute("aria-expanded", "true");
+      await expect(listbox).toHaveAttribute("aria-expanded", "true");
+      
+      await page.keyboard.press("Space");
+      await expect(combobox).toHaveAttribute("aria-expanded", "false");
+      await expect(listbox).toBeHidden();
+      
+    }
+  );
+  
+  test(
+    "End and home buttons focuses the last and first options",
+    {
+      tag: '@keyboard-events'
+    },
+    async({ page }) => {
+      await page.goto("/apps/tailwind-components/#/input/Listbox.story");
+      const combobox = await page.getByRole("combobox");
+
+      await combobox.focus();
+      await page.keyboard.press("Enter");
+      await page.keyboard.press("End");
+      
+      const lastOption = await page.getByRole("option").last();
+      await expect(lastOption).toBeFocused();
+      
+      await page.keyboard.press("Home");
+      const firstOption = await page.getByRole("option").first();
+      await expect(firstOption).toBeFocused();
+    }
+  );
+  
+  test(
+    "When opened, arrow keys properly focus and select items",
+    {
+      tag: '@keyboard-events'
+    },
+    async({ page }) => {
+      await page.goto("/apps/tailwind-components/#/input/Listbox.story");
+      const combobox = await page.getByRole("combobox");
+
+      await combobox.focus();
+      await page.keyboard.press("Enter");
+      await page.keyboard.press("ArrowDown");
+      const secondOption = await page.getByRole("option").nth(1);
+      await expect(secondOption).toBeFocused();
+    }
+  )
+  
+})
+
+
+
+
+