diff --git a/stories/0-Form.stories.tsx b/stories/0-Form.stories.tsx
deleted file mode 100644
index c99b5689..00000000
--- a/stories/0-Form.stories.tsx
+++ /dev/null
@@ -1,511 +0,0 @@
-import React, {Fragment} from "react";
-import {storiesOf} from "@storybook/react";
-
-import StateProvider from "./utils/StateProvider";
-
-import FormField from "../src/form/field/FormField";
-import Input from "../src/form/input/Input";
-import PasswordInput from "../src/form/password-input/PasswordInput";
-import CheckboxInput from "../src/form/input/checkbox/CheckboxInput";
-import RadioGroup from "../src/form/input/radio/group/RadioGroup";
-import Textarea from "../src/form/textarea/Textarea";
-import StoryFragment from "./utils/StoryFragment";
-
-storiesOf("Form", module)
-  .add("Input States", () => (
-    <Fragment>
-      <Input
-        name={"fullName"}
-        onChange={(e) => console.log(e.currentTarget.value)}
-        placeholder={"Full Name"}
-      />
-
-      <br />
-
-      <Input
-        name={"fullName"}
-        onChange={(e) => console.log(e.currentTarget.value)}
-        placeholder={"Full Name"}
-        isDisabled={true}
-      />
-    </Fragment>
-  ))
-  .add("FormFieldWithInput", () => (
-    <FormField labelledBy={"Full Name"} label={"Full Name"}>
-      <Input
-        name={"fullName"}
-        placeholder={"Write your name"}
-        onChange={(e) => console.log(e.currentTarget.value)}
-      />
-    </FormField>
-  ))
-  .add("FormFieldWithInput.HasHelperMessage", () => (
-    <FormField
-      labelledBy={"Full Name"}
-      label={"Full Name"}
-      helperMessages={["You can include your middle name"]}>
-      <Input name="fullName" onChange={(e) => console.log(e.currentTarget.value)} />
-    </FormField>
-  ))
-  .add("FormFieldWithInput.HasErrorMessage", () => (
-    <FormField
-      labelledBy={"Full Name"}
-      label={"Full Name"}
-      errorMessages={["Please enter a full name"]}>
-      <Input
-        name={"fullName"}
-        hasError={true}
-        onChange={(e) => console.log(e.currentTarget.value)}
-      />
-    </FormField>
-  ))
-  .add("Textarea States", () => (
-    <StoryFragment>
-      <Textarea
-        id={"textarea-fixed"}
-        name={"Fixed size Textarea"}
-        placeholder={"Write your address"}
-        onChange={(e) => {
-          console.log(e.currentTarget.value);
-        }}
-      />
-
-      <br />
-
-      <Textarea
-        id={"textarea-fixed"}
-        name={"Disabled fixed size Textarea"}
-        placeholder={"Write your address"}
-        isDisabled={true}
-        onChange={(e) => {
-          console.log(e.currentTarget.value);
-        }}
-      />
-    </StoryFragment>
-  ))
-  .add("Textarea AutoSize", () => (
-    <StoryFragment>
-      <Textarea
-        id={"textarea-auto-size"}
-        name={"Auto size Textarea"}
-        placeholder={"Write a paragraph"}
-        autoSizeProps={{}}
-        onChange={(e) => {
-          console.log(e.currentTarget.value);
-        }}
-      />
-
-      <br />
-
-      <Textarea
-        id={"textarea-auto-size"}
-        name={"Disabled auto size Textarea"}
-        placeholder={"Write a paragraph"}
-        autoSizeProps={{}}
-        isDisabled={true}
-        onChange={(e) => {
-          console.log(e.currentTarget.value);
-        }}
-      />
-    </StoryFragment>
-  ))
-  .add("Textarea.HasErrorMessage", () => (
-    <FormField
-      labelledBy={"Address"}
-      label={"Address"}
-      errorMessages={["Please enter your address"]}>
-      <Textarea
-        id={"address"}
-        name={"Address"}
-        placeholder={"Write your address"}
-        hasError={true}
-        onChange={(e) => {
-          console.log(e.currentTarget.value);
-        }}
-      />
-    </FormField>
-  ))
-  .add("Password Input", () => (
-    <FormField label={"Password"}>
-      <PasswordInput
-        testid={"LoginForm.input"}
-        name={"password"}
-        placeholder={"Enter password"}
-        onChange={(e) => console.log(e.currentTarget.value)}
-      />
-    </FormField>
-  ))
-
-  .add("Number Input", () => (
-    <Fragment>
-      <StateProvider initialState={""}>
-        {(state, setState) => (
-          <Fragment>
-            <FormField label={"Price – maximumFractionDigits={2}"}>
-              <Input
-                localizationOptions={{maximumFractionDigits: 2}}
-                name={"price"}
-                type={"number"}
-                onChange={(e) => setState(e.currentTarget.value)}
-                value={state}
-                placeholder={"$ 10"}
-              />
-            </FormField>
-
-            <p>{`event.currentTarget.value: ${state}`}</p>
-          </Fragment>
-        )}
-      </StateProvider>
-
-      <StateProvider initialState={""}>
-        {(state, setState) => (
-          <Fragment>
-            <br />
-
-            <FormField
-              label={"Price - Has Error"}
-              errorMessages={["Please enter a valid price"]}>
-              <Input
-                localizationOptions={{maximumFractionDigits: 2}}
-                name={"price"}
-                type={"number"}
-                onChange={(e) => setState(e.currentTarget.value)}
-                value={state}
-                placeholder={"$ 10"}
-                hasError={true}
-              />
-            </FormField>
-
-            <p>{`event.currentTarget.value: ${state}`}</p>
-          </Fragment>
-        )}
-      </StateProvider>
-
-      <br />
-      <hr />
-      <br />
-
-      <StateProvider initialState={""}>
-        {(state, setState) => (
-          <Fragment>
-            <FormField label={"Price (BTC) – maximumFractionDigits={8}"}>
-              <Input
-                localizationOptions={{maximumFractionDigits: 8}}
-                name={"price"}
-                type={"number"}
-                onChange={(e) => setState(e.currentTarget.value)}
-                value={state}
-                placeholder={"Min. ₿ 0.00000001"}
-              />
-            </FormField>
-
-            <p>{`event.currentTarget.value: ${state}`}</p>
-          </Fragment>
-        )}
-      </StateProvider>
-
-      <br />
-
-      <StateProvider initialState={""}>
-        {(state, setState) => (
-          <Fragment>
-            <FormField
-              label={
-                "ID or Passport Number – maxFractionDigits={0} - Can have leading zeros"
-              }>
-              <Input
-                name={"id-number"}
-                type={"number"}
-                onChange={(e) => setState(e.currentTarget.value)}
-                value={state}
-              />
-            </FormField>
-
-            <p>{`event.currentTarget.value: ${state}`}</p>
-          </Fragment>
-        )}
-      </StateProvider>
-
-      <br />
-      <hr />
-      <br />
-
-      <StateProvider initialState={""}>
-        {(state, setState) => (
-          <Fragment>
-            <FormField
-              label={
-                "Wallet ($) – maximumFractionDigits={2} - shouldFormatToLocaleString={true}"
-              }>
-              <Input
-                name={"wallet"}
-                localizationOptions={{
-                  maximumFractionDigits: 2,
-                  shouldFormatToLocaleString: true
-                }}
-                type={"number"}
-                placeholder={"$ 1,000"}
-                onChange={(e) => setState(e.currentTarget.value)}
-                value={state}
-              />
-            </FormField>
-
-            <p>{`event.currentTarget.value: ${state}`}</p>
-          </Fragment>
-        )}
-      </StateProvider>
-
-      <br />
-
-      <StateProvider initialState={""}>
-        {(state, setState) => (
-          <Fragment>
-            <FormField
-              label={
-                "World Population – maximumFractionDigits={0} - shouldFormatToLocaleString={true}"
-              }>
-              <Input
-                name={"world-population"}
-                type={"number"}
-                placeholder={"7,794,798,739"}
-                localizationOptions={{shouldFormatToLocaleString: true}}
-                onChange={(e) => setState(e.currentTarget.value)}
-                value={state}
-              />
-            </FormField>
-
-            <p>{`event.currentTarget.value: ${state}`}</p>
-          </Fragment>
-        )}
-      </StateProvider>
-
-      <br />
-      <hr />
-      <br />
-
-      <StateProvider initialState={""}>
-        {(state, setState) => (
-          <Fragment>
-            <FormField
-              label={
-                'Budget (Locale) – maximumFractionDigits={4} - shouldFormatToLocaleString={true} - locale={"zh-Hans-CN-u-nu-hanidec"}'
-              }>
-              <Input
-                name={"world-population"}
-                type={"number"}
-                localizationOptions={{
-                  maximumFractionDigits: 4,
-                  shouldFormatToLocaleString: true,
-                  locale: "zh-Hans-CN-u-nu-hanidec"
-                }}
-                onChange={(e) => setState(e.currentTarget.value)}
-                value={state}
-              />
-            </FormField>
-
-            <p>{`event.currentTarget.value: ${state}`}</p>
-          </Fragment>
-        )}
-      </StateProvider>
-
-      <br />
-
-      <StateProvider initialState={""}>
-        {(state, setState) => (
-          <Fragment>
-            <FormField
-              label={
-                'Budget (Locale) – maximumFractionDigits={4} - shouldFormatToLocaleString={true} - locale={"tr"}'
-              }>
-              <Input
-                name={"world-population"}
-                type={"number"}
-                localizationOptions={{
-                  maximumFractionDigits: 4,
-                  shouldFormatToLocaleString: true,
-                  locale: "tr"
-                }}
-                onChange={(e) => setState(e.currentTarget.value)}
-                value={state}
-              />
-            </FormField>
-
-            <p>{`event.currentTarget.value: ${state}`}</p>
-          </Fragment>
-        )}
-      </StateProvider>
-    </Fragment>
-  ))
-  .add("Color Input", () => (
-    <FormField labelledBy={"Color Picker"} label={"Color Picker"}>
-      <Input
-        name={"colorPicker"}
-        type={"color"}
-        onChange={(e) => console.log(e.currentTarget.value)}
-      />
-    </FormField>
-  ))
-  .add("Checkbox States", () => {
-    const initialState = {
-      rememberMe: true,
-      termsAndConditions: false,
-      privacyPolicy: true
-    };
-
-    return (
-      <StateProvider initialState={initialState}>
-        {(state, setState) => (
-          <Fragment>
-            <CheckboxInput
-              onSelect={() => setState({...state, rememberMe: !state.rememberMe})}
-              isSelected={state.rememberMe}
-              item={{
-                id: "rememberMe",
-                content: "Remember Me",
-                inputProps: {
-                  name: "rememberMe",
-                  htmlFor: "rememberMe",
-                  value: "yes"
-                }
-              }}
-            />
-
-            <CheckboxInput
-              onSelect={() =>
-                setState({...state, termsAndConditions: !state.termsAndConditions})
-              }
-              isSelected={state.termsAndConditions}
-              item={{
-                id: "termsAndConditions",
-                content: "Terms and Conditions",
-                inputProps: {
-                  name: "termsAndConditions",
-                  htmlFor: "termsAndConditions",
-                  value: "yes"
-                }
-              }}
-            />
-
-            <CheckboxInput
-              onSelect={() => setState({...state, privacyPolicy: !state.privacyPolicy})}
-              isSelected={state.privacyPolicy}
-              isDisabled={true}
-              item={{
-                id: "privacyPolicy",
-                content: "Privacy Policy",
-                inputProps: {
-                  name: "privacyPolicy",
-                  htmlFor: "privacyPolicy",
-                  value: "yes"
-                }
-              }}
-            />
-          </Fragment>
-        )}
-      </StateProvider>
-    );
-  })
-  .add("Radio States", () => {
-    const initialState = {
-      firstInput: {
-        choices: [
-          {
-            content: "Large",
-            id: "Size, Large",
-            inputProps: {
-              htmlFor: "size-large",
-              value: "size-large",
-              name: "size"
-            }
-          },
-          {
-            content: "Medium",
-            id: "Size, Medium",
-            inputProps: {
-              htmlFor: "size-medium",
-              value: "size-medium",
-              name: "size"
-            }
-          },
-          {
-            content: "All of them",
-            id: "All of them",
-            isDisabled: true,
-            inputProps: {
-              htmlFor: "all-of-them",
-              value: "all-of-them",
-              name: "size"
-            }
-          }
-        ],
-        selectedItem: null
-      },
-      secondInput: {
-        choices: [
-          {
-            content: "Mac OSX",
-            id: "Mac OSX",
-            inputProps: {
-              htmlFor: "mac-osx",
-              value: "mac-osx",
-              name: "os"
-            }
-          },
-          {
-            content: "Windows",
-            id: "Windows",
-            inputProps: {
-              htmlFor: "windows",
-              value: "windows",
-              name: "os"
-            }
-          },
-          {
-            content: "Linux",
-            id: "Linux",
-            inputProps: {
-              htmlFor: "linux",
-              value: "linux",
-              name: "os"
-            }
-          }
-        ],
-        selectedItem: null
-      }
-    };
-
-    return (
-      <StateProvider initialState={initialState}>
-        {(state, setState) => (
-          <Fragment>
-            <FormField label={"Partially Disabled"}>
-              <RadioGroup
-                items={state.firstInput.choices}
-                selectedItem={state.firstInput.selectedItem}
-                onSelect={(item) =>
-                  setState({
-                    ...state,
-                    firstInput: {...state.firstInput, selectedItem: item}
-                  })
-                }
-              />
-            </FormField>
-
-            <FormField label={"Fully Disabled"}>
-              <RadioGroup
-                items={state.secondInput.choices}
-                selectedItem={state.secondInput.selectedItem}
-                isDisabled={true}
-                onSelect={(item) =>
-                  setState({
-                    ...state,
-                    secondInput: {...state.secondInput, selectedItem: item}
-                  })
-                }
-              />
-            </FormField>
-          </Fragment>
-        )}
-      </StateProvider>
-    );
-  });
diff --git a/stories/0-Input.stories.tsx b/stories/0-Input.stories.tsx
new file mode 100644
index 00000000..6f028240
--- /dev/null
+++ b/stories/0-Input.stories.tsx
@@ -0,0 +1,64 @@
+import React, {Fragment} from "react";
+import {storiesOf} from "@storybook/react";
+
+import FormField from "../src/form/field/FormField";
+import Input from "../src/form/input/Input";
+import StoryFragment from "./utils/StoryFragment";
+
+storiesOf("Input", module)
+  .add("Input", () => (
+    <Fragment>
+      <Input
+        name={"fullName"}
+        onChange={(e) => console.log(e.currentTarget.value)}
+        placeholder={"Input"}
+      />
+
+      <br />
+
+      <Input
+        name={"fullName"}
+        onChange={(e) => console.log(e.currentTarget.value)}
+        placeholder={"Disabled Input"}
+        isDisabled={true}
+      />
+    </Fragment>
+  ))
+  .add("Input with FormField", () => (
+    <StoryFragment>
+      <FormField labelledBy={"Full Name"} label={"Full Name"}>
+        <Input
+          name={"fullName"}
+          placeholder={"Input with FormField"}
+          onChange={(e) => console.log(e.currentTarget.value)}
+        />
+      </FormField>
+
+      <br />
+
+      <FormField
+        labelledBy={"Full Name"}
+        label={"Full Name"}
+        helperMessages={["You can include your middle name"]}>
+        <Input
+          name="fullName"
+          placeholder={"Input hasHelperMessage with FormField"}
+          onChange={(e) => console.log(e.currentTarget.value)}
+        />
+      </FormField>
+
+      <br />
+
+      <FormField
+        labelledBy={"Full Name"}
+        label={"Full Name"}
+        errorMessages={["Please enter a full name"]}>
+        <Input
+          name={"fullName"}
+          placeholder={"Input errorMessage with FormField"}
+          hasError={true}
+          onChange={(e) => console.log(e.currentTarget.value)}
+        />
+      </FormField>
+    </StoryFragment>
+  ));
diff --git a/stories/1-RadioInput.stories.tsx b/stories/1-RadioInput.stories.tsx
new file mode 100644
index 00000000..211a3d37
--- /dev/null
+++ b/stories/1-RadioInput.stories.tsx
@@ -0,0 +1,112 @@
+import React, {Fragment} from "react";
+import {storiesOf} from "@storybook/react";
+
+import StateProvider from "./utils/StateProvider";
+
+import FormField from "../src/form/field/FormField";
+import RadioGroup from "../src/form/input/radio/group/RadioGroup";
+
+storiesOf("Radio Input", module).add("Radio Input", () => {
+  const initialState = {
+    firstInput: {
+      choices: [
+        {
+          content: "Large",
+          id: "Size, Large",
+          inputProps: {
+            htmlFor: "size-large",
+            value: "size-large",
+            name: "size"
+          }
+        },
+        {
+          content: "Medium",
+          id: "Size, Medium",
+          inputProps: {
+            htmlFor: "size-medium",
+            value: "size-medium",
+            name: "size"
+          }
+        },
+        {
+          content: "All of them",
+          id: "All of them",
+          isDisabled: true,
+          inputProps: {
+            htmlFor: "all-of-them",
+            value: "all-of-them",
+            name: "size"
+          }
+        }
+      ],
+      selectedItem: null
+    },
+    secondInput: {
+      choices: [
+        {
+          content: "Mac OSX",
+          id: "Mac OSX",
+          inputProps: {
+            htmlFor: "mac-osx",
+            value: "mac-osx",
+            name: "os"
+          }
+        },
+        {
+          content: "Windows",
+          id: "Windows",
+          inputProps: {
+            htmlFor: "windows",
+            value: "windows",
+            name: "os"
+          }
+        },
+        {
+          content: "Linux",
+          id: "Linux",
+          inputProps: {
+            htmlFor: "linux",
+            value: "linux",
+            name: "os"
+          }
+        }
+      ],
+      selectedItem: null
+    }
+  };
+
+  return (
+    <StateProvider initialState={initialState}>
+      {(state, setState) => (
+        <Fragment>
+          <FormField label={"Partially Disabled"}>
+            <RadioGroup
+              items={state.firstInput.choices}
+              selectedItem={state.firstInput.selectedItem}
+              onSelect={(item) =>
+                setState({
+                  ...state,
+                  firstInput: {...state.firstInput, selectedItem: item}
+                })
+              }
+            />
+          </FormField>
+
+          <FormField label={"Fully Disabled"}>
+            <RadioGroup
+              items={state.secondInput.choices}
+              selectedItem={state.secondInput.selectedItem}
+              isDisabled={true}
+              onSelect={(item) =>
+                setState({
+                  ...state,
+                  secondInput: {...state.secondInput, selectedItem: item}
+                })
+              }
+            />
+          </FormField>
+        </Fragment>
+      )}
+    </StateProvider>
+  );
+});
diff --git a/stories/4-Spinner.stories.tsx b/stories/10-Spinner.stories.tsx
similarity index 100%
rename from stories/4-Spinner.stories.tsx
rename to stories/10-Spinner.stories.tsx
diff --git a/stories/5-Typeahead.stories.tsx b/stories/11-Typeahead.stories.tsx
similarity index 99%
rename from stories/5-Typeahead.stories.tsx
rename to stories/11-Typeahead.stories.tsx
index 45da1faf..9dccff20 100644
--- a/stories/5-Typeahead.stories.tsx
+++ b/stories/11-Typeahead.stories.tsx
@@ -10,7 +10,7 @@ import TypeaheadSelect from "../src/select/typeahead/TypeaheadSelect";
 const simulateAPICall = (timeout = 1000) =>
   new Promise((resolve) => setTimeout(resolve, timeout));
 
-storiesOf("Typeahead", module).add("Typeahead States", () => {
+storiesOf("Typeahead", module).add("Typeahead", () => {
   const initialState = {
     options: [
       {
diff --git a/stories/6-Tab.stories.tsx b/stories/12-Tab.stories.tsx
similarity index 100%
rename from stories/6-Tab.stories.tsx
rename to stories/12-Tab.stories.tsx
diff --git a/stories/7-Avatar.stories.tsx b/stories/13-Avatar.stories.tsx
similarity index 100%
rename from stories/7-Avatar.stories.tsx
rename to stories/13-Avatar.stories.tsx
diff --git a/stories/8-Toast.stories.tsx b/stories/14-Toast.stories.tsx
similarity index 100%
rename from stories/8-Toast.stories.tsx
rename to stories/14-Toast.stories.tsx
diff --git a/stories/9-ProgressBar.stories.tsx b/stories/15-ProgressBar.stories.tsx
similarity index 100%
rename from stories/9-ProgressBar.stories.tsx
rename to stories/15-ProgressBar.stories.tsx
diff --git a/stories/10-Countdown.stories.tsx b/stories/16-Countdown.stories.tsx
similarity index 100%
rename from stories/10-Countdown.stories.tsx
rename to stories/16-Countdown.stories.tsx
diff --git a/stories/10-Switch.stories.tsx b/stories/17-Switch.stories.tsx
similarity index 95%
rename from stories/10-Switch.stories.tsx
rename to stories/17-Switch.stories.tsx
index bafee608..53cc4f7d 100644
--- a/stories/10-Switch.stories.tsx
+++ b/stories/17-Switch.stories.tsx
@@ -5,7 +5,7 @@ import Switch from "../src/switch/Switch";
 import StateProvider from "./utils/StateProvider";
 import StoryFragment from "./utils/StoryFragment";
 
-storiesOf("Switch", module).add("Switch States", () => {
+storiesOf("Switch", module).add("Switch", () => {
   const initialState = {
     isSwitchOn: true,
     isDisabled: false
diff --git a/stories/11-Toggle.stories.tsx b/stories/18-Toggle.stories.tsx
similarity index 99%
rename from stories/11-Toggle.stories.tsx
rename to stories/18-Toggle.stories.tsx
index 9950736b..6eac7b09 100644
--- a/stories/11-Toggle.stories.tsx
+++ b/stories/18-Toggle.stories.tsx
@@ -6,7 +6,7 @@ import {initialState} from "./utils/constants/toggle/toggleStoryOptionConstants"
 import StateProvider from "./utils/StateProvider";
 
 storiesOf("Toggle", module)
-  .add("Toggle States", () => {
+  .add("Toggle", () => {
     return (
       <div style={{width: "500px"}}>
         <span>{"Switch Toggle - 2 Options"}</span>
diff --git a/stories/2-CheckboxInput.stories.tsx b/stories/2-CheckboxInput.stories.tsx
new file mode 100644
index 00000000..c0ca7a05
--- /dev/null
+++ b/stories/2-CheckboxInput.stories.tsx
@@ -0,0 +1,67 @@
+import React, {Fragment} from "react";
+import {storiesOf} from "@storybook/react";
+
+import StateProvider from "./utils/StateProvider";
+
+import CheckboxInput from "../src/form/input/checkbox/CheckboxInput";
+
+storiesOf("Checkbox", module).add("Checkbox", () => {
+  const initialState = {
+    rememberMe: true,
+    termsAndConditions: false,
+    privacyPolicy: true
+  };
+
+  return (
+    <StateProvider initialState={initialState}>
+      {(state, setState) => (
+        <Fragment>
+          <CheckboxInput
+            onSelect={() => setState({...state, rememberMe: !state.rememberMe})}
+            isSelected={state.rememberMe}
+            item={{
+              id: "rememberMe",
+              content: "Remember Me",
+              inputProps: {
+                name: "rememberMe",
+                htmlFor: "rememberMe",
+                value: "yes"
+              }
+            }}
+          />
+
+          <CheckboxInput
+            onSelect={() =>
+              setState({...state, termsAndConditions: !state.termsAndConditions})
+            }
+            isSelected={state.termsAndConditions}
+            item={{
+              id: "termsAndConditions",
+              content: "Terms and Conditions",
+              inputProps: {
+                name: "termsAndConditions",
+                htmlFor: "termsAndConditions",
+                value: "yes"
+              }
+            }}
+          />
+
+          <CheckboxInput
+            onSelect={() => setState({...state, privacyPolicy: !state.privacyPolicy})}
+            isSelected={state.privacyPolicy}
+            isDisabled={true}
+            item={{
+              id: "privacyPolicy",
+              content: "Privacy Policy",
+              inputProps: {
+                name: "privacyPolicy",
+                htmlFor: "privacyPolicy",
+                value: "yes"
+              }
+            }}
+          />
+        </Fragment>
+      )}
+    </StateProvider>
+  );
+});
diff --git a/stories/3-PasswordInput.stories.tsx b/stories/3-PasswordInput.stories.tsx
new file mode 100644
index 00000000..5c822c2b
--- /dev/null
+++ b/stories/3-PasswordInput.stories.tsx
@@ -0,0 +1,18 @@
+import React, {Fragment} from "react";
+import {storiesOf} from "@storybook/react";
+
+import FormField from "../src/form/field/FormField";
+import PasswordInput from "../src/form/password-input/PasswordInput";
+
+storiesOf("Password Input", module).add("Password Input", () => (
+  <Fragment>
+    <FormField label={"Password"}>
+      <PasswordInput
+        testid={"LoginForm.input"}
+        name={"password"}
+        placeholder={"Enter password"}
+        onChange={(e) => console.log(e.currentTarget.value)}
+      />
+    </FormField>
+  </Fragment>
+));
diff --git a/stories/4-NumberInput.stories.tsx b/stories/4-NumberInput.stories.tsx
new file mode 100644
index 00000000..5e0ef727
--- /dev/null
+++ b/stories/4-NumberInput.stories.tsx
@@ -0,0 +1,206 @@
+import React, {Fragment} from "react";
+import {storiesOf} from "@storybook/react";
+
+import StateProvider from "./utils/StateProvider";
+
+import FormField from "../src/form/field/FormField";
+import Input from "../src/form/input/Input";
+
+storiesOf("Number Input", module)
+  .add("Number Input", () => (
+    <Fragment>
+      <StateProvider initialState={""}>
+        {(state, setState) => (
+          <Fragment>
+            <FormField label={"Price – maximumFractionDigits={2}"}>
+              <Input
+                localizationOptions={{maximumFractionDigits: 2}}
+                name={"price"}
+                type={"number"}
+                onChange={(e) => setState(e.currentTarget.value)}
+                value={state}
+                placeholder={"$ 10"}
+              />
+            </FormField>
+
+            <p>{`event.currentTarget.value: ${state}`}</p>
+          </Fragment>
+        )}
+      </StateProvider>
+
+      <StateProvider initialState={""}>
+        {(state, setState) => (
+          <Fragment>
+            <br />
+
+            <FormField
+              label={"Price - Has Error"}
+              errorMessages={["Please enter a valid price"]}>
+              <Input
+                localizationOptions={{maximumFractionDigits: 2}}
+                name={"price"}
+                type={"number"}
+                onChange={(e) => setState(e.currentTarget.value)}
+                value={state}
+                placeholder={"$ 10"}
+                hasError={true}
+              />
+            </FormField>
+
+            <p>{`event.currentTarget.value: ${state}`}</p>
+          </Fragment>
+        )}
+      </StateProvider>
+    </Fragment>
+  ))
+  .add("Number Input with maximumFractionDigit", () => (
+    <Fragment>
+      <StateProvider initialState={""}>
+        {(state, setState) => (
+          <Fragment>
+            <FormField label={"Price (BTC) – maximumFractionDigits={8}"}>
+              <Input
+                localizationOptions={{maximumFractionDigits: 8}}
+                name={"price"}
+                type={"number"}
+                onChange={(e) => setState(e.currentTarget.value)}
+                value={state}
+                placeholder={"Min. ₿ 0.00000001"}
+              />
+            </FormField>
+
+            <p>{`event.currentTarget.value: ${state}`}</p>
+          </Fragment>
+        )}
+      </StateProvider>
+
+      <br />
+
+      <StateProvider initialState={""}>
+        {(state, setState) => (
+          <Fragment>
+            <FormField
+              label={
+                "ID or Passport Number – maxFractionDigits={0} - Can have leading zeros"
+              }>
+              <Input
+                name={"id-number"}
+                type={"number"}
+                onChange={(e) => setState(e.currentTarget.value)}
+                value={state}
+              />
+            </FormField>
+
+            <p>{`event.currentTarget.value: ${state}`}</p>
+          </Fragment>
+        )}
+      </StateProvider>
+    </Fragment>
+  ))
+  .add("Number Input with shouldFormatToLocaleString", () => (
+    <Fragment>
+      <StateProvider initialState={""}>
+        {(state, setState) => (
+          <Fragment>
+            <FormField
+              label={
+                "Wallet ($) – maximumFractionDigits={2} - shouldFormatToLocaleString={true}"
+              }>
+              <Input
+                name={"wallet"}
+                localizationOptions={{
+                  maximumFractionDigits: 2,
+                  shouldFormatToLocaleString: true
+                }}
+                type={"number"}
+                placeholder={"$ 1,000"}
+                onChange={(e) => setState(e.currentTarget.value)}
+                value={state}
+              />
+            </FormField>
+
+            <p>{`event.currentTarget.value: ${state}`}</p>
+          </Fragment>
+        )}
+      </StateProvider>
+
+      <br />
+
+      <StateProvider initialState={""}>
+        {(state, setState) => (
+          <Fragment>
+            <FormField
+              label={
+                "World Population – maximumFractionDigits={0} - shouldFormatToLocaleString={true}"
+              }>
+              <Input
+                name={"world-population"}
+                type={"number"}
+                placeholder={"7,794,798,739"}
+                localizationOptions={{shouldFormatToLocaleString: true}}
+                onChange={(e) => setState(e.currentTarget.value)}
+                value={state}
+              />
+            </FormField>
+
+            <p>{`event.currentTarget.value: ${state}`}</p>
+          </Fragment>
+        )}
+      </StateProvider>
+    </Fragment>
+  ))
+  .add("Number Input with locale", () => (
+    <Fragment>
+      <StateProvider initialState={""}>
+        {(state, setState) => (
+          <Fragment>
+            <FormField
+              label={
+                'Budget (Locale) – maximumFractionDigits={4} - shouldFormatToLocaleString={true} - locale={"zh-Hans-CN-u-nu-hanidec"}'
+              }>
+              <Input
+                name={"world-population"}
+                type={"number"}
+                localizationOptions={{
+                  maximumFractionDigits: 4,
+                  shouldFormatToLocaleString: true,
+                  locale: "zh-Hans-CN-u-nu-hanidec"
+                }}
+                onChange={(e) => setState(e.currentTarget.value)}
+                value={state}
+              />
+            </FormField>
+
+            <p>{`event.currentTarget.value: ${state}`}</p>
+          </Fragment>
+        )}
+      </StateProvider>
+
+      <br />
+
+      <StateProvider initialState={""}>
+        {(state, setState) => (
+          <Fragment>
+            <FormField
+              label={
+                'Budget (Locale) – maximumFractionDigits={4} - shouldFormatToLocaleString={true} - locale={"tr"}'
+              }>
+              <Input
+                name={"world-population"}
+                type={"number"}
+                localizationOptions={{
+                  maximumFractionDigits: 4,
+                  shouldFormatToLocaleString: true,
+                  locale: "tr"
+                }}
+                onChange={(e) => setState(e.currentTarget.value)}
+                value={state}
+              />
+            </FormField>
+
+            <p>{`event.currentTarget.value: ${state}`}</p>
+          </Fragment>
+        )}
+      </StateProvider>
+    </Fragment>
+  ));
diff --git a/stories/5-ColorInput.stories.tsx b/stories/5-ColorInput.stories.tsx
new file mode 100644
index 00000000..ea0bd700
--- /dev/null
+++ b/stories/5-ColorInput.stories.tsx
@@ -0,0 +1,17 @@
+import React, {Fragment} from "react";
+import {storiesOf} from "@storybook/react";
+
+import FormField from "../src/form/field/FormField";
+import Input from "../src/form/input/Input";
+
+storiesOf("Color Input", module).add("Color Input", () => (
+  <Fragment>
+    <FormField labelledBy={"Color Picker"} label={"Color Picker"}>
+      <Input
+        name={"colorPicker"}
+        type={"color"}
+        onChange={(e) => console.log(e.currentTarget.value)}
+      />
+    </FormField>
+  </Fragment>
+));
diff --git a/stories/6-TextArea.stories.tsx b/stories/6-TextArea.stories.tsx
new file mode 100644
index 00000000..6d392d75
--- /dev/null
+++ b/stories/6-TextArea.stories.tsx
@@ -0,0 +1,73 @@
+import React from "react";
+import {storiesOf} from "@storybook/react";
+
+import FormField from "../src/form/field/FormField";
+import Textarea from "../src/form/textarea/Textarea";
+import StoryFragment from "./utils/StoryFragment";
+
+storiesOf("Textarea", module).add("Textarea", () => (
+  <StoryFragment>
+    <Textarea
+      id={"textarea-fixed"}
+      name={"Fixed size Textarea"}
+      placeholder={"Fixed size Textarea"}
+      onChange={(e) => {
+        console.log(e.currentTarget.value);
+      }}
+    />
+
+    <br />
+
+    <Textarea
+      id={"textarea-fixed"}
+      name={"Disabled fixed size Textarea"}
+      placeholder={"Disabled fixed size Textarea"}
+      isDisabled={true}
+      onChange={(e) => {
+        console.log(e.currentTarget.value);
+      }}
+    />
+
+    <br />
+
+    <Textarea
+      id={"textarea-auto-size"}
+      name={"Auto size Textarea"}
+      placeholder={"Auto size Textarea"}
+      autoSizeProps={{}}
+      onChange={(e) => {
+        console.log(e.currentTarget.value);
+      }}
+    />
+
+    <br />
+
+    <Textarea
+      id={"textarea-auto-size"}
+      name={"Disabled auto size Textarea"}
+      placeholder={"Disabled auto size Textarea"}
+      autoSizeProps={{}}
+      isDisabled={true}
+      onChange={(e) => {
+        console.log(e.currentTarget.value);
+      }}
+    />
+
+    <br />
+
+    <FormField
+      labelledBy={"Address"}
+      label={"Address"}
+      errorMessages={["Please enter your address"]}>
+      <Textarea
+        id={"address"}
+        name={"Address"}
+        placeholder={"Textarea with error message"}
+        hasError={true}
+        onChange={(e) => {
+          console.log(e.currentTarget.value);
+        }}
+      />
+    </FormField>
+  </StoryFragment>
+));
diff --git a/stories/1-Dropdown.stories.tsx b/stories/7-Dropdown.stories.tsx
similarity index 99%
rename from stories/1-Dropdown.stories.tsx
rename to stories/7-Dropdown.stories.tsx
index 814b4678..6c021161 100644
--- a/stories/1-Dropdown.stories.tsx
+++ b/stories/7-Dropdown.stories.tsx
@@ -8,7 +8,7 @@ import StoryFragment from "./utils/StoryFragment";
 import {initialState} from "./utils/constants/dropdown/dropdownStoryOptionConstants";
 
 storiesOf("Dropdown", module)
-  .add("Dropdown States", () => (
+  .add("Dropdown", () => (
     <StateProvider initialState={initialState.basic}>
       {(state, setState) => (
         <div className={"dropdown-story-container"}>
diff --git a/stories/2-List.stories.tsx b/stories/8-List.stories.tsx
similarity index 100%
rename from stories/2-List.stories.tsx
rename to stories/8-List.stories.tsx
diff --git a/stories/3-Button.stories.tsx b/stories/9-Button.stories.tsx
similarity index 98%
rename from stories/3-Button.stories.tsx
rename to stories/9-Button.stories.tsx
index 12698657..1a233887 100644
--- a/stories/3-Button.stories.tsx
+++ b/stories/9-Button.stories.tsx
@@ -9,7 +9,7 @@ import SpinnerStorySample from "./utils/constants/spinner/SpinnerStorySample";
 import {useEffect, useRef} from "@storybook/addons";
 
 storiesOf("Button", module)
-  .add("Button States", () => {
+  .add("Button", () => {
     const buttonRef = useRef<HTMLButtonElement | null>(null);
 
     return (
@@ -60,7 +60,7 @@ storiesOf("Button", module)
       </StoryFragment>
     );
   })
-  .add("Upload Button States", () => {
+  .add("Upload Button", () => {
     const fileUploadButtonRef = useRef<HTMLLabelElement | null>(null);
 
     useEffect(() => {