diff --git a/apps/metadata-utils/src/types.ts b/apps/metadata-utils/src/types.ts
index c36a0d9be9..2fb8b65481 100644
--- a/apps/metadata-utils/src/types.ts
+++ b/apps/metadata-utils/src/types.ts
@@ -102,7 +102,7 @@ export interface IFormLegendSection {
 export type columnId = string;
 export type columnValue = string | number | boolean | null | columnValueObject;
 
-interface columnValueObject {
+export interface columnValueObject {
   [x: string]: columnValue;
 }
 
diff --git a/apps/tailwind-components/assets/css/main.css b/apps/tailwind-components/assets/css/main.css
index c423815896..fbbd8b4d46 100644
--- a/apps/tailwind-components/assets/css/main.css
+++ b/apps/tailwind-components/assets/css/main.css
@@ -108,6 +108,7 @@
     --text-color-search-button-hover: var(--text-blue-800);
     --text-color-favorite: var(--color-blue-800);
     --text-color-favorite-hover: var(--color-blue-800);
+    --text-color-button-text: var(--color-blue-800);
     --text-color-search-button: var(--color-blue-500);
     --text-color-search-button-hover: var(--color-blue-800);
     --text-color-search-results-view-tabs: var(--color-blue-500);
diff --git a/apps/tailwind-components/assets/css/theme/aumc.css b/apps/tailwind-components/assets/css/theme/aumc.css
index 50b6ad3994..f952dc2dbf 100644
--- a/apps/tailwind-components/assets/css/theme/aumc.css
+++ b/apps/tailwind-components/assets/css/theme/aumc.css
@@ -24,6 +24,7 @@
 
     --text-color-button-primary: var(--color-white);
     --text-color-button-primary-hover: var(--color-black);
+    --text-color-button-text: var(--color-white);
     --text-color-title: var(--color-white);
     --text-color-form-header: var(--text-color-title);
     --text-color-breadcrumb: var(--text-color-title);
diff --git a/apps/tailwind-components/assets/css/theme/dark.css b/apps/tailwind-components/assets/css/theme/dark.css
index 332e0038bf..dfe436a88f 100644
--- a/apps/tailwind-components/assets/css/theme/dark.css
+++ b/apps/tailwind-components/assets/css/theme/dark.css
@@ -13,6 +13,7 @@
     --text-color-button-primary-hover: var(--color-gray-800);
     --text-color-button-secondary: var(--color-green-500);
     --text-color-button-secondary-hover: var(--color-green-200);
+    --text-color-button-text: var(--color-green-500);
     --text-color-title: var(--color-white);
     --text-color-title-contrast: var(--color-blue-500);
     --text-color-form-header: var(--color-white);
diff --git a/apps/tailwind-components/assets/css/theme/molgenis.css b/apps/tailwind-components/assets/css/theme/molgenis.css
index 74972b3972..0adca3e868 100644
--- a/apps/tailwind-components/assets/css/theme/molgenis.css
+++ b/apps/tailwind-components/assets/css/theme/molgenis.css
@@ -48,6 +48,7 @@
     --text-color-button-outline-hover: var(--color-blue-700);
     --text-color-button-disabled: var(--color-gray-600);
     --text-color-button-disabled-hover: var(--color-gray-600);
+    --text-color-button-text: var(--color-white);
     --text-color-menu: var(--color-white);
     --text-color-sub-menu: var(--color-blue-500);
     --text-color-sub-menu-hover: var(--color-blue-700);
diff --git a/apps/tailwind-components/components/Button.vue b/apps/tailwind-components/components/Button.vue
index 2ade2fb506..f026704ed8 100644
--- a/apps/tailwind-components/components/Button.vue
+++ b/apps/tailwind-components/components/Button.vue
@@ -53,6 +53,12 @@ const SIZE_MAPPING = {
   medium: "h-14 px-7.5 text-heading-xl gap-4",
   large: "h-18 px-8.75 text-heading-xl gap-5",
 };
+const ICON_SIZE_MAPPING = {
+  tiny: 12,
+  small: 18,
+  medium: 24,
+  large: 36,
+};
 
 const ICON_POSITION_MAPPING = {
   left: "",
@@ -71,6 +77,9 @@ const iconPositionClass = computed(() => {
   return ICON_POSITION_MAPPING[props.iconPosition];
 });
 
+const iconSize = computed(() => {
+  return ICON_SIZE_MAPPING[props.size];
+});
 const tooltipText = computed(() => {
   return props.tooltip || props.iconOnly ? props.label : "";
 });
@@ -82,8 +91,7 @@ const tooltipText = computed(() => {
     class="flex items-center border rounded-input group-[.button-bar]:rounded-none group-[.button-bar]:first:rounded-l-input group-[.button-bar]:last:rounded-r-input"
     :class="`${colorClasses} ${sizeClasses} ${iconPositionClass} transition-colors`"
   >
-    <BaseIcon v-if="icon" :name="icon" />
-
+    <BaseIcon v-if="icon" :name="icon" :width="iconSize" />
     <span :class="{ 'sr-only': iconOnly }">{{ label }}<slot /></span>
   </button>
 </template>
diff --git a/apps/tailwind-components/components/button/Text.vue b/apps/tailwind-components/components/button/Text.vue
new file mode 100644
index 0000000000..9a6dbee3ef
--- /dev/null
+++ b/apps/tailwind-components/components/button/Text.vue
@@ -0,0 +1,20 @@
+<script setup lang="ts">
+withDefaults(
+  defineProps<{
+    inverted: boolean;
+    icon?: string;
+  }>(),
+  {
+    inverted: false,
+  }
+);
+</script>
+
+<template>
+  <button class="flex items-center text-button-text">
+    <BaseIcon v-if="icon" :name="icon" :width="18" />
+    <span class="ml-2 text-body-sm hover:underline">
+      <slot />
+    </span>
+  </button>
+</template>
diff --git a/apps/tailwind-components/components/form/Field.vue b/apps/tailwind-components/components/form/Field.vue
index 5f2dacf3cc..fcc42b2e9e 100644
--- a/apps/tailwind-components/components/form/Field.vue
+++ b/apps/tailwind-components/components/form/Field.vue
@@ -7,6 +7,7 @@ import type {
 } from "../../../metadata-utils/src/types";
 
 const props = defineProps<{
+  schemaId: string;
   column: IColumn;
   data: columnValue;
   errors: IFieldError[];
@@ -55,6 +56,9 @@ function validate(value: columnValue) {
         :type="column.columnType"
         :id="column.id"
         :label="column.label"
+        :refSchemaId="column.refSchemaId || schemaId"
+        :refTableId="column.refTableId"
+        :refLabel="column.refLabel || column.refLabelDefault"
         :data="data"
         :required="!!column.required"
         :aria-invalid="hasError"
diff --git a/apps/tailwind-components/components/form/FieldInput.vue b/apps/tailwind-components/components/form/FieldInput.vue
index 662a15a3fc..7572484435 100644
--- a/apps/tailwind-components/components/form/FieldInput.vue
+++ b/apps/tailwind-components/components/form/FieldInput.vue
@@ -2,17 +2,20 @@
 import type {
   InputString,
   InputTextArea,
+  InputRef,
   InputPlaceHolder,
 } from "#build/components";
 import type {
   columnId,
   columnValue,
   CellValueType,
+  columnValueObject,
 } from "../../../metadata-utils/src/types";
 
 type inputComponent =
   | InstanceType<typeof InputString>
   | InstanceType<typeof InputTextArea>
+  | InstanceType<typeof InputRef>
   | InstanceType<typeof InputPlaceHolder>;
 
 defineProps<{
@@ -21,6 +24,9 @@ defineProps<{
   label: string;
   required: boolean;
   data: columnValue;
+  refSchemaId?: string;
+  refTableId?: string;
+  refLabel?: string;
 }>();
 
 defineEmits(["focus", "error", "update:modelValue"]);
@@ -85,5 +91,16 @@ function validate(value: columnValue) {
     @update:modelValue="$emit('update:modelValue', $event)"
     @error="$emit('error', $event)"
   />
+  <LazyInputRef
+    v-else-if="type === 'REF_ARRAY' || type === 'REF'"
+    :id="id"
+    :modelValue="data as columnValueObject | columnValueObject[]"
+    :refSchemaId="refSchemaId as string"
+    :refTableId="refTableId as string"
+    :refLabel="refLabel as string"
+    :isArray="type === 'REF_ARRAY'"
+    @update:modelValue="$emit('update:modelValue', $event)"
+  >
+  </LazyInputRef>
   <LazyInputPlaceHolder v-else ref="input" :type="type" />
 </template>
diff --git a/apps/tailwind-components/components/form/Fields.vue b/apps/tailwind-components/components/form/Fields.vue
index cf3c75cb70..b33dbdc0e3 100644
--- a/apps/tailwind-components/components/form/Fields.vue
+++ b/apps/tailwind-components/components/form/Fields.vue
@@ -9,6 +9,7 @@ import type {
 } from "../../../metadata-utils/src/types";
 
 const props = defineProps<{
+  schemaId: string;
   metadata: ITableMetaData;
   data: Record<columnId, columnValue>[];
 }>();
@@ -110,6 +111,7 @@ defineExpose({ validate });
       <div class="pb-8" v-for="column in chapter.columns">
         <FormField
           :id="`${column.id}-form-field`"
+          :schemaId="schemaId"
           :column="column"
           :data="dataMap[column.id]"
           :errors="errorMap[column.id]"
diff --git a/apps/tailwind-components/components/input/CheckboxGroup.vue b/apps/tailwind-components/components/input/CheckboxGroup.vue
index 0f5071af17..d1b2e754dc 100644
--- a/apps/tailwind-components/components/input/CheckboxGroup.vue
+++ b/apps/tailwind-components/components/input/CheckboxGroup.vue
@@ -1,6 +1,6 @@
 <template>
   <div :id="`${id}-checkbox-group`">
-    <div class="flex flex-row" v-for="option in checkboxOptions">
+    <div class="flex flex-row" v-for="option in options">
       <input
         type="checkbox"
         :id="`${id}-${option.value}`"
@@ -8,6 +8,7 @@
         :value="option.value"
         v-model="modelValue"
         :checked="modelValue!.includes(option.value)"
+        @input="toggleSelect"
         class="sr-only"
       />
       <InputLabel
@@ -37,15 +38,12 @@
 </template>
 
 <script lang="ts" setup>
-interface checkboxDataIF {
-  value: string;
-  label?: string;
-  checked?: boolean | undefined;
-}
+import type { IValueLabel } from "~/types/types";
+
 withDefaults(
   defineProps<{
     id: string;
-    checkboxOptions: checkboxDataIF[];
+    options: IValueLabel[];
     showClearButton?: boolean;
   }>(),
   {
@@ -54,6 +52,16 @@ withDefaults(
 );
 
 const modelValue = defineModel<string[]>();
+const emit = defineEmits(["update:modelValue", "select", "deselect"]);
+
+function toggleSelect(event: Event) {
+  const target = event.target as HTMLInputElement;
+  if (target.checked) {
+    emit("select", target.value);
+  } else {
+    emit("deselect", target.value);
+  }
+}
 
 function resetModelValue() {
   modelValue.value = [];
diff --git a/apps/tailwind-components/components/input/CheckboxIcon.vue b/apps/tailwind-components/components/input/CheckboxIcon.vue
index 16cdd03972..de8a845e93 100644
--- a/apps/tailwind-components/components/input/CheckboxIcon.vue
+++ b/apps/tailwind-components/components/input/CheckboxIcon.vue
@@ -11,9 +11,10 @@
     <rect
       width="20"
       height="20"
+      class="stroke-current"
       :class="{
         'fill-input': !checked && !indeterminate,
-        'fill-input-checked stroke-none': checked || indeterminate,
+        'fill-input-checked': checked || indeterminate,
       }"
     />
     <path
diff --git a/apps/tailwind-components/components/input/GUIDELINES.md b/apps/tailwind-components/components/input/GUIDELINES.md
new file mode 100644
index 0000000000..26680d0668
--- /dev/null
+++ b/apps/tailwind-components/components/input/GUIDELINES.md
@@ -0,0 +1,26 @@
+## Guidelines for inputs
+
+Inputs:
+
+- shouldn't have margins, that is up to the wrapper to apply
+- should have 'script' before 'template' so the props are on top of the file
+
+All inputs should have the following props:
+
+- id
+- modelValue
+- inverted
+
+All inputs could have the following props:
+
+- placeholder
+- hasError
+- valid
+- disabled
+- schemaId (for backend linked inputs)
+- tableId (for backend linked inputs)
+
+N.B. the following files are not inputs and should be moved elsewhere
+
+- Label
+- Placeholder
diff --git a/apps/tailwind-components/components/input/RadioGroup.vue b/apps/tailwind-components/components/input/RadioGroup.vue
index 0e3cda6a6a..407f1a2148 100644
--- a/apps/tailwind-components/components/input/RadioGroup.vue
+++ b/apps/tailwind-components/components/input/RadioGroup.vue
@@ -7,15 +7,15 @@
       'flex-col': align === 'vertical',
     }"
   >
-    <div v-for="option in radioOptions" class="flex justify-start align-center">
+    <div v-for="option in options" class="flex justify-start align-center">
       <InputRadio
         :id="`${id}-radio-group-${option.value}`"
         class="sr-only fixed"
         :name="id"
         :value="option.value"
-        :modelValue="props.modelValue"
-        @input="$emit('update:modelValue', $event.target.value)"
-        :checked="option.value === props.modelValue"
+        v-model="modelValue"
+        @input="toggleSelect"
+        :checked="option.value === modelValue"
       />
       <InputLabel
         :for="`${id}-radio-group-${option.value}`"
@@ -46,13 +46,13 @@
 </template>
 
 <script lang="ts" setup>
-import type { IRadioOptionsData } from "~/types/types";
+import type { IValueLabel } from "~/types/types";
+import type { columnValue } from "metadata-utils/src/types";
 
 const props = withDefaults(
   defineProps<{
     id: string;
-    modelValue: boolean | string | null;
-    radioOptions: IRadioOptionsData[];
+    options: IValueLabel[];
     showClearButton?: boolean;
     align?: "horizontal" | "vertical";
   }>(),
@@ -61,19 +61,28 @@ const props = withDefaults(
     align: "vertical",
   }
 );
+const modelValue = defineModel<columnValue>();
+const emit = defineEmits(["update:modelValue", "select", "deselect"]);
 
-const emit = defineEmits(["update:modelValue"]);
+function toggleSelect(event: Event) {
+  const target = event.target as HTMLInputElement;
+  if (target.checked) {
+    emit("select", target.value);
+  } else {
+    emit("deselect", target.value);
+  }
+}
 
 function resetModelValue() {
-  emit("update:modelValue", null);
+  modelValue.value = undefined;
 }
 
 const isClearBtnShow = computed(() => {
   return (
     props.showClearButton &&
-    (props.modelValue === true ||
-      props.modelValue === false ||
-      (typeof props.modelValue === "string" && props.modelValue.length > 0))
+    (modelValue.value === true ||
+      modelValue.value === false ||
+      (modelValue.value && modelValue.value !== ""))
   );
 });
 </script>
diff --git a/apps/tailwind-components/components/input/RadioIcon.vue b/apps/tailwind-components/components/input/RadioIcon.vue
index 10497b745d..13fe411a86 100644
--- a/apps/tailwind-components/components/input/RadioIcon.vue
+++ b/apps/tailwind-components/components/input/RadioIcon.vue
@@ -12,9 +12,11 @@
       r="9"
       stroke-width="1"
       fill="none"
-      class="stroke-gray-600"
+      class="stroke-current"
       :class="{
-        'fill-yellow-500 stroke-none': checked,
+        'fill-input hover:fill-input-checked hover:stroke-none focus:fill-input-checked focus:stroke-none':
+          !checked,
+        'fill-input-checked stroke-none': checked,
       }"
     />
     <circle
@@ -23,10 +25,10 @@
       r="3"
       stroke-width="1"
       stroke="none"
+      class="fill-transparent"
       :class="{
-        'fill-gray-900': checked,
+        '!fill-gray-900': checked,
       }"
-      v-if="checked"
     />
   </svg>
 </template>
diff --git a/apps/tailwind-components/components/input/Ref.vue b/apps/tailwind-components/components/input/Ref.vue
new file mode 100644
index 0000000000..9e12908ab2
--- /dev/null
+++ b/apps/tailwind-components/components/input/Ref.vue
@@ -0,0 +1,272 @@
+<script setup lang="ts">
+import type { ITableDataResponse } from "~/composables/fetchTableData";
+import type { IQueryMetaData } from "../../../molgenis-components/src/client/IQueryMetaData.ts";
+import type {
+  columnValue,
+  columnValueObject,
+} from "../../../metadata-utils/src/types";
+import type { IValueLabel } from "~/types/types";
+import type { ITableMetaData } from "metadata-utils";
+
+const props = withDefaults(
+  defineProps<{
+    id: string;
+    label?: string;
+    refSchemaId: string;
+    refTableId: string;
+    refLabel: string;
+    //todo, replace isArray with type="select"|"radio"|"checkbox"|"multiselect" and also enable this in emx2 metadata model
+    isArray?: boolean;
+    limit?: number;
+    inverted?: boolean;
+    //todo implement use of hasError, valid, disabled states?
+    required?: boolean;
+    valid?: boolean;
+    hasError?: boolean;
+  }>(),
+  {
+    isArray: true,
+    required: false,
+    hasError: false,
+    limit: 10,
+    inverted: false,
+  }
+);
+
+const modelValue = defineModel<columnValueObject[] | columnValueObject | "">(); //empty string might happen
+const tableMetadata = ref<ITableMetaData>;
+const emit = defineEmits(["focus", "blur", "error", "update:modelValue"]);
+const optionMap: Ref<Record<string, columnValueObject>> = ref({});
+const selectionMap: Ref<Record<string, columnValueObject>> = ref({});
+const initialCount = ref<number>(0);
+const count = ref<number>(0);
+const offset = ref<number>(0);
+const showSearch = ref<boolean>(false);
+const searchTerms: Ref<string> = ref("");
+const hasNoResults = ref<boolean>(true);
+defineExpose({ validate });
+
+function validate(value: columnValue) {
+  if (props.required && !modelValue.value) {
+    const errors = [
+      { message: `${props.label || props.id} required to complete the form` },
+    ];
+    emit("error", errors);
+    return errors;
+  } else {
+    emit("error", []);
+    return [];
+  }
+}
+
+const columnName = computed<string>(() => {
+  return props.refLabel.replace(/[\{\}\$]/g, "");
+});
+
+const entitiesLeftToLoad = computed<number>(() => {
+  return Math.min(count.value - offset.value - props.limit, props.limit);
+});
+
+//computed elements to translate to CheckboxGroup or
+const listOptions = computed(() => {
+  return Object.keys(optionMap.value).map((label) => {
+    return { value: label } as IValueLabel;
+  });
+});
+const selection = computed(() =>
+  props.isArray
+    ? (Object.keys(selectionMap.value) as string[])
+    : (Object.keys(selectionMap.value)[0] as string)
+);
+
+onMounted(async () => {
+  tableMetadata.value = await fetchTableMetadata(
+    props.refSchemaId,
+    props.refTableId
+  );
+  //first we need to retrieve all selected items so are sure we have all for the template
+  if (
+    modelValue.value && Array.isArray(modelValue.value)
+      ? modelValue.value.length > 0
+      : modelValue.value
+  ) {
+    const data: ITableDataResponse = await fetchTableData(
+      props.refSchemaId,
+      props.refTableId,
+      { filter: { equals: modelValue.value } }
+    );
+    if (data.rows) {
+      hasNoResults.value = false;
+      data.rows?.forEach(
+        (row) => (selectionMap.value[applyTemplate(props.refLabel, row)] = row)
+      );
+    }
+  }
+
+  //then we load the options for the first time
+  await loadOptions({ limit: props.limit });
+  initialCount.value = count.value;
+});
+
+function applyTemplate(template: string, row: Record<string, any>): string {
+  const ids = Object.keys(row);
+  const vals = Object.values(row);
+  const label = new Function(...ids, "return `" + template + "`;")(...vals);
+  return label;
+}
+
+async function loadOptions(filter: IQueryMetaData) {
+  hasNoResults.value = true;
+  const data: ITableDataResponse = await fetchTableData(
+    props.refSchemaId,
+    props.refTableId,
+    filter
+  );
+
+  if (data.rows) {
+    hasNoResults.value = false;
+    data.rows.forEach(
+      (row) => (optionMap.value[applyTemplate(props.refLabel, row)] = row)
+    );
+    count.value = data.count;
+  } else {
+    hasNoResults.value = true;
+  }
+}
+
+function toggleSearch() {
+  showSearch.value = !showSearch.value;
+  if (!showSearch.value) updateSearch("");
+}
+
+function updateSearch(newSearchTerms: string) {
+  optionMap.value = {};
+  offset.value = 0;
+  searchTerms.value = newSearchTerms;
+  loadOptions({ limit: props.limit, searchTerms: searchTerms.value });
+}
+
+function select(label: string) {
+  console.log("select " + label);
+  if (!props.isArray) {
+    selectionMap.value = {};
+  }
+  selectionMap.value[label] = optionMap.value[label];
+  emit(
+    "update:modelValue",
+    props.isArray
+      ? Object.values(selectionMap.value).map((value) =>
+          extractPrimaryKey(value)
+        )
+      : extractPrimaryKey(optionMap.value[label])
+  );
+}
+
+function extractPrimaryKey(value: any) {
+  const result = {} as columnValueObject;
+  tableMetadata.value.columns
+    .filter((column) => column.key === 1)
+    .forEach((column) => {
+      result[column.id] = value[column.id];
+    });
+  return result;
+}
+
+function deselect(label: string) {
+  delete selectionMap.value[label];
+  emit(
+    "update:modelValue",
+    props.isArray
+      ? Object.values(selectionMap.value).map((value) =>
+          extractPrimaryKey(value)
+        )
+      : undefined
+  );
+}
+
+function clearSelection() {
+  selectionMap.value = {};
+  emit("update:modelValue", props.isArray ? [] : undefined);
+  updateSearch(""); //reset
+}
+
+function loadMore() {
+  offset.value += props.limit;
+  loadOptions({
+    offset: offset.value,
+    limit: props.limit,
+    searchTerms: searchTerms.value,
+  });
+}
+</script>
+
+<template>
+  <div
+    class="flex flex-wrap gap-2 mb-2"
+    v-if="isArray ? selection.length : selection"
+  >
+    <Button
+      v-for="label in isArray ? selection : [selection]"
+      icon="cross"
+      iconPosition="right"
+      type="filterWell"
+      size="tiny"
+      @click="deselect(label as string)"
+    >
+      {{ label }}
+    </Button>
+  </div>
+  <div class="flex flex-wrap gap-2 mb-2">
+    <ButtonText
+      @click="toggleSearch"
+      :inverted="inverted"
+      :aria-controls="`search-for-${id}`"
+    >
+      Search
+    </ButtonText>
+    <ButtonText @click="clearSelection" :inverted="inverted">
+      Clear all
+    </ButtonText>
+  </div>
+  <template v-if="showSearch && initialCount > limit">
+    <InputLabel :for="`search-for-${id}`" class="sr-only">
+      search in {{ columnName }}
+    </InputLabel>
+    <InputSearch
+      :id="`search-for-${id}`"
+      :modelValue="searchTerms"
+      @update:modelValue="updateSearch"
+      class="mb-2"
+      :placeholder="`Search in ${columnName}`"
+      :aria-hidden="!showSearch"
+    />
+  </template>
+  <template v-if="!hasNoResults">
+    <InputCheckboxGroup
+      v-if="isArray"
+      :id="id"
+      :options="listOptions"
+      :modelValue="(selection as string[])"
+      @select="select"
+      @deselect="deselect"
+      :inverted="inverted"
+    />
+    <InputRadioGroup
+      v-else
+      :id="id"
+      :options="listOptions"
+      :modelValue="(selection as string)"
+      @select="select"
+      @deselect="deselect"
+      :inverted="inverted"
+    />
+    <ButtonText
+      @click="loadMore"
+      v-if="offset + limit < count"
+      :inverted="inverted"
+    >
+      load {{ entitiesLeftToLoad }} more
+    </ButtonText>
+  </template>
+  <ButtonText v-else>No results found</ButtonText>
+</template>
diff --git a/apps/tailwind-components/components/input/Search.vue b/apps/tailwind-components/components/input/Search.vue
new file mode 100644
index 0000000000..baa9382199
--- /dev/null
+++ b/apps/tailwind-components/components/input/Search.vue
@@ -0,0 +1,47 @@
+<script setup lang="ts">
+const props = withDefaults(
+  defineProps<{
+    id: string;
+    modelValue?: string;
+    placeholder?: string;
+    inverted?: boolean;
+  }>(),
+  {
+    placeholder: "Type to search..",
+    inverted: false,
+    modelValue: "",
+  }
+);
+
+const emit = defineEmits(["update:modelValue"]);
+
+let timeoutID: number | NodeJS.Timeout | undefined = undefined;
+function handleInput(input: string) {
+  clearTimeout(timeoutID);
+  timeoutID = setTimeout(() => {
+    emit("update:modelValue", input);
+  }, 500);
+}
+</script>
+<template>
+  <div class="relative">
+    <div
+      class="absolute inset-y-0 start-0 flex items-center ps-3 pointer-events-none"
+    >
+      <BaseIcon name="search" class="text-gray-400" />
+    </div>
+    <input
+      :id="id"
+      type="search"
+      :value="modelValue"
+      @input="(event) => handleInput((event.target as HTMLInputElement).value)"
+      class="w-full pr-4 font-sans text-black bg-white outline-none rounded-search-input h-10 ring-red-500 pl-10 shadow-search-input focus:shadow-search-input hover:shadow-search-input"
+      :class="[
+        inverted
+          ? 'border-search-input-mobile border'
+          : 'border-search-input focus:border-white',
+      ]"
+      :placeholder="placeholder"
+    />
+  </div>
+</template>
diff --git a/apps/tailwind-components/pages/Form.story.vue b/apps/tailwind-components/pages/Form.story.vue
index ae2da76c46..c071e679ca 100644
--- a/apps/tailwind-components/pages/Form.story.vue
+++ b/apps/tailwind-components/pages/Form.story.vue
@@ -8,26 +8,38 @@ import type {
   ITableMetaData,
 } from "../../metadata-utils/src/types";
 
-const sampleType = ref("simple");
+const exampleName = ref("simple");
+
+const exampleMap = ref({
+  simple: {
+    schemaId: "pet store",
+    tableId: "Pet",
+  },
+  "pet store user": {
+    schemaId: "pet store",
+    tableId: "User",
+  },
+  complex: {
+    schemaId: "catalogue-demo",
+    tableId: "Resources",
+  },
+});
 
 // just assuming that the table is there for the demo
-const schemaId = computed(() =>
-  sampleType.value === "simple" ? "pet store" : "catalogue-demo"
-);
-const tableId = computed(() =>
-  sampleType.value === "simple" ? "Pet" : "Resources"
-);
+const exampleConfig = computed(() => exampleMap.value[exampleName.value]);
 
 const {
   data: schemaMeta,
   refresh: refetchMetadata,
   status,
-} = await useAsyncData("form sample", () => fetchMetadata(schemaId.value));
+} = await useAsyncData("form sample", () =>
+  fetchMetadata(exampleConfig.value.schemaId)
+);
 
 const tableMeta = computed(
   () =>
     (schemaMeta.value as ISchemaMetaData)?.tables.find(
-      (table) => table.id === tableId.value
+      (table) => table.id === exampleConfig.value.tableId
     ) as ITableMetaData
 );
 
@@ -134,9 +146,11 @@ watch(
       </div>
 
       <FormFields
+        :key="exampleName"
         v-if="tableMeta && status === 'success'"
         class="basis-2/3 p-8 border-l overflow-y-auto h-screen"
         ref="formFields"
+        :schemaId="exampleConfig.schemaId"
         :metadata="tableMeta"
         :data="data"
         @update:model-value="onModelUpdate"
@@ -144,7 +158,7 @@ watch(
       />
     </div>
 
-    <div class="basis-1/3 ml-2">
+    <div class="basis-1/3 ml-2 h-screen overflow-y-scroll">
       <h2>Demo controls, settings and status</h2>
 
       <div class="p-4 border-2 mb-2">
@@ -152,15 +166,16 @@ watch(
         <select
           id="table-select"
           @change="refetch()"
-          v-model="sampleType"
+          v-model="exampleName"
           class="border-1 border-black"
         >
           <option value="simple">Simple form example</option>
           <option value="complex">Complex form example</option>
+          <option value="pet store user">Pet store user</option>
         </select>
 
-        <div>schema id = {{ schemaId }}</div>
-        <div>table id = {{ tableId }}</div>
+        <div>schema id = {{ exampleConfig.schemaId }}</div>
+        <div>table id = {{ exampleConfig.tableId }}</div>
 
         <button
           class="border-gray-900 border-[1px] p-2 bg-gray-200"
diff --git a/apps/tailwind-components/pages/input/Checkbox.story.vue b/apps/tailwind-components/pages/input/Checkbox.story.vue
index 5739799213..8064ecdf75 100644
--- a/apps/tailwind-components/pages/input/Checkbox.story.vue
+++ b/apps/tailwind-components/pages/input/Checkbox.story.vue
@@ -81,7 +81,7 @@ const toppingsSelection = ref<string[]>(["tomatoes", "basil"]);
       <InputCheckboxGroup
         id="example-4"
         v-model="toppingsSelection"
-        :checkboxOptions="[
+        :options="[
           {
             value: 'tomatoes',
             label: 'Roma tomatoes',
diff --git a/apps/tailwind-components/pages/input/Radio.story.vue b/apps/tailwind-components/pages/input/Radio.story.vue
index 804edf0c01..c4e55fa9f3 100644
--- a/apps/tailwind-components/pages/input/Radio.story.vue
+++ b/apps/tailwind-components/pages/input/Radio.story.vue
@@ -26,7 +26,7 @@
       </legend>
       <InputRadioGroup
         id="example-1"
-        :radioOptions="[{ value: 'no' }, { value: 'yes' }]"
+        :options="[{ value: 'no' }, { value: 'yes' }]"
         v-model="question1Response"
       />
       <output>
@@ -40,7 +40,7 @@
       <InputRadioGroup
         id="example-2"
         v-model="question2Response"
-        :radioOptions="[
+        :options="[
           { value: 'level-1', label: 'Level 1 (A)' },
           { value: 'level-2', label: 'Level 2 (AA)' },
           { value: 'level-3', label: 'Level 3 (AAA)' },
@@ -58,7 +58,7 @@
       <InputRadioGroup
         id="example-3"
         v-model="question3Response"
-        :radioOptions="[
+        :options="[
           { value: 'control', label: 'Healthy controls' },
           {
             value: 'intervention',
diff --git a/apps/tailwind-components/pages/input/Ref.story.vue b/apps/tailwind-components/pages/input/Ref.story.vue
new file mode 100644
index 0000000000..28239f4e07
--- /dev/null
+++ b/apps/tailwind-components/pages/input/Ref.story.vue
@@ -0,0 +1,37 @@
+<script setup lang="ts">
+const schemaId = ref<string>("pet store");
+const tableId = ref<string>("Pet");
+const labelTemplate = ref<string>("${name}");
+const value = ref([{ name: "spike" }]);
+const value2 = ref([{ name: "spike" }]);
+</script>
+
+<template>
+  <div>
+    <h3>Ref array example</h3>
+    <InputLabel for="story-ref-array"> Select pets by name </InputLabel>
+    <InputRef
+      id="story-ref-array"
+      v-model="value"
+      :refSchemaId="schemaId"
+      :refTableId="tableId"
+      :limit="5"
+      :refLabel="labelTemplate"
+    />
+    <div class="pt-5">value selected: {{ value }}</div>
+  </div>
+  <div class="pt-5">
+    <h3>Ref example</h3>
+    <InputLabel for="story-ref"> Select pets by name </InputLabel>
+    <InputRef
+      id="story-ref"
+      v-model="value2"
+      :refSchemaId="schemaId"
+      :refTableId="tableId"
+      :limit="5"
+      :refLabel="labelTemplate"
+      :isArray="false"
+    />
+  </div>
+  <div class="pt-5">value selected: {{ value2 }}</div>
+</template>
diff --git a/apps/tailwind-components/pages/input/Search.story.vue b/apps/tailwind-components/pages/input/Search.story.vue
new file mode 100644
index 0000000000..4db44f526c
--- /dev/null
+++ b/apps/tailwind-components/pages/input/Search.story.vue
@@ -0,0 +1,13 @@
+<script setup lang="ts">
+const inverted = ref<boolean>(false);
+const searchValue = ref<sring>("");
+</script>
+
+<template>
+  <div class="flex flex-row gap-2 mb-4">
+    <div class="basis-3/5">
+      <InputSearch v-model="searchValue" :inverted="inverted" />
+      value: {{ searchValue }}
+    </div>
+  </div>
+</template>
diff --git a/apps/tailwind-components/plugins/clearSession.client.ts b/apps/tailwind-components/plugins/clearSession.client.ts
new file mode 100644
index 0000000000..3ee1b74dac
--- /dev/null
+++ b/apps/tailwind-components/plugins/clearSession.client.ts
@@ -0,0 +1,6 @@
+export default defineNuxtPlugin(() => {
+    if (process.client) {
+        sessionStorage.clear();
+        console.log('Session storage cleared on app start. Removed caches of getSchema');
+    }
+});
\ No newline at end of file
diff --git a/apps/tailwind-components/tailwind.config.js b/apps/tailwind-components/tailwind.config.js
index 838007af18..8222725971 100644
--- a/apps/tailwind-components/tailwind.config.js
+++ b/apps/tailwind-components/tailwind.config.js
@@ -171,6 +171,7 @@ module.exports = {
         "button-outline-hover": "var(--text-color-button-outline-hover)",
         "button-disabled": "var(--text-color-button-disabled)",
         "button-disabled-hover": "var(--text-color-button-disabled-hover)",
+        "button-text": "var(--text-color-button-text)",
         "menu": "var(--text-color-menu)",
         "sub-menu": "var(--text-color-sub-menu)",
         "sub-menu-hover": "var(--text-color-sub-menu-hover)",
diff --git a/apps/tailwind-components/types/types.ts b/apps/tailwind-components/types/types.ts
index 324180c596..00917894f7 100644
--- a/apps/tailwind-components/types/types.ts
+++ b/apps/tailwind-components/types/types.ts
@@ -15,6 +15,11 @@ export interface INode {
   description?: string;
 }
 
+export interface IValueLabel {
+  value: any;
+  label?: string;
+}
+
 export interface ITreeNode extends INode {
   children:
   ITreeNode[];
diff --git a/e2e/tests/tailwind-components/form/renderForm.spec.ts b/e2e/tests/tailwind-components/form/renderForm.spec.ts
new file mode 100644
index 0000000000..06602fce43
--- /dev/null
+++ b/e2e/tests/tailwind-components/form/renderForm.spec.ts
@@ -0,0 +1,27 @@
+import { test, expect } from "@playwright/test";
+import playwrightConfig from '../../../playwright.config';
+
+const route = playwrightConfig?.use?.baseURL?.startsWith('http://localhost') ? '' : '/apps/tailwind-components/#/';
+
+test("it should render the form", async ({ page }) => {
+  await page.goto(`${route}Form.story`);
+  await expect(page.getByText('nameRequiredthe name')).toBeVisible();
+  await expect(page.locator('div').filter({ hasText: /^statusRequired$/ }).nth(1)).toBeVisible();
+});
+
+test("it should update the model value when a field is filled out", async ({ page }) => {
+  await page.goto(`${route}Form.story`);
+  await page.getByLabel('name').click();
+  await page.getByLabel('name').fill('test');
+  //this test will be flakey, replace by specific tests?
+  //await expect(page.getByRole('main')).toContainText('dataMap: { "name": "test", "category": "", "photoUrls": "", "details": "", "status": "", "tags": "", "weight": "", "orders": "", "mg_draft": "", "mg_insertedBy": "", "mg_insertedOn": "", "mg_updatedBy": "", "mg_updatedOn": "" } errorMap: { "name": [], "category": [], "photoUrls": [], "details": [], "status": [], "tags": [], "weight": [], "orders": [], "mg_draft": [], "mg_insertedBy": [], "mg_insertedOn": [], "mg_updatedBy": [], "mg_updatedOn": [] }');
+  await page.locator('label').filter({ hasText: 'dog' }).getByRole('img').click();
+  await expect(page.getByRole('button', { name: 'dog' })).toBeVisible();
+});
+
+test("should also work for refs", async ({ page }) => {
+  await page.goto(`${route}Form.story`);
+  await page.getByRole('combobox').selectOption('pet store user');
+  await page.locator('label').filter({ hasText: 'pooky' }).locator('rect').click();
+  await expect(page.getByRole('button', { name: 'pooky' })).toBeVisible();
+});
\ No newline at end of file