diff --git a/packages/components/src/box-control/stories/index.story.js b/packages/components/src/box-control/stories/index.story.js
deleted file mode 100644
index adbd0e15f7c44..0000000000000
--- a/packages/components/src/box-control/stories/index.story.js
+++ /dev/null
@@ -1,75 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { useState } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import BoxControl from '../';
-
-export default {
-	title: 'Components (Experimental)/BoxControl',
-	component: BoxControl,
-};
-
-export const _default = () => {
-	return <BoxControl />;
-};
-
-const defaultSideValues = {
-	top: '10px',
-	right: '10px',
-	bottom: '10px',
-	left: '10px',
-};
-
-function DemoExample( {
-	sides,
-	defaultValues = defaultSideValues,
-	splitOnAxis = false,
-} ) {
-	const [ values, setValues ] = useState( defaultValues );
-
-	return (
-		<BoxControl
-			label="Padding"
-			values={ values }
-			sides={ sides }
-			onChange={ setValues }
-			splitOnAxis={ splitOnAxis }
-		/>
-	);
-}
-
-export const ArbitrarySides = () => {
-	return (
-		<DemoExample
-			sides={ [ 'top', 'bottom' ] }
-			defaultValues={ { top: '10px', bottom: '10px' } }
-		/>
-	);
-};
-
-export const SingleSide = () => {
-	return (
-		<DemoExample
-			sides={ [ 'bottom' ] }
-			defaultValues={ { bottom: '10px' } }
-		/>
-	);
-};
-
-export const AxialControls = () => {
-	return <DemoExample splitOnAxis={ true } />;
-};
-
-export const AxialControlsWithSingleSide = () => {
-	return (
-		<DemoExample
-			sides={ [ 'horizontal' ] }
-			defaultValues={ { left: '10px', right: '10px' } }
-			splitOnAxis={ true }
-		/>
-	);
-};
diff --git a/packages/components/src/box-control/stories/index.story.tsx b/packages/components/src/box-control/stories/index.story.tsx
new file mode 100644
index 0000000000000..1b6604048f6d5
--- /dev/null
+++ b/packages/components/src/box-control/stories/index.story.tsx
@@ -0,0 +1,82 @@
+/**
+ * External dependencies
+ */
+import type { Meta, StoryFn } from '@storybook/react';
+
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import BoxControl from '../';
+
+const meta: Meta< typeof BoxControl > = {
+	title: 'Components (Experimental)/BoxControl',
+	component: BoxControl,
+	argTypes: {
+		values: { control: { type: null } },
+	},
+	parameters: {
+		actions: { argTypesRegex: '^on.*' },
+		controls: { expanded: true },
+		docs: { canvas: { sourceState: 'shown' } },
+	},
+};
+export default meta;
+
+const TemplateUncontrolled: StoryFn< typeof BoxControl > = ( props ) => {
+	return <BoxControl { ...props } />;
+};
+
+const TemplateControlled: StoryFn< typeof BoxControl > = ( props ) => {
+	const [ values, setValues ] = useState< ( typeof props )[ 'values' ] >();
+
+	return (
+		<BoxControl
+			values={ values }
+			{ ...props }
+			onChange={ ( nextValue ) => {
+				setValues( nextValue );
+				props.onChange?.( nextValue );
+			} }
+		/>
+	);
+};
+
+export const Default = TemplateUncontrolled.bind( {} );
+Default.args = {
+	label: 'Label',
+};
+
+export const Controlled = TemplateControlled.bind( {} );
+Controlled.args = {
+	...Default.args,
+};
+
+export const ArbitrarySides = TemplateControlled.bind( {} );
+ArbitrarySides.args = {
+	...Default.args,
+	sides: [ 'top', 'bottom' ],
+};
+
+export const SingleSide = TemplateControlled.bind( {} );
+SingleSide.args = {
+	...Default.args,
+	sides: [ 'bottom' ],
+};
+
+export const AxialControls = TemplateControlled.bind( {} );
+AxialControls.args = {
+	...Default.args,
+	splitOnAxis: true,
+};
+
+export const AxialControlsWithSingleSide = TemplateControlled.bind( {} );
+AxialControlsWithSingleSide.args = {
+	...Default.args,
+	sides: [ 'horizontal' ],
+	splitOnAxis: true,
+};