Skip to main content

ns-password

Introduction#

A standardised Password component that supports users when entering an existing password.

The ns-password component has been developed to include a set of features that help a user not only enter a password but can accommodate their need to create one too.

This component wraps our ns-inputter component. Guidelines defined on the ns-inputter should also be considered when using this component. See ns-inputter documentation.

Content guidance#

Variants and purpose#

There are 2 variants of the ns-password component. Each should be used for its specific purpose. Both accommodate password manager applications, display at an appropriate width for the number of characters required, can have optional helper text, and use mono-spaced alignment for legibility.

Standard#

Use this variant when a user needs to enter a password they have already created to access secure information. It comprises a label, an input field with masking as default, a show/hide toggle and validation.

Password-std

KeyField typeGuidelines
ALabelLeave this to say 'Password' to clearly define the purpose.
BHelperOptional helpful messaging can be used.
CTipOptional explanatory information.
DInputBy default the input is masked.
EShow/HideToggle to reveal or hide the password.

Confirm Password#

This variant is more complex than the Standard one. It allows a user to correctly format a new password and validate it against certain criteria. It comprises the same label, optional helper and tip text, input field and show/hide toggle as the standard version but includes a more proactive and helpful in-line validation technique as well as a Confirm Password field to verify the user is entering what they intended.

Password-confirm

KeyField typeGuidelines
ALabelLeave this to say 'Password' to clearly define the purpose.
BInputBy default the input is masked.
CShow/HideThe show/hide toggles are dependent on each other to make comparison easy.
DValidation messageDynamic messaging to help the user correctly format when creating their new password.
EIn-line validationInstantly updates as the user creates their password.
FConfirmationChecks the user has entered the password they intended by matching them.

Validation#

The Confirm Password variant has in-line validation that checks the input as the user types. This helps provide useful instant feedback to them on their formatting. The requirements can be flexible but currently set as British Gas format by default. The requirements are also accompanied by helpful messaging that changes with the status.

IconDescription
infoInformation icon. This informs the user as to what is required before any input has been made.
WarningError triangle. This requirement has not yet been made. Text will also turn red.
SuccessSuccess tick. This particular requirement has been met.

Once all requirements have been met the input field's border also thickens changes to green to emphasise this.

The Standard variant just uses a single validation requirement that appears if the user tries to proceed without entering a password.

Password-std-validation

Best practice#

๐Ÿ’š Do's๐Ÿ’” Don'ts
Use the correct variant for its intended purposeTry to make up another version by using parts - it will lead to an inconsistent experience
Ensure the requirements reflect what's neededUse requirements that differ from company policy
Add Helper text or tips if necessaryChange the labels

Usage#

View example on Storybook

Component placement#

The ns-password component can be used in the following components:

Specification#

Also see ns-inputter specification

AttributeTypeDefaultOptionsDescription
typestringdefault[default, confirm]The type of the password component. Use default type for login journey and confirm type for registration journey.
valuestring''The value of the input or group of inputs inside ns-inputter. This can be used to add an initial value.
helperstringSee ns-inputter.
tipstringSee ns-inputter.
namestringpasswordSee ns-inputter.
passwordValidationarray['hasNumbers', 'hasLetters', 'isBetween(8, 20)']Assists a user when adding a valid password and shows an error message when they're not. See ns-inputter

Design Tokens

You can change the branded look and feel of the ns-password by modifying these options in the design tokens.

Read more about design tokens in our getting started guide.

{
  "show-hide-button": {
    "typography": "action",
    "color": "#005EB8"
  },
  "input": {
    "success": "#23D160"
  },
  "validation-group": {
    "icon-base-color": "#209CEE",
    "error": "#EB002F"
  }
}

Feedback#

  • Do you have insights or concerns to share? You can raise an issue via Github bugs.
  • See all the issues already raised via Github issues.

๐Ÿ’ฉ ๐ŸŽ‰ ๐Ÿฆ„ You can also contact the team on Slack on the #product-nucleus channel!

Related links#