indreka-field-email v1.2.81
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:
label
having type of string.placeholder
having type of string.id
having type of string.name
having type of string.value
having type of string.disabled
having type of boolean.required
having type of boolean.errorMessage
having type of string.helperEnabled
having type of boolean.helperMessage
having type of string.iconRight
having type of array.iconLeft
having type of array.
use
<indreka-field-email></indreka-field-email>
we can pass attributes inside like:
label
<indreka-field-email label="labelName"></indreka-field-email>
-- This will give the label for the inupt field email.
placeholder
<indreka-field-email placeholder="placeholderName"></indreka-field-email>
-- This will add a placeholder for the input tag.
id
<indreka-field-email id="idName"></indreka-field-email>
-- This id name will be add to the "for" attribute of the label tag.
name
<indreka-field-email name="name"></indreka-field-email>
-- This will add a name for the input tag.
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.
disabled
<indreka-field-email disabled></indreka-field-email>
-- This will disable the input field preventing the user to perform any action the input field.
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.
errorMessage
<indreka-field-email errorMessage="message"></indreka-field-email>
-- This will set the error message, no default message.
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.
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.
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.
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.
6 months ago
5 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
5 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
7 months ago
8 months ago
9 months ago
10 months ago