diff --git a/packages/components/src/DataList/DataList.test.tsx b/packages/components/src/DataList/DataList.test.tsx
index dd83e1334c..48882c2006 100644
--- a/packages/components/src/DataList/DataList.test.tsx
+++ b/packages/components/src/DataList/DataList.test.tsx
@@ -665,4 +665,38 @@ describe("DataList", () => {
       expect(screen.getByText(bannerText)).toBeInTheDocument();
     });
   });
+  describe("Search", () => {
+    it("should be shown when visible is true", () => {
+      const mockOnSearch = jest.fn();
+      render(
+        <DataList
+          data={Array.from({ length: MAX_DATA_COUNT + 1 }, (_, id) => ({
+            id,
+          }))}
+          headers={{ id: "ID" }}
+        >
+          <DataList.Search onSearch={mockOnSearch} visible={true} />
+        </DataList>,
+      );
+
+      expect(screen.getByLabelText("Close search bar")).toBeInTheDocument();
+    });
+    it("should be hidden when visible is false", () => {
+      const mockOnSearch = jest.fn();
+      render(
+        <DataList
+          data={Array.from({ length: MAX_DATA_COUNT + 1 }, (_, id) => ({
+            id,
+          }))}
+          headers={{ id: "ID" }}
+        >
+          <DataList.Search onSearch={mockOnSearch} visible={false} />
+        </DataList>,
+      );
+
+      expect(
+        screen.queryByLabelText("Close search bar"),
+      ).not.toBeInTheDocument();
+    });
+  });
 });
diff --git a/packages/components/src/DataList/DataList.types.ts b/packages/components/src/DataList/DataList.types.ts
index e3d2374724..af88057560 100644
--- a/packages/components/src/DataList/DataList.types.ts
+++ b/packages/components/src/DataList/DataList.types.ts
@@ -213,6 +213,8 @@ export interface DataListSearchProps {
   readonly initialValue?: string;
 
   readonly onSearch: (value: string) => void;
+
+  readonly visible?: boolean;
 }
 
 export interface DataListFiltersProps {
diff --git a/packages/components/src/DataList/components/DataListSearch/DataListSearch.tsx b/packages/components/src/DataList/components/DataListSearch/DataListSearch.tsx
index 713e218cc9..eb3cfd2a97 100644
--- a/packages/components/src/DataList/components/DataListSearch/DataListSearch.tsx
+++ b/packages/components/src/DataList/components/DataListSearch/DataListSearch.tsx
@@ -1,4 +1,4 @@
-import React, { useCallback, useRef, useState } from "react";
+import React, { useCallback, useMemo, useRef, useState } from "react";
 import debounce from "lodash/debounce";
 import classNames from "classnames";
 import { tokens } from "@jobber/design";
@@ -23,11 +23,18 @@ export function DataListSearch(_: DataListSearchProps) {
  */
 export function InternalDataListSearch() {
   const inputRef = useRef<InputTextRef>(null);
-  const [visible, setVisible] = useState(false);
-
   const { searchComponent, filterComponent, sorting, title } =
     useDataListContext();
 
+  const [visibleInternal, setVisibleInternal] = useState(
+    searchComponent?.props.visible,
+  );
+
+  const visible =
+    useMemo(() => {
+      return searchComponent?.props.visible ?? visibleInternal;
+    }, [visibleInternal, searchComponent]) ?? false;
+
   const debouncedSearch = useCallback(
     debounce(
       (value: string) => searchComponent?.props?.onSearch(value),
@@ -96,7 +103,7 @@ export function InternalDataListSearch() {
 
   function toggleSearch() {
     const visibility = !visible;
-    setVisible(visibility);
+    setVisibleInternal(visibility);
 
     if (visibility && inputRef.current) {
       setTimeout(inputRef.current.focus, tokens["timing-quick"]);