BumblebeeBumblebee

Password input

Contents

Live demoDesignCode

Live demo

Design

Usage

The show / hide password is used for password creation (at first log in or when requesting to reset password) and password entry, (at log in, or whenever password is required to perform a task).

Structure

The Show / Hide button sits within the form field and lets the user show and hide their entered password. The control is only visible when the field is active.

This has been ignored for now (COM-331). To get it over the line, we have decided to keep this control visible at all times within the field.

Structure It is constructed using two SVG icons drawn at size L (32 px) and displayed at size M (24px).

Interaction

The state of the form field changes depending on the actions of the user. The structure of how the instances behave are outlined, right.

Upon losing focus the password should retain the masked/unmasked state that the user has set using the Show/hide button.

Transition to display a state change with a 0.25 ease.

Accessibility

The icons for show and hide rely on visual icons. If there are specific aria attributes to help users, these should be applied.

Code

import { PasswordInput } from '@shieldpay/bumblebee/password-input';

<PasswordInput
  name="passwordInput1"
  label="Enter your super-secret password"
  showPasswordText="Show password"
  hidePasswordText="Hide password"
  value={value}
  onChange={(value) => setValue(value)}
/>;