diff --git a/docusaurus/docs/form-fields.md b/docusaurus/docs/form-fields.md
index 0c4bbd5..4401151 100644
--- a/docusaurus/docs/form-fields.md
+++ b/docusaurus/docs/form-fields.md
@@ -3,6 +3,8 @@ id: form-fields
 title: Form Fields
 ---
 
+import {Input} from "jasper-ui"
+
 Form fields are used in forms where input from user is required. They are part of the django form fields implemented on our web. Typically used for registration, login, and signup.
 
 ## Dropdown
@@ -32,3 +34,131 @@ choices={["Finance", "Academy", "Competition"]}
 label="Departments"
 name="DropdownInput"
 />
+
+## Text Input
+
+### Usage
+
+Text input field is a commonly-defined single-line text field that a user can enter text into. Usually used for username in registration form.
+
+### Code
+
+```jsx
+<Input.Text
+  name="name"
+  placeholder="text placeholder"
+/>
+```
+
+<!-- ### Result
+
+<Input.Text name="input-name" placeholder="text placeholder"/> -->
+
+## Radio Input
+
+### Usage
+
+We add Radio input field to display many options with only one radio can be selected at the same time.
+
+### Code
+
+The name parameter must be the same to be detected as one Radio Input.
+
+```jsx
+<Input.Radio name="name" value="One">
+  One
+</Input.Radio>
+<Input.Radio name="name" value="Two">
+  Two
+</Input.Radio>
+<Input.Radio name="name" value="Three">
+  Three
+</Input.Radio>
+```
+
+<!-- ### Result
+
+<Input.Radio name="name" value="One">
+  One
+</Input.Radio>
+<Input.Radio name="name" value="Two">
+  Two
+</Input.Radio>
+<Input.Radio name="name" value="Three">
+  Three
+</Input.Radio> -->
+
+## Number Input
+
+### Usage
+
+Number input define a field for entering a number. Usually used to write down a price, or count.
+
+### Code
+
+```jsx
+<Input.Number
+  name="input-name" 
+  placeholder="number placeholder"
+/>
+```
+
+<!-- ### Result
+
+<Input.Number name="input-name" placeholder="number placeholder" /> -->
+
+## TextArea Input
+
+### Usage
+
+TextArea input is multi-line text field that usually used to collect user inputs like comments or reviews.
+
+### Code
+
+```jsx
+<Input.TextArea
+  name="input-name"
+  placeholder="placeholder"
+/>
+```
+
+<!-- ### Result
+
+<Input.TextArea name="input-name" placeholder="placeholder" /> -->
+
+## Phone Input
+
+### Usage
+
+We implement phone input field similiar to number input with a phone span. As the name said, it is used for a phone number input in a form.
+
+### Code
+
+```jsx
+<Input.Phone
+  name="input-name"
+  placeholder="phone placeholder"
+/>
+```
+
+<!-- ### Result
+
+<Input.Phone name="input-name" placeholder="phone placeholder" /> -->
+
+## Checkbox Input
+
+### Usage
+
+Checkbox input is used to display one or more options with the user and the user can select one or more from the options.
+
+### Code
+
+```jsx
+<Input.Checkbox name="input-name">
+  Hello
+</Input.Checkbox>
+```
+
+<!-- ### Result
+
+<Input.Checkbox name="input-name">Hello</Input.Checkbox> -->