# 📒 Developer style guide for Inputs

The input field is an important part of the form element that can be used to create interactive controls to accept data from the user based on multiple input types, such as text, email, number, password, URL, phone number, and more.

![image](https://user-images.githubusercontent.com/83635276/207540409-ea759ad5-9f27-405d-80fe-96e1fceb0f21.png)

## Types of Badges 🔽

1. Email
2. Textarea
3. validation
4. Password
5. Number

---

## General must known design system guideline :

### Color 🎨

Color of `text`

| Color | Succes | Error | Text | 
| --- | --- | --- | --- |
| Code in Tailwind | text-green-700 | text-red-700 | text-gray-900 |

|  | Background | Border | Active | Inactive |
| --- | --- | --- | --- | --- |
| Color Code in Tailwind | border-green-500 | border-red-500 |
 


 
|  | Background | Background |

| --- | --- | --- | 
| Color Code in Tailwind | bg-red-50 |bg-grey-700|

### Font

For all Inputs font is : **`font-medium`**

### Border Radius 🔲

The normal border-radius for the components are `rounded`.

### Normal Input guidelines :

|  | Margin | Border Radius | Text Size |
| --- | --- | --- | --- |
| Small | ml-3 mr-3 | rounded-lg | text-sm |
| Medium | ml-3 mr-3 | rounded-lg | text-md |
| Large | ml-3 mr-3 | rounded-lg | text-lg |

---

## Icon guidelines:

Mostly all the icons are taken from → [Hero Icons](https://heroicons.com/)

`Icon-text-gap` :  We follow a convention of equal margin between the text and the icon as padding in y  axis `py`. and always the margin is given from the side of icon.

|  | Width | Type |
| --- | --- | --- |
| Small | w-4 & h-4 | Hero Icons mini |
| Medium | w-5 & h-5 | Hero Icons mini |
| Large | w-6 & h-6 | Hero Icons filled |

---

## Example of Validation Input file 👇

Want to see this badges in action? Try copy pasting this code in [Tailwind Playground](https://play.tailwindcss.com/). 💥

```html

<div class="mb-6 ml-3 mr-3">
  <label for="success" class="block mb-2 text-sm font-medium text-green-700 dark:text-green-500">Your field name</label>
  <input type="text" id="success" class="bg-green-50 border border-green-500 text-green-900 dark:text-green-400 placeholder-green-700 dark:placeholder-green-500 text-sm rounded-lg focus:ring-green-500 focus:border-green-500 block w-full p-2.5 dark:bg-gray-700 dark:border-green-500" placeholder="Success input">
  <p class="mt-2 text-sm text-green-600 dark:text-green-500"><span class="font-medium">Well done!</span> Some success message.</p>
</div>
<div class="ml-3 mr-3">
  <label for="error" class="block mb-2 text-sm font-medium text-red-700 dark:text-red-500">Your field name</label>
  <input type="text" id="error" class="bg-red-50 border border-red-500 text-red-900 placeholder-red-700 text-sm rounded-lg focus:ring-red-500 dark:bg-gray-700 focus:border-red-500 block w-full p-2.5 dark:text-red-500 dark:placeholder-red-500 dark:border-red-500" placeholder="Error input">
  <p class="mt-2 text-sm text-red-600 dark:text-red-500"><span class="font-medium">Oh, Error occured!</span> Something went wrong.</p>
</div>

```

---

## Having some problem ? 😕

If you still have a problem understanding this please join our [discord server](https://discord.gg/zrVMjGW8sB) to get help.
