diff --git a/src/components/input-elements/MultiSelect/MultiSelect.tsx b/src/components/input-elements/MultiSelect/MultiSelect.tsx
index 208f08815..b71ef4dc3 100644
--- a/src/components/input-elements/MultiSelect/MultiSelect.tsx
+++ b/src/components/input-elements/MultiSelect/MultiSelect.tsx
@@ -19,6 +19,7 @@ export interface MultiSelectProps extends React.HTMLAttributes<HTMLDivElement> {
   defaultValue?: string[];
   value?: string[];
   onValueChange?: (value: string[]) => void;
+  onInputValueChange?: (value: string) => void;
   placeholder?: string;
   placeholderSearch?: string;
   disabled?: boolean;
@@ -31,6 +32,7 @@ const MultiSelect = React.forwardRef<HTMLDivElement, MultiSelectProps>((props, r
     defaultValue,
     value,
     onValueChange,
+    onInputValueChange,
     placeholder = "Select...",
     placeholderSearch = "Search",
     disabled = false,
@@ -60,6 +62,11 @@ const MultiSelect = React.forwardRef<HTMLDivElement, MultiSelectProps>((props, r
     onValueChange?.([]);
   };
 
+  const handleInputValueChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setSearchQuery(e.target.value);
+    onInputValueChange?.(e.target.value);
+  };
+
   return (
     <Listbox
       as="div"
@@ -278,7 +285,7 @@ const MultiSelect = React.forwardRef<HTMLDivElement, MultiSelectProps>((props, r
                     e.stopPropagation();
                   }
                 }}
-                onChange={(e) => setSearchQuery(e.target.value)}
+                onChange={handleInputValueChange}
               />
             </div>
             <SelectedValueContext.Provider value={{ selectedValue: value }}>
diff --git a/src/components/input-elements/SearchSelect/SearchSelect.tsx b/src/components/input-elements/SearchSelect/SearchSelect.tsx
index 1846c0567..269e0ae88 100644
--- a/src/components/input-elements/SearchSelect/SearchSelect.tsx
+++ b/src/components/input-elements/SearchSelect/SearchSelect.tsx
@@ -18,6 +18,7 @@ export interface SearchSelectProps extends React.HTMLAttributes<HTMLDivElement>
   defaultValue?: string;
   value?: string;
   onValueChange?: (value: string) => void;
+  onInputValueChange?: (value: string) => void;
   placeholder?: string;
   disabled?: boolean;
   icon?: React.ElementType | React.JSXElementConstructor<any>;
@@ -29,6 +30,7 @@ const SearchSelect = React.forwardRef<HTMLDivElement, SearchSelectProps>((props,
     defaultValue,
     value,
     onValueChange,
+    onInputValueChange,
     placeholder = "Select...",
     disabled = false,
     icon,
@@ -46,6 +48,11 @@ const SearchSelect = React.forwardRef<HTMLDivElement, SearchSelectProps>((props,
     [searchQuery, children],
   );
 
+  const handleInputValueChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setSearchQuery(e.target.value);
+    onInputValueChange?.(e.target.value);
+  };
+
   return (
     <Combobox
       as="div"
@@ -105,7 +112,7 @@ const SearchSelect = React.forwardRef<HTMLDivElement, SearchSelectProps>((props,
                 getSelectButtonColors(hasValue(value), disabled),
               )}
               placeholder={placeholder}
-              onChange={(event) => setSearchQuery(event.target.value)}
+              onChange={handleInputValueChange}
               displayValue={(value: string) => valueToNameMapping.get(value) ?? ""}
             />
             <div
diff --git a/src/stories/input-elements/MultiSelect.stories.tsx b/src/stories/input-elements/MultiSelect.stories.tsx
index 7b4ed1121..b9a42e051 100644
--- a/src/stories/input-elements/MultiSelect.stories.tsx
+++ b/src/stories/input-elements/MultiSelect.stories.tsx
@@ -130,6 +130,19 @@ const WithControlledStateTemplate: ComponentStory<typeof MultiSelect> = () => {
   );
 };
 
+const WithOnInputValueChangeTemplate: ComponentStory<typeof MultiSelect> = () => {
+  const [input, setInput] = useState<string>("");
+  return (
+    <Card>
+      <Text>Input:{input}</Text>
+      <MultiSelect onInputValueChange={(value) => setInput(value)}>
+        <MultiSelectItem value={"1"}>One</MultiSelectItem>
+        <MultiSelectItem value={"2"}>Two</MultiSelectItem>
+      </MultiSelect>
+    </Card>
+  );
+};
+
 export const DefaultResponsive = ResponsiveTemplate.bind({});
 
 export const WithFlexParent = FlexTemplate.bind({});
@@ -159,3 +172,5 @@ WithDisabled.args = {
 export const SelectElementsComparison = SelectElementsFlexTemplate.bind({});
 
 export const WithControlledState = WithControlledStateTemplate.bind({});
+
+export const WithOnInputValueChange = WithOnInputValueChangeTemplate.bind({});
diff --git a/src/stories/input-elements/SearchSelect.stories.tsx b/src/stories/input-elements/SearchSelect.stories.tsx
index ca8ecfd60..79ebdf383 100644
--- a/src/stories/input-elements/SearchSelect.stories.tsx
+++ b/src/stories/input-elements/SearchSelect.stories.tsx
@@ -93,6 +93,18 @@ const WithControlledStateTemplate: ComponentStory<typeof SearchSelect> = () => {
   );
 };
 
+const WithOnInputValueChangeTemplate: ComponentStory<typeof SearchSelect> = () => {
+  const [input, setInput] = useState<string>("");
+  return (
+    <Card>
+      <Text>Input:{input}</Text>
+      <SearchSelect onInputValueChange={(value) => setInput(value)}>
+        <SearchSelectItem value={"1"}>One</SearchSelectItem>
+      </SearchSelect>
+    </Card>
+  );
+};
+
 export const DefaultResponsive = ResponsiveTemplate.bind({});
 DefaultResponsive.args = {
   onValueChange: (v) => alert(v),
@@ -123,3 +135,5 @@ WithDisabled.args = {
 export const SelectElementsComparison = SelectElementsFlexTemplate.bind({});
 
 export const WithControlledState = WithControlledStateTemplate.bind({});
+
+export const WithOnInputValueChange = WithOnInputValueChangeTemplate.bind({});