diff --git a/apps/tailwind-components/.pa11yci b/apps/tailwind-components/.pa11yci
index e1dc3b151d..42769d6451 100644
--- a/apps/tailwind-components/.pa11yci
+++ b/apps/tailwind-components/.pa11yci
@@ -23,6 +23,7 @@
         "http://localhost:3000/Icons.story",
         "http://localhost:3000/Icons.story",
         "http://localhost:3000/input/Checkbox.story",
+        "http://localhost:3000/input/File.story",
         "http://localhost:3000/input/Label.story",
         "http://localhost:3000/input/List.story",
         "http://localhost:3000/input/Select.story",
diff --git a/apps/tailwind-components/assets/css/main.css b/apps/tailwind-components/assets/css/main.css
index bff32091ab..6b7a019321 100644
--- a/apps/tailwind-components/assets/css/main.css
+++ b/apps/tailwind-components/assets/css/main.css
@@ -53,6 +53,7 @@
     
 
     --box-shadow-primary: 0px 10px 20px rgba(0, 0, 0, 0.1);
+    --box-shadow-input-hover: inset 0 0 1px 1px var(--color-blue-700);
     --box-shadow-search-input: none;
     --box-shadow-pagination-gray: 0px 10px 20px rgba(0, 0, 0, 0.1);
 
@@ -73,6 +74,8 @@
     --background-color-button-disabled-hover: var(--color-gray-100);
     --background-color-search-button: var(--color-blue-50);
     --background-color-search-button-hover: var(--color-blue-700);
+    --background-color-button-filter: var(--color-blue-50);
+    --background-color-button-filter-hover: var(--color-white);
     --background-color-navigation: var(--color-white);
     --background-color-navigation-sticky: var(--background-color-navigation);
     --background-color-search-results-view-tabs: var(--color-blue-800);
@@ -107,6 +110,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-filter: var(--color-blue-500);
     --text-color-menu: var(--text-color-title);
     --text-color-sub-menu: var(--color-blue-500);
     --text-color-sub-menu-hover: var(--color-blue-700);
@@ -166,11 +170,14 @@
     --border-color-button-outline-hover: var(--color-blue-700);
     --border-color-button-disabled: var(--color-gray-100);
     --border-color-button-disabled-hover: var(--color-gray-100);
+    --border-color-button-filter: var(--color-blue-50);
+    --border-color-button-filter-hover: var(--color-blue-700);
     --border-color-menu-active: var(--color-blue-500);
     --border-color-search-button: var(--color-white);
     --border-color-search-input: var(--color-white);
     --border-color-search-input-mobile: var(--color-gray-100);
     --border-color-pagination: var(--color-transparent);
+    --border-color-input-hover: var(--color-blue-500);
     --border-color-input: var(--color-gray-400);
     --border-color-input-focused: var(--color-blue-800);
     --border-color-input-inverted: var(--color-gray-600);
diff --git a/apps/tailwind-components/assets/css/theme/molgenis.css b/apps/tailwind-components/assets/css/theme/molgenis.css
index 4d549b018a..96409f4e52 100644
--- a/apps/tailwind-components/assets/css/theme/molgenis.css
+++ b/apps/tailwind-components/assets/css/theme/molgenis.css
@@ -112,7 +112,6 @@
     --border-color-search-input: var(--color-white);
     --border-color-search-input-mobile: var(--color-gray-100);
     --border-color-pagination: var(--color-transparent);
-    --border-color-input: var(--color-transparent);
     --border-color-input-inverted: var(--color-gray-600);
 
     --border-radius-3px: 3px;
diff --git a/apps/tailwind-components/assets/icons/Upload file.svg b/apps/tailwind-components/assets/icons/Upload file.svg
new file mode 100644
index 0000000000..8ffbda8ab9
--- /dev/null
+++ b/apps/tailwind-components/assets/icons/Upload file.svg	
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e8eaed"><path d="M440-200h80v-167l64 64 56-57-160-160-160 160 57 56 63-63v167ZM240-80q-33 0-56.5-23.5T160-160v-640q0-33 23.5-56.5T240-880h320l240 240v480q0 33-23.5 56.5T720-80H240Zm280-520v-200H240v640h480v-440H520ZM240-800v200-200 640-640Z"/></svg>
\ No newline at end of file
diff --git a/apps/tailwind-components/components/Button.vue b/apps/tailwind-components/components/Button.vue
index f026704ed8..d0b064af85 100644
--- a/apps/tailwind-components/components/Button.vue
+++ b/apps/tailwind-components/components/Button.vue
@@ -44,7 +44,7 @@ const COLOR_MAPPING = {
   disabled:
     "tracking-widest uppercase font-display bg-button-disabled text-button-disabled border-button-disabled hover:bg-button-disabled-hover hover:text-button-disabled-hover hover:border-button-disabled-hover",
   filterWell:
-    "whitespace-nowrap bg-blue-50 text-blue-500 border-blue-50 hover:bg-white hover:border-white",
+    "whitespace-nowrap bg-button-filter text-button-filter border-button-filter hover:bg-button-filter-hover hover:border-button-filter-hover",
 };
 
 const SIZE_MAPPING = {
@@ -88,7 +88,7 @@ const tooltipText = computed(() => {
 <template>
   <button
     v-tooltip.bottom="tooltipText"
-    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="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 duration-default ease-in-out"
     :class="`${colorClasses} ${sizeClasses} ${iconPositionClass} transition-colors`"
   >
     <BaseIcon v-if="icon" :name="icon" :width="iconSize" />
diff --git a/apps/tailwind-components/components/Input.vue b/apps/tailwind-components/components/Input.vue
index c3cdc7d12d..d947b5eceb 100644
--- a/apps/tailwind-components/components/Input.vue
+++ b/apps/tailwind-components/components/Input.vue
@@ -129,6 +129,18 @@
     @blur="emit('blur')"
     :is-array="true"
   />
+  <InputFile
+    v-else-if="['FILE'].includes(typeUpperCase)"
+    v-model="modelValue as columnValueObject"
+    :id="id"
+    :valid="valid"
+    :invalid="invalid"
+    :disabled="disabled"
+    :describedBy="describedBy"
+    @update:modelValue="emit('update:modelValue', $event)"
+    @focus="emit('focus')"
+    @blur="emit('blur')"
+  />
   <InputDate
     v-else-if="'DATE' === typeUpperCase"
     :id="id"
diff --git a/apps/tailwind-components/components/global/icons/UploadFile.vue b/apps/tailwind-components/components/global/icons/UploadFile.vue
new file mode 100644
index 0000000000..54175f67a1
--- /dev/null
+++ b/apps/tailwind-components/components/global/icons/UploadFile.vue
@@ -0,0 +1,11 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 -960 960 960"
+    fill="currentColor"
+  >
+    <path
+      d="M440-200h80v-167l64 64 56-57-160-160-160 160 57 56 63-63v167ZM240-80q-33 0-56.5-23.5T160-160v-640q0-33 23.5-56.5T240-880h320l240 240v480q0 33-23.5 56.5T720-80H240Zm280-520v-200H240v640h480v-440H520ZM240-800v200-200 640-640Z"
+    />
+  </svg>
+</template>
diff --git a/apps/tailwind-components/components/input/File.vue b/apps/tailwind-components/components/input/File.vue
new file mode 100644
index 0000000000..6eaea00218
--- /dev/null
+++ b/apps/tailwind-components/components/input/File.vue
@@ -0,0 +1,92 @@
+<template>
+  <div
+    class="flex items-center border border-input p-2"
+    :class="{
+      'cursor-pointer duration-default ease-in-out hover:border-input-hover hover:shadow-input-hover focus:border-input-hover focus:shadow-input-hover focus-within:border-input-hover focus-within:shadow-input-hover':
+        !disabled && !invalid,
+      'border-invalid': invalid,
+      'border-valid': valid,
+    }"
+  >
+    <div class="grow">
+      <button
+        v-if="modelValue"
+        class="flex justify-center items-center h-10.5 px-5 text-heading-lg gap-3 tracking-widest uppercase font-display duration-default ease-in-out border rounded-input"
+        :class="{
+          'text-disabled bg-disabled hover:text-disabled cursor-not-allowed':
+            disabled,
+          'bg-button-filter text-button-filter border-button-filter hover:bg-button-filter-hover hover:border-button-filter-hover':
+            !disabled,
+          'border-invalid text-invalid bg-invalid hover:bg-invalid hover:text-invalid':
+            invalid,
+          'border-valid text-valid bg-valid hover:bg-valid hover:text-valid':
+            valid,
+        }"
+        @click="onFilterWellClick"
+        :disabled="disabled"
+      >
+        <span>{{ modelValue.filename }}</span>
+        <BaseIcon name="Trash" class="w-4" />
+      </button>
+    </div>
+    <div class="flex-none">
+      <button
+        class="flex justify-center items-center h-10 px-5 text-heading-xl tracking-widest uppercase font-display duration-default ease-in-out border rounded-input bg-button-filter text-button-filter border-button-filter"
+        :class="{
+          'border-invalid text-invalid bg-invalid hover:bg-invalid hover:text-invalid':
+            invalid,
+          'border-valid text-valid bg-valid hover:bg-valid hover:text-valid':
+            valid,
+          'text-disabled bg-disabled hover:text-disabled cursor-not-allowed':
+            disabled,
+          'hover:bg-button-primary hover:text-button-primary cursor-pointer':
+            !disabled,
+        }"
+        @click="showFileInput"
+      >
+        <span>Browse</span>
+      </button>
+      <input
+        :id="`${id}-file-input`"
+        ref="fileInputElem"
+        class="sr-only"
+        type="file"
+        :disabled="disabled"
+        @change="onChange"
+        @focus="$emit('focus')"
+        @blur="$emit('blur')"
+      />
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import type { IInputProps, IFile } from "~/types/types";
+
+const modelValue = defineModel<IFile | null>();
+const fileInputElem = useTemplateRef<HTMLInputElement>("fileInputElem");
+
+defineProps<IInputProps>();
+
+const emit = defineEmits(["focus", "blur", "error", "update:modelValue"]);
+
+function showFileInput() {
+  fileInputElem.value?.click();
+}
+
+function onChange(event: Event) {
+  const files = (event.target as HTMLInputElement)?.files;
+  if (files) {
+    const file = files.item(0) as File;
+    modelValue.value = {
+      filename: file.name,
+      size: file.size,
+      extension: file.type,
+    };
+  }
+}
+
+function onFilterWellClick() {
+  modelValue.value = null;
+}
+</script>
diff --git a/apps/tailwind-components/pages/input/File.story.vue b/apps/tailwind-components/pages/input/File.story.vue
new file mode 100644
index 0000000000..a1a0e8fc32
--- /dev/null
+++ b/apps/tailwind-components/pages/input/File.story.vue
@@ -0,0 +1,29 @@
+<template>
+  <InputTestContainer show-state v-slot="{ valid, invalid, disabled }">
+    <label for="file-input-demo-file-input" class="block mb-2"
+      >Select a file to import.</label
+    >
+    <InputFile
+      id="file-input-demo"
+      :valid="valid"
+      :invalid="invalid"
+      :disabled="disabled"
+      @update:modelValue="(value: columnValueObject) => (file = value)"
+    />
+  </InputTestContainer>
+  <form @submit.prevent></form>
+  <h3 class="text-heading-lg my-2">Data output</h3>
+  <output
+    class="block w-full mt-2 bg-gray-100 py-3 px-2 pl-6 h-30 overflow-y-scroll shadow-inner"
+  >
+    <pre class="indent-[-5em]">
+        {{ file }}
+      </pre
+    >
+  </output>
+</template>
+
+<script setup lang="ts">
+import type { columnValueObject } from "../../../metadata-utils/src/types";
+const file = ref<columnValueObject>();
+</script>
diff --git a/apps/tailwind-components/tailwind.config.js b/apps/tailwind-components/tailwind.config.js
index a9cd949235..6dacc626a3 100644
--- a/apps/tailwind-components/tailwind.config.js
+++ b/apps/tailwind-components/tailwind.config.js
@@ -84,11 +84,12 @@ module.exports = {
       },
     },
     extend: {
-      boxShadow: {
-        primary: "var(--box-shadow-primary)",
+      boxShadow: ({ theme }) => ({
+        "primary": "var(--box-shadow-primary)",
+        "input-hover": "var(--box-shadow-input-hover)",
         "search-input": "var(--box-shadow-search-input)",
         "pagination-gray": "var(--box-shadow-pagination-gray)",
-      },
+      }),
       spacing: {
         "3px": "3px",
         "50px": "50px",
@@ -121,6 +122,9 @@ module.exports = {
         table: "60.7rem",
         title: "10rem",
       },
+      transitionDuration: {
+        default: "500",
+      },
       backgroundImage: {
         "sidebar-gradient": "var(--background-image-sidebar-gradient)",
         "base-gradient": "var(--background-image-base-gradient)",
@@ -138,6 +142,8 @@ module.exports = {
         "button-outline-hover": "var(--background-color-button-outline-hover)",
         "button-disabled": "var(--background-color-button-disabled)",
         "button-disabled-hover": "var(background-color-button-disabled-hover)",
+        "button-filter": "var(--background-color-button-filter)",
+        "button-filter-hover": "var(--background-color-button-filter-hover)",
         "search-button": "var(--background-color-search-button)",
         "search-button-hover": "var(--background-color-search-button-hover)",
         "navigation": "var(--background-color-navigation)",
@@ -177,6 +183,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-filter": "var(--text-color-button-filter)",
         "button-text": "var(--text-color-button-text)",
         "menu": "var(--text-color-menu)",
         "sub-menu": "var(--text-color-sub-menu)",
@@ -240,6 +247,8 @@ module.exports = {
         "button-outline-hover": "var(--border-color-button-outline-hover)",
         "button-disabled": "var(--border-color-button-disabled)",
         "button-disabled-hover": "var(--border-color-button-disabled-hover)",
+        "button-filter": "var(--border-color-button-filter)",
+        "button-filter-hover": "var(--border-color-button-filter-hover)",
         "menu-active": "var(--border-color-menu-active)",
         "search-button": "var(--border-color-search-button)",
         "search-input": "var(--border-color-search-input)",
@@ -252,6 +261,7 @@ module.exports = {
         "disabled": "var(--color-disabled-foreground)",
         
         "input": "var(--border-color-input)",
+        "input-hover": "var(--border-color-input-hover)",
         "input-inverted": "var(--border-color-input-inverted)",
         "input-focused": "var(--border-color-input-focused)",
         "listbox": "var(--border-color-search-input)",
diff --git a/apps/tailwind-components/types/types.ts b/apps/tailwind-components/types/types.ts
index c604233c98..360e2a3226 100644
--- a/apps/tailwind-components/types/types.ts
+++ b/apps/tailwind-components/types/types.ts
@@ -85,6 +85,7 @@ export interface ISection {
 export interface IFile {
   id?: string;
   size?: number;
+  filename?: string;
   extension?: string;
   url?: string;
 }