diff --git a/src/components/Table/MagnifyingGlass.svelte b/src/components/SearchInput/MagnifyingGlass.svelte
similarity index 100%
rename from src/components/Table/MagnifyingGlass.svelte
rename to src/components/SearchInput/MagnifyingGlass.svelte
diff --git a/src/components/SearchInput/SearchInput.stories.svelte b/src/components/SearchInput/SearchInput.stories.svelte
new file mode 100644
index 00000000..fc068ceb
--- /dev/null
+++ b/src/components/SearchInput/SearchInput.stories.svelte
@@ -0,0 +1,25 @@
+<script>
+  import { Meta, Template, Story } from '@storybook/addon-svelte-csf';
+
+  // Don't lose the "?raw" in markdown imports!
+  // @ts-ignore
+  import componentDocs from './stories/docs/component.md?raw';
+
+  import SearchInput from './SearchInput.svelte';
+
+  import { withComponentDocs } from '$docs/utils/withParams.js';
+
+  const meta = {
+    title: 'Components/SearchInput',
+    component: SearchInput,
+    ...withComponentDocs(componentDocs),
+  };
+</script>
+
+<Meta {...meta} />
+
+<Template let:args>
+  <SearchInput {...args} />
+</Template>
+
+<Story name="Default" args="{{}}" />
diff --git a/src/components/Table/Search.svelte b/src/components/SearchInput/SearchInput.svelte
similarity index 90%
rename from src/components/Table/Search.svelte
rename to src/components/SearchInput/SearchInput.svelte
index 37b16ff3..60416d21 100644
--- a/src/components/Table/Search.svelte
+++ b/src/components/SearchInput/SearchInput.svelte
@@ -1,3 +1,4 @@
+<!-- @component `SearchInput` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-SearchInput--default) -->
 <script lang="ts">
   import { createEventDispatcher } from 'svelte';
   import MagnifyingGlass from './MagnifyingGlass.svelte';
@@ -7,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/Table/X.svelte b/src/components/SearchInput/X.svelte
similarity index 100%
rename from src/components/Table/X.svelte
rename to src/components/SearchInput/X.svelte
diff --git a/src/components/SearchInput/stories/docs/component.md b/src/components/SearchInput/stories/docs/component.md
new file mode 100644
index 00000000..1adc87e4
--- /dev/null
+++ b/src/components/SearchInput/stories/docs/component.md
@@ -0,0 +1,17 @@
+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 on:search="{handleSearchInput}" />
+```
diff --git a/src/components/Table/Table.svelte b/src/components/Table/Table.svelte
index 56f29b3b..4d60e7e5 100644
--- a/src/components/Table/Table.svelte
+++ b/src/components/Table/Table.svelte
@@ -135,7 +135,7 @@
   /** Import local helpers */
   import Block from '../Block/Block.svelte';
   import Pagination from './Pagination.svelte';
-  import Search from './Search.svelte';
+  import SearchInput from '../SearchInput/SearchInput.svelte';
   import Select from './Select.svelte';
   import SortArrow from './SortArrow.svelte';
   import { filterArray, paginateArray, getOptions } from './utils.js';
@@ -236,7 +236,7 @@
             {/if}
             {#if searchable}
               <div class="table--header--search">
-                <Search
+                <SearchInput
                   bind:searchPlaceholder
                   on:search="{handleSearchInput}"
                 />
diff --git a/src/index.js b/src/index.js
index 618271a7..7c7db081 100644
--- a/src/index.js
+++ b/src/index.js
@@ -22,6 +22,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';