Password
<ns-password> 
Overview
Supports users when entering an existing or creating a password.
The ns-password component includes a set of features that help users not only enter a password but also accommodate their need to create one.
This component wraps the ns-inputter. Consider the guidelines defined for the ns-inputter when using this component. See <ns-inputter> documentation.
Examples
Guidance
Standard
Key
| Key | Field type | Guidelines |
|---|---|---|
| A | Label | Leave this to say ‘Password’ to clearly define the purpose. |
| B | Helper | Optional helpful messaging can be used. |
| C | Tip | Optional explanatory information. |
| D | Input | By default the input is masked. |
| E | Show/Hide | Toggle to reveal or hide the password. |
Confirm
Key
| Key | Field type | Guidelines |
|---|---|---|
| A | Label | Leave this to say ‘Password’ to clearly define the purpose. |
| B | Input | By default the input is masked. |
| C | Show/Hide | The show/hide toggles are dependent on each other to make comparison easy. |
| D | Validation message | Dynamic messaging to help the user correctly format when creating their new password. |
| E | In-line validation | Instantly updates as the user creates their password. |
| F | Confirmation | Checks the user has entered the password they intended by matching them. |
Implementation
Placement
The ns-password component can be used in the following components:
Specification
Attributes
helper
- Property
helper- Description
- The helper text of the password.
- Type
string- Default
label
- Property
label- Description
- The label of the password.
- Type
string- Default
Password
confirm-label
- Property
confirmLabel- Description
- The label of the confirm password.
- Type
string- Default
Confirm Password
name
- Property
name- Description
- The form name of the password.\
- Type
string
value
- Property
value- Description
- The value of the password.
- Type
string- Default
labelID
- Property
labelID- Type
string- Default
heading
- Property
heading- Type
string- Default
type
- Property
type- Description
- The type of the password.
- Type
string- Options
defaultconfirm- Default
standard
Slots
| Slot | Permitted tags | Description |
|---|---|---|
tip-details | <p> | The tip details of the password. |
Events
| Name | Description |
|---|---|
change | The event fired when the value changes. Returns the value of the password. |
Last updated: