diff --git a/packages/block-editor/src/components/text-decoration-control/README.md b/packages/block-editor/src/components/text-decoration-control/README.md
index a606140baa330e..87fb6e89bd5712 100644
--- a/packages/block-editor/src/components/text-decoration-control/README.md
+++ b/packages/block-editor/src/components/text-decoration-control/README.md
@@ -28,7 +28,6 @@ Then, you can use the component in your block editor UI:
 ### `value`
 
 -   **Type:** `String`
--   **Default:** `none`
 -   **Options:** `none`, `underline`, `line-through`
 
 The current value of the Text Decoration setting. You may only choose from the `Options` listed above.
diff --git a/packages/block-editor/src/components/text-decoration-control/stories/index.story.js b/packages/block-editor/src/components/text-decoration-control/stories/index.story.js
index 2212b484185cde..d139b30a2bb4b5 100644
--- a/packages/block-editor/src/components/text-decoration-control/stories/index.story.js
+++ b/packages/block-editor/src/components/text-decoration-control/stories/index.story.js
@@ -8,26 +8,61 @@ import { useState } from '@wordpress/element';
  */
 import TextDecorationControl from '../';
 
-export default {
+const meta = {
 	title: 'BlockEditor/TextDecorationControl',
 	component: TextDecorationControl,
+	parameters: {
+		docs: {
+			canvas: { sourceState: 'shown' },
+			description: {
+				component: 'Control to facilitate text decoration selections.',
+			},
+		},
+	},
 	argTypes: {
-		onChange: { action: 'onChange' },
+		value: {
+			control: { type: null },
+			description: 'Currently selected text decoration.',
+			table: {
+				type: {
+					summary: 'string',
+				},
+			},
+		},
+		onChange: {
+			action: 'onChange',
+			control: { type: null },
+			description: 'Handles change in text decoration selection.',
+			table: {
+				type: {
+					summary: 'function',
+				},
+			},
+		},
+		className: {
+			control: 'text',
+			description: 'Additional class name to apply.',
+			table: {
+				type: { summary: 'string' },
+			},
+		},
 	},
 };
 
-const Template = ( { onChange, ...args } ) => {
-	const [ value, setValue ] = useState();
-	return (
-		<TextDecorationControl
-			{ ...args }
-			onChange={ ( ...changeArgs ) => {
-				onChange( ...changeArgs );
-				setValue( ...changeArgs );
-			} }
-			value={ value }
-		/>
-	);
-};
+export default meta;
 
-export const Default = Template.bind( {} );
+export const Default = {
+	render: function Template( { onChange, ...args } ) {
+		const [ value, setValue ] = useState();
+		return (
+			<TextDecorationControl
+				{ ...args }
+				onChange={ ( ...changeArgs ) => {
+					onChange( ...changeArgs );
+					setValue( ...changeArgs );
+				} }
+				value={ value }
+			/>
+		);
+	},
+};