Introduction

The input field text is a fundamental component of our design system. It provides a convenient way for users to interact based on that field required.

Indreka Field text

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

Indreka Field Text 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 |

Indreka Field Text States

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

indreka-field-text component

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

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

use

<indreka-field-text></indreka-field-text>

we can pass attributes inside like:

1. id <indreka-field-text id="idName"></indreka-field-text>

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

2. name <indreka-field-text name="name"></indreka-field-text>

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

3. label <indreka-field-text label="labelName"></indreka-field-text>

-- This will add the label for the text field and will also update the aria-label of the input tag.

4. value <indreka-field-text value="value"></indreka-field-text>

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

5. placeholder <indreka-field-text placeholder="placeholderName"></indreka-field-text>

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

6. required <indreka-field-text required></indreka-field-text>

-- This will add the required field for the input field text.

7. disabled <indreka-field-text disabled></indreka-field-text>

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

8. helperEnabled <indreka-field-text helperEnabled></indreka-field-text>

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

9. errorMessage <indreka-field-text errorMessage="message"></indreka-field-text>

-- By using the errorMessage attribute, we can provide the error message for the validations.

10. helperMessage <indreka-field-text helperMessage="message"></indreka-field-text>

-- 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. iconRight <indreka-field-text iconRight='["IconType", "IconVersion", "IconName"]'></indreka-field-text>

-- 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.

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

-- 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.

Angular use We are using custom events for values. so need to be implemented in the HTML code to get the inputfield values. textFieldEvent <indreka-field-text (textFieldEvent)="eventHandler($event)"></indreka-field-text>

--Example

html <indreka-field-text name="textInput" (textFieldEvent)="handleTextFieldEvent($event)"></indreka-field-text>

ts handleTextFieldEvent(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.