diff --git a/package-lock.json b/package-lock.json
index 1f6a63ff..9663a980 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -2531,6 +2531,21 @@
             "integrity": "sha512-Il2DtDVRGDcqjDtE+rF8iqg1CArehSK84HZJCT7AMITlyXRBpuPhqGLDQMowraqqu1coEaimg4ZOqggt6L6L+A==",
             "dev": true
         },
+        "@types/lodash": {
+            "version": "4.14.149",
+            "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.149.tgz",
+            "integrity": "sha512-ijGqzZt/b7BfzcK9vTrS6MFljQRPn5BFWOx8oE0GYxribu6uV+aA9zZuXI1zc/etK9E8nrgdoF2+LgUw7+9tJQ==",
+            "dev": true
+        },
+        "@types/lodash.debounce": {
+            "version": "4.0.6",
+            "resolved": "https://registry.npmjs.org/@types/lodash.debounce/-/lodash.debounce-4.0.6.tgz",
+            "integrity": "sha512-4WTmnnhCfDvvuLMaF3KV4Qfki93KebocUF45msxhYyjMttZDQYzHkO639ohhk8+oco2cluAFL3t5+Jn4mleylQ==",
+            "dev": true,
+            "requires": {
+                "@types/lodash": "*"
+            }
+        },
         "@types/minimatch": {
             "version": "3.0.3",
             "resolved": "https://registry.yarnpkg.com/@types/minimatch/-/minimatch-3.0.3.tgz",
diff --git a/package.json b/package.json
index 3ab8e813..1ff481ef 100755
--- a/package.json
+++ b/package.json
@@ -68,6 +68,7 @@
         "@types/enzyme-adapter-react-16": "^1.0.5",
         "@types/history": "^4.7.0",
         "@types/jest": "^23.3.14",
+        "@types/lodash.debounce": "^4.0.6",
         "@types/node": "^11.9.3",
         "@types/react-dom": "^16.0.7",
         "@types/react-router": "^4.0.30",
diff --git a/src/components/search_bar/__tests__/__snapshots__/search_bar.spec.tsx.snap b/src/components/search_bar/__tests__/__snapshots__/search_bar.spec.tsx.snap
new file mode 100644
index 00000000..f0bc24d1
--- /dev/null
+++ b/src/components/search_bar/__tests__/__snapshots__/search_bar.spec.tsx.snap
@@ -0,0 +1,50 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`search_bar.tsx snapshot and instance 1`] = `
+<SearchBar
+  emitDelay={0}
+  onChange={[MockFunction]}
+  placeholder="For example…"
+>
+  <div
+    className="search-bar"
+  >
+    <span
+      className="search-bar__icon"
+    >
+      <MagnifierIconSmall>
+        <svg
+          aria-hidden="true"
+          fill="currentColor"
+          focusable="false"
+          height="24px"
+          viewBox="0 0 24 24"
+          width="24px"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M15,1.99999996 C11.1,1.99999996 7.99999996,5.09999997 7.99999996,8.99999996 C7.99999996,10.6 8.49999996,12 9.39999999,13.2 L1.99999996,20.6 L3.39999996,22 L10.8,14.6 C12,15.5 13.4,16 15,16 C18.9,16 22,12.9 22,8.99999996 C22,5.09999997 18.9,1.99999996 15,1.99999996 Z M15,14 C12.2,14 9.99999999,11.8 9.99999999,8.99999997 C9.99999999,6.19999998 12.2,3.99999997 15,3.99999997 C17.8,3.99999997 20,6.19999998 20,8.99999997 C20,11.8 17.8,14 15,14 Z"
+            fill="currentColor"
+          />
+        </svg>
+      </MagnifierIconSmall>
+    </span>
+    <ForwardRef
+      className="search-bar__input"
+      hasError={false}
+      onChange={[Function]}
+      placeholder="For example…"
+      type="text"
+      value=""
+    >
+      <input
+        className="input-text search-bar__input"
+        onChange={[Function]}
+        placeholder="For example…"
+        type="text"
+        value=""
+      />
+    </ForwardRef>
+  </div>
+</SearchBar>
+`;
diff --git a/src/components/search_bar/__tests__/search_bar.spec.tsx b/src/components/search_bar/__tests__/search_bar.spec.tsx
new file mode 100644
index 00000000..9d98cf9c
--- /dev/null
+++ b/src/components/search_bar/__tests__/search_bar.spec.tsx
@@ -0,0 +1,58 @@
+import React from 'react';
+import { mount, ReactWrapper } from 'enzyme';
+import { SearchBar } from '..';
+
+// Use real timers for this one because https://github.com/facebook/jest/issues/3465
+
+describe('search_bar.tsx', () => {
+    let wrapper: ReactWrapper;
+    let emitDelay: number;
+    const query = 'hello world';
+    const placeholder = 'For example…';
+    const onChange: jest.Mock<any, any> = jest.fn();
+
+    afterEach(() => {
+        onChange.mockReset();
+        wrapper.unmount();
+    });
+
+    test('snapshot and instance', () => {
+        wrapper = mount(<SearchBar onChange={onChange} placeholder={placeholder} />);
+        expect(wrapper.instance()).toBeInstanceOf(SearchBar);
+        expect(wrapper).toMatchSnapshot();
+    });
+
+    test('with "query" prop', (done) => {
+        wrapper = mount(
+            <SearchBar
+                onChange={onChange}
+                placeholder={placeholder}
+                query={query}
+            />,
+        );
+        expect(onChange).not.toHaveBeenCalled();
+        setTimeout(() => {
+            expect(onChange).toHaveBeenCalledTimes(1);
+            expect(onChange).toHaveBeenCalledWith(query);
+            done();
+        }, 0);
+    });
+
+    test('with "emitDelay" prop', (done) => {
+        emitDelay = 500;
+        wrapper = mount(
+            <SearchBar
+                onChange={onChange}
+                placeholder={placeholder}
+                emitDelay={emitDelay}
+                query={query}
+            />,
+        );
+        expect(onChange).not.toHaveBeenCalled();
+        setTimeout(() => {
+            expect(onChange).toHaveBeenCalledTimes(1);
+            expect(onChange).toHaveBeenCalledWith(query);
+            done();
+        }, emitDelay);
+    });
+});
diff --git a/src/components/search_bar/index.ts b/src/components/search_bar/index.ts
new file mode 100644
index 00000000..01276108
--- /dev/null
+++ b/src/components/search_bar/index.ts
@@ -0,0 +1 @@
+export { SearchBar } from './search_bar';
diff --git a/src/components/search_bar.tsx b/src/components/search_bar/search_bar.tsx
similarity index 73%
rename from src/components/search_bar.tsx
rename to src/components/search_bar/search_bar.tsx
index 49bbee60..8c95eff0 100644
--- a/src/components/search_bar.tsx
+++ b/src/components/search_bar/search_bar.tsx
@@ -1,12 +1,13 @@
 import React from 'react';
 import debounce from 'lodash.debounce';
-import * as Input from './input';
-import * as Icon from './icons';
+import * as Input from '../input';
+import * as Icon from '../icons';
 
 interface SearchBarProps {
     query?: string;
     emitDelay?: number;
-    onChangeHandler: (value: string) => void;
+    onChange: (value: string) => void;
+    placeholder?: string;
 }
 
 interface SearchBarState {
@@ -18,8 +19,8 @@ class SearchBar extends React.Component<SearchBarProps, SearchBarState> {
         emitDelay: 0,
     }
 
-    debouncedEmit = (({ onChangeHandler, emitDelay }) => debounce(
-        onChangeHandler, emitDelay,
+    debouncedEmit = (({ onChange, emitDelay }) => debounce(
+        onChange, emitDelay,
     ))(this.props);
 
     constructor(props: Readonly<SearchBarProps>) {
@@ -55,12 +56,18 @@ class SearchBar extends React.Component<SearchBarProps, SearchBarState> {
     render() {
         const { query } = this.state;
         const { onChange } = this;
+        const { placeholder } = this.props;
         return (
             <div className="search-bar">
                 <span className="search-bar__icon">
                     <Icon.MagnifierSmall />
                 </span>
-                <Input.Text className="search-bar__input" value={query} onChange={onChange} />
+                <Input.Text
+                    className="search-bar__input"
+                    value={query}
+                    onChange={onChange}
+                    placeholder={placeholder}
+                />
             </div>
         );
     }
diff --git a/src/stories/search_bar.stories.tsx b/src/stories/search_bar.stories.tsx
index 7b4f824c..d2613132 100644
--- a/src/stories/search_bar.stories.tsx
+++ b/src/stories/search_bar.stories.tsx
@@ -21,7 +21,8 @@ stories.addDecorator(withKnobs)
 
 stories.add('SearchBar', () => (
     <SearchBar
-        onChangeHandler={action('query')}
+        onChange={action('query')}
         emitDelay={500}
+        placeholder="Search for…"
     />
 ));