diff --git a/packages/react-accordion/docs/react-accordion-demo.stories.js b/packages/react-accordion/docs/react-accordion-demo.stories.js
index 9fa1b060..5eda96e8 100644
--- a/packages/react-accordion/docs/react-accordion-demo.stories.js
+++ b/packages/react-accordion/docs/react-accordion-demo.stories.js
@@ -21,8 +21,10 @@ Demo.args = {
 	title: 'Accordion Item',
 	icon: 'wpmudev-logo',
 	image: LogoImage,
-  checkboxInput: true,
+  	checkboxInput: true,
 	checkboxId: 'accordion-item-1',
+	checkboxSelected: false,
+	checkboxClickHandler: null,
 	children: (
 		<div className="sui-box">
 			<div className="sui-box-body">
@@ -88,7 +90,6 @@ Demo.argTypes = {
 		description: 'Whether to show or hide checkbox.',
 		table: {
 			type: { summary: 'boolean' },
-			defaultValue: { summary: 'false' },
 		},
 		control: {
 			type: 'boolean',
@@ -98,7 +99,6 @@ Demo.argTypes = {
 		description: 'Id of accordion checkbox.',
 		table: {
 			type: { summary: 'string' },
-			defaultValue: { summary: 'null' },
 		},
 		control: {
 			type: 'text',
@@ -108,7 +108,6 @@ Demo.argTypes = {
 		description: 'Whether the checkbox should be default selected.',
 		table: {
 			type: { summary: 'boolean' },
-			defaultValue: { summary: 'false' },
 		},
 		control: {
 			type: 'boolean',
@@ -118,7 +117,6 @@ Demo.argTypes = {
 		description: 'Checkbox click event handler.',
 		table: {
 			type: { summary: 'function' },
-			defaultValue: { summary: 'null' },
 		},
 		control: {
 			type: null,
diff --git a/packages/react-box/docs/box-body.stories.js b/packages/react-box/docs/box-body.stories.js
index b403a992..b7a5f5b3 100644
--- a/packages/react-box/docs/box-body.stories.js
+++ b/packages/react-box/docs/box-body.stories.js
@@ -21,6 +21,7 @@ DefaultBody.storyName = 'Body';
 DefaultBody.args = {};
 DefaultBody.argTypes = {
 	alignment: {
+		options: ['left', 'center', 'right'],
 		type: {
 			name: 'string',
 			required: false,
@@ -28,11 +29,6 @@ DefaultBody.argTypes = {
 		description: 'Description goes here...',
 		control: {
 			type: 'select',
-			options: {
-				left: 'left',
-				center: 'center',
-				right: 'right',
-			},
 		},
 	},
 	paddingTop: {
diff --git a/packages/react-box/docs/box-footer.stories.js b/packages/react-box/docs/box-footer.stories.js
index 0c9aad88..218e4bbc 100644
--- a/packages/react-box/docs/box-footer.stories.js
+++ b/packages/react-box/docs/box-footer.stories.js
@@ -17,10 +17,13 @@ const Template = (args) => {
 
 export const SingleAction = Template.bind({});
 SingleAction.storyName = 'Single Action';
-SingleAction.args = {};
+SingleAction.args = {
+	children: <Button label="Save Changes" color="blue" />,
+};
 SingleAction.argTypes = {
 	display: {
 		name: 'Display',
+		options: ['block', 'inline'],
 		type: {
 			name: 'string',
 			required: false,
@@ -28,14 +31,11 @@ SingleAction.argTypes = {
 		description: 'Description goes here...',
 		control: {
 			type: 'select',
-			options: {
-				block: 'block',
-				inline: 'inline',
-			},
 		},
 	},
 	alignment: {
 		name: 'Alignment',
+		options: ['left', 'center', 'right'],
 		type: {
 			name: 'string',
 			required: false,
@@ -43,11 +43,6 @@ SingleAction.argTypes = {
 		description: 'Description goes here...',
 		control: {
 			type: 'select',
-			options: {
-				default: '',
-				center: 'center',
-				right: 'right',
-			},
 		},
 	},
 	paddingTop: {
@@ -121,9 +116,6 @@ SingleAction.argTypes = {
 			type: 'text',
 		},
 	},
-	children: {
-		defaultValue: <Button label="Save Changes" color="blue" />,
-	},
 };
 SingleAction.parameters = {
 	controls: {
@@ -133,26 +125,22 @@ SingleAction.parameters = {
 
 export const DoubleAction = Template.bind({});
 DoubleAction.storyName = 'Double Action';
-DoubleAction.args = {};
-DoubleAction.argTypes = {
-	...SingleAction.argTypes,
-	children: {
-		defaultValue: (
+DoubleAction.args = {
+	children: (
 			<>
 				<Button label="Save Changes" color="blue" />
 				<Button label="Cancel" icon="close" design="ghost" />
 			</>
-		),
-	},
+	)
+};
+DoubleAction.argTypes = {
+	...SingleAction.argTypes,
 };
 
 export const JointActions = Template.bind({});
 JointActions.storyName = 'Joint Actions';
-JointActions.args = {};
-JointActions.argTypes = {
-	...SingleAction.argTypes,
-	children: {
-		defaultValue: (
+JointActions.args = {
+	children: (
 			<>
 				<p className="sui-description" style={{ marginTop: 5, marginBottom: 5 }}>
 					Save your progress
@@ -162,6 +150,8 @@ JointActions.argTypes = {
 					<Button label="Draft Changes" design="ghost" />
 				</div>
 			</>
-		),
-	},
+	),
+};
+JointActions.argTypes = {
+	...SingleAction.argTypes,
 };
diff --git a/packages/react-box/docs/box-header.stories.js b/packages/react-box/docs/box-header.stories.js
index c468dfa2..7b39b7f3 100644
--- a/packages/react-box/docs/box-header.stories.js
+++ b/packages/react-box/docs/box-header.stories.js
@@ -54,6 +54,7 @@ SimpleHeader.argTypes = {
 		},
 	},
 	tagColor: {
+		options: ['default', 'red', 'yellow', 'green', 'blue', 'purple'],
 		type: {
 			name: 'string',
 			required: false,
@@ -62,17 +63,10 @@ SimpleHeader.argTypes = {
 			'By default **tags background** color is a subtle `light gray` but you can change this for any of the options suggested in the control selector: red, yellow, green, blue, purple. You can also leave this option empty, or simply not include it, to get default color.',
 		control: {
 			type: 'select',
-			options: {
-				default: '',
-				red: 'red',
-				yellow: 'yellow',
-				green: 'green',
-				blue: 'blue',
-				purple: 'purple',
-			},
 		},
 	},
 	tagSize: {
+		options: ['default', 'small'],
 		type: {
 			name: 'string',
 			required: false,
@@ -80,13 +74,10 @@ SimpleHeader.argTypes = {
 		description: 'By default ',
 		control: {
 			type: 'select',
-			options: {
-				default: '',
-				small: 'small',
-			},
 		},
 	},
 	display: {
+		options: ['block', 'inline'],
 		type: {
 			name: 'string',
 			required: false,
@@ -94,13 +85,10 @@ SimpleHeader.argTypes = {
 		description: 'Description goes here...',
 		control: {
 			type: 'select',
-			options: {
-				block: 'block',
-				inline: 'inline',
-			},
 		},
 	},
 	alignment: {
+		options: ['left', 'center', 'right'],
 		type: {
 			name: 'string',
 			required: false,
@@ -108,11 +96,6 @@ SimpleHeader.argTypes = {
 		description: 'Description goes here...',
 		control: {
 			type: 'select',
-			options: {
-				default: '',
-				center: 'center',
-				right: 'right',
-			},
 		},
 	},
 	paddingTop: {
@@ -199,22 +182,18 @@ export const ActionHeader = Template.bind({});
 ActionHeader.storyName = 'Title with Content';
 ActionHeader.args = {
 	...SimpleHeader.args,
+	children: <Button label="Right Action" color="blue" />,
 };
 ActionHeader.argTypes = {
 	...SimpleHeader.argTypes,
-	children: {
-		defaultValue: <Button label="Right Action" color="blue" />,
-	},
 };
 
 export const UntitledHeader = Template.bind({});
 UntitledHeader.storyName = 'Content Only';
 UntitledHeader.args = {
 	alignment: 'right',
+	children: <Button label="Right Action" color="blue" />
 };
 UntitledHeader.argTypes = {
 	...SimpleHeader.argTypes,
-	children: {
-		defaultValue: <Button label="Right Action" color="blue" />,
-	},
 };
diff --git a/packages/react-button-icon/docs/react-button-icon-demo.stories.js b/packages/react-button-icon/docs/react-button-icon-demo.stories.js
index 5975f02e..9b623b60 100644
--- a/packages/react-button-icon/docs/react-button-icon-demo.stories.js
+++ b/packages/react-button-icon/docs/react-button-icon-demo.stories.js
@@ -33,6 +33,7 @@ demo.argTypes = {
 		},
 	},
 	iconSize: {
+		options: ['', 'sm', 'md', 'lg'],
 		description:
 			'By default, the icon has a 12px size but you can change it with this property. You could use either:',
 		table: {
@@ -40,20 +41,20 @@ demo.argTypes = {
 		},
 		control: {
 			type: 'select',
-			options: ['', 'sm', 'md', 'lg'],
 		},
 	},
 	design: {
+		options: ['', 'outlined'],
 		description: 'The button styles. It could be either solid (default) or outlined.',
 		table: {
 			type: { summary: 'string' },
 		},
 		control: {
 			type: 'select',
-			options: ['', 'outlined'],
 		},
 	},
 	color: {
+		options: ['', 'blue', 'green', 'red', 'orange', 'purple', 'yellow', 'white'],
 		description:
 			'The button comes in gray color by default but you can change that with this property.',
 		table: {
@@ -61,7 +62,6 @@ demo.argTypes = {
 		},
 		control: {
 			type: 'select',
-			options: ['', 'blue', 'green', 'red', 'orange', 'purple', 'yellow', 'white'],
 		},
 	},
 	className: {
diff --git a/packages/react-button/docs/button-demo.stories.js b/packages/react-button/docs/button-demo.stories.js
index de2c1e74..b156ccc5 100644
--- a/packages/react-button/docs/button-demo.stories.js
+++ b/packages/react-button/docs/button-demo.stories.js
@@ -10,38 +10,45 @@ export const demo = (args) => <Button {...args} />;
 demo.storyName = 'Demo';
 demo.args = {
 	label: 'Button Label',
+	design: 'solid',
+	color: 'gray',
+	icon: null,
+	loading: false,
+	disabled: false,
+	className: null,
+	htmlFor: null,
+	href: null,
+	onClick: null,
+	iconRight: false,
 };
 demo.argTypes = {
 	label: {
 		description: 'The text that shows up in the button',
 		table: {
 			type: { summary: 'string' },
-			defaultValue: { summary: '' },
 		},
 		control: {
 			type: 'text',
 		},
 	},
 	design: {
+		options: ['solid', 'ghost'],
 		description: 'The button style',
 		table: {
 			type: { summary: 'string' },
-			defaultValue: { summary: 'solid' },
 		},
 		control: {
 			type: 'select',
-			options: ['solid', 'ghost'],
 		},
 	},
 	color: {
+		options: ['gray', 'blue', 'green', 'red', 'orange', 'purple', 'yellow', 'white'],
 		description: 'The button color',
 		table: {
 			type: { summary: 'string' },
-			defaultValue: { summary: 'gray' },
 		},
 		control: {
 			type: 'select',
-			options: ['gray', 'blue', 'green', 'red', 'orange', 'purple', 'yellow', 'white'],
 		},
 	},
 	icon: {
@@ -49,7 +56,6 @@ demo.argTypes = {
 			'Name of the icon to include in the button. Check out the <a href="https://wpmudev.github.io/shared-ui/icons/" target="_blank">available icons</a>',
 		table: {
 			type: { summary: 'string' },
-			defaultValue: { summary: 'null' },
 		},
 		control: {
 			type: 'text',
@@ -59,17 +65,15 @@ demo.argTypes = {
 		description: 'Whether the button should show up as "loading"',
 		table: {
 			type: { summary: 'boolean' },
-			defaultValue: { summary: 'false' },
 		},
 		control: {
 			type: 'boolean',
 		},
 	},
-	disable: {
+	disabled: {
 		description: 'Whether the button should be disabled',
 		table: {
 			type: { summary: 'boolean' },
-			defaultValue: { summary: 'false' },
 		},
 		control: {
 			type: 'boolean',
@@ -79,7 +83,6 @@ demo.argTypes = {
 		description: 'Extra classes to add to the button',
 		table: {
 			type: { summary: 'string' },
-			defaultValue: { summary: 'null' },
 		},
 		control: {
 			type: 'text',
@@ -90,7 +93,6 @@ demo.argTypes = {
 			'When you want the button to be a label, provide the ID of the input it is a label for. Passing a value that is not `null` makes the button be a `<label>`',
 		table: {
 			type: { summary: 'string' },
-			defaultValue: { summary: 'null' },
 		},
 		control: {
 			type: 'text',
@@ -101,7 +103,6 @@ demo.argTypes = {
 			'When you want the button to be an hyperlink, provide value of the `href` attribute. Passing a value that is not `null` makes the button be an `<a>`',
 		table: {
 			type: { summary: 'string' },
-			defaultValue: { summary: 'null' },
 		},
 		control: {
 			type: 'text',
@@ -111,7 +112,6 @@ demo.argTypes = {
 		description: 'Callback for the onClick event',
 		table: {
 			type: { summary: 'function' },
-			defaultValue: { summary: 'null' },
 		},
 		control: {
 			type: null,
@@ -121,7 +121,6 @@ demo.argTypes = {
 		description: 'Whether the button should have the icon on the right or on the left',
 		table: {
 			type: { summary: 'boolean' },
-			defaultValue: { summary: 'false' },
 		},
 		control: {
 			type: 'boolean',
diff --git a/packages/react-dropdown/docs/react-dropdown-demo.stories.js b/packages/react-dropdown/docs/react-dropdown-demo.stories.js
index 7faa2249..c0e3141f 100644
--- a/packages/react-dropdown/docs/react-dropdown-demo.stories.js
+++ b/packages/react-dropdown/docs/react-dropdown-demo.stories.js
@@ -34,24 +34,20 @@ demo.args = {
 };
 demo.argTypes = {
 	position: {
+		options: ['left', 'center', 'right'],
 		type: {
 			name: 'string',
 			required: false,
 		},
 		description: 'This property will determine where the dropdown menu will be placed.',
-		defaultValue: 'left',
 		control: {
 			type: 'select',
-			options: ['left', 'center', 'right'],
 		},
 		table: {
 			type: {
 				summary: 'options',
 				detail: '"left", "center", "right"',
 			},
-			defaultValue: {
-				summary: 'left',
-			},
 		},
 	},
 	children: {
diff --git a/packages/react-input/docs/input-demo.stories.js b/packages/react-input/docs/input-demo.stories.js
index f73d3682..d117065d 100644
--- a/packages/react-input/docs/input-demo.stories.js
+++ b/packages/react-input/docs/input-demo.stories.js
@@ -16,6 +16,7 @@ demo.storyName = 'Demo';
 demo.args = {
 	label: 'Company Name',
 	placeholder: 'Eg. Acme Industries',
+	type: 'text',
 	description: 'Maecenas sed diam eget risus varius blandit sit amet non magna.',
 	errorDescription: 'Here is a description of the error',
 };
@@ -71,6 +72,7 @@ demo.argTypes = {
 	},
 	// Field Modifiers
 	fieldSize: {
+		options: ['none', 'small', 'medium'],
 		description: 'Modify the size of the entire container. Allowed options:',
 		table: {
 			category: 'Field Modifiers',
@@ -80,11 +82,6 @@ demo.argTypes = {
 		},
 		control: {
 			type: 'select',
-			options: {
-				none: '',
-				small: 'small',
-				medium: 'medium',
-			},
 		},
 	},
 	// Input Modifiers
@@ -96,15 +93,13 @@ demo.argTypes = {
 			type: {
 				summary: 'text | number | email | password | tel | time | url | hidden',
 			},
-			defaultValue: {
-				summary: 'text',
-			},
 		},
 		control: {
 			type: 'text',
 		},
 	},
 	size: {
+		options: ['none', 'small', 'medium'],
 		description: 'Modify the size of the input field only. Allowed options:',
 		table: {
 			category: 'Input Modifiers',
@@ -114,11 +109,6 @@ demo.argTypes = {
 		},
 		control: {
 			type: 'select',
-			options: {
-				none: '',
-				small: 'small',
-				medium: 'medium',
-			},
 		},
 	},
 	prefix: {
diff --git a/packages/react-notifications/docs/react-notifications-demo.stories.js b/packages/react-notifications/docs/react-notifications-demo.stories.js
index cced7997..bdcfba4e 100644
--- a/packages/react-notifications/docs/react-notifications-demo.stories.js
+++ b/packages/react-notifications/docs/react-notifications-demo.stories.js
@@ -42,6 +42,7 @@ demo.argTypes = {
 		},
 	},
 	type: {
+		options: ['', 'info', 'success', 'error', 'warning', 'upsell'],
 		description:
 			'Use this argument to change notifications color based on the type of notice you want to show.',
 		table: {
@@ -49,7 +50,6 @@ demo.argTypes = {
 		},
 		control: {
 			type: 'select',
-			options: ['', 'info', 'success', 'error', 'warning', 'upsell'],
 		},
 	},
 	dismiss: {
diff --git a/packages/react-progress-bar/docs/progress-bar-demo.stories.js b/packages/react-progress-bar/docs/progress-bar-demo.stories.js
index a569e1e5..7c9fe6e2 100644
--- a/packages/react-progress-bar/docs/progress-bar-demo.stories.js
+++ b/packages/react-progress-bar/docs/progress-bar-demo.stories.js
@@ -31,9 +31,6 @@ demo.argTypes = {
 			type: {
 				summary: 'number',
 			},
-			defaultValue: {
-				summary: '0',
-			},
 		},
 		control: {
 			type: 'range',
@@ -48,9 +45,6 @@ demo.argTypes = {
 			type: {
 				summary: 'boolean',
 			},
-			defaultValue: {
-				summary: 'true',
-			},
 		},
 		control: {
 			type: 'boolean',
@@ -62,9 +56,6 @@ demo.argTypes = {
 			type: {
 				summary: 'boolean',
 			},
-			defaultValue: {
-				summary: 'true',
-			},
 		},
 		control: {
 			type: 'boolean',
@@ -76,9 +67,6 @@ demo.argTypes = {
 			type: {
 				summary: 'boolean',
 			},
-			defaultValue: {
-				summary: 'true',
-			},
 		},
 		control: {
 			type: 'boolean',
@@ -91,9 +79,6 @@ demo.argTypes = {
 			type: {
 				summary: 'boolean',
 			},
-			defaultValue: {
-				summary: 'false',
-			},
 		},
 		control: {
 			type: 'boolean',
@@ -106,9 +91,6 @@ demo.argTypes = {
 			type: {
 				summary: 'boolean',
 			},
-			defaultValue: {
-				summary: 'false',
-			},
 		},
 		control: {
 			type: 'boolean',
diff --git a/packages/react-radio-checkbox/docs/react-checkbox.stories.js b/packages/react-radio-checkbox/docs/react-checkbox.stories.js
index 1f6c6468..4c56f3c0 100644
--- a/packages/react-radio-checkbox/docs/react-checkbox.stories.js
+++ b/packages/react-radio-checkbox/docs/react-checkbox.stories.js
@@ -36,15 +36,15 @@ export default {
     },
     argTypes: {
         size: {
+            options: ['default', 'small'],
             control: {
                 type: 'select',
-                options: ['default', 'small'],
             },
         },
         type: {
+            options: ['radio', 'checkbox'],
             control: {
                 type: 'select',
-                options: ['radio', 'checkbox'],
             },
         }
     },
diff --git a/packages/react-radio-checkbox/docs/react-radio.stories.js b/packages/react-radio-checkbox/docs/react-radio.stories.js
index b671f9fa..9b34cee4 100644
--- a/packages/react-radio-checkbox/docs/react-radio.stories.js
+++ b/packages/react-radio-checkbox/docs/react-radio.stories.js
@@ -36,15 +36,15 @@ export default {
     },
     argTypes: {
         size: {
+            options: ['default', 'small'],
             control: {
                 type: 'select',
-                options: ['default', 'small'],
             },
         },
         type: {
+            options: ['radio', 'checkbox'],
             control: {
                 type: 'select',
-                options: ['radio', 'checkbox'],
             },
         }
     },