diff --git a/packages/components/src/text-control/stories/index.js b/packages/components/src/text-control/stories/index.js
new file mode 100644
index 0000000000000..4d7163faff545
--- /dev/null
+++ b/packages/components/src/text-control/stories/index.js
@@ -0,0 +1,43 @@
+/**
+ * External dependencies
+ */
+import { boolean, text } from '@storybook/addon-knobs';
+
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import TextControl from '../';
+
+export default {
+	title: 'Components/TextControl',
+	component: TextControl,
+};
+
+const TextControlWithState = ( props ) => {
+	const [ value, setValue ] = useState();
+
+	return <TextControl { ...props } value={ value } onChange={ setValue } />;
+};
+
+export const _default = () => {
+	const label = text( 'Label', 'Label Text' );
+	const hideLabelFromVision = boolean( 'Hide Label From Vision', false );
+	const help = text( 'Help Text', 'Help text to explain the input.' );
+	const type = text( 'Input Type', 'text' );
+	const className = text( 'Class Name', '' );
+
+	return (
+		<TextControlWithState
+			label={ label }
+			hideLabelFromVision={ hideLabelFromVision }
+			help={ help }
+			type={ type }
+			className={ className }
+		/>
+	);
+};
diff --git a/storybook/test/__snapshots__/index.js.snap b/storybook/test/__snapshots__/index.js.snap
index d17f24d407078..d67f9d53ca6e2 100644
--- a/storybook/test/__snapshots__/index.js.snap
+++ b/storybook/test/__snapshots__/index.js.snap
@@ -7983,6 +7983,36 @@ exports[`Storyshots Components/TabPanel Default 1`] = `
 </div>
 `;
 
+exports[`Storyshots Components/TextControl Default 1`] = `
+<div
+  className="components-base-control"
+>
+  <div
+    className="components-base-control__field"
+  >
+    <label
+      className="components-base-control__label"
+      htmlFor="inspector-text-control-3"
+    >
+      Label Text
+    </label>
+    <input
+      aria-describedby="inspector-text-control-3__help"
+      className="components-text-control__input"
+      id="inspector-text-control-3"
+      onChange={[Function]}
+      type="text"
+    />
+  </div>
+  <p
+    className="components-base-control__help"
+    id="inspector-text-control-3__help"
+  >
+    Help text to explain the input.
+  </p>
+</div>
+`;
+
 exports[`Storyshots Components/TextHighlight Default 1`] = `
 Array [
   "We call the new editor ",