diff --git a/packages/core/config/stencil.bindings.angular.ts b/packages/core/config/stencil.bindings.angular.ts
index cbaf88154c..00ccd132b9 100644
--- a/packages/core/config/stencil.bindings.angular.ts
+++ b/packages/core/config/stencil.bindings.angular.ts
@@ -9,6 +9,7 @@ export const angularValueAccessorBindings: ValueAccessorConfig[] = [
       'bal-checkbox-group',
       'bal-select',
       'bal-dropdown',
+      'bal-typeahead',
       'bal-date',
       'bal-input-date',
       'bal-file-upload',
@@ -51,6 +52,7 @@ export const AngularGenerator = () =>
       'bal-checkbox',
       'bal-date',
       'bal-dropdown',
+      'bal-typeahead',
       'bal-file-upload',
       'bal-input-date',
       'bal-input-slider',
diff --git a/packages/core/src/components.d.ts b/packages/core/src/components.d.ts
index 98f2b77b58..c921580538 100644
--- a/packages/core/src/components.d.ts
+++ b/packages/core/src/components.d.ts
@@ -2234,6 +2234,7 @@ export namespace Components {
         "value": string;
     }
     interface BalOptionList {
+        "configChanged": (state: BalConfigState) => Promise<void>;
         /**
           * Defines the max height of the list element
          */
@@ -3627,6 +3628,113 @@ export namespace Components {
         "reference": string;
         "update": () => Promise<boolean>;
     }
+    /**
+     * TODOS:
+     * Features:
+     * - [ ] option list pagination
+     * - [ ] option list highlight search term
+     */
+    interface BalTypeahead {
+        /**
+          * Indicates whether the value of the control can be automatically completed by the browser.
+         */
+        "autocomplete": BalProps.BalInputAutocomplete;
+        /**
+          * Sets the value to `[]`, the input value to ´''´ and the focus index to ´0´.
+         */
+        "clear": () => Promise<void>;
+        /**
+          * If `true`, a cross at the end is visible to clear the selection
+         */
+        "clearable": boolean;
+        /**
+          * Closes the popup with option list
+         */
+        "close": () => Promise<void>;
+        "configChanged": (state: BalConfigState) => Promise<void>;
+        /**
+          * Defines the max height of the list element
+         */
+        "contentHeight": number;
+        /**
+          * If `true`, the user cannot interact with the option.
+         */
+        "disabled": boolean;
+        /**
+          * Defines the filter logic of the list
+         */
+        "filter": BalProps.BalOptionListFilter;
+        /**
+          * Returns the value of the component
+         */
+        "getValue": () => Promise<string[]>;
+        /**
+          * If `true` there will be on trigger icon visible
+         */
+        "icon": string;
+        /**
+          * Defines a inline label to be shown before the value
+         */
+        "inlineLabel": string;
+        /**
+          * If `true`, the component will be shown as invalid
+         */
+        "invalid": boolean;
+        "inverted": boolean;
+        /**
+          * Defines if the select is in a loading state.
+         */
+        "loading": boolean;
+        /**
+          * If `true`, the user can select multiple options.
+         */
+        "multiple": boolean;
+        /**
+          * The name of the control, which is submitted with the form data.
+         */
+        "name": string;
+        /**
+          * Opens the popup with option list
+         */
+        "open": () => Promise<void>;
+        /**
+          * Steps can be passed as a property or through HTML markup.
+         */
+        "options": BalOption[];
+        /**
+          * Defines the placeholder of the component. Only shown when the value is empty
+         */
+        "placeholder": string;
+        /**
+          * If `true` the element can not mutated, meaning the user can not edit the control.
+         */
+        "readonly": boolean;
+        /**
+          * If `true`, the user must fill in a value before submitting a form.
+         */
+        "required": boolean;
+        /**
+          * Select option by passed value
+         */
+        "select": (newValue: string | string[]) => Promise<void>;
+        "setAriaForm": (ariaForm: BalAriaForm) => Promise<void>;
+        /**
+          * Sets the focus on the input element
+         */
+        "setFocus": () => Promise<void>;
+        /**
+          * Defines the size of the control.
+         */
+        "size": BalProps.BalTypeaheadSize;
+        /**
+          * Defines the color style of the control
+         */
+        "theme": BalProps.BalTypeaheadTheme;
+        /**
+          * The value of the selected options.
+         */
+        "value"?: string | string[];
+    }
 }
 export interface BalAccordionCustomEvent<T> extends CustomEvent<T> {
     detail: T;
@@ -3792,6 +3900,10 @@ export interface BalTooltipCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLBalTooltipElement;
 }
+export interface BalTypeaheadCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLBalTypeaheadElement;
+}
 declare global {
     interface HTMLBalAccordionElementEventMap {
         "balChange": BalEvents.BalAccordionChangeDetail;
@@ -5043,6 +5155,31 @@ declare global {
         prototype: HTMLBalTooltipElement;
         new (): HTMLBalTooltipElement;
     };
+    interface HTMLBalTypeaheadElementEventMap {
+        "balChange": BalEvents.BalTypeaheadChangeDetail;
+        "balFocus": BalEvents.BalTypeaheadFocusDetail;
+        "balBlur": BalEvents.BalTypeaheadBlurDetail;
+    }
+    /**
+     * TODOS:
+     * Features:
+     * - [ ] option list pagination
+     * - [ ] option list highlight search term
+     */
+    interface HTMLBalTypeaheadElement extends Components.BalTypeahead, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLBalTypeaheadElementEventMap>(type: K, listener: (this: HTMLBalTypeaheadElement, ev: BalTypeaheadCustomEvent<HTMLBalTypeaheadElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLBalTypeaheadElementEventMap>(type: K, listener: (this: HTMLBalTypeaheadElement, ev: BalTypeaheadCustomEvent<HTMLBalTypeaheadElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+    }
+    var HTMLBalTypeaheadElement: {
+        prototype: HTMLBalTypeaheadElement;
+        new (): HTMLBalTypeaheadElement;
+    };
     interface HTMLElementTagNameMap {
         "bal-accordion": HTMLBalAccordionElement;
         "bal-accordion-details": HTMLBalAccordionDetailsElement;
@@ -5162,6 +5299,7 @@ declare global {
         "bal-time-input": HTMLBalTimeInputElement;
         "bal-toast": HTMLBalToastElement;
         "bal-tooltip": HTMLBalTooltipElement;
+        "bal-typeahead": HTMLBalTypeaheadElement;
     }
 }
 declare namespace LocalJSX {
@@ -8786,6 +8924,99 @@ declare namespace LocalJSX {
          */
         "reference"?: string;
     }
+    /**
+     * TODOS:
+     * Features:
+     * - [ ] option list pagination
+     * - [ ] option list highlight search term
+     */
+    interface BalTypeahead {
+        /**
+          * Indicates whether the value of the control can be automatically completed by the browser.
+         */
+        "autocomplete"?: BalProps.BalInputAutocomplete;
+        /**
+          * If `true`, a cross at the end is visible to clear the selection
+         */
+        "clearable"?: boolean;
+        /**
+          * Defines the max height of the list element
+         */
+        "contentHeight"?: number;
+        /**
+          * If `true`, the user cannot interact with the option.
+         */
+        "disabled"?: boolean;
+        /**
+          * Defines the filter logic of the list
+         */
+        "filter"?: BalProps.BalOptionListFilter;
+        /**
+          * If `true` there will be on trigger icon visible
+         */
+        "icon"?: string;
+        /**
+          * Defines a inline label to be shown before the value
+         */
+        "inlineLabel"?: string;
+        /**
+          * If `true`, the component will be shown as invalid
+         */
+        "invalid"?: boolean;
+        "inverted"?: boolean;
+        /**
+          * Defines if the select is in a loading state.
+         */
+        "loading"?: boolean;
+        /**
+          * If `true`, the user can select multiple options.
+         */
+        "multiple"?: boolean;
+        /**
+          * The name of the control, which is submitted with the form data.
+         */
+        "name"?: string;
+        /**
+          * Emitted when the input loses focus.
+         */
+        "onBalBlur"?: (event: BalTypeaheadCustomEvent<BalEvents.BalTypeaheadBlurDetail>) => void;
+        /**
+          * Emitted when a option got selected.
+         */
+        "onBalChange"?: (event: BalTypeaheadCustomEvent<BalEvents.BalTypeaheadChangeDetail>) => void;
+        /**
+          * Emitted when the input has focus.
+         */
+        "onBalFocus"?: (event: BalTypeaheadCustomEvent<BalEvents.BalTypeaheadFocusDetail>) => void;
+        /**
+          * Steps can be passed as a property or through HTML markup.
+         */
+        "options"?: BalOption[];
+        /**
+          * Defines the placeholder of the component. Only shown when the value is empty
+         */
+        "placeholder"?: string;
+        /**
+          * If `true` the element can not mutated, meaning the user can not edit the control.
+         */
+        "readonly"?: boolean;
+        /**
+          * If `true`, the user must fill in a value before submitting a form.
+         */
+        "required"?: boolean;
+        /**
+          * Defines the size of the control.
+         */
+        "size"?: BalProps.BalTypeaheadSize;
+        /**
+          * Defines the color style of the control
+         */
+        "theme"?: BalProps.BalTypeaheadTheme;
+        /**
+          * The value of the selected options.
+         */
+        "value"?: string | string[];
+    }
     interface IntrinsicElements {
         "bal-accordion": BalAccordion;
         "bal-accordion-details": BalAccordionDetails;
@@ -8905,6 +9136,7 @@ declare namespace LocalJSX {
         "bal-time-input": BalTimeInput;
         "bal-toast": BalToast;
         "bal-tooltip": BalTooltip;
+        "bal-typeahead": BalTypeahead;
     }
 }
 export { LocalJSX as JSX };
@@ -9029,6 +9261,13 @@ declare module "@stencil/core" {
             "bal-time-input": LocalJSX.BalTimeInput & JSXBase.HTMLAttributes<HTMLBalTimeInputElement>;
             "bal-toast": LocalJSX.BalToast & JSXBase.HTMLAttributes<HTMLBalToastElement>;
             "bal-tooltip": LocalJSX.BalTooltip & JSXBase.HTMLAttributes<HTMLBalTooltipElement>;
+            /**
+             * TODOS:
+             * Features:
+             * - [ ] option list pagination
+             * - [ ] option list highlight search term
+             */
+            "bal-typeahead": LocalJSX.BalTypeahead & JSXBase.HTMLAttributes<HTMLBalTypeaheadElement>;
         }
     }
 }
diff --git a/packages/core/src/components/bal-dropdown/bal-dropdown.sass b/packages/core/src/components/bal-dropdown/bal-dropdown.sass
index 69300fe7ac..9afb4dbea5 100644
--- a/packages/core/src/components/bal-dropdown/bal-dropdown.sass
+++ b/packages/core/src/components/bal-dropdown/bal-dropdown.sass
@@ -111,7 +111,8 @@
   display: none
   visibility: hidden
   opacity: 0
-  width: 100vw
+  min-width: 100%
+  max-width: 100%
   position: absolute
   top: 0
   left: 0
@@ -123,7 +124,6 @@
   +tablet
     max-width: 100vw
     width: fit-content
-    min-width: 100%
   &--expanded
     display: block
     visibility: visible
diff --git a/packages/core/src/components/bal-dropdown/bal-dropdown.tsx b/packages/core/src/components/bal-dropdown/bal-dropdown.tsx
index 67d84f5307..a3ed7852fe 100644
--- a/packages/core/src/components/bal-dropdown/bal-dropdown.tsx
+++ b/packages/core/src/components/bal-dropdown/bal-dropdown.tsx
@@ -1,49 +1,50 @@
 import {
   Component,
-  h,
   ComponentInterface,
-  Host,
   Element,
-  Prop,
-  State,
-  Watch,
   Event,
   EventEmitter,
+  Host,
   Method,
+  Prop,
+  State,
+  Watch,
+  h,
 } from '@stencil/core'
-import { isArrowDownKey, isArrowUpKey, isEnterKey, isEscapeKey, isSpaceKey } from '../../utils/keyboard'
-import { BEM } from '../../utils/bem'
-import { LogInstance, Loggable, Logger } from '../../utils/log'
-import { stopEventBubbling } from '../../utils/form-input'
 import { Attributes, inheritAttributes } from '../../utils/attributes'
+import { BEM } from '../../utils/bem'
+import { balBrowser } from '../../utils/browser'
+import {
+  BalConfigObserver,
+  BalConfigState,
+  BalLanguage,
+  BalRegion,
+  ListenToConfig,
+  defaultConfig,
+} from '../../utils/config'
 import {
   BalOption,
+  DropdownAutoFillUtil,
   DropdownEventsUtil,
-  DropdownFormSubmit,
-  DropdownFormSubmitUtil,
-  DropdownOptionUtil,
-  DropdownPopupUtil,
-  DropdownValueUtil,
-  DropdownOptionList,
   DropdownFocus,
   DropdownFocusUtil,
+  DropdownFormSubmit,
+  DropdownFormSubmitUtil,
   DropdownIcon,
-  DropdownNativeSelect,
   DropdownInput,
+  DropdownNativeSelect,
+  DropdownOptionList,
+  DropdownOptionUtil,
+  DropdownPopupUtil,
   DropdownValue,
-  DropdownAutoFillUtil,
+  DropdownValueUtil,
 } from '../../utils/dropdown'
-import {
-  BalConfigObserver,
-  BalConfigState,
-  BalLanguage,
-  BalRegion,
-  ListenToConfig,
-  defaultConfig,
-} from '../../utils/config'
+import { DropdownMode } from '../../utils/dropdown/mode'
 import { BalAriaForm, BalAriaFormLinking, defaultBalAriaForm } from '../../utils/form'
+import { stopEventBubbling } from '../../utils/form-input'
 import { addEventListener, removeEventListener, waitAfterIdleCallback } from '../../utils/helpers'
-import { balBrowser } from '../../utils/browser'
+import { isArrowDownKey, isArrowUpKey, isEnterKey, isEscapeKey, isSpaceKey } from '../../utils/keyboard'
+import { LogInstance, Loggable, Logger } from '../../utils/log'
 
 @Component({
   tag: 'bal-dropdown',
@@ -58,6 +59,7 @@ export class Dropdown
   nativeEl: HTMLInputElement | undefined
   selectEl: HTMLSelectElement | undefined
 
+  mode = DropdownMode.Basic
   inputId = `bal-dropdown-${balDropdownIds++}`
   inheritedAttributes: Attributes = {}
   initialValue?: string | string[] = []
@@ -502,6 +504,7 @@ export class Dropdown
           >
             <DropdownValue
               filled={this.valueUtil.isFilled()}
+              mode={this.mode}
               inlineLabel={this.inlineLabel}
               chips={this.chips}
               placeholder={this.placeholder}
@@ -513,10 +516,11 @@ export class Dropdown
             ></DropdownValue>
           </span>
           <DropdownInput
+            mode={this.mode}
             inputId={this.inputId}
             httpFormSubmit={this.httpFormSubmit}
             ariaForm={this.ariaForm}
-            rawValue={this.rawValue}
+            value={this.rawValue.join(', ')}
             autocomplete={this.autocomplete}
             required={this.required}
             disabled={this.disabled}
@@ -556,6 +560,7 @@ export class Dropdown
           ></DropdownIcon>
         </div>
         <DropdownOptionList
+          mode={this.mode}
           inputId={this.inputId}
           block={this.inputId}
           filter={this.filter}
diff --git a/packages/core/src/components/bal-list/bal-list.tsx b/packages/core/src/components/bal-list/bal-list.tsx
index c5c817b51e..94a1716ef1 100644
--- a/packages/core/src/components/bal-list/bal-list.tsx
+++ b/packages/core/src/components/bal-list/bal-list.tsx
@@ -1,4 +1,4 @@
-import { Component, Host, h, Prop, Watch, Element } from '@stencil/core'
+import { Component, Element, h, Host, Prop, Watch } from '@stencil/core'
 import { BEM } from '../../utils/bem'
 
 @Component({
diff --git a/packages/core/src/components/bal-option-list/bal-option-list.i18n.ts b/packages/core/src/components/bal-option-list/bal-option-list.i18n.ts
new file mode 100644
index 0000000000..24bf5e53f1
--- /dev/null
+++ b/packages/core/src/components/bal-option-list/bal-option-list.i18n.ts
@@ -0,0 +1,38 @@
+import { I18n } from '../../interfaces'
+
+interface I18nBalOptionList {
+  noOptions: string
+}
+
+export const I18nBalOptionList: I18n<I18nBalOptionList> = {
+  de: {
+    noOptions: 'Kein Treffer gefunden.',
+  },
+  en: {
+    noOptions: 'No matches found.',
+  },
+  fr: {
+    noOptions: 'Aucun résultat trouvé.',
+  },
+  it: {
+    noOptions: 'Nessun risultato trovato.',
+  },
+  nl: {
+    noOptions: 'Geen resultaat gevonden.',
+  },
+  es: {
+    noOptions: 'No se han encontrado resultados.',
+  },
+  pl: {
+    noOptions: 'Nie znaleziono wyników.',
+  },
+  pt: {
+    noOptions: 'Nenhum resultado encontrado.',
+  },
+  sv: {
+    noOptions: 'Inga träffar hittades.',
+  },
+  fi: {
+    noOptions: 'Tuloksia ei löytynyt.',
+  },
+}
diff --git a/packages/core/src/components/bal-option-list/bal-option-list.sass b/packages/core/src/components/bal-option-list/bal-option-list.sass
index 1da128cbf1..8164ff9f95 100644
--- a/packages/core/src/components/bal-option-list/bal-option-list.sass
+++ b/packages/core/src/components/bal-option-list/bal-option-list.sass
@@ -13,3 +13,13 @@
   max-height: var(--bal-option-list-max-height)
   border-radius: var(--bal-radius-normal)
   overflow: hidden auto
+
+.bal-option-list__no-options
+  color: var(--bal-color-text-primary-light)
+  display: flex
+  justify-content: flex-start
+  align-items: center
+  min-height: 2.5rem
+  padding-left: var(--bal-option-padding-x)
+  padding-right: calc(var(--bal-option-padding-x) + var(--bal-option-padding-x))
+  user-select: none
diff --git a/packages/core/src/components/bal-option-list/bal-option-list.tsx b/packages/core/src/components/bal-option-list/bal-option-list.tsx
index 3f57755987..1556fb8283 100644
--- a/packages/core/src/components/bal-option-list/bal-option-list.tsx
+++ b/packages/core/src/components/bal-option-list/bal-option-list.tsx
@@ -1,13 +1,15 @@
-import { Component, h, ComponentInterface, Host, Element, Prop, Watch, Method, State, Listen } from '@stencil/core'
+import { Component, ComponentInterface, Element, h, Host, Listen, Method, Prop, State, Watch } from '@stencil/core'
 import isNil from 'lodash.isnil'
+import { ariaBooleanToString } from '../../utils/aria'
 import { Attributes, inheritAttributes } from '../../utils/attributes'
 import { BEM } from '../../utils/bem'
+import { BalConfigState, BalLanguage, BalRegion, defaultConfig, ListenToConfig } from '../../utils/config'
+import { BalOption } from '../../utils/dropdown'
+import { BalAriaForm, defaultBalAriaForm } from '../../utils/form'
 import { raf, waitAfterFramePaint } from '../../utils/helpers'
 import { Loggable, Logger, LogInstance } from '../../utils/log'
 import { includes, startsWith } from '../bal-select/utils/utils'
-import { BalAriaForm, defaultBalAriaForm } from '../../utils/form'
-import { BalOption } from '../../utils/dropdown'
-import { ariaBooleanToString } from '../../utils/aria'
+import { I18nBalOptionList } from './bal-option-list.i18n'
 
 @Component({
   tag: 'bal-option-list',
@@ -23,7 +25,10 @@ export class OptionList implements ComponentInterface, Loggable {
 
   log!: LogInstance
 
+  @State() noOptions = false
   @State() ariaForm: BalAriaForm = defaultBalAriaForm
+  @State() language: BalLanguage = defaultConfig.language
+  @State() region: BalRegion = defaultConfig.region
 
   @Logger('bal-option-list')
   createLogger(log: LogInstance) {
@@ -95,6 +100,16 @@ export class OptionList implements ComponentInterface, Loggable {
    * ------------------------------------------------------
    */
 
+  /**
+   * @internal define config for the component
+   */
+  @Method()
+  @ListenToConfig()
+  async configChanged(state: BalConfigState): Promise<void> {
+    this.language = state.language
+    this.region = state.region
+  }
+
   @Listen('balOptionFocus', { passive: true })
   listenToMouseEnter(ev: BalEvents.BalOptionFocus) {
     const options = this.options
@@ -270,7 +285,7 @@ export class OptionList implements ComponentInterface, Loggable {
    * Returns a list of option values
    */
   @Method() async getSelectedValues(): Promise<string[]> {
-    const options = this.options
+    const options = this.allOptions
     return options.filter(option => option.selected).map(option => option.value)
   }
 
@@ -278,7 +293,7 @@ export class OptionList implements ComponentInterface, Loggable {
    * Returns a list of option labels
    */
   @Method() async getSelectedOptions(values?: string[]): Promise<BalOption[]> {
-    const options = this.options
+    const options = this.allOptions
     if (values && values.length > 0) {
       return options.filter(option => values.includes(option.value)).map(option => option)
     }
@@ -289,21 +304,21 @@ export class OptionList implements ComponentInterface, Loggable {
    * Returns a list of options
    */
   @Method() async getValues(): Promise<string[]> {
-    return this.options.map(option => option.value)
+    return this.allOptions.map(option => option.value)
   }
 
   /**
    * Returns a list of options
    */
   @Method() async getLabels(): Promise<string[]> {
-    return this.options.map(option => option.label)
+    return this.allOptions.map(option => option.label)
   }
 
   /**
    * Returns a list of accessible options
    */
   @Method() async getOptions(): Promise<BalOption[]> {
-    return this.options.filter(o => !o.disabled || !o.hidden)
+    return this.allOptions.filter(o => !o.disabled)
   }
 
   /**
@@ -364,6 +379,7 @@ export class OptionList implements ComponentInterface, Loggable {
       }
     }
 
+    this.noOptions = filteredOptions.length === 0
     return filteredOptions
   }
 
@@ -554,6 +570,18 @@ export class OptionList implements ComponentInterface, Loggable {
           {...this.inheritAttributes}
         >
           <slot />
+
+          {this.noOptions ? (
+            <div
+              class={{
+                ...block.element('no-options').class(),
+              }}
+            >
+              {I18nBalOptionList[this.language].noOptions}
+            </div>
+          ) : (
+            ''
+          )}
         </div>
       </Host>
     )
diff --git a/packages/core/src/components/bal-option/bal-option.sass b/packages/core/src/components/bal-option/bal-option.sass
index f4eb7d0d36..22252e7a5d 100644
--- a/packages/core/src/components/bal-option/bal-option.sass
+++ b/packages/core/src/components/bal-option/bal-option.sass
@@ -15,7 +15,7 @@
   border-bottom-style: solid
   background: var(--bal-option-background)
   padding-left: var(--bal-option-padding-x)
-  padding-right: var(--bal-option-padding-x)
+  padding-right: calc(var(--bal-option-padding-x) + var(--bal-option-padding-x))
   min-height: var(--bal-option-min-height)
   & > bal-stack
     min-height: var(--bal-option-min-height)
diff --git a/packages/core/src/components/bal-typeahead/bal-typeahead.interfaces.ts b/packages/core/src/components/bal-typeahead/bal-typeahead.interfaces.ts
new file mode 100644
index 0000000000..df84f5e316
--- /dev/null
+++ b/packages/core/src/components/bal-typeahead/bal-typeahead.interfaces.ts
@@ -0,0 +1,25 @@
+/* eslint-disable no-unused-vars */
+/* eslint-disable @typescript-eslint/no-unused-vars */
+// eslint-disable-next-line @typescript-eslint/triple-slash-reference
+/// <reference path="../../interfaces.d.ts" />
+
+namespace BalProps {
+  export type BalTypeaheadSize = '' | 'small'
+  export type BalTypeaheadTheme = '' | 'purple'
+}
+
+namespace BalEvents {
+  export interface BalTypeaheadCustomEvent<T> extends CustomEvent<T> {
+    detail: T
+    target: any // HTMLBalTypeaheadElement
+  }
+
+  export type BalTypeaheadChangeDetail = string | string[]
+  export type BalTypeaheadChange = BalTypeaheadCustomEvent<BalTypeaheadChangeDetail>
+
+  export type BalTypeaheadBlurDetail = FocusEvent
+  export type BalTypeaheadBlur = BalTypeaheadCustomEvent<BalTypeaheadBlurDetail>
+
+  export type BalTypeaheadFocusDetail = FocusEvent
+  export type BalTypeaheadFocus = BalTypeaheadCustomEvent<BalTypeaheadFocusDetail>
+}
diff --git a/packages/core/src/components/bal-typeahead/bal-typeahead.sass b/packages/core/src/components/bal-typeahead/bal-typeahead.sass
new file mode 100644
index 0000000000..f8bf77fe55
--- /dev/null
+++ b/packages/core/src/components/bal-typeahead/bal-typeahead.sass
@@ -0,0 +1,16 @@
+@use '../bal-dropdown/bal-dropdown' as *
+@use './bal-typeahead.vars' as *
+
+.bal-dropdown__root__input--typeahead
+  position: static
+  appearance: textfield
+  opacity: 1
+  flex: 1
+  width: 100%
+  min-height: 1.5rem
+  padding-left: 0
+  padding-right: 0
+
+
+.bal-dropdown__list--typeahead
+  width: 100%
diff --git a/packages/core/src/components/bal-typeahead/bal-typeahead.tsx b/packages/core/src/components/bal-typeahead/bal-typeahead.tsx
new file mode 100644
index 0000000000..4d09790853
--- /dev/null
+++ b/packages/core/src/components/bal-typeahead/bal-typeahead.tsx
@@ -0,0 +1,596 @@
+import {
+  Component,
+  ComponentInterface,
+  Element,
+  Event,
+  EventEmitter,
+  Host,
+  Method,
+  Prop,
+  State,
+  Watch,
+  h,
+} from '@stencil/core'
+import { Attributes, inheritAttributes } from '../../utils/attributes'
+import { BEM } from '../../utils/bem'
+import { balBrowser } from '../../utils/browser'
+import {
+  BalConfigObserver,
+  BalConfigState,
+  BalLanguage,
+  BalRegion,
+  ListenToConfig,
+  defaultConfig,
+} from '../../utils/config'
+import {
+  BalOption,
+  DropdownAutoFillUtil,
+  DropdownEventsUtil,
+  DropdownFocus,
+  DropdownFocusUtil,
+  DropdownFormSubmit,
+  DropdownFormSubmitUtil,
+  DropdownIcon,
+  DropdownInput,
+  DropdownNativeSelect,
+  DropdownOptionList,
+  DropdownOptionUtil,
+  DropdownPopupUtil,
+  DropdownValue,
+  DropdownValueUtil,
+} from '../../utils/dropdown'
+import { DropdownMode } from '../../utils/dropdown/mode'
+import { BalAriaForm, BalAriaFormLinking, defaultBalAriaForm } from '../../utils/form'
+import { stopEventBubbling } from '../../utils/form-input'
+import { addEventListener, removeEventListener, waitAfterIdleCallback } from '../../utils/helpers'
+import { isArrowDownKey, isArrowUpKey, isEnterKey, isEscapeKey, isSpaceKey } from '../../utils/keyboard'
+import { LogInstance, Loggable, Logger } from '../../utils/log'
+
+/**
+ * TODOS:
+ *
+ * Features:
+ * - [ ] option list pagination
+ * - [ ] option list highlight search term
+ */
+
+@Component({
+  tag: 'bal-typeahead',
+  styleUrl: 'bal-typeahead.sass',
+})
+export class Typeahead
+  implements ComponentInterface, Loggable, BalConfigObserver, BalAriaFormLinking, DropdownFormSubmit, DropdownFocus
+{
+  @Element() el!: HTMLElement
+  panelEl: HTMLDivElement | undefined
+  listEl: HTMLBalOptionListElement | undefined
+  nativeEl: HTMLInputElement | undefined
+  selectEl: HTMLSelectElement | undefined
+
+  mode = DropdownMode.Typeahead
+  inputId = `bal-typeahead-${balTypeaheadIds++}`
+  inheritedAttributes: Attributes = {}
+  initialValue?: string | string[] = []
+  nativeOptions: string[] = []
+  chips = true
+
+  @State() rawOptions: BalOption[] = []
+  @State() choices: BalOption[] = []
+  @State() rawValue: string[] = []
+  @State() typeaheadValue = ''
+  @State() hasFocus = false
+  @State() isExpanded = false
+  @State() isAutoFilled = false
+  @State() isKeyboardMode = false
+  @State() inputLabel = ''
+  @State() ariaForm: BalAriaForm = defaultBalAriaForm
+  @State() language: BalLanguage = defaultConfig.language
+  @State() region: BalRegion = defaultConfig.region
+  @State() httpFormSubmit: boolean = defaultConfig.httpFormSubmit
+  @State() labelToFocus = ''
+
+  valueUtil = new DropdownValueUtil()
+  eventsUtil = new DropdownEventsUtil()
+  popupUtil = new DropdownPopupUtil()
+  optionUtil = new DropdownOptionUtil()
+  formSubmitUtil = new DropdownFormSubmitUtil()
+  focusUtil = new DropdownFocusUtil()
+  autoFillUtil = new DropdownAutoFillUtil()
+
+  log!: LogInstance
+
+  @Logger('bal-typeahead')
+  createLogger(log: LogInstance) {
+    this.log = log
+  }
+
+  /**
+   * PUBLIC PROPERTY API
+   * ------------------------------------------------------
+   */
+
+  /**
+   * Indicates whether the value of the control can be automatically completed by the browser.
+   */
+  @Prop() autocomplete: BalProps.BalInputAutocomplete = 'off'
+
+  /**
+   * The name of the control, which is submitted with the form data.
+   */
+  @Prop() name: string = this.inputId
+
+  /**
+   * Defines the placeholder of the component. Only shown when the value is empty
+   */
+  @Prop() placeholder = ''
+
+  /**
+   * Defines a inline label to be shown before the value
+   */
+  @Prop() inlineLabel = ''
+
+  /**
+   * If `true` there will be on trigger icon visible
+   */
+  @Prop() icon = 'caret-down'
+
+  /**
+   * Defines the size of the control.
+   */
+  @Prop() size: BalProps.BalTypeaheadSize = ''
+
+  /**
+   * Defines the color style of the control
+   */
+  @Prop() theme: BalProps.BalTypeaheadTheme = ''
+
+  /**
+   * If `true`, the user cannot interact with the option.
+   */
+  @Prop() disabled = false
+
+  /**
+   * If `true` the element can not mutated, meaning the user can not edit the control.
+   */
+  @Prop() readonly = false
+
+  /**
+   * If `true`, the user can select multiple options.
+   */
+  @Prop() multiple = false
+
+  /**
+   * If `true`, a cross at the end is visible to clear the selection
+   */
+  @Prop() clearable = false
+
+  /**
+   * If `true`, the component will be shown as invalid
+   */
+  @Prop() invalid = false
+
+  /**
+   * If `true`, the user must fill in a value before submitting a form.
+   */
+  @Prop() required = false
+
+  /**
+   * Defines if the select is in a loading state.
+   */
+  @Prop() loading = false
+
+  /**
+   * Defines the filter logic of the list
+   */
+  @Prop() filter: BalProps.BalOptionListFilter = 'includes'
+
+  /**
+   * Defines the max height of the list element
+   */
+  @Prop() contentHeight = 262
+
+  /**
+   * @internal
+   * Set this to `true` when the component is placed on a dark background.
+   */
+  @Prop() inverted = false
+
+  /**
+   * Steps can be passed as a property or through HTML markup.
+   */
+  @Prop() options: BalOption[] = []
+  @Watch('options')
+  protected async optionChanged() {
+    this.optionUtil.optionChanged()
+  }
+
+  /**
+   * The value of the selected options.
+   */
+  @Prop() value?: string | string[] = []
+  @Watch('value')
+  valueChanged(newValue: string | string[] | undefined, oldValue: string | string[] | undefined) {
+    this.valueUtil.valueChanged(newValue, oldValue)
+  }
+
+  /**
+   * Emitted when a option got selected.
+   */
+  @Event() balChange!: EventEmitter<BalEvents.BalTypeaheadChangeDetail>
+
+  /**
+   * Emitted when the input has focus.
+   */
+  @Event() balFocus!: EventEmitter<BalEvents.BalTypeaheadFocusDetail>
+
+  /**
+   * Emitted when the input loses focus.
+   */
+  @Event() balBlur!: EventEmitter<BalEvents.BalTypeaheadBlurDetail>
+
+  /**
+   * LIFECYCLE
+   * ------------------------------------------------------
+   */
+  hasConnected = false
+  connectedCallback(): void {
+    if (!this.hasConnected) {
+      this.eventsUtil.connectedCallback(this)
+      this.valueUtil.connectedCallback(this)
+      this.popupUtil.connectedCallback(this)
+      this.optionUtil.connectedCallback(this)
+      this.formSubmitUtil.connectedCallback(this)
+      this.focusUtil.connectedCallback(this)
+      this.autoFillUtil.connectedCallback(this)
+    }
+
+    addEventListener(this.el, 'balOptionChange', this.listenToOptionChange)
+
+    if (balBrowser.hasDocument) {
+      addEventListener(document, 'keydown', this.eventsUtil.handleKeydown)
+      addEventListener(document, 'touchstart', this.eventsUtil.handlePointerDown)
+      addEventListener(document, 'mousedown', this.eventsUtil.handlePointerDown)
+      addEventListener(document, 'click', this.listenOnClickOutside)
+      addEventListener(document, 'reset', this.resetHandler, {
+        capture: true,
+      })
+    }
+
+    this.hasConnected = true
+  }
+
+  disconnectedCallback(): void {
+    removeEventListener(this.el, 'balOptionChange', this.listenToOptionChange)
+
+    if (balBrowser.hasDocument) {
+      removeEventListener(document, 'keydown', this.eventsUtil.handleKeydown)
+      removeEventListener(document, 'touchstart', this.eventsUtil.handlePointerDown)
+      removeEventListener(document, 'mousedown', this.eventsUtil.handlePointerDown)
+      removeEventListener(document, 'click', this.listenOnClickOutside)
+      removeEventListener(document, 'reset', this.resetHandler, {
+        capture: true,
+      })
+    }
+  }
+
+  async componentWillRender() {
+    this.inheritedAttributes = inheritAttributes(this.el, ['tabindex'])
+    await this.optionUtil.componentWillRender()
+  }
+
+  componentDidRender() {
+    this.formSubmitUtil.componentDidRender()
+  }
+
+  componentDidLoad(): void {
+    this.valueUtil.componentDidLoad()
+  }
+
+  /**
+   * LISTENERS
+   * ------------------------------------------------------
+   */
+
+  /**
+   * @internal define config for the component
+   */
+  @Method()
+  @ListenToConfig()
+  async configChanged(state: BalConfigState): Promise<void> {
+    this.language = state.language
+    this.region = state.region
+    this.httpFormSubmit = state.httpFormSubmit
+  }
+
+  listenToOptionChange = (ev: BalEvents.BalOptionChange) => {
+    this.optionUtil.listenToOptionChange(ev)
+  }
+
+  listenOnClickOutside = (ev: UIEvent) => {
+    this.eventsUtil.handleOutsideClick(ev)
+  }
+
+  resetHandler = (ev: UIEvent) => {
+    this.formSubmitUtil.handle(ev)
+  }
+
+  /**
+   * PUBLIC METHODS
+   * ------------------------------------------------------
+   */
+
+  /**
+   * Sets the focus on the input element
+   */
+  @Method()
+  async setFocus() {
+    if (this.nativeEl && !this.valueUtil.isDisabled()) {
+      await waitAfterIdleCallback()
+      this.nativeEl.focus()
+    }
+  }
+
+  /**
+   * Returns the value of the component
+   */
+  @Method()
+  async getValue() {
+    return this.rawValue
+  }
+
+  /**
+   * Sets the value to `[]`, the input value to ´''´ and the focus index to ´0´.
+   */
+  @Method()
+  async clear() {
+    this.nativeEl.value = ''
+    this.valueUtil.updateRawValueBySelection([])
+  }
+
+  /**
+   * Opens the popup with option list
+   */
+  @Method()
+  async open(): Promise<void> {
+    if (!this.valueUtil.isDisabled() && this.panelEl) {
+      await this.popupUtil.expandList()
+    }
+  }
+
+  /**
+   * Closes the popup with option list
+   */
+  @Method()
+  async close(): Promise<void> {
+    if (!this.valueUtil.isDisabled() && this.panelEl) {
+      await this.popupUtil.collapseList()
+    }
+  }
+
+  /**
+   * Select option by passed value
+   */
+  @Method()
+  async select(newValue: string | string[]): Promise<void> {
+    const parsedNewValue = this.valueUtil.parseValueString(newValue)
+    this.valueUtil.updateRawValueBySelection(parsedNewValue)
+  }
+
+  /**
+   * @internal
+   */
+  @Method()
+  async setAriaForm(ariaForm: BalAriaForm): Promise<void> {
+    this.ariaForm = { ...ariaForm }
+  }
+
+  /**
+   * EVENT BINDING
+   * ------------------------------------------------------
+   */
+  handleAutoFill = async (ev: Event) => {
+    this.log('(handleAutoFill)', ev, this.nativeEl?.value)
+    this.autoFillUtil.handleAutoFill(ev)
+  }
+
+  handleInput = async (ev: InputEvent) => {
+    stopEventBubbling(ev)
+    const value = this.nativeEl.value.trim()
+    if (value) {
+      this.listEl?.filterByContent(value)
+      this.typeaheadValue = value
+    }
+    this.popupUtil.expandList()
+  }
+
+  handleKeyDown = (ev: KeyboardEvent) => {
+    if (ev && ev.key) {
+      if (this.isExpanded) {
+        /**
+         * ⬇️ Arrow up key
+         */
+        if (isArrowDownKey(ev)) {
+          stopEventBubbling(ev)
+          this.listEl?.focusNext()
+          /**
+           * ⬆️ Arrow up key
+           */
+        } else if (isArrowUpKey(ev)) {
+          stopEventBubbling(ev)
+          this.listEl?.focusPrevious()
+          /**
+           * Go to top of the list
+           */
+        } else if (ev.key === 'Home' || ev.key === 'PageUp') {
+          stopEventBubbling(ev)
+          this.listEl?.focusFirst()
+          /**
+           * Go to bottom of the list
+           */
+        } else if (ev.key === 'End' || ev.key === 'PageDown') {
+          stopEventBubbling(ev)
+          this.listEl?.focusLast()
+          /**
+           * Select focused option
+           */
+        } else if (isEnterKey(ev)) {
+          stopEventBubbling(ev)
+          this.listEl?.selectByFocus()
+          /**
+           * Close list
+           */
+        } else if (ev.key === 'Tab' || isEscapeKey(ev)) {
+          this.popupUtil.collapseList()
+        }
+      } else {
+        /**
+         * Open list
+         */
+        if (isEnterKey(ev) || isSpaceKey(ev)) {
+          stopEventBubbling(ev)
+          this.popupUtil.expandList()
+        }
+      }
+    } else {
+      // Close the popup on autofill
+      if (this.isExpanded) {
+        this.popupUtil.collapseList()
+      }
+    }
+  }
+
+  /**
+   * RENDER
+   * ------------------------------------------------------
+   */
+
+  render() {
+    const block = BEM.block('dropdown')
+
+    const isFilled = this.valueUtil.isFilled()
+
+    const hasSize = this.size !== ''
+    const size = `size-${this.size}`
+
+    const hasTheme = this.theme !== ''
+    const theme = `theme-${this.theme}`
+
+    const focused = this.theme === 'purple' ? this.hasFocus && this.isKeyboardMode : this.hasFocus
+
+    return (
+      <Host class={{ ...block.class() }} tabindex="-1" id={`${this.inputId}`}>
+        <div
+          class={{
+            ...block.element('root').class(),
+            ...block
+              .element('root')
+              .modifier('typeahead')
+              .class(this.mode === DropdownMode.Typeahead),
+            ...block.element('root').modifier('focused').class(focused),
+            ...block.element('root').modifier('invalid').class(this.invalid),
+            ...block.element('root').modifier('disabled').class(this.valueUtil.isDisabled()),
+            ...block.element('root').modifier('autofill').class(this.isAutoFilled),
+            ...block.element('root').modifier(size).class(hasSize),
+            ...block.element('root').modifier(theme).class(hasTheme),
+            ...block
+              .element('root')
+              .modifier(theme + '-filled')
+              .class(isFilled && hasTheme),
+            ...block
+              .element('root')
+              .modifier(theme + '-expanded')
+              .class(this.isExpanded && hasTheme),
+          }}
+          data-test="bal-dropdown-trigger"
+          onClick={ev => this.eventsUtil.handleClick(ev)}
+        >
+          <span
+            class={{
+              ...block.element('root').element('content').class(),
+              ...block.element('root').element('content').modifier('disabled').class(this.valueUtil.isDisabled()),
+              ...block.element('root').element('content').modifier('placeholder').class(!this.valueUtil.isFilled()),
+              ...block.element('root').element('content').modifier(size).class(hasSize),
+            }}
+          >
+            <DropdownValue
+              filled={this.valueUtil.isFilled()}
+              mode={this.mode}
+              inlineLabel={this.inlineLabel}
+              chips={this.multiple}
+              placeholder={this.placeholder}
+              choices={this.choices}
+              invalid={this.invalid}
+              disabled={this.disabled}
+              readonly={this.readonly}
+              onRemoveChip={option => this.valueUtil.removeOption(option)}
+            >
+              <DropdownInput
+                mode={this.mode}
+                inputId={this.inputId}
+                httpFormSubmit={this.httpFormSubmit}
+                ariaForm={this.ariaForm}
+                value={this.typeaheadValue}
+                autocomplete={this.autocomplete}
+                required={this.required}
+                disabled={this.disabled}
+                readonly={this.readonly}
+                placeholder={(this.disabled || this.readonly) && this.choices.length > 0 ? '' : this.placeholder}
+                expanded={this.isExpanded}
+                invalid={this.invalid}
+                language={this.language}
+                inputLabel={this.inputLabel}
+                inheritedAttributes={this.inheritedAttributes}
+                refInputEl={el => (this.nativeEl = el)}
+                onInput={ev => this.handleInput(ev)}
+                onChange={ev => this.handleAutoFill(ev)}
+                onFocus={ev => this.eventsUtil.handleFocus(ev)}
+                onBlur={ev => this.eventsUtil.handleBlur(ev)}
+                onKeyDown={ev => this.handleKeyDown(ev)}
+              ></DropdownInput>
+            </DropdownValue>
+          </span>
+          <DropdownNativeSelect
+            name={this.name}
+            httpFormSubmit={this.httpFormSubmit}
+            multiple={this.multiple}
+            required={this.required}
+            disabled={this.valueUtil.isDisabled()}
+            rawValue={this.rawValue}
+            refSelectEl={el => (el ? (this.selectEl = el) : void 0)}
+          ></DropdownNativeSelect>
+          <DropdownIcon
+            icon={this.icon}
+            size={this.size}
+            theme={this.theme}
+            language={this.language}
+            loading={this.loading}
+            clearable={this.clearable}
+            invalid={this.invalid}
+            expanded={this.isExpanded}
+            filled={isFilled}
+            disabled={this.valueUtil.isDisabled()}
+          ></DropdownIcon>
+        </div>
+        <DropdownOptionList
+          mode={this.mode}
+          inputId={this.inputId}
+          block={this.inputId}
+          filter={this.filter}
+          required={this.required}
+          isExpanded={this.isExpanded}
+          isDisabled={this.valueUtil.isDisabled()}
+          hasPropOptions={this.optionUtil.hasPropOptions()}
+          multiple={this.multiple}
+          contentHeight={this.contentHeight}
+          rawOptions={this.rawOptions}
+          refPanelEl={el => (el ? (this.panelEl = el) : void 0)}
+          refListEl={el => (el ? (this.listEl = el) : void 0)}
+        >
+          <slot></slot>
+        </DropdownOptionList>
+      </Host>
+    )
+  }
+}
+
+let balTypeaheadIds = 0
diff --git a/packages/core/src/components/bal-typeahead/bal-typeahead.vars.sass b/packages/core/src/components/bal-typeahead/bal-typeahead.vars.sass
new file mode 100644
index 0000000000..8b13789179
--- /dev/null
+++ b/packages/core/src/components/bal-typeahead/bal-typeahead.vars.sass
@@ -0,0 +1 @@
+
diff --git a/packages/core/src/components/bal-typeahead/test/bal-typeahead.a11y.html b/packages/core/src/components/bal-typeahead/test/bal-typeahead.a11y.html
new file mode 100644
index 0000000000..f3920a70de
--- /dev/null
+++ b/packages/core/src/components/bal-typeahead/test/bal-typeahead.a11y.html
@@ -0,0 +1,34 @@
+<!doctype html>
+<html dir="ltr" lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
+
+    <script type="module" src="/build/baloise-design-system.esm.js"></script>
+    <script nomodule src="/build/baloise-design-system.js"></script>
+  </head>
+
+  <body>
+    <bal-doc-app>
+      <main class="container py-medium">
+        <bal-form-grid>
+          <bal-form-col>
+            <bal-field required>
+              <bal-field-label>Year</bal-field-label>
+              <bal-field-control>
+                <bal-typeahead value="v1988">
+                  <bal-option value="v1988" label="1988">1988</bal-option>
+                  <bal-option value="v1989" label="1989">1989</bal-option>
+                  <bal-option value="v1990" label="1990">1990</bal-option>
+                  <bal-option value="v1991" label="1991">1991</bal-option>
+                  <bal-option value="v1992" label="1992">1992</bal-option>
+                </bal-typeahead>
+              </bal-field-control>
+            </bal-field>
+          </bal-form-col>
+        </bal-form-grid>
+      </main>
+    </bal-doc-app>
+  </body>
+</html>
diff --git a/packages/core/src/components/bal-typeahead/test/bal-typeahead.auto-fill.html b/packages/core/src/components/bal-typeahead/test/bal-typeahead.auto-fill.html
new file mode 100644
index 0000000000..7f16d3dab5
--- /dev/null
+++ b/packages/core/src/components/bal-typeahead/test/bal-typeahead.auto-fill.html
@@ -0,0 +1,59 @@
+<!doctype html>
+<html dir="ltr" lang="en" class="bg-green-2">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
+    <style>
+      section {
+        margin-bottom: 4rem;
+      }
+    </style>
+    <script type="module" src="/build/baloise-design-system.esm.js"></script>
+    <script nomodule src="/build/baloise-design-system.js"></script>
+  </head>
+
+  <body>
+    <bal-doc-app log-components="bal-typeahead">
+      <main class="container py-medium">
+        <h2 class="title text-large">Autocomplete</h2>
+        <section>
+          <form action="https://www.w3schools.com/action_page.php" target="_blank">
+            <bal-form-grid>
+              <bal-form-col>
+                <bal-field>
+                  <bal-field-label>First Name</bal-field-label>
+                  <bal-field-control>
+                    <bal-input name="firstName" autocomplete="given-name"></bal-input>
+                  </bal-field-control>
+                </bal-field>
+              </bal-form-col>
+              <bal-form-col>
+                <bal-field>
+                  <bal-field-label>Last Name</bal-field-label>
+                  <bal-field-control>
+                    <bal-input name="lastName" autocomplete="family-name"></bal-input>
+                  </bal-field-control>
+                </bal-field>
+              </bal-form-col>
+              <bal-form-col>
+                <bal-field>
+                  <bal-field-label>Country</bal-field-label>
+                  <bal-field-control>
+                    <bal-typeahead name="country" autocomplete="country">
+                      <bal-option value="CH" label="Switzerland">Switzerland</bal-option>
+                      <bal-option value="DE" label="Germany">Germany</bal-option>
+                      <bal-option value="IT" label="Italy">Italy</bal-option>
+                    </bal-typeahead>
+                  </bal-field-control>
+                </bal-field>
+              </bal-form-col>
+            </bal-form-grid>
+            <input type="reset" value="Reset" />
+            <input type="submit" value="Submit" />
+          </form>
+        </section>
+      </main>
+    </bal-doc-app>
+  </body>
+</html>
diff --git a/packages/core/src/components/bal-typeahead/test/bal-typeahead.cy.html b/packages/core/src/components/bal-typeahead/test/bal-typeahead.cy.html
new file mode 100644
index 0000000000..f3d4b16bb1
--- /dev/null
+++ b/packages/core/src/components/bal-typeahead/test/bal-typeahead.cy.html
@@ -0,0 +1,221 @@
+<!doctype html>
+<html dir="ltr" lang="en" class="bg-green-2">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
+    <style>
+      section {
+        margin-bottom: 4rem;
+      }
+    </style>
+    <script type="module" src="/build/baloise-design-system.esm.js"></script>
+    <script nomodule src="/build/baloise-design-system.js"></script>
+  </head>
+
+  <body>
+    <bal-doc-app log-components="bal-typeaheadd">
+      <main class="container py-medium">
+        <h2 class="title text-large">Basic</h2>
+        <section>
+          <bal-typeahead data-testid="basic" placeholder="Select a hero" value="Gamora">
+            <bal-option value="IronMan" label="Iron Man">Iron Man</bal-option>
+            <bal-option value="CaptainAmerica" label="Captain America">Captain America</bal-option>
+            <bal-option value="Thor" label="Thor">Thor</bal-option>
+            <bal-option value="Hulk" label="Hulk">Hulk</bal-option>
+            <bal-option value="BlackWidow" label="Black Widow">Black Widow</bal-option>
+            <bal-option value="Hawkeye" label="Hawkeye">Hawkeye</bal-option>
+            <bal-option value="SpiderMan" label="Spider-Man">Spider-Man</bal-option>
+            <bal-option value="BlackPanther" label="Black Panther">Black Panther</bal-option>
+            <bal-option value="DoctorStrange" label="Doctor Strange">Doctor Strange</bal-option>
+            <bal-option value="ScarletWitch" label="Scarlet Witch">Scarlet Witch</bal-option>
+            <bal-option value="Vision" label="Vision">Vision</bal-option>
+            <bal-option value="Falcon" label="Falcon">Falcon</bal-option>
+            <bal-option value="WinterSoldier" label="Winter Soldier">Winter Soldier</bal-option>
+            <bal-option value="AntMan" label="Ant-Man">Ant-Man</bal-option>
+            <bal-option value="Wasp" label="Wasp">Wasp</bal-option>
+            <bal-option value="StarLord" label="Star-Lord">Star-Lord</bal-option>
+            <bal-option value="Gamora" label="Gamora">Gamora</bal-option>
+            <bal-option value="Drax" label="Drax">Drax</bal-option>
+            <bal-option value="Groot" label="Groot">Groot</bal-option>
+            <bal-option value="Rocket" label="Rocket">Rocket</bal-option>
+          </bal-typeahead>
+
+          <bal-typeahead
+            data-testid="basic-filled"
+            placeholder="Select a hero"
+            value="BlackPanther, CaptainAmerica, WinterSoldier, ScarletWitch, SpiderMan"
+            clearable
+            multiple
+            chips
+          >
+            <bal-option value="IronMan" label="Iron Man">Iron Man</bal-option>
+            <bal-option value="CaptainAmerica" label="Captain America">Captain America</bal-option>
+            <bal-option value="Thor" label="Thor">Thor</bal-option>
+            <bal-option value="Hulk" label="Hulk">Hulk</bal-option>
+            <bal-option value="BlackWidow" label="Black Widow">Black Widow</bal-option>
+            <bal-option value="Hawkeye" label="Hawkeye">Hawkeye</bal-option>
+            <bal-option value="SpiderMan" label="Spider-Man">Spider-Man</bal-option>
+            <bal-option value="BlackPanther" label="Black Panther">Black Panther</bal-option>
+            <bal-option value="DoctorStrange" label="Doctor Strange">Doctor Strange</bal-option>
+            <bal-option value="ScarletWitch" label="Scarlet Witch">Scarlet Witch</bal-option>
+            <bal-option value="Vision" label="Vision">Vision</bal-option>
+            <bal-option value="Falcon" label="Falcon">Falcon</bal-option>
+            <bal-option value="WinterSoldier" label="Winter Soldier">Winter Soldier</bal-option>
+            <bal-option value="AntMan" label="Ant-Man">Ant-Man</bal-option>
+            <bal-option value="Wasp" label="Wasp">Wasp</bal-option>
+            <bal-option value="StarLord" label="Star-Lord">Star-Lord</bal-option>
+            <bal-option value="Gamora" label="Gamora">Gamora</bal-option>
+            <bal-option value="Drax" label="Drax">Drax</bal-option>
+            <bal-option value="Groot" label="Groot">Groot</bal-option>
+            <bal-option value="Rocket" label="Rocket">Rocket</bal-option>
+          </bal-typeahead>
+
+          <bal-typeahead data-testid="disabled" disabled placeholder="Select a hero" value="Gamora">
+            <bal-option value="StarLord" label="Star-Lord">Star-Lord</bal-option>
+            <bal-option value="Gamora" label="Gamora">Gamora</bal-option>
+            <bal-option value="Drax" label="Drax">Drax</bal-option>
+            <bal-option value="Groot" label="Groot">Groot</bal-option>
+            <bal-option value="Rocket" label="Rocket">Rocket</bal-option>
+          </bal-typeahead>
+        </section>
+        <h2 class="title text-large">Required</h2>
+        <section>
+          <bal-typeahead data-testid="required" placeholder="Select a hero" value="Gamora" required>
+            <bal-option value="StarLord" label="Star-Lord">Star-Lord</bal-option>
+            <bal-option value="Gamora" label="Gamora">Gamora</bal-option>
+            <bal-option value="Drax" label="Drax">Drax</bal-option>
+            <bal-option value="Groot" label="Groot">Groot</bal-option>
+            <bal-option value="Rocket" label="Rocket">Rocket</bal-option>
+          </bal-typeahead>
+        </section>
+        <h2 class="title text-large">Multiple</h2>
+        <section>
+          <bal-typeahead multiple chips placeholder="Try finding your hero" data-testid="multiple">
+            <bal-option value="BlackWidow" label="Black Widow">
+              <b style="display: block">Black Widow</b>
+              <span>S.H.I.E.L.D.</span>
+            </bal-option>
+            <bal-option value="BlackPanter" label="Black Panter">
+              <b style="display: block">Black Panter</b>
+              <span>Wakanda</span>
+            </bal-option>
+            <bal-option value="IronMan" label="Iron Man">
+              <b style="display: block">Iron Man</b>
+              <span>Malibu</span>
+            </bal-option>
+            <bal-option value="SpiderMan" label="Spider Man">
+              <b style="display: block">Spider Man</b>
+              <span>Queens</span>
+            </bal-option>
+            <bal-option value="CaptainAmerica" label="Captain America">
+              <b style="display: block">Captain America</b>
+              <span>Broklyn</span>
+            </bal-option>
+            <bal-option value="Thor" label="Thor God of Thunder">
+              <b style="display: block">Thor God of Thunder</b>
+              <span>Asgard</span>
+            </bal-option>
+          </bal-typeahead>
+        </section>
+        <h2 class="title text-large">Form Submit</h2>
+        <section>
+          <form action="https://www.w3schools.com/action_page.php" target="_blank">
+            <bal-form-grid>
+              <bal-form-col>
+                <bal-field>
+                  <bal-field-label>Country</bal-field-label>
+                  <bal-field-control>
+                    <bal-typeahead
+                      multiple
+                      chips
+                      placeholder="Try finding your hero"
+                      name="hero"
+                      value="CaptainAmerica,SpiderMan"
+                    >
+                      <bal-option checkbox value="BlackWidow" label="Black Widow">
+                        <b style="display: block">Black Widow</b>
+                        <span>S.H.I.E.L.D.</span>
+                      </bal-option>
+                      <bal-option checkbox value="BlackPanter" label="Black Panter">
+                        <b style="display: block">Black Panter</b>
+                        <span>Wakanda</span>
+                      </bal-option>
+                      <bal-option checkbox value="IronMan" label="Iron Man">
+                        <b style="display: block">Iron Man</b>
+                        <span>Malibu</span>
+                      </bal-option>
+                      <bal-option checkbox value="SpiderMan" label="Spider Man">
+                        <b style="display: block">Spider Man</b>
+                        <span>Queens</span>
+                      </bal-option>
+                      <bal-option checkbox value="CaptainAmerica" label="Captain America">
+                        <b style="display: block">Captain America</b>
+                        <span>Broklyn</span>
+                      </bal-option>
+                      <bal-option checkbox value="Thor" label="Thor God of Thunder">
+                        <b style="display: block">Thor God of Thunder</b>
+                        <span>Asgard</span>
+                      </bal-option>
+                    </bal-typeahead>
+                  </bal-field-control>
+                </bal-field>
+              </bal-form-col>
+              <bal-form-col>
+                <bal-field>
+                  <bal-field-label>Country</bal-field-label>
+                  <bal-field-control>
+                    <bal-typeahead name="country" autocomplete="country" value="CH">
+                      <bal-option value="CH" label="Switzerland">Switzerland</bal-option>
+                      <bal-option value="DE" label="Germany">Germany</bal-option>
+                      <bal-option value="IT" label="Italy">Italy</bal-option>
+                    </bal-typeahead>
+                  </bal-field-control>
+                </bal-field>
+              </bal-form-col>
+            </bal-form-grid>
+            <input type="reset" value="Reset" />
+            <input type="submit" value="Submit" />
+          </form>
+        </section>
+        <h2 class="title text-large">Autocomplete</h2>
+        <section>
+          <form action="https://www.w3schools.com/action_page.php" target="_blank">
+            <bal-form-grid>
+              <bal-form-col>
+                <bal-field>
+                  <bal-field-label>First Name</bal-field-label>
+                  <bal-field-control>
+                    <bal-input name="firstName" autocomplete="given-name"></bal-input>
+                  </bal-field-control>
+                </bal-field>
+              </bal-form-col>
+              <bal-form-col>
+                <bal-field>
+                  <bal-field-label>Last Name</bal-field-label>
+                  <bal-field-control>
+                    <bal-input name="lastName" autocomplete="family-name"></bal-input>
+                  </bal-field-control>
+                </bal-field>
+              </bal-form-col>
+              <bal-form-col>
+                <bal-field>
+                  <bal-field-label>Country</bal-field-label>
+                  <bal-field-control>
+                    <bal-typeahead name="country" autocomplete="country">
+                      <bal-option value="CH" label="Switzerland">Switzerland</bal-option>
+                      <bal-option value="DE" label="Germany">Germany</bal-option>
+                      <bal-option value="IT" label="Italy">Italy</bal-option>
+                    </bal-typeahead>
+                  </bal-field-control>
+                </bal-field>
+              </bal-form-col>
+            </bal-form-grid>
+            <input type="reset" value="Reset" />
+            <input type="submit" value="Submit" />
+          </form>
+        </section>
+      </main>
+    </bal-doc-app>
+  </body>
+</html>
diff --git a/packages/core/src/components/bal-typeahead/test/bal-typeahead.visual.html b/packages/core/src/components/bal-typeahead/test/bal-typeahead.visual.html
new file mode 100644
index 0000000000..f18186a815
--- /dev/null
+++ b/packages/core/src/components/bal-typeahead/test/bal-typeahead.visual.html
@@ -0,0 +1,270 @@
+<!doctype html>
+<html dir="ltr" lang="en" class="bg-green-2">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
+    <style>
+      section {
+        margin-bottom: 4rem;
+      }
+    </style>
+    <script type="module" src="/build/baloise-design-system.esm.js"></script>
+    <script nomodule src="/build/baloise-design-system.js"></script>
+  </head>
+
+  <body>
+    <bal-doc-app log-components="bal-typeahead">
+      <main class="container py-medium">
+        <h2 class="title text-large">Basic</h2>
+        <section data-testid="basic">
+          <bal-typeahead placeholder="visual-basic">
+            <bal-option value="v1988" label="1988">1988</bal-option>
+            <bal-option value="v1989" label="1989">1989</bal-option>
+            <bal-option value="v1990" label="1990">1990</bal-option>
+            <bal-option value="v1991" label="1991">1991</bal-option>
+            <bal-option value="v1992" label="1992">1992</bal-option>
+            <bal-option value="v1993" label="1993">1993</bal-option>
+            <bal-option value="v1994" label="1994">1994</bal-option>
+            <bal-option value="v1995" label="1995">1995</bal-option>
+            <bal-option value="v1996" label="1996">1996</bal-option>
+            <bal-option value="v1997" label="1997">1997</bal-option>
+            <bal-option value="v1998" label="1998">1998</bal-option>
+            <bal-option value="v1999" label="1999">1999</bal-option>
+            <bal-option value="v2000" label="2000">2000</bal-option>
+            <bal-option value="v2001" label="2001">2001</bal-option>
+            <bal-option value="v2002" label="2002">2002</bal-option>
+            <bal-option value="v2003" label="2003">2003</bal-option>
+            <bal-option value="v2004" label="2004">2004</bal-option>
+            <bal-option value="v2005" label="2005">2005</bal-option>
+            <bal-option value="v2006" label="2006">2006</bal-option>
+            <bal-option value="v2007" label="2007">2007</bal-option>
+          </bal-typeahead>
+        </section>
+        <h2 class="title text-large">Long Content</h2>
+        <section data-testid="long-content">
+          <bal-typeahead placeholder="visual-long-content" value="BlackWidow">
+            <bal-option
+              value="BlackWidow"
+              label="Black Widow is a 2021 American superhero film based on Marvel Comics featuring the character of the same name."
+            >
+              <b style="display: block">Black Widow</b>
+              <span class="text-small"
+                >Black Widow is a 2021 American superhero film based on Marvel Comics featuring the character of the
+                same name.</span
+              >
+            </bal-option>
+            <bal-option value="BlackPanter" label="Black Panter">
+              <b style="display: block">Black Panter</b>
+              <span class="text-small">Wakanda</span>
+            </bal-option>
+            <bal-option value="IronMan" label="Iron Man">
+              <b style="display: block">Iron Man</b>
+              <span class="text-small">Malibu</span>
+            </bal-option>
+            <bal-option value="SpiderMan" label="Spider Man">
+              <b style="display: block">Spider Man</b>
+              <span class="text-small">Queens</span>
+            </bal-option>
+            <bal-option value="CaptainAmerica" label="Captain America">
+              <b style="display: block">Captain America</b>
+              <span class="text-small">Broklyn</span>
+            </bal-option>
+            <bal-option value="Thor" label="Thor God of Thunder">
+              <b style="display: block">Thor God of Thunder</b>
+              <span class="text-small">Asgard</span>
+            </bal-option>
+          </bal-typeahead>
+        </section>
+        <h2 class="title text-large">Multiple</h2>
+        <section data-testid="multiple">
+          <bal-typeahead multiple placeholder="visual-multiple">
+            <bal-option value="v1988" label="1988">1988</bal-option>
+            <bal-option value="v1989" label="1989">1989</bal-option>
+            <bal-option value="v1990" label="1990">1990</bal-option>
+            <bal-option value="v1991" label="1991">1991</bal-option>
+            <bal-option value="v1992" label="1992">1992</bal-option>
+            <bal-option value="v1993" label="1993">1993</bal-option>
+            <bal-option value="v1994" label="1994">1994</bal-option>
+            <bal-option value="v1995" label="1995">1995</bal-option>
+            <bal-option value="v1996" label="1996">1996</bal-option>
+            <bal-option value="v1997" label="1997">1997</bal-option>
+            <bal-option value="v1998" label="1998">1998</bal-option>
+            <bal-option value="v1999" label="1999">1999</bal-option>
+            <bal-option value="v2000" label="2000">2000</bal-option>
+            <bal-option value="v2001" label="2001">2001</bal-option>
+            <bal-option value="v2002" label="2002">2002</bal-option>
+            <bal-option value="v2003" label="2003">2003</bal-option>
+            <bal-option value="v2004" label="2004">2004</bal-option>
+            <bal-option value="v2005" label="2005">2005</bal-option>
+            <bal-option value="v2006" label="2006">2006</bal-option>
+            <bal-option value="v2007" label="2007">2007</bal-option>
+          </bal-typeahead>
+        </section>
+        <h2 class="title text-large">Multiple with Chips</h2>
+        <section data-testid="multiple-chips">
+          <bal-typeahead
+            multiple
+            chips
+            value="v1990,v1991,v1992,v1993,v1994,v1995,v1996,v1997,v1998,v1999,v2000,v2001,v2002,v2003"
+            placeholder="visual-multiple-chips"
+          >
+            <bal-option value="v1988" label="1988">1988</bal-option>
+            <bal-option value="v1989" label="1989">1989</bal-option>
+            <bal-option value="v1990" label="1990">1990</bal-option>
+            <bal-option value="v1991" label="1991">1991</bal-option>
+            <bal-option value="v1992" label="1992">1992</bal-option>
+            <bal-option value="v1993" label="1993">1993</bal-option>
+            <bal-option value="v1994" label="1994">1994</bal-option>
+            <bal-option value="v1995" label="1995">1995</bal-option>
+            <bal-option value="v1996" label="1996">1996</bal-option>
+            <bal-option value="v1997" label="1997">1997</bal-option>
+            <bal-option value="v1998" label="1998">1998</bal-option>
+            <bal-option value="v1999" label="1999">1999</bal-option>
+            <bal-option value="v2000" label="2000">2000</bal-option>
+            <bal-option value="v2001" label="2001">2001</bal-option>
+            <bal-option value="v2002" label="2002">2002</bal-option>
+            <bal-option value="v2003" label="2003">2003</bal-option>
+            <bal-option value="v2004" label="2004">2004</bal-option>
+            <bal-option value="v2005" label="2005">2005</bal-option>
+            <bal-option value="v2006" label="2006">2006</bal-option>
+            <bal-option value="v2007" label="2007">2007</bal-option>
+          </bal-typeahead>
+        </section>
+        <h2 class="title text-large">Clearable</h2>
+        <section data-testid="clearable">
+          <bal-typeahead clearable placeholder="visual-clearable">
+            <bal-option value="v1988" label="1988">1988</bal-option>
+            <bal-option value="v1989" label="1989">1989</bal-option>
+            <bal-option value="v1990" label="1990">1990</bal-option>
+            <bal-option value="v1991" label="1991">1991</bal-option>
+            <bal-option value="v1992" label="1992">1992</bal-option>
+          </bal-typeahead>
+        </section>
+        <h2 class="title text-large">Loading</h2>
+        <section data-testid="loading">
+          <bal-typeahead value="v1988" loading placeholder="visual-loading">
+            <bal-option value="v1988" label="1988">1988</bal-option>
+            <bal-option value="v1989" label="1989">1989</bal-option>
+            <bal-option value="v1990" label="1990">1990</bal-option>
+            <bal-option value="v1991" label="1991">1991</bal-option>
+            <bal-option value="v1992" label="1992">1992</bal-option>
+          </bal-typeahead>
+        </section>
+        <h2 class="title text-large">Invalid</h2>
+        <section data-testid="invalid">
+          <bal-typeahead class="mb-small" placeholder="visual-invalid" invalid value="v1988">
+            <bal-option value="v1988" label="1988">1988</bal-option>
+            <bal-option value="v1989" label="1989">1989</bal-option>
+          </bal-typeahead>
+          <bal-typeahead class="mb-small" placeholder="visual-invalid-empty" invalid>
+            <bal-option value="v1988" label="1988">1988</bal-option>
+            <bal-option value="v1989" label="1989">1989</bal-option>
+          </bal-typeahead>
+          <bal-typeahead placeholder="visual-invalid-chips" invalid multiple value="v1988">
+            <bal-option value="v1988" label="1988">1988</bal-option>
+            <bal-option value="v1989" label="1989">1989</bal-option>
+          </bal-typeahead>
+        </section>
+        <h2 class="title text-large">Disabled</h2>
+        <section data-testid="disabled">
+          <bal-typeahead class="mb-small" placeholder="visual-disabled" disabled value="v1988">
+            <bal-option value="v1988" label="1988">1988</bal-option>
+            <bal-option value="v1989" label="1989">1989</bal-option>
+          </bal-typeahead>
+          <bal-typeahead class="mb-small" placeholder="visual-disabled-empty" disabled>
+            <bal-option value="v1988" label="1988">1988</bal-option>
+            <bal-option value="v1989" label="1989">1989</bal-option>
+          </bal-typeahead>
+          <bal-typeahead placeholder="visual-disabled-chips" disabled multiple value="v1988">
+            <bal-option value="v1988" label="1988">1988</bal-option>
+            <bal-option value="v1989" label="1989">1989</bal-option>
+          </bal-typeahead>
+        </section>
+        <h2 class="title text-large">Form Field</h2>
+        <section data-testid="form-field">
+          <bal-field>
+            <bal-field-label>Form Label</bal-field-label>
+            <bal-field-control>
+              <bal-typeahead multiple placeholder="visual-form-field">
+                <bal-option value="v1988" label="1988">1988</bal-option>
+                <bal-option value="v1989" label="1989">1989</bal-option>
+                <bal-option value="v1990" label="1990">1990</bal-option>
+                <bal-option value="v1991" label="1991">1991</bal-option>
+                <bal-option value="v1992" label="1992">1992</bal-option>
+                <bal-option value="v1993" label="1993">1993</bal-option>
+                <bal-option value="v1994" label="1994">1994</bal-option>
+                <bal-option value="v1995" label="1995">1995</bal-option>
+                <bal-option value="v1996" label="1996">1996</bal-option>
+                <bal-option value="v1997" label="1997">1997</bal-option>
+                <bal-option value="v1998" label="1998">1998</bal-option>
+                <bal-option value="v1999" label="1999">1999</bal-option>
+                <bal-option value="v2000" label="2000">2000</bal-option>
+                <bal-option value="v2001" label="2001">2001</bal-option>
+                <bal-option value="v2002" label="2002">2002</bal-option>
+                <bal-option value="v2003" label="2003">2003</bal-option>
+                <bal-option value="v2004" label="2004">2004</bal-option>
+                <bal-option value="v2005" label="2005">2005</bal-option>
+                <bal-option value="v2006" label="2006">2006</bal-option>
+                <bal-option value="v2007" label="2007">2007</bal-option>
+              </bal-typeahead>
+            </bal-field-control>
+          </bal-field>
+        </section>
+        <h2 class="title text-large">Small Purple Theme</h2>
+        <section data-testid="small-purple" class="bg-white p-large gap-normal flex flex-direction-column">
+          <section class="bg-white gap-normal flex m-none">
+            <bal-typeahead placeholder="Leistung" clearable inline-label="Leistung" size="small" theme="purple">
+              <bal-option value="v100" label="100 PS">100 PS With a long label</bal-option>
+              <bal-option value="v140" label="140 PS">140 PS</bal-option>
+              <bal-option value="v165" label="165 PS">165 PS</bal-option>
+              <bal-option value="v210" label="210 PS">210 PS</bal-option>
+            </bal-typeahead>
+            <bal-typeahead
+              value="v140"
+              placeholder="Leistung"
+              clearable
+              inline-label="Leistung"
+              size="small"
+              theme="purple"
+            >
+              <bal-option value="v100" label="100 PS">100 PS</bal-option>
+              <bal-option value="v140" label="140 PS">140 PS</bal-option>
+              <bal-option value="v165" label="165 PS">165 PS</bal-option>
+              <bal-option value="v210" label="210 PS">210 PS</bal-option>
+            </bal-typeahead>
+          </section>
+          <section class="bg-white gap-normal flex m-none">
+            <bal-typeahead
+              placeholder="Leistung"
+              clearable
+              disabled
+              inline-label="Leistung"
+              size="small"
+              theme="purple"
+            >
+              <bal-option value="v100" label="100 PS">100 PS</bal-option>
+              <bal-option value="v140" label="140 PS">140 PS</bal-option>
+              <bal-option value="v165" label="165 PS">165 PS</bal-option>
+              <bal-option value="v210" label="210 PS">210 PS</bal-option>
+            </bal-typeahead>
+            <bal-typeahead
+              value="v140"
+              placeholder="Leistung"
+              clearable
+              loading
+              inline-label="Leistung"
+              size="small"
+              theme="purple"
+            >
+              <bal-option value="v100" label="100 PS">100 PS</bal-option>
+              <bal-option value="v140" label="140 PS">140 PS</bal-option>
+              <bal-option value="v165" label="165 PS">165 PS</bal-option>
+              <bal-option value="v210" label="210 PS">210 PS</bal-option>
+            </bal-typeahead>
+          </section>
+        </section>
+      </main>
+    </bal-doc-app>
+  </body>
+</html>
diff --git a/packages/core/src/utils/dropdown/auto-fill.ts b/packages/core/src/utils/dropdown/auto-fill.ts
index 1688e50e90..f83bde5752 100644
--- a/packages/core/src/utils/dropdown/auto-fill.ts
+++ b/packages/core/src/utils/dropdown/auto-fill.ts
@@ -23,6 +23,7 @@ export class DropdownAutoFillUtil {
 
       if (!areArraysEqual(newValue, this.component.rawValue)) {
         this.component.valueUtil.updateRawValueBySelection(newValue, true)
+        this.component.popupUtil.collapseList()
       }
     }
   }
diff --git a/packages/core/src/utils/dropdown/component.ts b/packages/core/src/utils/dropdown/component.ts
index 0322b72d7b..9ac77c6a09 100644
--- a/packages/core/src/utils/dropdown/component.ts
+++ b/packages/core/src/utils/dropdown/component.ts
@@ -1,11 +1,13 @@
 import { EventEmitter } from '@stencil/core'
-import { DropdownValueUtil } from './value'
-import { BalOption } from './option'
 import { DropdownFocus } from './focus'
+import { DropdownMode } from './mode'
+import { BalOption } from './option'
 import { DropdownPopupUtil } from './popup'
+import { DropdownValueUtil } from './value'
 
 export type DropdownComponent = DropdownFocus & {
   el: HTMLElement
+  mode: DropdownMode
   selectEl: HTMLSelectElement | undefined
   panelEl: HTMLDivElement | undefined
   nativeEl: HTMLInputElement | undefined
@@ -32,6 +34,7 @@ export type DropdownComponent = DropdownFocus & {
   rawValue: string[]
   value?: string | string[]
   initialValue?: string | string[]
+  typeaheadValue?: string
 
   panelCleanup?: () => void
   balChange: EventEmitter<BalEvents.BalDropdownChangeDetail>
diff --git a/packages/core/src/utils/dropdown/dropdown.i18n.ts b/packages/core/src/utils/dropdown/dropdown.i18n.ts
index 3b88a11802..9ec9df8683 100644
--- a/packages/core/src/utils/dropdown/dropdown.i18n.ts
+++ b/packages/core/src/utils/dropdown/dropdown.i18n.ts
@@ -4,6 +4,7 @@ interface I18nBalDropdown {
   clearable: string
   open: string
   close: string
+  noOptions: string
 }
 
 export const i18nBalDropdown: I18n<I18nBalDropdown> = {
@@ -11,50 +12,60 @@ export const i18nBalDropdown: I18n<I18nBalDropdown> = {
     clearable: 'Löschen',
     open: 'Öffnen',
     close: 'Schließen',
+    noOptions: 'Kein Treffer gefunden.',
   },
   en: {
     clearable: 'clear',
     open: 'Open',
     close: 'Close',
+    noOptions: 'No matches found.',
   },
   fr: {
     clearable: 'Effacer',
     open: 'Ouvrir',
     close: 'Fermer',
+    noOptions: 'Aucun résultat trouvé.',
   },
   it: {
     clearable: 'Cancellare',
     open: 'Apri',
     close: 'Chiudi',
+    noOptions: 'Nessun risultato trovato.',
   },
   nl: {
     clearable: 'Wissen',
     open: 'Open',
     close: 'Sluiten',
+    noOptions: 'Geen resultaat gevonden.',
   },
   es: {
     clearable: 'Limpiar',
     open: 'Abrir',
     close: 'Cerrar',
+    noOptions: 'No se han encontrado resultados.',
   },
   pl: {
     clearable: 'Wyczyść',
     open: 'Otwórz',
     close: 'Zamknij',
+    noOptions: 'Nie znaleziono wyników.',
   },
   pt: {
     clearable: 'Limpar',
     open: 'Abrir',
     close: 'Fechar',
+    noOptions: 'Nenhum resultado encontrado.',
   },
   sv: {
     clearable: 'Rensa',
     open: 'Öppna',
     close: 'Stäng',
+    noOptions: 'Inga träffar hittades.',
   },
   fi: {
     clearable: 'Tyhjennä',
     open: 'Avaa',
     close: 'Sulje',
+    noOptions: 'Tuloksia ei löytynyt.',
   },
 }
diff --git a/packages/core/src/utils/dropdown/events.ts b/packages/core/src/utils/dropdown/events.ts
index aab8763e6d..cc3d8a8c34 100644
--- a/packages/core/src/utils/dropdown/events.ts
+++ b/packages/core/src/utils/dropdown/events.ts
@@ -48,11 +48,27 @@ export class DropdownEventsUtil {
         const targetEl = ev.target as HTMLElement
         const clearEl = targetEl.closest('.bal-dropdown__clear')
         if (clearEl) {
+          if (this.component.mode === 'typeahead' && this.component.nativeEl) {
+            this.component.nativeEl.value = ''
+            this.component.typeaheadValue = ''
+          }
           this.component.valueUtil.updateRawValueBySelection([])
           return
         }
       }
 
+      if (this.component.mode === 'typeahead' && this.component.nativeEl) {
+        const targetEl = ev.target as HTMLElement
+
+        if (targetEl === this.component.nativeEl && this.component.isExpanded) {
+          return
+        }
+
+        if (!this.component.isExpanded) {
+          this.component.nativeEl.select()
+        }
+      }
+
       this.component.popupUtil.toggleList()
     }
   }
diff --git a/packages/core/src/utils/dropdown/icon.tsx b/packages/core/src/utils/dropdown/icon.tsx
index 6401f375d8..37b6e37e57 100644
--- a/packages/core/src/utils/dropdown/icon.tsx
+++ b/packages/core/src/utils/dropdown/icon.tsx
@@ -32,7 +32,12 @@ export const DropdownIcon: FunctionalComponent<DropdownIconProps> = ({
 
   if (loading) {
     return (
-      <bal-spinner class={{ ...block.element('rear').class() }} small variation="circle" color="white"></bal-spinner>
+      <bal-spinner
+        class={{ ...block.element('rear').class() }}
+        small
+        variation="circle"
+        color={theme === 'purple' ? 'white' : 'blue'}
+      ></bal-spinner>
     )
   } else if (clearable && filled && !disabled) {
     return (
diff --git a/packages/core/src/utils/dropdown/input.tsx b/packages/core/src/utils/dropdown/input.tsx
index b68591acf7..8b6c9446c5 100644
--- a/packages/core/src/utils/dropdown/input.tsx
+++ b/packages/core/src/utils/dropdown/input.tsx
@@ -1,16 +1,18 @@
-import { h, FunctionalComponent } from '@stencil/core'
-import { BEM } from '../bem'
-import { i18nBalDropdown } from './dropdown.i18n'
+import { FunctionalComponent, h } from '@stencil/core'
 import { ariaBooleanToString } from '../aria'
-import { BalAriaForm } from '../form'
-import { BalLanguage } from '../config'
 import { Attributes } from '../attributes'
+import { BEM } from '../bem'
+import { BalLanguage } from '../config'
+import { BalAriaForm } from '../form'
+import { i18nBalDropdown } from './dropdown.i18n'
+import { DropdownMode } from './mode'
 
 export interface DropdownInputProps {
+  mode: DropdownMode
   inputId: string
   httpFormSubmit: boolean
   ariaForm: BalAriaForm
-  rawValue: string[]
+  value: string
   autocomplete: string
   placeholder: string
   inputLabel: string
@@ -22,6 +24,7 @@ export interface DropdownInputProps {
   language: BalLanguage
   inheritedAttributes: Attributes
   refInputEl: (el: HTMLInputElement) => void
+  onInput?: (ev: InputEvent) => void
   onChange: (ev: Event) => void
   onFocus: (ev: FocusEvent) => void
   onBlur: (ev: FocusEvent) => void
@@ -29,10 +32,11 @@ export interface DropdownInputProps {
 }
 
 export const DropdownInput: FunctionalComponent<DropdownInputProps> = ({
+  mode,
   inputId,
   httpFormSubmit,
   ariaForm,
-  rawValue,
+  value,
   autocomplete,
   required,
   disabled,
@@ -44,6 +48,7 @@ export const DropdownInput: FunctionalComponent<DropdownInputProps> = ({
   inputLabel,
   inheritedAttributes,
   refInputEl,
+  onInput,
   onChange,
   onFocus,
   onBlur,
@@ -56,13 +61,25 @@ export const DropdownInput: FunctionalComponent<DropdownInputProps> = ({
       id={ariaForm.controlId || `${inputId}-ctrl`}
       class={{
         ...block.element('root').element('input').class(),
+        ...block
+          .element('root')
+          .element('input')
+          .modifier('typeahead')
+          .class(mode === DropdownMode.Typeahead),
       }}
+      {...(mode === DropdownMode.Typeahead
+        ? {
+            style: {
+              'min-width': placeholder ? `${placeholder.length}ch` : '4rem',
+            },
+          }
+        : {})}
       type="text"
       size={1}
       inputmode="none"
       tabindex="0"
       autoComplete={autocomplete}
-      value={rawValue.join(',')}
+      value={value}
       required={required}
       disabled={disabled}
       readonly={readonly}
@@ -77,8 +94,9 @@ export const DropdownInput: FunctionalComponent<DropdownInputProps> = ({
       aria-haspopup={'listbox'}
       data-native
       data-label={inputLabel}
-      data-value={rawValue.join(',')}
-      ref={el => refInputEl(el)}
+      data-value={value}
+      ref={el => (el ? refInputEl(el) : void 0)}
+      {...(onInput ? { onInput: ev => onInput(ev) } : {})}
       onChange={ev => onChange(ev)}
       onFocus={ev => onFocus(ev)}
       onBlur={ev => onBlur(ev)}
diff --git a/packages/core/src/utils/dropdown/mode.ts b/packages/core/src/utils/dropdown/mode.ts
new file mode 100644
index 0000000000..3d225139f0
--- /dev/null
+++ b/packages/core/src/utils/dropdown/mode.ts
@@ -0,0 +1,4 @@
+export enum DropdownMode {
+  Basic = 'basic',
+  Typeahead = 'typeahead',
+}
diff --git a/packages/core/src/utils/dropdown/option-list.tsx b/packages/core/src/utils/dropdown/option-list.tsx
index ce65cb6f10..83e3801b3a 100644
--- a/packages/core/src/utils/dropdown/option-list.tsx
+++ b/packages/core/src/utils/dropdown/option-list.tsx
@@ -1,8 +1,10 @@
 import { FunctionalComponent, h } from '@stencil/core'
-import { BalOption } from './option'
 import { BEM } from '../bem'
+import { DropdownMode } from './mode'
+import { BalOption } from './option'
 
 export interface DropdownOptionListProps {
+  mode: DropdownMode
   inputId: string
   block: string
   filter: BalProps.BalOptionListFilter
@@ -18,6 +20,7 @@ export interface DropdownOptionListProps {
 }
 
 export const DropdownOptionList: FunctionalComponent<DropdownOptionListProps> = ({
+  mode,
   inputId,
   isExpanded,
   rawOptions,
@@ -38,6 +41,10 @@ export const DropdownOptionList: FunctionalComponent<DropdownOptionListProps> =
       class={{
         ...block.element('list').class(),
         ...block.element('list').modifier('expanded').class(isExpanded),
+        ...block
+          .element('list')
+          .modifier('typeahead')
+          .class(mode === DropdownMode.Typeahead),
       }}
       ref={refPanelEl}
     >
diff --git a/packages/core/src/utils/dropdown/option.tsx b/packages/core/src/utils/dropdown/option.tsx
index 9cdf29cc9f..3b6e6bb46c 100644
--- a/packages/core/src/utils/dropdown/option.tsx
+++ b/packages/core/src/utils/dropdown/option.tsx
@@ -1,4 +1,4 @@
-import { h } from '@stencil/core'
+import { rIC } from '../helpers'
 import { DropdownComponent } from './component'
 
 export type BalBaseOption<TValue = string> = {
@@ -83,12 +83,22 @@ export class DropdownOptionUtil {
   async listenToOptionChange(ev: BalEvents.BalOptionChange) {
     const newSelectedValues = (await this.component.listEl?.getSelectedValues()) || []
     this.component.valueUtil.updateRawValueBySelection(newSelectedValues)
+
     if (!this.component.multiple) {
       this.component.popupUtil.collapseList()
       if (this.component.hasFocus) {
         this.component.balBlur.emit(new FocusEvent('blur', { relatedTarget: this.component.el }))
         this.component.hasFocus = false
       }
+    } else {
+      if (this.component.mode === 'typeahead' && this.component.nativeEl) {
+        this.component.typeaheadValue = ''
+        this.component.nativeEl.value = ''
+        rIC(() => {
+          this.component.listEl?.filterByContent(this.component.typeaheadValue)
+          this.component.nativeEl.focus()
+        })
+      }
     }
   }
 }
diff --git a/packages/core/src/utils/dropdown/popup.ts b/packages/core/src/utils/dropdown/popup.ts
index d69a3825bc..ca573dcaf8 100644
--- a/packages/core/src/utils/dropdown/popup.ts
+++ b/packages/core/src/utils/dropdown/popup.ts
@@ -16,7 +16,6 @@ export class DropdownPopupUtil {
       })
       .then(({ x, y }) => {
         Object.assign(floatingEl.style, {
-          left: `${x}px`,
           top: `${y}px`,
         })
       })
@@ -43,6 +42,14 @@ export class DropdownPopupUtil {
     }
     this.component.isExpanded = true
     await this.component.listEl?.focusSelected()
+
+    /**
+     * If the dropdown is in typeahead mode, we want to focus the input element
+     * and select its content to allow the user to start typing immediately.
+     */
+    if (this.component.mode === 'typeahead' && this.component.nativeEl) {
+      await this.component.nativeEl?.focus()
+    }
   }
 
   collapseList() {
diff --git a/packages/core/src/utils/dropdown/value.tsx b/packages/core/src/utils/dropdown/value.tsx
index 6486684baa..5d3b01b3b2 100644
--- a/packages/core/src/utils/dropdown/value.tsx
+++ b/packages/core/src/utils/dropdown/value.tsx
@@ -1,10 +1,11 @@
 import { FunctionalComponent, h } from '@stencil/core'
-import { areArraysEqual } from '../../utils/array'
 import isNil from 'lodash.isnil'
-import { DropdownComponent } from './component'
+import { areArraysEqual } from '../../utils/array'
 import { BEM } from '../bem'
-import { BalOption } from './option'
 import { waitAfterFramePaint } from '../helpers'
+import { DropdownComponent } from './component'
+import { DropdownMode } from './mode'
+import { BalOption } from './option'
 
 export class DropdownValueUtil {
   private component!: DropdownComponent
@@ -98,15 +99,18 @@ export class DropdownValueUtil {
     await waitAfterFramePaint()
     if (this.component.listEl) {
       this.component.choices = await this.component.listEl.getSelectedOptions(this.component.rawValue)
-      this.component.inputLabel = this.component.choices
-        .map(option => option.label.trim())
-        .sort()
-        .join(',')
+      if (this.component.mode === DropdownMode.Basic) {
+        this.component.inputLabel = this.component.choices
+          .map(option => option.label.trim())
+          .sort()
+          .join(',')
+      }
     }
   }
 }
 
 export interface DropdownValueProps {
+  mode: DropdownMode
   inlineLabel: string
   filled: boolean
   chips: boolean
@@ -118,19 +122,11 @@ export interface DropdownValueProps {
   onRemoveChip: (option: BalOption) => void
 }
 
-export const DropdownValue: FunctionalComponent<DropdownValueProps> = ({
-  inlineLabel,
-  filled,
-  chips,
-  placeholder,
-  choices,
-  invalid,
-  disabled,
-  readonly,
-  onRemoveChip,
-}) => {
+export const DropdownValue: FunctionalComponent<DropdownValueProps> = (
+  { mode, inlineLabel, filled, chips, placeholder, choices, invalid, disabled, readonly, onRemoveChip },
+  children,
+) => {
   const block = BEM.block('dropdown')
-
   if (filled) {
     if (chips) {
       return (
@@ -148,12 +144,13 @@ export const DropdownValue: FunctionalComponent<DropdownValueProps> = ({
               {option.label}
             </bal-tag>
           ))}
+          {children}
         </div>
       )
     } else {
       return (inlineLabel && `${inlineLabel}: `) + choices.map(option => option.label).join(', ')
     }
   } else {
-    return placeholder
+    return mode === DropdownMode.Basic ? placeholder : children
   }
 }