diff --git a/apps/docs/package.json b/apps/docs/package.json
index 24c8983..4861c24 100644
--- a/apps/docs/package.json
+++ b/apps/docs/package.json
@@ -13,7 +13,7 @@
     "chromatic": "npx chromatic --project-token=chpt_98c750b6bad066a"
   },
   "dependencies": {
-    "@sopt-makers/ui": "^1.0.2"
+    "@sopt-makers/ui": "1.1.1"
   },
   "devDependencies": {
     "@storybook/addon-essentials": "^7.6.3",
diff --git a/apps/docs/src/stories/SearchField.stories.tsx b/apps/docs/src/stories/SearchField.stories.tsx
new file mode 100644
index 0000000..185d9da
--- /dev/null
+++ b/apps/docs/src/stories/SearchField.stories.tsx
@@ -0,0 +1,49 @@
+import { ChangeEvent, useState, type InputHTMLAttributes } from 'react';
+import { StoryObj } from '@storybook/react';
+import { SearchField } from '@sopt-makers/ui';
+import { fn } from '@storybook/test';
+
+interface SearchFieldProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'value'> {
+  value: string;
+  onSubmit: () => void;
+  onReset: () => void;
+}
+
+const useSearchField = (props: SearchFieldProps) => {
+  const [search, setSearch] = useState(props.value);
+
+  const handleSearchChange = (e: ChangeEvent<HTMLInputElement>) => {
+    setSearch(e.target.value);
+  }
+
+  const handleSearchReset = () => {
+    setSearch('');
+  }
+
+  return <SearchField {...props} value={search} onChange={handleSearchChange} onReset={handleSearchReset} />
+}
+
+export default {
+  title: 'Components/Input/SearchField',
+  component: useSearchField,
+  tags: ['autodocs'],
+  args: {
+    value: '',
+    style: { width: '335px' },
+    onSubmit: fn(),
+  },
+  argTypes: {
+    value: { control: false },
+    style: { control: false },
+    onSubmit: { action: 'onSubmit' }
+  }
+}
+
+export const SearchFieldStory: StoryObj<SearchFieldProps> = {
+  args: {
+    placeholder: 'Placeholder...',
+    readOnly: false,
+    disabled: false,
+    style: { width: '335px' },
+  },
+};
\ No newline at end of file
diff --git a/apps/docs/src/stories/Test.stories.ts b/apps/docs/src/stories/Test.stories.ts
deleted file mode 100644
index 82e7bb5..0000000
--- a/apps/docs/src/stories/Test.stories.ts
+++ /dev/null
@@ -1,37 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-
-import { Test } from "@sopt-makers/ui";
-
-const meta = {
-  title: 'Example/Test',
-  component: Test,
-  parameters: {
-    layout: 'centered',
-  },
-  tags: ['autodocs'],
-  argTypes: {
-    color: {
-      options: ['black', 'red', 'blue'],
-      control: { type: 'radio' },
-    },
-    size: {
-      options: ['normal', 'big'],
-      control: { type: 'radio' },
-    },
-  },
-} satisfies Meta<typeof Test>;
-
-export default meta;
-type Story = StoryObj<typeof Test>;
-
-export const Primary: Story = {
-  args: {
-    text: "Primary",
-  },
-}
-
-export const Secondary: Story = {
-  args: {
-    text: "Secondary",
-  },
-}
\ No newline at end of file
diff --git a/apps/docs/src/stories/TextArea.stories.tsx b/apps/docs/src/stories/TextArea.stories.tsx
new file mode 100644
index 0000000..c446cc1
--- /dev/null
+++ b/apps/docs/src/stories/TextArea.stories.tsx
@@ -0,0 +1,157 @@
+import { ChangeEvent, useState, type TextareaHTMLAttributes } from 'react';
+import { StoryObj } from '@storybook/react';
+import { TextArea } from '@sopt-makers/ui';
+import { fn } from '@storybook/test';
+
+interface TextAreaProps extends Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'value'> {
+  labelText?: string;
+  descriptionText?: string;
+  errorMessage?: string;
+  value: string;
+  maxLength: number;
+  height?: string;
+  isError?: boolean;
+  onSubmit: () => void;
+}
+
+const useTextArea = (props: TextAreaProps) => {
+  const [text, setText] = useState(props.value);
+
+  const handleTextChange = (e: ChangeEvent<HTMLTextAreaElement>) => {
+    setText(e.target.value);
+  }
+
+  return <TextArea {...props} value={text} onChange={handleTextChange} />
+}
+
+export default {
+  title: 'Components/Input/TextArea',
+  component: useTextArea,
+  tags: ['autodocs'],
+  args: {
+    value: '',
+    style: { width: '335px', height: '48px' },
+    onSubmit: fn(),
+  },
+  argTypes: {
+    value: { control: false },
+    style: { control: false },
+    onSubmit: { action: 'onSubmit' }
+  }
+}
+
+export const Default: StoryObj<TextAreaProps> = {
+  args: {
+    labelText: 'Label',
+    descriptionText: 'Description',
+    placeholder: 'Placeholder...',
+    maxLength: 300,
+    isError: false,
+    errorMessage: 'error message',
+    required: true,
+    readOnly: false,
+    disabled: false,
+  }
+};
+
+export const DoubleLine: StoryObj<TextAreaProps> = {
+  args: {
+    labelText: 'Label',
+    descriptionText: 'Description',
+    placeholder: 'Placeholder...',
+    value: 'text\ntext',
+    maxLength: 300,
+    isError: false,
+    errorMessage: 'error message',
+    required: true,
+    readOnly: false,
+    disabled: false,
+    style: { width: '335px', height: '76px' },
+  }
+};
+
+export const NoLabel: StoryObj<TextAreaProps> = {
+  args: {
+    labelText: '',
+    descriptionText: 'Description',
+    placeholder: 'Placeholder...',
+    maxLength: 300,
+    isError: false,
+    errorMessage: 'error message',
+    required: true,
+    readOnly: false,
+    disabled: false,
+  }
+};
+
+export const NoDescription: StoryObj<TextAreaProps> = {
+  args: {
+    labelText: 'Label',
+    descriptionText: '',
+    placeholder: 'Placeholder...',
+    maxLength: 300,
+    isError: false,
+    errorMessage: 'error message',
+    required: true,
+    readOnly: false,
+    disabled: false,
+  }
+};
+
+export const NoRequired: StoryObj<TextAreaProps> = {
+  args: {
+    labelText: 'Label',
+    descriptionText: 'Description',
+    placeholder: 'Placeholder...',
+    maxLength: 300,
+    isError: false,
+    errorMessage: 'error message',
+    required: false,
+    readOnly: false,
+    disabled: false,
+  }
+};
+
+export const OnlyText: StoryObj<TextAreaProps> = {
+  args: {
+    labelText: '',
+    descriptionText: '',
+    placeholder: 'Placeholder...',
+    maxLength: 300,
+    isError: false,
+    errorMessage: 'error message',
+    required: false,
+    readOnly: false,
+    disabled: false,
+  }
+};
+
+export const Readonly: StoryObj<TextAreaProps> = {
+  args: {
+    labelText: 'Label',
+    descriptionText: 'Description',
+    placeholder: 'Placeholder...',
+    value: 'text',
+    maxLength: 300,
+    isError: false,
+    errorMessage: 'error message',
+    required: true,
+    readOnly: true,
+    disabled: false,
+  }
+};
+
+export const Disabled: StoryObj<TextAreaProps> = {
+  args: {
+    labelText: 'Label',
+    descriptionText: 'Description',
+    placeholder: 'Placeholder...',
+    value: 'text',
+    maxLength: 300,
+    isError: false,
+    errorMessage: 'error message',
+    required: true,
+    readOnly: false,
+    disabled: true,
+  }
+};
\ No newline at end of file
diff --git a/apps/docs/src/stories/TextField.stories.tsx b/apps/docs/src/stories/TextField.stories.tsx
new file mode 100644
index 0000000..975928a
--- /dev/null
+++ b/apps/docs/src/stories/TextField.stories.tsx
@@ -0,0 +1,126 @@
+import { ChangeEvent, useState, type InputHTMLAttributes } from 'react';
+import { StoryObj } from '@storybook/react';
+import { TextField } from '@sopt-makers/ui';
+
+interface TextFieldProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'value'> {
+  labelText?: string;
+  descriptionText?: string;
+  value: string;
+  errorMessage?: string;
+  isError?: boolean;
+}
+
+const useTextField = (props: TextFieldProps) => {
+  const [text, setText] = useState(props.value);
+
+  const handleTextChange = (e: ChangeEvent<HTMLInputElement>) => {
+    setText(e.target.value);
+  }
+
+  return <TextField<string> {...props} value={text} onChange={handleTextChange} />
+}
+
+export default {
+  title: 'Components/Input/TextField',
+  component: useTextField,
+  tags: ['autodocs'],
+  args: {
+    style: { width: '335px' }
+  },
+  argTypes: {
+    style: { control: false }
+  }
+}
+
+export const Default: StoryObj<TextFieldProps> = {
+  args: {
+    labelText: 'Label',
+    descriptionText: 'Description',
+    placeholder: 'Placeholder...',
+    isError: false,
+    errorMessage: 'error message',
+    required: true,
+    readOnly: false,
+    disabled: false,
+  },
+};
+
+export const NoLabel: StoryObj<TextFieldProps> = {
+  args: {
+    labelText: '',
+    descriptionText: 'Description',
+    placeholder: 'Placeholder...',
+    isError: false,
+    errorMessage: 'error message',
+    required: true,
+    readOnly: false,
+    disabled: false,
+  },
+};
+
+export const NoDescription: StoryObj<TextFieldProps> = {
+  args: {
+    labelText: 'Label',
+    descriptionText: '',
+    placeholder: 'Placeholder...',
+    isError: false,
+    errorMessage: 'error message',
+    required: true,
+    readOnly: false,
+    disabled: false,
+  },
+};
+
+export const NoRequired: StoryObj<TextFieldProps> = {
+  args: {
+    labelText: 'Label',
+    descriptionText: 'Description',
+    placeholder: 'Placeholder...',
+    isError: false,
+    errorMessage: 'error message',
+    required: false,
+    readOnly: false,
+    disabled: false,
+  },
+};
+
+export const OnlyText: StoryObj<TextFieldProps> = {
+  args: {
+    labelText: '',
+    descriptionText: '',
+    placeholder: 'Placeholder...',
+    isError: false,
+    errorMessage: 'error message',
+    required: false,
+    readOnly: false,
+    disabled: false,
+  },
+};
+
+export const Readonly: StoryObj<TextFieldProps> = {
+  args: {
+    labelText: 'Label',
+    descriptionText: 'Description',
+    placeholder: 'Placeholder...',
+    value: 'text',
+    isError: false,
+    errorMessage: 'error message',
+    required: true,
+    readOnly: true,
+    disabled: false,
+  },
+};
+
+export const Disabled: StoryObj<TextFieldProps> = {
+  args: {
+    labelText: 'Label',
+    descriptionText: 'Description',
+    placeholder: 'Placeholder...',
+    value: 'text',
+    isError: false,
+    errorMessage: 'error message',
+    required: true,
+    readOnly: false,
+    disabled: true,
+  },
+};
\ No newline at end of file
diff --git a/yarn.lock b/yarn.lock
index a03f1d9..1048265 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2401,6 +2401,16 @@
   resolved "https://registry.npmjs.org/@sinclair/typebox/-/typebox-0.27.8.tgz"
   integrity sha512-+Fj43pSMwJs4KRrH/938Uf+uAELIgVBmQzg/q1YG10djyfA3TnrU8N8XzqCh/okZdszqBQTZf96idMfE5lnwTA==
 
+"@sopt-makers/ui@1.1.1":
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/@sopt-makers/ui/-/ui-1.1.1.tgz#bfa0d06d46d608b98cbb03534a21bd48e9f1eabc"
+  integrity sha512-NvsFdwxCT8Q5DNWdu6swaEFazySyi8SFEyrlfoZ4Ju0+7NYxmv1+hBLNWW4sI8yf+G1QtFrKleqgHZ3XhH0dxQ==
+  dependencies:
+    "@sopt-makers/colors" "^3.0.0"
+    "@sopt-makers/fonts" "^2.0.0"
+    "@vanilla-extract/css" "^1.14.0"
+    "@vanilla-extract/sprinkles" "1.6.1"
+
 "@storybook/addon-actions@7.6.17":
   version "7.6.17"
   resolved "https://registry.npmjs.org/@storybook/addon-actions/-/addon-actions-7.6.17.tgz"