diff --git a/packages/components/src/toggle-control/stories/index.js b/packages/components/src/toggle-control/stories/index.js
new file mode 100644
index 0000000000000..fbf22adf3eeac
--- /dev/null
+++ b/packages/components/src/toggle-control/stories/index.js
@@ -0,0 +1,52 @@
+/**
+ * External dependencies
+ */
+import { text } from '@storybook/addon-knobs';
+
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import ToggleControl from '../';
+
+export default { title: 'ToggleControl', component: ToggleControl };
+
+const ToggleControlWithState = ( { helpTextChecked, helpTextUnchecked, ...props } ) => {
+	const [ hasFixedBackground, setHasFixedBackground ] = useState( true );
+	return (
+		<ToggleControl
+			{ ...props }
+			help={ hasFixedBackground ? helpTextChecked : helpTextUnchecked }
+			checked={ hasFixedBackground }
+			onChange={ setHasFixedBackground }
+		/>
+	);
+};
+
+export const _default = () => {
+	const label = text( 'Label', 'Does this have a fixed background?' );
+
+	return (
+		<ToggleControlWithState
+			label={ label }
+		/>
+	);
+};
+
+export const withHelpText = () => {
+	const label = text( 'Label', 'Does this have a fixed background?' );
+	const helpTextChecked = text( 'Help When Checked', 'Has fixed background.' );
+	const helpTextUnchecked = text( 'Help When Unchecked', 'No fixed background.' );
+
+	return (
+		<ToggleControlWithState
+			label={ label }
+			helpTextChecked={ helpTextChecked }
+			helpTextUnchecked={ helpTextUnchecked }
+		/>
+	);
+};