indreka-field-password v1.1.6
Introduction
The input field password is a fundamental component of our design system. It provides a way for users to provide their password information for various purposes such as registration, login, so that only they have access to their account and details.
Input Field Password
The table below provides the size specifications:
| Size | Height |
| ------------- | ------ |
| Mobile | 36 px |
| Tablet | 38 px |
| Web/Desktop | 40 px |
Input Field Password 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 Password States
The Input Field Password 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-password component
The <indreka-field-password></indreka-field-password> 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.requiredMessagehaving type of string.patternhaving type of string.iconHidePasswordhaving type of array.iconShowPasswordhaving type of array.iconLefthaving type of array.
use
<indreka-field-password></indreka-field-password>
we can pass attributes inside like:
id<indreka-field-password id="id"></indreka-field-password>
-- This will set an id for the checkbox and also set the 'for' attribute for the label as well.
name<indreka-field-password name="name"></indreka-field-password>
-- This will add a name for the input field.
label<indreka-field-password label="labelName"></indreka-field-password>
-- This will set the label for the password field and also update the aria-label.
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.
placeholder<indreka-field-password placeholder="placeholderName"></indreka-field-password>
-- This will set a placeholder for the input field.
required<indreka-field-password required></indreka-field-password>
-- This will make the input field mandatory, if no value is provided, an error message will be shown below the field.
disabled<indreka-field-password disabled></indreka-field-password>
-- This will disable the input field preventing the user to perform any action the input field.
helperEnabled<indreka-field-password helperEnabled></indreka-field-password>
-- 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-password errorMessage="message"></indreka-field-password>
-- By using the errorMessage attribute, we can provide the error message for the validations.
helperMessage<indreka-field-password helperMessage="message"></indreka-field-password>
-- This will allow the user to show a helper message for the input field, this will just be used to display information, no validation checks will be done here.
requiredMessage<indreka-field-password helperMessage="message"></indreka-field-password>
-- This will allow the user to change the required message for the input field.
pattern<indreka-field-password pattern="[A-Za-z0-9]{8,}">Text</indreka-field-password>
-- This will set a pattern for the input/password which will be checked and display an error message if the pattern does not matches.
iconHidePassword<indreka-field-text iconHidePassword='["IconType", "IconVersion", "IconName"]'></indreka-field-text>
-- This will add an icon to the right end of the input field which will make the password hidden 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.
iconShowPassword<indreka-field-text iconShowPassword='["IconType", "IconVersion", "IconName"]'></indreka-field-text>
-- This will add an icon to the right end of the input field which will make the password visible 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 input 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 input field values.
passwordFieldEvent
<indreka-field-password (passwordFieldEvent)="eventHandler($event)"></indreka-field-password>
--Example
html
<indreka-field-password name="passwordInput" (passwordFieldEvent)="handlePasswordFieldEvent($event)" ></indreka-field-password>
ts
handlePasswordFieldEvent(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.