diff --git a/book/src/components/searchbar.md b/book/src/components/searchbar.md
index c820e1b2..326dcd14 100644
--- a/book/src/components/searchbar.md
+++ b/book/src/components/searchbar.md
@@ -1,6 +1,6 @@
 # Search Bar
 
-The `lens-searchbar` component offers an interface for exploring of all single-select items. It serves as the primary interface for users to search, apply, and adjust query criteria. Selected items appear as interactive chips within the component, giving users a clear visual of their active filters. Users can easily refine their search by removing individual values or entire criteria directly from the chip display.
+The `lens-searchbar` component offers an interface for exploring of all catalogue items. It serves as the primary interface for users to search, apply, and adjust query criteria. Selected items appear as interactive chips within the component, giving users a clear visual of their active filters. Users can easily refine their search by removing individual values or entire criteria directly from the chip display.
 
 ---
 
@@ -41,18 +41,6 @@ The `lens-searchbar` component offers an interface for exploring of all single-s
 
 ---
 
-## Events
-
-### `on:clear-search`
-
-Triggered when the group clear button is clicked.
-
-```svelte
-<lens-search-bar on:clear-search={handleClear} />
-```
-
----
-
 ## Example
 
 ```html
@@ -66,13 +54,27 @@ Triggered when the group clear button is clicked.
 
 ## Styling
 
-| Part                                                   | Purpose                          |
-| ------------------------------------------------------ | -------------------------------- |
-| `lens-searchbar`                                       | Wrapper for the entire component |
-| `lens-searchbar-input`                                 | Main input element               |
-| `lens-searchbar-chip`, `chip-name`, `chip-item`        | Visual query chips               |
-| `lens-searchbar-autocomplete-options`                  | Autocomplete container           |
-| `lens-searchbar-autocomplete-options-item`             | Individual result                |
-| `lens-searchbar-autocomplete-options-item-focused`     | Highlighted result               |
-| `lens-searchbar-autocomplete-options-item-description` | Optional description             |
-| `lens-searchbar-autocomplete-options-item-facet-count` | Facet count badge                |
+| Part                                                           | Purpose                              |
+| -------------------------------------------------------------- | ------------------------------------ |
+| `lens-searchbar`                                               | Wrapper for the entire component     |
+| `lens-searchbar-active`                                        | Active searchbar                     |
+| `lens-searchbar-chips`                                         | Visual query chip wrapper            |
+| `lens-searchbar-chip`                                          | Query chip                           |
+| `lens-searchbar-chip-name`                                     | Query chip criterion name            |
+| `lens-searchbar-chip-item`                                     | Query chip values wrapper            |
+| `lens-searchbar-chip-item-text`                                | Query chip singular value            |
+| `lens-searchbar-input`                                         | Main input element                   |
+| `lens-searchbar-input-options-open`                            | Main input when autocomplete is open |
+| `lens-searchbar-autocomplete-options`                          | Autocomplete container               |
+| `lens-searchbar-autocomplete-options-heading`                  | Autocomplete group heading           |
+| `lens-searchbar-autocomplete-options-item`                     | Individual result                    |
+| `lens-searchbar-autocomplete-options-item-focused`             | Highlighted result                   |
+| `lens-searchbar-autocomplete-options-item-criterion`           | Single select result                 |
+| `lens-searchbar-autocomplete-options-item-numeric`             | Numeric result input wrapper         |
+| `lens-searchbar-autocomplete-options-item-date`                | Date result input wrapper            |
+| `lens-searchbar-autocomplete-options-item-string`              | String result input wrapper          |
+| `lens-searchbar-autocomplete-options-item-name`                | Option name                          |
+| `lens-searchbar-autocomplete-options-item-description`         | Optional description                 |
+| `lens-searchbar-autocomplete-options-item-description-focused` | Focused optional description         |
+| `lens-searchbar-autocomplete-options-item-facet-count`         | Facet count badge                    |
+| `lens-searchbar-autocomplete-options-type-more-message`        | Wrapper for type more message        |
diff --git a/demo.svelte b/demo.svelte
index 1b3d687d..75fedf7b 100644
--- a/demo.svelte
+++ b/demo.svelte
@@ -243,6 +243,14 @@
                     type: "BETWEEN",
                     system: "",
                 },
+                {
+                    fieldType: "date",
+                    key: "date-of-diagnosis",
+                    name: "Date of diagnosis",
+                    type: "BETWEEN",
+                    system: "",
+                    max: "2025-09-04",
+                },
             ],
         },
         {
@@ -495,7 +503,7 @@
     }
 
     .card {
-        background-color: white;
+        background-color: var(--white);
         border-radius: var(--border-radius-small);
         border: 1px solid var(--lightest-gray);
         padding: var(--gap-xs);
diff --git a/eslint.config.js b/eslint.config.js
index 5ba70462..2caa8ceb 100644
--- a/eslint.config.js
+++ b/eslint.config.js
@@ -7,7 +7,7 @@ import svelte from "eslint-plugin-svelte";
 import svelteConfig from "./svelte.config.js";
 
 export default defineConfig([
-    globalIgnores(["dist", "book/book", "docs/assets"]),
+    globalIgnores(["dist", "book", "docs/assets"]),
     // Recommended JavaScript and TypeScript lints
     pluginJs.configs.recommended,
     ...tseslint.configs.recommended,
diff --git a/src/components/buttons/SearchButtonComponent.wc.svelte b/src/components/buttons/SearchButtonComponent.wc.svelte
index 613715d8..67d3586c 100644
--- a/src/components/buttons/SearchButtonComponent.wc.svelte
+++ b/src/components/buttons/SearchButtonComponent.wc.svelte
@@ -18,6 +18,7 @@
     const onclick = (): void => {
         queryModified.set(false);
         window.dispatchEvent(new CustomEvent("lens-search-triggered"));
+        window.dispatchEvent(new CustomEvent("reset-all-searchbar-inputs"));
     };
 </script>
 
diff --git a/src/components/buttons/StoreDeleteButtonComponent.svelte b/src/components/buttons/StoreDeleteButtonComponent.svelte
index f988eae3..b12276a3 100644
--- a/src/components/buttons/StoreDeleteButtonComponent.svelte
+++ b/src/components/buttons/StoreDeleteButtonComponent.svelte
@@ -14,9 +14,10 @@
             index: number;
             item?: QueryItem;
         };
+        resetToEmptySearchBar?: () => void;
     }
 
-    let { itemToDelete }: Props = $props();
+    let { itemToDelete, resetToEmptySearchBar = () => {} }: Props = $props();
 
     const { type, index, item } = itemToDelete;
 
@@ -51,7 +52,7 @@
                 if (searchBarInputs) {
                     searchBarInputs[$activeQueryGroupIndex].focus();
                 }
-
+                resetToEmptySearchBar();
                 return query;
             });
         }
diff --git a/src/components/catalogue/AddButton.svelte b/src/components/catalogue/AddButton.svelte
index e77fc7d3..0bda4d8d 100644
--- a/src/components/catalogue/AddButton.svelte
+++ b/src/components/catalogue/AddButton.svelte
@@ -1,8 +1,25 @@
 <script lang="ts">
-    let { ...props } = $props();
+    import type {
+        KeyboardEventHandler,
+        MouseEventHandler,
+    } from "svelte/elements";
+    interface Props {
+        inSearchBar: boolean;
+        onkeydown?: KeyboardEventHandler<HTMLButtonElement>;
+        onclick?: MouseEventHandler<HTMLButtonElement>;
+    }
+    let { inSearchBar, onkeydown, onclick }: Props = $props();
 </script>
 
-<button aria-label="Add to query" part="lens-add-to-query-button" {...props}>
+<button
+    aria-label="Add to query"
+    part="lens-add-to-query-button {inSearchBar
+        ? 'lens-add-to-query-button-searchbar'
+        : ''}"
+    {onkeydown}
+    {onclick}
+    type="button"
+>
     <svg
         xmlns="http://www.w3.org/2000/svg"
         viewBox="0 0 24 24"
@@ -31,4 +48,11 @@
     [part~="lens-add-to-query-button"]:hover svg {
         color: var(--light-blue);
     }
+
+    [part~="lens-add-to-query-button-searchbar"] svg {
+        color: var(--white);
+    }
+    [part~="lens-add-to-query-button-searchbar"]:hover svg {
+        color: var(--light-gray);
+    }
 </style>
diff --git a/src/components/catalogue/DatePickerComponent.svelte b/src/components/catalogue/DatePickerComponent.svelte
index 5c3c30d4..5dc700a7 100644
--- a/src/components/catalogue/DatePickerComponent.svelte
+++ b/src/components/catalogue/DatePickerComponent.svelte
@@ -8,28 +8,41 @@
 
     let {
         element,
+        inSearchBar = false,
+        setActiveElement = () => {},
+        resetToEmptySearchBar = () => {},
+        focusSearchbar = () => {},
     }: {
         element: DateRangeCategory;
+        inSearchBar?: boolean;
+        setActiveElement?: (activate?: boolean) => void;
+        resetToEmptySearchBar?: (focus?: boolean) => void;
+        focusSearchbar?: () => void;
     } = $props();
 
+    let form: HTMLFormElement;
     let fromInput: HTMLInputElement;
     let toInput: HTMLInputElement;
     let from: string = $state("");
     let to: string = $state("");
 
     onMount(() => {
-        fromInput.focus();
+        if (inSearchBar === false) fromInput.focus();
     });
 
-    $effect(() => {
-        if (from === "" && to === "") {
+    let formVlaid = $derived(validateForm(from, to));
+
+    function validateForm(from: string, to: string): boolean {
+        fromInput.setCustomValidity("");
+        if (!from && !to) {
             fromInput.setCustomValidity(translate("cannot_both_be_empty"));
-        } else if (from !== "" && to !== "" && from > to) {
+            return false;
+        } else if (from && to && from > to) {
             fromInput.setCustomValidity(translate("min_must_be_less_than_max"));
-        } else {
-            fromInput.setCustomValidity("");
+            return false;
         }
-    });
+        return true;
+    }
 
     function getMinMax(min: string | null, max: string | null): string {
         if (min && max && min === max) return `${min}`;
@@ -39,8 +52,12 @@
         return "";
     }
 
-    function onsubmit(event: SubmitEvent): void {
-        event.preventDefault();
+    function addItem(): void {
+        if (!formVlaid) {
+            fromInput.reportValidity();
+            return;
+        }
+
         addItemToQuery(
             {
                 id: uuidv4(),
@@ -57,11 +74,46 @@
             },
             $activeQueryGroupIndex,
         );
+
+        resetToEmptySearchBar();
+    }
+
+    function handleKeyDown(event: KeyboardEvent) {
+        if (inSearchBar === false) return;
+
+        if (event.key === "Escape") {
+            focusSearchbar();
+        }
+
+        if (event.key === "Enter") {
+            addItem();
+        }
+    }
+
+    function onfocusin(event: FocusEvent) {
+        if (!inSearchBar) return;
+        setActiveElement();
+        // toInput can not be reached by tab when the focus is outside the form,
+        // so this can handle the focus via mouse click instead of using another event listener
+        if (event.target === toInput) return;
+
+        const relatedTargetOutside =
+            event.relatedTarget instanceof Node &&
+            !form.contains(event.relatedTarget);
+
+        if (relatedTargetOutside) {
+            fromInput.focus();
+        }
+    }
+
+    function onfocusout() {
+        setActiveElement(false);
     }
 </script>
 
-<form part="lens-date-input-form" {onsubmit}>
+<form part="lens-date-input-form" bind:this={form} {onfocusin} {onfocusout}>
     <input
+        onkeydown={handleKeyDown}
         part="lens-date-input-formfield"
         type="date"
         min={element.min}
@@ -71,6 +123,7 @@
     />
     <span part="date-input-range-separator">-</span>
     <input
+        onkeydown={handleKeyDown}
         part="lens-date-input-formfield"
         type="date"
         min={element.min}
@@ -78,7 +131,7 @@
         bind:value={to}
         bind:this={toInput}
     />
-    <AddButton />
+    <AddButton onclick={addItem} onkeydown={handleKeyDown} {inSearchBar} />
 </form>
 
 <style>
diff --git a/src/components/catalogue/NumberInputComponent.svelte b/src/components/catalogue/NumberInputComponent.svelte
index ce1d94cd..2b6e3776 100644
--- a/src/components/catalogue/NumberInputComponent.svelte
+++ b/src/components/catalogue/NumberInputComponent.svelte
@@ -8,28 +8,41 @@
 
     let {
         element,
+        inSearchBar = false,
+        setActiveElement = () => {},
+        resetToEmptySearchBar = () => {},
+        focusSearchbar = () => {},
     }: {
         element: NumericRangeCategory;
+        inSearchBar?: boolean;
+        setActiveElement?: (activate?: boolean) => void;
+        resetToEmptySearchBar?: (focus?: boolean) => void;
+        focusSearchbar?: () => void;
     } = $props();
 
+    let form: HTMLFormElement;
     let fromInput: HTMLInputElement;
     let toInput: HTMLInputElement;
     let from: number | null = $state(null);
     let to: number | null = $state(null);
 
     onMount(() => {
-        fromInput.focus();
+        if (inSearchBar === false) fromInput.focus();
     });
 
-    $effect(() => {
+    let formVlaid = $derived(validateForm(from, to));
+
+    function validateForm(from: number | null, to: number | null): boolean {
+        fromInput.setCustomValidity("");
         if (from === null && to === null) {
             fromInput.setCustomValidity(translate("cannot_both_be_empty"));
+            return false;
         } else if (from !== null && to !== null && from > to) {
             fromInput.setCustomValidity(translate("min_must_be_less_than_max"));
-        } else {
-            fromInput.setCustomValidity("");
+            return false;
         }
-    });
+        return true;
+    }
 
     function getMinMax(min: number | null, max: number | null): string {
         if (min !== null && max !== null && min === max) return `${min}`;
@@ -39,8 +52,12 @@
         return "";
     }
 
-    function onsubmit(event: SubmitEvent): void {
-        event.preventDefault();
+    function addItem(): void {
+        if (!formVlaid) {
+            fromInput.reportValidity();
+            return;
+        }
+
         addItemToQuery(
             {
                 id: uuidv4(),
@@ -57,12 +74,47 @@
             },
             $activeQueryGroupIndex,
         );
+
+        resetToEmptySearchBar();
+    }
+
+    function handleKeyDown(event: KeyboardEvent) {
+        if (inSearchBar === false) return;
+
+        if (event.key === "Escape") {
+            focusSearchbar();
+        }
+
+        if (event.key === "Enter") {
+            addItem();
+        }
+    }
+
+    function onfocusin(event: FocusEvent) {
+        if (!inSearchBar) return;
+        setActiveElement();
+        // toInput can not be reached by tab when the focus is outside the form,
+        // so this can handle the focus via mouse click instead of using another event listener
+        if (event.target === toInput) return;
+
+        const relatedTargetOutside =
+            event.relatedTarget instanceof Node &&
+            !form.contains(event.relatedTarget);
+
+        if (relatedTargetOutside) {
+            fromInput.focus();
+        }
+    }
+
+    function onfocusout() {
+        setActiveElement(false);
     }
 </script>
 
-<form part="lens-number-input-form" {onsubmit}>
+<form part="lens-number-input-form" bind:this={form} {onfocusin} {onfocusout}>
     <div part="lens-number-input-formfield-wrapper">
         <input
+            onkeydown={handleKeyDown}
             part="lens-number-input-formfield"
             type="number"
             step="any"
@@ -81,6 +133,7 @@
     <span part="lens-number-input-range-separator">-</span>
     <div part="lens-number-input-formfield-wrapper">
         <input
+            onkeydown={handleKeyDown}
             part="lens-number-input-formfield"
             type="number"
             step="any"
@@ -96,7 +149,7 @@
             >
         {/if}
     </div>
-    <AddButton />
+    <AddButton onclick={addItem} onkeydown={handleKeyDown} {inSearchBar} />
 </form>
 
 <style>
@@ -130,5 +183,6 @@
         padding: 0 var(--gap-xs);
         background-color: var(--lightest-gray);
         font-size: var(--font-size-xs);
+        color: var(--font-color);
     }
 </style>
diff --git a/src/components/catalogue/SingleSelectItemComponent.svelte b/src/components/catalogue/SingleSelectItemComponent.svelte
index eb29463c..642a25de 100644
--- a/src/components/catalogue/SingleSelectItemComponent.svelte
+++ b/src/components/catalogue/SingleSelectItemComponent.svelte
@@ -54,7 +54,7 @@
 {:else}
     <span></span>
 {/if}
-<AddButton {onclick} />
+<AddButton inSearchBar={false} {onclick} />
 
 <style>
     [part~="lens-single-select-facet-count"] {
diff --git a/src/components/catalogue/StringInputComponent.svelte b/src/components/catalogue/StringInputComponent.svelte
index a916a762..88047c61 100644
--- a/src/components/catalogue/StringInputComponent.svelte
+++ b/src/components/catalogue/StringInputComponent.svelte
@@ -1,29 +1,49 @@
 <script lang="ts">
-    /**
-     * This component is part of the query tree.
-     *
-     * It allows a user to enter an arbitrary string.
-     */
     import { v4 as uuidv4 } from "uuid";
     import { activeQueryGroupIndex, addItemToQuery } from "../../stores/query";
     import type { StringCategory } from "../../types/catalogue";
     import AddButton from "./AddButton.svelte";
     import { onMount } from "svelte";
+    import { translate } from "../../helpers/translations";
 
-    interface Props {
+    let {
+        element,
+        inSearchBar = false,
+        setActiveElement = () => {},
+        resetToEmptySearchBar = () => {},
+        focusSearchbar = () => {},
+    }: {
         element: StringCategory;
-    }
-
-    let { element }: Props = $props();
+        inSearchBar?: boolean;
+        setActiveElement?: (activate?: boolean) => void;
+        resetToEmptySearchBar?: (focus?: boolean) => void;
+        focusSearchbar?: () => void;
+    } = $props();
 
     let input: HTMLInputElement;
+    let value: string | null = $state(null);
 
     onMount(() => {
-        input.focus();
+        if (inSearchBar === false) input.focus();
     });
 
-    function onsubmit(event: Event) {
-        event.preventDefault();
+    let formValid = $derived(validateForm(value));
+
+    function validateForm(value: string | null): boolean {
+        input.setCustomValidity("");
+        if (!value) {
+            input.setCustomValidity(translate("cannot_be_empty"));
+            return false;
+        }
+        return true;
+    }
+
+    function addItem() {
+        if (!formValid) {
+            input.reportValidity();
+            return;
+        }
+
         addItemToQuery(
             {
                 id: uuidv4(),
@@ -41,17 +61,53 @@
             },
             $activeQueryGroupIndex,
         );
+
+        resetToEmptySearchBar();
     }
+
+    function handleKeyDown(event: KeyboardEvent) {
+        if (inSearchBar === false) return;
+
+        if (event.key === "Escape") {
+            focusSearchbar();
+        }
+
+        if (event.key === "Enter") {
+            addItem();
+        }
+    }
+
+    // sets focus to the first element of another input component inside the
+    // searchbar for easier reverse tabing between inputs
+    function onfocusin(event: FocusEvent) {
+        if (!inSearchBar) return;
+        setActiveElement();
+        const relatedTargetOutside =
+            event.relatedTarget instanceof Node &&
+            !form.contains(event.relatedTarget);
+
+        if (relatedTargetOutside) {
+            input.focus();
+        }
+    }
+
+    function onfocusout() {
+        setActiveElement(false);
+    }
+
+    let form: HTMLElement;
 </script>
 
-<form part="lens-string-form" {onsubmit}>
+<form part="lens-string-form" bind:this={form} {onfocusin} {onfocusout}>
     <input
+        onkeydown={handleKeyDown}
         part="lens-string-formfield"
         type="text"
         bind:this={input}
+        bind:value
         placeholder="Enter filter term"
     />
-    <AddButton />
+    <AddButton onclick={addItem} onkeydown={handleKeyDown} {inSearchBar} />
 </form>
 
 <style>
diff --git a/src/components/search-bar/SearchBarComponent.wc.svelte b/src/components/search-bar/SearchBarComponent.wc.svelte
index f9558cc5..fbc32ce3 100644
--- a/src/components/search-bar/SearchBarComponent.wc.svelte
+++ b/src/components/search-bar/SearchBarComponent.wc.svelte
@@ -9,13 +9,20 @@
         AggregatedValue,
         Category,
         Criteria,
+        DateRangeCategory,
+        NumericRangeCategory,
+        StringCategory,
     } from "../../types/catalogue";
     import {
         addItemToQuery,
         queryStore,
         activeQueryGroupIndex,
     } from "../../stores/query";
-    import type { AutoCompleteItem, QueryItem } from "../../types/queryData";
+    import {
+        type AutoCompleteCriterionItem,
+        type AutoCompleteItem,
+        type QueryItem,
+    } from "../../types/queryData";
     import { v4 as uuidv4 } from "uuid";
     import StoreDeleteButtonComponent from "../buttons/StoreDeleteButtonComponent.svelte";
     import { catalogue } from "../../stores/catalogue";
@@ -27,6 +34,9 @@
     import { translate } from "../../helpers/translations";
     import { get } from "svelte/store";
     import { SvelteURL } from "svelte/reactivity";
+    import NumberInputComponent from "../catalogue/NumberInputComponent.svelte";
+    import DatePickerComponent from "../catalogue/DatePickerComponent.svelte";
+    import StringInputComponent from "../catalogue/StringInputComponent.svelte";
 
     interface Props {
         /** The string to display when no matches are found */
@@ -60,11 +70,12 @@
     const buildDatalistItemFromBottomCategoryRec = (
         category: Category,
         criterion: Criteria,
-    ): AutoCompleteItem[] => {
-        let autoCompleteItems: AutoCompleteItem[] = [];
+    ): AutoCompleteCriterionItem[] => {
+        let autoCompleteItems: AutoCompleteCriterionItem[] = [];
         if ("criteria" in category) {
             if (criterion.visible == undefined && !criterion.visible) {
                 autoCompleteItems.push({
+                    fieldType: "criterion",
                     name: category.name,
                     key: category.key,
                     type: category.type,
@@ -72,7 +83,7 @@
                     criterion: criterion,
                 });
             }
-            if (criterion.subgroup != undefined) {
+            if (criterion.subgroup !== undefined) {
                 criterion.subgroup.forEach((criterion: Criteria) => {
                     autoCompleteItems = autoCompleteItems.concat(
                         buildDatalistItemFromBottomCategoryRec(
@@ -90,10 +101,17 @@
         category: Category,
     ): AutoCompleteItem[] => {
         let autoCompleteItems: AutoCompleteItem[] = [];
-        if ("criteria" in category)
+        if (
+            category.fieldType === "autocomplete" ||
+            category.fieldType === "single-select"
+        ) {
             category.criteria.forEach((criterion: Criteria) => {
-                if (criterion.visible == undefined && !criterion.visible) {
+                if (
+                    criterion.visible === true ||
+                    criterion.visible === undefined
+                ) {
                     autoCompleteItems.push({
+                        fieldType: "criterion",
                         name: category.name,
                         key: category.key,
                         type: category.type,
@@ -112,6 +130,10 @@
                     });
                 }
             });
+        } else if (category.fieldType !== "group") {
+            autoCompleteItems.push(category);
+        }
+
         return autoCompleteItems;
     };
 
@@ -180,20 +202,27 @@
                 .replace(/^[0-9]*:/g, "")
                 .toLocaleLowerCase();
 
-            return (
-                item.name.toLowerCase().includes(clearedInputValue) ||
-                item.criterion.name.toLowerCase().includes(clearedInputValue) ||
-                item.criterion.description
-                    ?.toLowerCase()
-                    .includes(clearedInputValue)
-
-                /**
-                 * Discussion:
-                 * should it also be possible to search for the key?
-                 */
-                // item.key.toLocaleLowerCase().includes(clearedInputValue) ||
-                // item.criterion.key.toLowerCase().includes(clearedInputValue) ||
-            );
+            switch (item.fieldType) {
+                case "criterion": {
+                    return (
+                        item.name.toLowerCase().includes(clearedInputValue) ||
+                        item.criterion.name
+                            .toLowerCase()
+                            .includes(clearedInputValue) ||
+                        item.criterion.description
+                            ?.toLowerCase()
+                            .includes(clearedInputValue)
+                    );
+                }
+                case "number":
+                case "date":
+                case "string":
+                    return item.name
+                        .toLocaleLowerCase()
+                        .includes(clearedInputValue);
+                default:
+                    return false;
+            }
         });
     });
 
@@ -202,7 +231,11 @@
      */
     let focusedItemIndex: number = $state(-1);
 
-    let activeDomElement: HTMLElement | undefined = $state();
+    const optionElements: HTMLElement[] = $state([]);
+
+    let activeDomElement: HTMLElement | undefined = $derived(
+        focusedItemIndex >= 0 ? optionElements[focusedItemIndex] : undefined,
+    );
 
     /**
      * transforms the inputvalue to a QueryItem, adds it to the query store
@@ -214,6 +247,8 @@
         inputItem: AutoCompleteItem,
         indexOfChosenStore: number = $queryStore.length,
     ): void => {
+        if (!(inputItem.fieldType === "criterion")) return;
+
         /**
          * transform inputItem to QueryItem
          */
@@ -238,9 +273,8 @@
         };
 
         addItemToQuery(queryItem, indexOfChosenStore);
-
-        inputValue = "";
-        focusedItemIndex = 0;
+        resetToEmptySearchBar();
+        autoCompleteOpen = false;
     };
 
     /**
@@ -258,7 +292,7 @@
     };
 
     /**
-     * handles keyboard events to make input options selectable
+     * handles keyboard events to make input options selectable and form elements tabable
      * @param event - the keyboard event
      */
     const handleKeyDown = (event: KeyboardEvent): void => {
@@ -286,8 +320,52 @@
                 extractTargetGroupFromInputValue(),
             );
         }
+        if (event.key === "Tab" && !event.shiftKey) {
+            if (activeDomElement?.querySelector("input")) {
+                event.preventDefault();
+                activeDomElement?.querySelector("input")?.focus();
+            }
+        }
     };
 
+    function handleFocusIn() {
+        autoCompleteOpen = true;
+    }
+
+    function handleFocusOut(event: FocusEvent) {
+        if (searchBarContainer.contains(event.relatedTarget as Node) || inside)
+            return;
+        autoCompleteOpen = false;
+    }
+
+    let inside: boolean = $state(false);
+
+    function handleClickInside(): void {
+        inside = true;
+    }
+
+    function handleClickOutside(): void {
+        if (!inside) {
+            autoCompleteOpen = false;
+        }
+        inside = false;
+    }
+
+    function resetToEmptySearchBar(focus: boolean = true): void {
+        inputValue = "";
+        focusedItemIndex = -1;
+        if (focus) {
+            focusSearchbar();
+        }
+    }
+
+    // needed as function to be passed to children
+    function focusSearchbar(): void {
+        searchBarInput.focus();
+    }
+
+    let searchBarContainer: HTMLElement;
+
     /**
      * scrolls the active dom element into view when it is out of view
      * @param activeDomElement - the active dom element
@@ -320,41 +398,43 @@
     });
 
     /**
-     * handles click events to make input options selectable
-     * @param inputOption - the input option to add to the query store
-     */
-    const selectItemByClick = (inputOption: AutoCompleteItem): void => {
-        addInputValueToStore(inputOption, extractTargetGroupFromInputValue());
-    };
-
-    /**
-     * returns the input option with the matched substring wrapped in <strong> tags
      * @param inputOption - the input option to bold
      * @returns the input option with the matched substring wrapped in <strong> tags
      */
     const getBoldedText = (inputOption: string): string => {
-        // Use a regular expression to find all occurrences of the substring
-
-        const inputValueLength: number = inputValue.length;
-        const indexOfSubStringStart: number = inputOption
-            .toLocaleLowerCase()
-            .indexOf(inputValue.toLocaleLowerCase());
-        const indexOfSubStringEnd: number =
-            indexOfSubStringStart + inputValueLength;
-        const subString: string = inputOption.slice(
-            indexOfSubStringStart,
-            indexOfSubStringEnd,
-        );
-        const regex: RegExp = new RegExp(subString, "g");
+        const query: string = (inputValue ?? "").trim();
 
-        // Replace each occurrence with the same substring wrapped in <strong> tags
-        const resultString: string = inputOption.replace(
-            regex,
-            `<strong>${subString}</strong>`,
+        // safety layer for passing html via name attribute in catalogue
+        inputOption = escapeHtml(inputOption);
+        if (!query) return inputOption;
+
+        const pattern: RegExp = new RegExp(escapeRegExp(query), "gi");
+        if (!pattern.test(inputOption)) return inputOption;
+
+        return inputOption.replace(
+            pattern,
+            (match) => `<strong>${escapeHtml(match)}</strong>`,
         );
-        return resultString;
     };
 
+    function escapeRegExp(string: string): string {
+        return string.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+    }
+
+    function escapeHtml(string: string): string {
+        return string.replace(
+            /[&<>"']/g,
+            (c) =>
+                ({
+                    "&": "&amp;",
+                    "<": "&lt;",
+                    ">": "&gt;",
+                    '"': "&quot;",
+                    "'": "&#39;",
+                })[c]!,
+        );
+    }
+
     onMount(() => {
         //sets focus in the new bar when added
         searchBarInput.focus();
@@ -400,13 +480,26 @@
                 window.history.replaceState({}, "", url.toString());
             }
         });
+
+        window.addEventListener("reset-all-searchbar-inputs", () => {
+            inputValue = "";
+        });
+
+        window.addEventListener("mouseup", () => {
+            handleClickOutside();
+        });
     });
 </script>
 
+<!-- svelte-ignore a11y_no_static_element_interactions -->
 <div
     part="lens-searchbar {index === $activeQueryGroupIndex
         ? 'lens-searchbar-active'
         : ''}"
+    bind:this={searchBarContainer}
+    onfocusin={handleFocusIn}
+    onmousedown={handleClickInside}
+    onfocusout={handleFocusOut}
 >
     {#if queryGroup !== undefined && queryGroup.length > 0}
         <div part="lens-searchbar-chips">
@@ -456,16 +549,12 @@
             autoCompleteOpen = true;
             activeQueryGroupIndex.set(index);
         }}
-        onfocusout={() => {
-            autoCompleteOpen = false;
-            inputValue = "";
-        }}
     />
-    {#if autoCompleteOpen && inputValue.length > 2}
+    {#if autoCompleteOpen && inputValue.length > -1}
         <ul part="lens-searchbar-autocomplete-options">
             {#if inputOptions?.length > 0}
-                <!-- eslint-disable-next-line svelte/require-each-key -->
-                {#each inputOptions as inputOption, i}
+                {#each inputOptions as inputOption, i (inputOption.key + i)}
+                    <!-- TODO: this double loop makes the autocomplete slow with big data loads. Is there a better way to make the category headers? -->
                     {#if inputOptions
                         .map((option) => option.name)
                         .indexOf(inputOption.name) === i}
@@ -474,14 +563,22 @@
                             {@html getBoldedText(inputOption.name)}
                         </div>
                     {/if}
-                    {#if i === focusedItemIndex}
+                    {#if "criterion" in inputOption}
                         <!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
                         <!-- onmousedown is chosen because the input looses focus when clicked outside, 
                              which will close the options before the click is finshed -->
                         <li
-                            bind:this={activeDomElement}
-                            part="lens-searchbar-autocomplete-options-item lens-searchbar-autocomplete-options-item-focused"
-                            onmousedown={() => selectItemByClick(inputOption)}
+                            class="criterion-item"
+                            bind:this={optionElements[i]}
+                            onmousedown={() =>
+                                addInputValueToStore(
+                                    inputOption,
+                                    extractTargetGroupFromInputValue(),
+                                )}
+                            part="lens-searchbar-autocomplete-options-item {focusedItemIndex ===
+                            i
+                                ? 'lens-searchbar-autocomplete-options-item-focused'
+                                : ''} lens-searchbar-autocomplete-options-item-criterion"
                         >
                             <div
                                 part="lens-searchbar-autocomplete-options-item-name"
@@ -492,7 +589,10 @@
                                 )}
                             </div>
                             <div
-                                part="lens-searchbar-autocomplete-options-item-description lens-searchbar-autocomplete-options-item-description-focused"
+                                part="lens-searchbar-autocomplete-options-item-description {focusedItemIndex ===
+                                i
+                                    ? 'lens-searchbar-autocomplete-options-item-description-focused'
+                                    : ''}"
                             >
                                 {#if inputOption.criterion.description}
                                     <!-- eslint-disable-next-line svelte/no-at-html-tags -->
@@ -513,43 +613,83 @@
                                 </div>
                             {/if}
                         </li>
-                    {:else}
+                    {/if}
+                    {#if inputOption.fieldType === "number"}
                         <!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
                         <!-- onmousedown is chosen because the input looses focus when clicked outside, 
                              which will close the options before the click is finshed -->
                         <li
-                            part="lens-searchbar-autocomplete-options-item"
-                            onmousedown={() => selectItemByClick(inputOption)}
+                            bind:this={optionElements[i]}
+                            onmousedown={() =>
+                                addInputValueToStore(
+                                    inputOption,
+                                    extractTargetGroupFromInputValue(),
+                                )}
+                            part="lens-searchbar-autocomplete-options-item {focusedItemIndex ===
+                            i
+                                ? 'lens-searchbar-autocomplete-options-item-focused'
+                                : ''} lens-searchbar-autocomplete-options-item-numeric"
                         >
-                            <div
-                                part="lens-searchbar-autocomplete-options-item-name"
-                            >
-                                <!-- eslint-disable-next-line svelte/no-at-html-tags -->
-                                {@html getBoldedText(
-                                    inputOption.criterion.name,
+                            <NumberInputComponent
+                                element={inputOption as NumericRangeCategory}
+                                inSearchBar={true}
+                                setActiveElement={(activate: boolean = true) =>
+                                    (focusedItemIndex = activate ? i : -1)}
+                                {resetToEmptySearchBar}
+                                {focusSearchbar}
+                            />
+                        </li>
+                    {/if}
+                    {#if inputOption.fieldType === "date"}
+                        <!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
+                        <!-- onmousedown is chosen because the input looses focus when clicked outside, 
+                             which will close the options before the click is finshed -->
+                        <li
+                            bind:this={optionElements[i]}
+                            onmousedown={() =>
+                                addInputValueToStore(
+                                    inputOption,
+                                    extractTargetGroupFromInputValue(),
                                 )}
-                            </div>
-                            <div
-                                part="lens-searchbar-autocomplete-options-item-description"
-                            >
-                                {#if inputOption.criterion.description}
-                                    <!-- eslint-disable-next-line svelte/no-at-html-tags -->
-                                    {@html getBoldedText(
-                                        inputOption.criterion.description,
-                                    )}
-                                {/if}
-                            </div>
-                            {#if $facetCounts[inputOption.key] !== undefined}
-                                <div
-                                    part="lens-searchbar-autocomplete-options-item-facet-count"
-                                    title={$lensOptions?.facetCount
-                                        ?.hoverText?.[inputOption.key] ?? ""}
-                                >
-                                    {$facetCounts[inputOption.key][
-                                        inputOption.criterion.key
-                                    ] ?? 0}
-                                </div>
-                            {/if}
+                            part="lens-searchbar-autocomplete-options-item {focusedItemIndex ===
+                            i
+                                ? 'lens-searchbar-autocomplete-options-item-focused'
+                                : ''} lens-searchbar-autocomplete-options-item-date"
+                        >
+                            <DatePickerComponent
+                                element={inputOption as DateRangeCategory}
+                                inSearchBar={true}
+                                setActiveElement={(activate: boolean = true) =>
+                                    (focusedItemIndex = activate ? i : -1)}
+                                {resetToEmptySearchBar}
+                                {focusSearchbar}
+                            />
+                        </li>
+                    {/if}
+                    {#if inputOption.fieldType === "string"}
+                        <!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
+                        <!-- onmousedown is chosen because the input looses focus when clicked outside, 
+                             which will close the options before the click is finshed -->
+                        <li
+                            bind:this={optionElements[i]}
+                            onmousedown={() =>
+                                addInputValueToStore(
+                                    inputOption,
+                                    extractTargetGroupFromInputValue(),
+                                )}
+                            part="lens-searchbar-autocomplete-options-item {focusedItemIndex ===
+                            i
+                                ? 'lens-searchbar-autocomplete-options-item-focused'
+                                : ''} lens-searchbar-autocomplete-options-item-date"
+                        >
+                            <StringInputComponent
+                                element={inputOption as StringCategory}
+                                inSearchBar={true}
+                                setActiveElement={(activate: boolean = true) =>
+                                    (focusedItemIndex = activate ? i : -1)}
+                                {resetToEmptySearchBar}
+                                {focusSearchbar}
+                            />
                         </li>
                     {/if}
                 {/each}
@@ -558,11 +698,16 @@
             {/if}
         </ul>
     {:else if autoCompleteOpen && inputValue.length > 0 && inputValue.length < 3}
-        <ul part="lens-searchbar-autocomplete-options">
+        <ul
+            part="lens-searchbar-autocomplete-options lens-searchbar-autocomplete-options-type-more-message"
+        >
             <li>{typeMoreMessage}</li>
         </ul>
     {/if}
-    <StoreDeleteButtonComponent itemToDelete={{ type: "group", index }} />
+    <StoreDeleteButtonComponent
+        itemToDelete={{ type: "group", index }}
+        {resetToEmptySearchBar}
+    />
 </div>
 
 <style>
@@ -594,6 +739,16 @@
         z-index: 2;
     }
 
+    [part~="lens-searchbar-input"] {
+        box-sizing: border-box;
+        padding: var(--gap-xs);
+        min-width: 200px;
+        flex-grow: 1;
+        outline: none;
+        border: none;
+        background-color: transparent;
+    }
+
     [part~="lens-searchbar-chips"] {
         display: flex;
         flex-wrap: wrap;
@@ -626,15 +781,6 @@
     [part~="lens-searchbar-chip-item-text"] {
         overflow-wrap: anywhere; /* prefers breaking at spaces, but will break mid-word if needed */
     }
-    [part~="lens-searchbar-input"] {
-        box-sizing: border-box;
-        padding: var(--gap-xs);
-        min-width: 200px;
-        flex-grow: 1;
-        outline: none;
-        border: none;
-        background-color: transparent;
-    }
 
     /**
     * Lens Search Bar Input Options
@@ -657,7 +803,7 @@
         top: 40px;
         left: -1px;
         right: -1px;
-        background-color: white;
+        background-color: var(--white);
         color: var(--font-color);
         border-bottom-left-radius: var(--border-radius-small);
         border-bottom-right-radius: var(--border-radius-small);
@@ -669,12 +815,14 @@
         display: grid;
         grid-template-columns: subgrid;
         grid-column: 1 / -1; /* Full width */
-        cursor: pointer;
-        transition: background-color 0.2s ease;
         gap: var(--gap-xs);
         padding: var(--gap-xxs) var(--gap-xs);
     }
 
+    [part~="lens-searchbar-autocomplete-options-item-criterion"] {
+        cursor: pointer;
+    }
+
     [part~="lens-searchbar-autocomplete-options-heading"] {
         font-weight: bold;
         grid-column: 1 / -1;
@@ -686,7 +834,7 @@
     }
 
     [part~="lens-searchbar-autocomplete-options-item"]:hover:not(
-            [part~="autocomplete-options-item-focused"]
+            [part~="lens-searchbar-autocomplete-options-item-focused"]
         ) {
         background-color: var(--light-gray);
     }
diff --git a/src/helpers/translations.ts b/src/helpers/translations.ts
index b2fa38fb..b49b8000 100644
--- a/src/helpers/translations.ts
+++ b/src/helpers/translations.ts
@@ -14,6 +14,10 @@ export function translate(key: string): string {
 }
 
 const lensTranslations: Texts = {
+    cannot_be_empty: {
+        en: "Cannot be empty",
+        de: "Darf nicht leer sein",
+    },
     cannot_both_be_empty: {
         en: "Cannot both be empty",
         de: "Es können nicht beide Felder leer sein",
diff --git a/src/types/queryData.ts b/src/types/queryData.ts
index ca292511..53f73610 100644
--- a/src/types/queryData.ts
+++ b/src/types/queryData.ts
@@ -1,4 +1,9 @@
-import type { AggregatedValue } from "./catalogue";
+import type {
+    AggregatedValue,
+    DateRangeCategory,
+    NumericRangeCategory,
+    StringCategory,
+} from "./catalogue";
 
 export type QueryItem = {
     id: string;
@@ -21,20 +26,6 @@ export type QueryValue = {
     description?: string;
 };
 
-export type AutoCompleteItem = {
-    name: string;
-    key: string;
-    description?: string;
-    system?: string;
-    type: string;
-    criterion: {
-        key: string;
-        name: string;
-        description?: string;
-        aggregatedValue?: AggregatedValue[][];
-    };
-};
-
 export type queryStoreItem =
     | QueryItem[]
     | QueryItem
@@ -47,3 +38,23 @@ export type SendableQuery = {
     query: QueryItem[][];
     id: string;
 };
+
+export type AutoCompleteCriterionItem = {
+    fieldType: "criterion";
+    name: string;
+    key: string;
+    system?: string;
+    type: string;
+    criterion: {
+        key: string;
+        name: string;
+        description?: string;
+        aggregatedValue?: AggregatedValue[][];
+    };
+};
+
+export type AutoCompleteItem =
+    | AutoCompleteCriterionItem
+    | NumericRangeCategory
+    | DateRangeCategory
+    | StringCategory;