diff --git a/src/calendar/stories/Calendar.stories.tsx b/src/calendar/stories/Calendar.stories.tsx
index 7b462e45d..9dba56852 100644
--- a/src/calendar/stories/Calendar.stories.tsx
+++ b/src/calendar/stories/Calendar.stories.tsx
@@ -1,6 +1,7 @@
 import "./index.css";
 import * as React from "react";
 import { Meta, Story } from "@storybook/react";
+import { useArgs } from "@storybook/client-api";
 import { addWeeks, format, subWeeks } from "date-fns";
 
 import { CalendarComponent } from "./CalendarComponent";
@@ -22,13 +23,23 @@ const Base: Story = args => {
   args.minValue &&= format(new Date(args.minValue), "yyyy-MM-dd");
   args.maxValue &&= format(new Date(args.maxValue), "yyyy-MM-dd");
 
-  return <CalendarComponent {...args} />;
+  const [{ value }, updateArgs] = useArgs();
+
+  return (
+    <CalendarComponent
+      value={value}
+      onChange={date =>
+        updateArgs({ value: format(new Date(date), "yyyy-MM-dd") })
+      }
+      {...args}
+    />
+  );
 };
 
 export const Default = Base.bind({});
 
 export const DefaultValue = Base.bind({});
-DefaultValue.args = { defaultValue: "2001-01-01" };
+DefaultValue.args = { value: "2001-01-01", defaultValue: "2001-01-01" };
 
 export const MinMaxDate = Base.bind({});
 MinMaxDate.args = {
diff --git a/src/calendar/stories/RangeCalendar.stories.tsx b/src/calendar/stories/RangeCalendar.stories.tsx
index 71b352b89..92ee1c379 100644
--- a/src/calendar/stories/RangeCalendar.stories.tsx
+++ b/src/calendar/stories/RangeCalendar.stories.tsx
@@ -1,15 +1,10 @@
 import "./range-style.css";
-import {
-  addDays,
-  addWeeks,
-  subDays,
-  format,
-  setDate,
-  subWeeks,
-} from "date-fns";
 import * as React from "react";
 import { Meta, Story } from "@storybook/react";
+import { useArgs } from "@storybook/client-api";
+
 import RangeCalendarComponent from "./RangeCalendarComponent";
+import { addDays, addWeeks, subDays, format, subWeeks } from "date-fns";
 
 export default {
   title: "RangeCalendar",
@@ -43,20 +38,37 @@ const Base: Story = args => {
   args.minValue &&= format(new Date(args.minValue), "yyyy-MM-dd");
   args.maxValue &&= format(new Date(args.maxValue), "yyyy-MM-dd");
 
-  return <RangeCalendarComponent {...args} />;
+  const [argProps, updateArgs] = useArgs();
+
+  return (
+    <RangeCalendarComponent
+      value={{ start: argProps["start"], end: argProps["nd"] }}
+      onChange={date => {
+        updateArgs({
+          start: format(new Date(date.start), "yyyy-MM-dd"),
+          end: format(new Date(date.end), "yyyy-MM-dd"),
+        });
+      }}
+      {...args}
+    />
+  );
 };
 
 export const Default = Base.bind({});
 
 export const DefaultValue = Base.bind({});
 DefaultValue.args = {
-  defaultStart: setDate(new Date(), 10),
-  defaultEnd: new Date(),
+  start: new Date(),
+  end: addWeeks(new Date(), 1),
+  defaultStart: new Date(),
+  defaultEnd: addWeeks(new Date(), 1),
 };
 
 export const MinMaxDefaultDate = Base.bind({});
 MinMaxDefaultDate.args = {
-  minValue: subWeeks(new Date(), 1),
+  start: new Date(),
+  end: addDays(new Date(), 1),
+  minValue: subWeeks(new Date(), 4),
   maxValue: addWeeks(new Date(), 1),
 };
 
diff --git a/src/datepicker/stories/DatePicker.stories.tsx b/src/datepicker/stories/DatePicker.stories.tsx
index c227cae6c..8f93f7965 100644
--- a/src/datepicker/stories/DatePicker.stories.tsx
+++ b/src/datepicker/stories/DatePicker.stories.tsx
@@ -1,7 +1,8 @@
 import "./index.css";
 import * as React from "react";
+import { useArgs } from "@storybook/client-api";
 import { Meta, Story } from "@storybook/react";
-import { addWeeks, subWeeks, format } from "date-fns";
+import { addWeeks, subWeeks, format, addDays } from "date-fns";
 
 import DatePickerComponent from "./DatePickerComponent";
 
@@ -22,23 +23,37 @@ const Base: Story = args => {
   args.minValue &&= format(new Date(args.minValue), "yyyy-MM-dd");
   args.maxValue &&= format(new Date(args.maxValue), "yyyy-MM-dd");
 
-  return <DatePickerComponent {...args} />;
+  const [{ value }, updateArgs] = useArgs();
+
+  return (
+    <DatePickerComponent
+      value={value}
+      onChange={date =>
+        updateArgs({ value: format(new Date(date), "yyyy-MM-dd") })
+      }
+      {...args}
+    />
+  );
 };
 
 export const Default = Base.bind({});
 
 export const InitialDate = Base.bind({});
-InitialDate.args = { defaultDate: "2020-02-29" };
+InitialDate.args = {
+  value: "2020-02-29",
+  defaultDate: "2020-02-29",
+};
 
 export const MinMaxDate = Base.bind({});
 MinMaxDate.args = {
+  value: addDays(new Date(), 2),
   minValue: new Date(),
   maxValue: addWeeks(new Date(), 2),
 };
 
 export const InValidDate = Base.bind({});
 InValidDate.args = {
-  defaultValue: addWeeks(new Date(), 2),
+  value: addWeeks(new Date(), 2),
   minValue: subWeeks(new Date(), 1),
   maxValue: addWeeks(new Date(), 1),
 };
diff --git a/src/datepicker/stories/DateRangePicker.stories.tsx b/src/datepicker/stories/DateRangePicker.stories.tsx
index 15dd05f47..052d84703 100644
--- a/src/datepicker/stories/DateRangePicker.stories.tsx
+++ b/src/datepicker/stories/DateRangePicker.stories.tsx
@@ -2,6 +2,7 @@ import "./index.css";
 import * as React from "react";
 import { format } from "date-fns";
 import { Meta, Story } from "@storybook/react";
+import { useArgs } from "@storybook/client-api";
 import { addWeeks, setDate, subWeeks } from "date-fns";
 
 import DateRangePickerComponent from "./DateRangePickerComponent";
@@ -25,7 +26,20 @@ const Base: Story = args => {
   args.minValue &&= format(new Date(args.minValue), "yyyy-MM-dd");
   args.maxValue &&= format(new Date(args.maxValue), "yyyy-MM-dd");
 
-  return <DateRangePickerComponent {...args} />;
+  const [argProps, updateArgs] = useArgs();
+
+  return (
+    <DateRangePickerComponent
+      value={{ start: argProps["start"], end: argProps["nd"] }}
+      onChange={date => {
+        updateArgs({
+          start: format(new Date(date.start), "yyyy-MM-dd"),
+          end: format(new Date(date.end), "yyyy-MM-dd"),
+        });
+      }}
+      {...args}
+    />
+  );
 };
 
 export const Default = Base.bind({});
@@ -36,8 +50,10 @@ DefaultValue.args = {
   end: new Date(),
 };
 
-export const DateRangePickerComp = Base.bind({});
-DateRangePickerComp.args = {
+export const MinMaxValue = Base.bind({});
+MinMaxValue.args = {
+  start: setDate(new Date(), 10),
+  end: new Date(),
   minValue: subWeeks(new Date(), 1),
   maxValue: addWeeks(new Date(), 1),
 };
diff --git a/src/number-input/stories/NumberInput.stories.tsx b/src/number-input/stories/NumberInput.stories.tsx
index e2b58aa79..fe8617a00 100644
--- a/src/number-input/stories/NumberInput.stories.tsx
+++ b/src/number-input/stories/NumberInput.stories.tsx
@@ -1,5 +1,6 @@
 import React from "react";
-import { Meta } from "@storybook/react";
+import { Meta, Story } from "@storybook/react";
+import { useArgs } from "@storybook/client-api";
 import { useForm, Controller } from "react-hook-form";
 
 import { NumberInput } from "../NumberInput";
@@ -8,7 +9,9 @@ import { NumberInputIncrementButton } from "../NumberInputIncrementButton";
 import { UseNumberInputProps, useNumberInputState } from "../NumberInputState";
 
 const NumberInputComp = (props: UseNumberInputProps) => {
-  const state = useNumberInputState(props);
+  const state = useNumberInputState({
+    ...props,
+  });
 
   return (
     <div>
@@ -22,12 +25,112 @@ const NumberInputComp = (props: UseNumberInputProps) => {
 export default {
   title: "NumberInput",
   component: NumberInput,
+  argTypes: {
+    value: { control: "number" },
+    min: { control: "number" },
+    step: { control: "number" },
+    max: { control: "number" },
+    precision: { control: "number" },
+    defaultValue: { control: "number" },
+    isDisabled: { control: "boolean" },
+    isReadOnly: { control: "boolean" },
+    keepWithinRange: { control: "boolean" },
+    clampValueOnBlur: { control: "boolean" },
+    focusInputOnChange: { control: "boolean" },
+  },
 } as Meta;
 
-export const Default = () => {
-  const props = {};
+const Base: Story = args => {
+  const [{ value, defaultValue }, updateArgs] = useArgs();
+
+  return (
+    <NumberInputComp
+      onChange={value => {
+        updateArgs({ value });
+      }}
+      defaultValue={defaultValue}
+      value={value || defaultValue}
+      {...args}
+    />
+  );
+};
+
+export const Default = Base.bind({});
+
+export const DefaultValue = Base.bind({});
+DefaultValue.args = {
+  defaultValue: 15,
+  min: 10,
+  max: 20,
+};
+
+export const Step = Base.bind({});
+Step.args = {
+  defaultValue: 15,
+  min: 10,
+  max: 30,
+  step: 5,
+};
+
+export const Precision = Base.bind({});
+Precision.args = {
+  defaultValue: 15,
+  min: 10,
+  max: 30,
+  step: 0.2,
+  precision: 2,
+};
+
+export const ClampValueOnBlurFalse = Base.bind({});
+ClampValueOnBlurFalse.args = {
+  defaultValue: 15,
+  min: 10,
+  max: 30,
+  step: 0.2,
+  precision: 2,
+  clampValueOnBlur: false,
+  keepWithinRange: false,
+};
+
+export const KeepWithinRangeFalse = Base.bind({});
+KeepWithinRangeFalse.args = {
+  defaultValue: 15,
+  min: 10,
+  max: 30,
+  step: 0.2,
+  precision: 2,
+  clampValueOnBlur: false,
+  keepWithinRange: false,
+};
+
+export const Disabled = Base.bind({});
+Disabled.args = {
+  defaultValue: 15,
+  min: 10,
+  max: 20,
+  isDisabled: true,
+};
+
+export const ReadOnly = Base.bind({});
+ReadOnly.args = {
+  defaultValue: 15,
+  min: 10,
+  max: 20,
+  isReadOnly: true,
+};
 
-  return <NumberInputComp {...props} />;
+export const Options = Base.bind({});
+Options.args = {
+  min: 0,
+  step: 1,
+  max: 100,
+  precision: 1,
+  defaultValue: 5,
+  isDisabled: false,
+  isReadOnly: false,
+  keepWithinRange: true,
+  clampValueOnBlur: false,
+  focusInputOnChange: false,
 };
 
 const NumberComponent: React.FC<any> = ({ onChange, value, name }) => {
@@ -65,86 +168,3 @@ export const ReactHookForm = () => {
     </form>
   );
 };
-
-export const DefaultValue = () => {
-  const props = {
-    defaultValue: 15,
-    min: 10,
-    max: 20,
-  };
-
-  return <NumberInputComp {...props} />;
-};
-
-export const Step = () => {
-  const props = {
-    defaultValue: 15,
-    min: 10,
-    max: 30,
-    step: 5,
-  };
-
-  return <NumberInputComp {...props} />;
-};
-
-export const Precision = () => {
-  const props = {
-    defaultValue: 15,
-    min: 10,
-    max: 30,
-    step: 0.2,
-    precision: 2,
-  };
-
-  return <NumberInputComp {...props} />;
-};
-
-export const ClampValueOnBlurFalse = () => {
-  const props = {
-    defaultValue: 15,
-    min: 10,
-    max: 30,
-    step: 0.2,
-    precision: 2,
-    clampValueOnBlur: false,
-    keepWithinRange: false,
-  };
-
-  return <NumberInputComp {...props} />;
-};
-
-export const KeepWithinRangeFalse = () => {
-  const props = {
-    defaultValue: 15,
-    min: 10,
-    max: 30,
-    step: 0.2,
-    precision: 2,
-    clampValueOnBlur: false,
-    keepWithinRange: false,
-  };
-
-  return <NumberInputComp {...props} />;
-};
-
-export const Disabled = () => {
-  const props = {
-    defaultValue: 15,
-    min: 10,
-    max: 20,
-    isDisabled: true,
-  };
-
-  return <NumberInputComp {...props} />;
-};
-
-export const ReadOnly = () => {
-  const props = {
-    defaultValue: 15,
-    min: 10,
-    max: 20,
-    isReadOnly: true,
-  };
-
-  return <NumberInputComp {...props} />;
-};