Introduction

The input field number is a fundamental component of our design system. It provides a way for users to provide some numerical information for various purposes such as age, otp, contact number, etc.

Input Field Number

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

Input Field Number 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 Number States

The Input Field Number component has several states, depending on the user's interaction with it | STATE | Description | | -------- | ---------------------------------------------------------------------- | | Default | The initial state of the Input Field component | | Hover | When the user hovers the mouse pointer over the Input Field | | Focus | When the user clicks on the Input Field | | Error | When the user gives incorrect password to display the error | | Disabled | When the Input Field is not available for interaction |

indreka-field-number component

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

1. id having type of string.
2. name having type of string.
3. disabled having type of boolean.
4. required having type of boolean.
5. placeholder having type of string.
6. label having type of string.
7. labelId having type of string.
8. min having type of number.
9. max having type of number.
10. step having type of number.
11. value having type of number.
12. errorMessage having type of string.
13. helperEnabled having type of boolean.
14. helperMessage having type of string.
15. iconRight having type of array.
16. iconLeft having type of array.

use

<indreka-field-number>Text</indreka-field-number> -- Text here will set the Label for the input field

we can pass attributes inside like:

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

-- This will set an id for the checkbox and also set the 'for' attribute for the label as well.

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

-- This will add a name for the input field that will go with the entered password.

3. disabled <indreka-field-number disabled></indreka-field-number>

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

4. required <indreka-field-number required></indreka-field-number>

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

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

   -- This will set a placeholder for the input field.

6. label <indreka-field-number label="Number"></indreka-field-number>

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

7. labelId <indreka-field-number label="labelName"></indreka-field-number>

   -- This will give the id for the label which will be shown by aria-labelledby in the input field.

8. min <indreka-field-number min=0></indreka-field-number>

   -- This will set a minimum accepted value for the input field.

9. max <indreka-field-number max=999></indreka-field-number>

   -- This will set a maximum accepted value for the input field.

10. step <indreka-field-number step=5></indreka-field-number>

-- This will set the step for increment and decrement for the input field.

11. value <indreka-field-number value=120></indreka-field-number>

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

12. errorMessage <indreka-field-number errorMessage="message"></indreka-field-number>

-- This will set the error message for required field -- by default 'Required field'.

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

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

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

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

15. helperEnabled <indreka-field-number helperEnabled></indreka-field-number>

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

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

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

Angular use

--We are using custom events for values. so need to be implemented in the HTML code to get the input field values.

numberFieldEvent <indreka-field-number (numberFieldEvent)="eventHandler($event)"></indreka-field-number>

--Example

html <indreka-field-number (numberFieldEvent)="handleNumberFieldEvent($event)" ></indreka-field-number>

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

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