Introduction

The input field email is a fundamental component of our design system. It provides a convenient way for users to provide their email information for various purposes such as registration, login, or subscription to newsletters.

Input Field Email

The table below provides the size specifications: | Size | Height | | ------------- | ------ | | Mobile | 36 px | | Tablet | 38 px | | Web/Desktop | 40 px |

Input Field Email Colors

The table below provides the color specifications: | Color | Hex code | | --------- | ------- | | Primary-1 | #FFB42A | | Neutral-1 | #262626 | | Neutral-2 | #6C6969 | | Neutral-3 | #FFFFFF | | Accent-1 | #C7413A |

Input Field Email States

The Input Field Email component has several states, depending on the user's interaction with it | State | Description | | -------- | ---------------------------------------------------------------------- | | Default | The initial state of the Input Field Email component | | Hover | When the user hovers the mouse pointer over the Input Field Email | | Focus | When the user clicks on the Input Field Email | | Error | When the user given inappropriate mail to display the error | | Disabled | When the Secondary Button is not available for interaction |

indreka-field-email component

The <indreka-field-email></indreka-field-email> component having the following property:

1. label having type of string.
2. placeholder having type of string.
3. id having type of string.
4. name having type of string.
5. value having type of string.
6. disabled having type of boolean.
7. required having type of boolean.
8. errorMessage having type of string.
9. helperEnabled having type of boolean.
10. helperMessage having type of string.
11. iconRight having type of array.
12. iconLeft having type of array.

use

<indreka-field-email></indreka-field-email>

we can pass attributes inside like:

1. label <indreka-field-email label="labelName"></indreka-field-email>

   -- This will give the label for the inupt field email.

2. placeholder <indreka-field-email placeholder="placeholderName"></indreka-field-email>

   -- This will add a placeholder for the input tag.

3. id <indreka-field-email id="idName"></indreka-field-email>

   -- This id name will be add to the "for" attribute of the label tag.

4. name <indreka-field-email name="name"></indreka-field-email>

   -- This will add a name for the input tag.

5. value <indreka-field-email value="value"></indreka-field-email>

   -- This will store the value of the input field and if set, will show a default value on the input field.

6. disabled <indreka-field-email disabled></indreka-field-email>

   -- This will disable the input field preventing the user to perform any action the input field.

7. required <indreka-field-email required></indreka-field-email>

   --This will make the input field mandatory, if no value is provided, an error message will be shown below the field.

8. errorMessage <indreka-field-email errorMessage="message"></indreka-field-email>

   -- This will set the error message, no default message.

9. helperEnabled <indreka-field-email helperEnabled></indreka-field-email>

-- This will enable the helper text below the input field, user must keep this enabled to see the helper text or the error messages.

10. helperMessage <indreka-field-email helperMessage="Enter the email"></indreka-field-email>

-- This will allow the user to show a helper message for the field text, this will just be used to display information, no validation checks will be done here.

11. iconleft <indreka-field-email iconLeft='["IconType", "IconVersion", "IconName"]'></indreka-field-email>

    -- This will add an icon to the left end of the text field and it will take an array as input consisting of the icon's type, version and name (in the same order), You can take reference from the Icon Library.

12. iconRight <indreka-field-email iconRight='["IconType", "IconVersion", "IconName"]'></indreka-field-email>

-- This will add an icon to the right end of the text field and it will take an array as input consisting of the icon's type, version and name (in the same order), You can take reference from the Icon Library.

Angular use We are using custom events for values. so need to be implemented in the HTML code to get the inputfield values.

emailFieldEvent inputFieldEvent <indreka-field-email (emailFieldEvent)="eventHandler($event)"></indreka-field-email>

--Example

html <indreka-field-email name="emailInput" (emailFieldEvent)="handleEmailFieldEvent($event)" ></indreka-field-email>

ts handleEmailFieldEvent(event: Event) { const customEvent = event as CustomEvent; console.log(customEvent.detail); -- will provide the value from the input tag }

css The max-width and min-width of the input-field is given as 120px and 600px respectively. For the custom component the styles cannot be changed. To change the width and height of the input-field . It can be wrapped between the div tag and it can be changed by giving width and height accordingly.