diff --git a/packages/react/src/components/NumberInput/NumberInput.stories.js b/packages/react/src/components/NumberInput/NumberInput.stories.js
index b7fae720f439..9aa2ce7b2c23 100644
--- a/packages/react/src/components/NumberInput/NumberInput.stories.js
+++ b/packages/react/src/components/NumberInput/NumberInput.stories.js
@@ -83,50 +83,98 @@ export const withAILabel = () => (
   </div>
 );
 
-export const Playground = (args) => (
-  <div>
-    <NumberInput {...args} id="number-input" />
-  </div>
-);
+export const Playground = ({ ...args }) => {
+  const [value, setValue] = React.useState(50);
+
+  const handleChange = (event, { value }) => {
+    setValue(value);
+  };
+
+  return (
+    <NumberInput
+      id="playground-number-input"
+      min={-100}
+      max={100}
+      value={value}
+      label="NumberInput label"
+      helperText="Optional helper text."
+      onChange={handleChange}
+      {...args}
+    />
+  );
+};
 
 Playground.args = {
-  min: -100,
-  max: 100,
-  value: 50,
   step: 1,
+  disabled: false,
   invalid: false,
   invalidText: 'Error message goes here',
-  disabled: false,
-  label: 'NumberInput label',
-  helperText: 'Optional helper text.',
   warn: false,
-  warnText:
-    'Warning message that is really long can wrap to more lines but should not be excessively long.',
+  warnText: 'Warning message goes here',
   size: 'md',
 };
+
 Playground.argTypes = {
-  className: {
-    control: { type: 'text' },
+  min: { control: { type: 'number' } },
+  max: { control: { type: 'number' } },
+  step: { control: { type: 'number' } },
+  disabled: { control: { type: 'boolean' } },
+  invalid: { control: { type: 'boolean' } },
+  invalidText: { control: { type: 'text' } },
+  warn: { control: { type: 'boolean' } },
+  warnText: { control: { type: 'text' } },
+  size: {
+    options: ['sm', 'md', 'lg'],
+    control: { type: 'select' },
   },
-  defaultValue: {
+  label: { control: { type: 'text' } },
+  helperText: { control: { type: 'text' } },
+  id: {
     table: {
       disable: true,
     },
   },
-  min: {
-    control: { type: 'number' },
-  },
-  max: {
-    control: { type: 'number' },
+  light: {
+    table: {
+      disable: true,
+    },
   },
-  value: {
-    control: { type: 'number' },
+};
+
+export const Playground2 = ({ ...args }) => {
+  // const { numberInputArrowTranslationIds, ...rest } = props();
+  return (
+    <NumberInput
+      id="carbon-number"
+      min={-100}
+      max={100}
+      value={50}
+      label="NumberInput label"
+      helperText="Optional helper text."
+      invalidText="Number is not valid"
+      {...args}
+    />
+  );
+};
+
+Playground2.args = {
+  warnText:
+    'Warning message that is really long can wrap to more lines but should not be excessively long.',
+};
+
+Playground2.argTypes = {
+  className: {
+    table: {
+      disable: true,
+    },
   },
-  step: {
-    control: { type: 'number' },
+  defaultValue: {
+    table: {
+      disable: true,
+    },
   },
-  invalid: {
-    control: { type: 'boolean' },
+  helperText: {
+    control: { type: 'text' },
   },
   id: {
     table: {
@@ -136,9 +184,6 @@ Playground.argTypes = {
   invalidText: {
     control: { type: 'text' },
   },
-  disabled: {
-    control: { type: 'boolean' },
-  },
   label: {
     control: { type: 'text' },
   },
@@ -147,79 +192,26 @@ Playground.argTypes = {
       disable: true,
     },
   },
-  helperText: {
-    control: { type: 'text' },
-  },
-  warn: {
-    control: { type: 'boolean' },
-  },
-  warnText: {
-    control: { type: 'text' },
-  },
-  size: {
-    options: ['sm', 'md', 'lg', 'xl'],
-    control: { type: 'select' },
-  },
   onChange: {
     action: 'onChange',
   },
   onClick: {
     action: 'onClick',
   },
+  onKeyUp: {
+    action: 'onKeyUp',
+  },
   translateWithId: {
     table: {
       disable: true,
     },
   },
-  onKeyUp: {
-    action: 'onKeyUp',
+  value: {
+    control: { type: 'text' },
   },
-};
-
-export const Playground2 = ({ ...args }) => {
-  const [value, setValue] = React.useState(50);
-
-  const handleChange = (event, { value }) => {
-    setValue(value);
-  };
-
-  return (
-    <NumberInput
-      id="playground-number-input"
-      min={-100}
-      max={100}
-      value={value}
-      label="NumberInput label"
-      helperText="Optional helper text."
-      onChange={handleChange}
-      {...args}
-    />
-  );
-};
-
-Playground2.args = {
-  step: 1,
-  disabled: false,
-  invalid: false,
-  invalidText: 'Error message goes here',
-  warn: false,
-  warnText: 'Warning message goes here',
-  size: 'md',
-};
-
-Playground2.argTypes = {
-  min: { control: { type: 'number' } },
-  max: { control: { type: 'number' } },
-  step: { control: { type: 'number' } },
-  disabled: { control: { type: 'boolean' } },
-  invalid: { control: { type: 'boolean' } },
-  invalidText: { control: { type: 'text' } },
-  warn: { control: { type: 'boolean' } },
-  warnText: { control: { type: 'text' } },
-  size: {
-    options: ['sm', 'md', 'lg'],
-    control: { type: 'select' },
+  warnText: {
+    control: {
+      type: 'text',
+    },
   },
-  label: { control: { type: 'text' } },
-  helperText: { control: { type: 'text' } },
 };