diff --git a/docs/sources/panels/visualizations/dashboard-list-panel.md b/docs/sources/panels/visualizations/dashboard-list-panel.md
index 6b25a3ad164..b07fb10e3ed 100644
--- a/docs/sources/panels/visualizations/dashboard-list-panel.md
+++ b/docs/sources/panels/visualizations/dashboard-list-panel.md
@@ -21,7 +21,7 @@ Use these options to refine your visualization.
 
 - **Starred -** Display starred dashboards in alphabetical order.
 - **Recently viewed -** Display recently viewed dashboards in alphabetical order.
-- **Search -** Display dashboards by search query or tags. Requires you to enter at least one value in **Query** or **Tags**.
+- **Search -** Display dashboards by search query or tags. You must enter at least one value in **Query** or **Tags**. For the **Query** and **Tags** fields. Variable interpolation is supported, for example,`$my_var` or `${my_var}`.
 - **Show headings -** The chosen list selection (Starred, Recently viewed, Search) is shown as a heading.
 - **Max items -** Sets the maximum number of items to list per section. For example, if you left this at the default value of 10 and displayed Starred and Recently viewed dashboards, then the panel would display up to 20 total dashboards, ten in each section.
 
diff --git a/public/app/plugins/panel/dashlist/DashList.tsx b/public/app/plugins/panel/dashlist/DashList.tsx
index 664e4d017d9..351d9c3caea 100644
--- a/public/app/plugins/panel/dashlist/DashList.tsx
+++ b/public/app/plugins/panel/dashlist/DashList.tsx
@@ -1,7 +1,7 @@
 import React, { useEffect, useMemo, useState } from 'react';
 import take from 'lodash/take';
 
-import { PanelProps } from '@grafana/data';
+import { InterpolateFunction, PanelProps } from '@grafana/data';
 import { CustomScrollbar, Icon, useStyles } from '@grafana/ui';
 
 import { getBackendSrv } from 'app/core/services/backend_srv';
@@ -19,7 +19,7 @@ interface DashboardGroup {
   dashboards: Dashboard[];
 }
 
-async function fetchDashboards(options: DashListOptions) {
+async function fetchDashboards(options: DashListOptions, replaceVars: InterpolateFunction) {
   let starredDashboards: Promise<Dashboard[]> = Promise.resolve([]);
   if (options.showStarred) {
     const params = { limit: options.maxItems, starred: 'true' };
@@ -37,9 +37,9 @@ async function fetchDashboards(options: DashListOptions) {
   if (options.showSearch) {
     const params = {
       limit: options.maxItems,
-      query: options.query,
+      query: replaceVars(options.query, {}, 'text'),
       folderIds: options.folderId,
-      tag: options.tags,
+      tag: options.tags.map((tag: string) => replaceVars(tag, {}, 'text')),
       type: 'dash-db',
     };
 
@@ -79,7 +79,7 @@ async function fetchDashboards(options: DashListOptions) {
 export function DashList(props: PanelProps<DashListOptions>) {
   const [dashboards, setDashboards] = useState(new Map<number, Dashboard>());
   useEffect(() => {
-    fetchDashboards(props.options).then((dashes) => {
+    fetchDashboards(props.options, props.replaceVariables).then((dashes) => {
       setDashboards(dashes);
     });
   }, [
@@ -90,6 +90,8 @@ export function DashList(props: PanelProps<DashListOptions>) {
     props.options.query,
     props.options.tags,
     props.options.folderId,
+    props.replaceVariables,
+    props.renderCounter,
   ]);
 
   const toggleDashboardStar = async (e: React.SyntheticEvent, dash: Dashboard) => {
diff --git a/public/app/plugins/panel/dashlist/module.tsx b/public/app/plugins/panel/dashlist/module.tsx
index 16817c5c953..f9b51648004 100644
--- a/public/app/plugins/panel/dashlist/module.tsx
+++ b/public/app/plugins/panel/dashlist/module.tsx
@@ -1,4 +1,3 @@
-import _ from 'lodash';
 import { PanelModel, PanelPlugin } from '@grafana/data';
 import { DashList } from './DashList';
 import { DashListOptions } from './types';