diff --git a/Storybook/.ondevice/storybook.requires.js b/Storybook/.ondevice/storybook.requires.js
index cc9c8612..05fde568 100644
--- a/Storybook/.ondevice/storybook.requires.js
+++ b/Storybook/.ondevice/storybook.requires.js
@@ -54,6 +54,7 @@ const getStories = () => {
     "./components/BottomSheet/BottomSheet.stories.tsx": require("../components/BottomSheet/BottomSheet.stories.tsx"),
     "./components/Button/Button.stories.tsx": require("../components/Button/Button.stories.tsx"),
     "./components/Card/Card.stories.tsx": require("../components/Card/Card.stories.tsx"),
+    "./components/DatePicker/DateField.stories.tsx": require("../components/DatePicker/DateField.stories.tsx"),
     "./components/Dialog/Dialog.stories.tsx": require("../components/Dialog/Dialog.stories.tsx"),
     "./components/Divider/Divider.stories.tsx": require("../components/Divider/Divider.stories.tsx"),
     "./components/DropDown/DropDown.stories.tsx": require("../components/DropDown/DropDown.stories.tsx"),
diff --git a/Storybook/components/DatePicker/DateField.stories.tsx b/Storybook/components/DatePicker/DateField.stories.tsx
new file mode 100644
index 00000000..47dc9112
--- /dev/null
+++ b/Storybook/components/DatePicker/DateField.stories.tsx
@@ -0,0 +1,35 @@
+import React, { useState } from 'react';
+import { ComponentMeta } from '@storybook/react';
+import { StyleSheet, View } from 'react-native';
+import { DateField } from '../../../src';
+import { DateFieldProps } from '../../../src/components/datePicker/DateField';
+
+export default {
+    title: 'components/DateField',
+    component: DateField,
+    argTypes: {
+        placeholder: { control: { type: 'text' }, defaultValue: '01' },
+        hasError: { control: { type: 'boolean' }, defaultValue: false },
+    },
+    decorators: [
+        (Story) => {
+            const styles = StyleSheet.create({
+                container: {
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    flex: 1,
+                },
+            });
+            return (
+                <View style={styles.container}>
+                    <Story />
+                </View>
+            );
+        },
+    ],
+} as ComponentMeta<typeof DateField>;
+
+export const Default = (args: DateFieldProps) => {
+    const [value, setValue] = useState('');
+    return <DateField value={value} {...args} onChangeText={setValue} />;
+};