diff --git a/src/components/SearchInput/SearchInput.svelte b/src/components/SearchInput/SearchInput.svelte
index 04564c40..60416d21 100644
--- a/src/components/SearchInput/SearchInput.svelte
+++ b/src/components/SearchInput/SearchInput.svelte
@@ -8,7 +8,7 @@
    * The placeholder text that appears in the search box.
    * @type {string}
    */
-  export let searchPlaceholder: string = 'Search in table';
+  export let searchPlaceholder: string = 'Search...';
 
   let value = '';
   $: active = value !== '';
diff --git a/src/components/SearchInput/stories/docs/component.md b/src/components/SearchInput/stories/docs/component.md
index c8f9e9c9..1adc87e4 100644
--- a/src/components/SearchInput/stories/docs/component.md
+++ b/src/components/SearchInput/stories/docs/component.md
@@ -1,22 +1,17 @@
-> **Welcome to your new component!** Use this template to build your component and customise its storybook.
-
-- Build your component in `SearchInput/SearchInput.svelte`.
-- Write your component's storybook in `SearchInput/SearchInput.stories.svelte`.
-- Don't forget to add your component to `src/index.js`:
-
-  ```javascript
-  // ...
-  export { default as SearchInput } from './components/SearchInput/SearchInput.svelte';
-  ```
-
-- Commit your component to a new branch and push it to GitHub! 🏁
-
----
+Invite users to search for something.
 
 ```svelte
 <script>
   import { SearchInput } from '@reuters-graphics/graphics-components';
+
+  function handleSearchInput(event) {
+    const searchText = event.detail.value;
+    // Here's where you might update a variable,
+    // filter a dataset or make an API call
+    // based on the user's input.
+    console.log(`Search for ${searchText}`);
+  }
 </script>
 
-<SearchInput />
+<SearchInput on:search="{handleSearchInput}" />
 ```
diff --git a/src/components/SearchInput/stories/shark.jpg b/src/components/SearchInput/stories/shark.jpg
deleted file mode 100644
index 6d32b7fe..00000000
Binary files a/src/components/SearchInput/stories/shark.jpg and /dev/null differ
diff --git a/src/index.js b/src/index.js
index 11a2ab17..c80ab567 100644
--- a/src/index.js
+++ b/src/index.js
@@ -21,6 +21,7 @@ export { default as ReferralBlock } from './components/ReferralBlock/ReferralBlo
 export { default as ReutersGraphicsLogo } from './components/ReutersGraphicsLogo/ReutersGraphicsLogo.svelte';
 export { default as ReutersLogo } from './components/ReutersLogo/ReutersLogo.svelte';
 export { default as Scroller } from './components/Scroller/Scroller.svelte';
+export { default as SearchInput } from './components/SearchInput/SearchInput.svelte';
 export { default as SEO } from './components/SEO/SEO.svelte';
 export { default as Sharer } from './components/Sharer/Sharer.svelte';
 export { default as SimpleTimeline } from './components/SimpleTimeline/SimpleTimeline.svelte';