indreka-field-text v1.1.3
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:
idhaving type of string.namehaving type of string.labelhaving type of string.valuehaving type of string.placeholderhaving type of string.requiredhaving type of boolean.disabledhaving type of boolean.helperEnabledhaving type of boolean.errorMessagehaving type of string.helperMessagehaving type of string.iconRighthaving type of boolean.iconLefthaving type of boolean.
use
<indreka-field-text></indreka-field-text>
we can pass attributes inside like:
id<indreka-field-text id="idName"></indreka-field-text>
-- This id will be add to the "for" attribute of the label tag.
name<indreka-field-text name="name"></indreka-field-text>
-- This will add a name for the input tag.
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.
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.
placeholder<indreka-field-text placeholder="placeholderName"></indreka-field-text>
-- This will add a placeholder for the input tag.
required<indreka-field-text required></indreka-field-text>
-- This will add the required field for the input field text.
disabled<indreka-field-text disabled></indreka-field-text>
-- This will disable the input field preventing the user to perform any action the input field.
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.
errorMessage<indreka-field-text errorMessage="message"></indreka-field-text>
-- By using the errorMessage attribute, we can provide the error message for the validations.
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.
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.
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.