diff --git a/superset-frontend/src/components/SearchInput/SearchInput.stories.tsx b/superset-frontend/src/components/SearchInput/SearchInput.stories.tsx
new file mode 100644
index 00000000000..18292fb6f22
--- /dev/null
+++ b/superset-frontend/src/components/SearchInput/SearchInput.stories.tsx
@@ -0,0 +1,62 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import React, { useState } from 'react';
+import SearchInput, { SearchInputProps } from '.';
+
+export default {
+  title: 'SearchInput',
+  component: SearchInput,
+};
+
+export const InteractiveSearchInput = ({
+  value,
+  ...rest
+}: SearchInputProps) => {
+  const [currentValue, setCurrentValue] = useState(value);
+  return (
+    <div style={{ width: 230 }}>
+      <SearchInput
+        {...rest}
+        value={currentValue}
+        onChange={e => setCurrentValue(e.target.value)}
+        onClear={() => setCurrentValue('')}
+      />
+    </div>
+  );
+};
+
+InteractiveSearchInput.args = {
+  value: 'Test',
+  placeholder: 'Enter some text',
+  name: 'search-input',
+};
+
+InteractiveSearchInput.argTypes = {
+  onSubmit: { action: 'onSubmit' },
+  onClear: { action: 'onClear' },
+  onChange: { action: 'onChange' },
+};
+
+InteractiveSearchInput.story = {
+  parameters: {
+    knobs: {
+      disable: true,
+    },
+  },
+};
diff --git a/superset-frontend/spec/javascripts/components/SearchInput_spec.jsx b/superset-frontend/src/components/SearchInput/SearchInput.test.jsx
similarity index 100%
rename from superset-frontend/spec/javascripts/components/SearchInput_spec.jsx
rename to superset-frontend/src/components/SearchInput/SearchInput.test.jsx
diff --git a/superset-frontend/src/components/SearchInput.tsx b/superset-frontend/src/components/SearchInput/index.tsx
similarity index 98%
rename from superset-frontend/src/components/SearchInput.tsx
rename to superset-frontend/src/components/SearchInput/index.tsx
index 959a2c88f93..ba7eb2d95fc 100644
--- a/superset-frontend/src/components/SearchInput.tsx
+++ b/superset-frontend/src/components/SearchInput/index.tsx
@@ -20,7 +20,7 @@ import { styled } from '@superset-ui/core';
 import React from 'react';
 import Icon from 'src/components/Icon';
 
-interface SearchInputProps {
+export interface SearchInputProps {
   onSubmit: () => void;
   onClear: () => void;
   value: string;