From c48bcb106251bd8e12b997333cc864a532d9556c Mon Sep 17 00:00:00 2001
From: Alghifari Taufan Nugroho <43292197+nvanonim@users.noreply.github.com>
Date: Tue, 25 Aug 2020 18:16:00 +0700
Subject: [PATCH 1/4] Add more form fields documentation without result

---
 docusaurus/docs/form-fields.md | 116 +++++++++++++++++++++++++++++++++
 1 file changed, 116 insertions(+)

diff --git a/docusaurus/docs/form-fields.md b/docusaurus/docs/form-fields.md
index 0c4bbd5..5329e0d 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,117 @@ 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
+
+```jsx
+<Input.Radio name="name" value="text value">
+  Hello
+</Input.Radio>
+```
+
+<!-- ### Result
+
+<Input.Radio name="name" value="text value">
+Hello
+</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> -->

From 4efa4c2a4488c958aaddf47442da6fd43bf5ef25 Mon Sep 17 00:00:00 2001
From: Alghifari Taufan Nugroho <43292197+nvanonim@users.noreply.github.com>
Date: Tue, 1 Sep 2020 16:37:22 +0700
Subject: [PATCH 2/4] re-fix the fields

---
 docusaurus/docs/form-fields.md | 26 ++++++++++++++++++++------
 1 file changed, 20 insertions(+), 6 deletions(-)

diff --git a/docusaurus/docs/form-fields.md b/docusaurus/docs/form-fields.md
index 5329e0d..4401151 100644
--- a/docusaurus/docs/form-fields.md
+++ b/docusaurus/docs/form-fields.md
@@ -3,7 +3,7 @@ id: form-fields
 title: Form Fields
 ---
 
-<!-- import { Input } from "jasper-ui" -->
+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.
 
@@ -52,7 +52,7 @@ Text input field is a commonly-defined single-line text field that a user can en
 
 <!-- ### Result
 
-<Input.text name="input-name" placeholder="text placeholder" /> -->
+<Input.Text name="input-name" placeholder="text placeholder"/> -->
 
 ## Radio Input
 
@@ -62,16 +62,30 @@ We add Radio input field to display many options with only one radio can be sele
 
 ### Code
 
+The name parameter must be the same to be detected as one Radio Input.
+
 ```jsx
-<Input.Radio name="name" value="text value">
-  Hello
+<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="text value">
-Hello
+<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

From 4258a112d042a378c4781fd4eaa341e25ad6e690 Mon Sep 17 00:00:00 2001
From: Alghifari Taufan Nugroho <43292197+nvanonim@users.noreply.github.com>
Date: Tue, 25 Aug 2020 18:16:00 +0700
Subject: [PATCH 3/4] Add more form fields documentation without result

---
 docusaurus/docs/form-fields.md | 116 +++++++++++++++++++++++++++++++++
 1 file changed, 116 insertions(+)

diff --git a/docusaurus/docs/form-fields.md b/docusaurus/docs/form-fields.md
index 0c4bbd5..5329e0d 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,117 @@ 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
+
+```jsx
+<Input.Radio name="name" value="text value">
+  Hello
+</Input.Radio>
+```
+
+<!-- ### Result
+
+<Input.Radio name="name" value="text value">
+Hello
+</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> -->

From 88de9e8e6d296dcdbff11afafae8e58cfd5b3efd Mon Sep 17 00:00:00 2001
From: Alghifari Taufan Nugroho <43292197+nvanonim@users.noreply.github.com>
Date: Tue, 1 Sep 2020 16:37:22 +0700
Subject: [PATCH 4/4] re-fix the fields

---
 docusaurus/docs/form-fields.md | 26 ++++++++++++++++++++------
 1 file changed, 20 insertions(+), 6 deletions(-)

diff --git a/docusaurus/docs/form-fields.md b/docusaurus/docs/form-fields.md
index 5329e0d..4401151 100644
--- a/docusaurus/docs/form-fields.md
+++ b/docusaurus/docs/form-fields.md
@@ -3,7 +3,7 @@ id: form-fields
 title: Form Fields
 ---
 
-<!-- import { Input } from "jasper-ui" -->
+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.
 
@@ -52,7 +52,7 @@ Text input field is a commonly-defined single-line text field that a user can en
 
 <!-- ### Result
 
-<Input.text name="input-name" placeholder="text placeholder" /> -->
+<Input.Text name="input-name" placeholder="text placeholder"/> -->
 
 ## Radio Input
 
@@ -62,16 +62,30 @@ We add Radio input field to display many options with only one radio can be sele
 
 ### Code
 
+The name parameter must be the same to be detected as one Radio Input.
+
 ```jsx
-<Input.Radio name="name" value="text value">
-  Hello
+<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="text value">
-Hello
+<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