Password

The component to ask for a password or set a password.

It has two modes a user can toggle between with a button:

• hidden — the password is hidden
• shown — the password is shown as plain text

Use cases

Login

By default, <Password /> has the settings to be used for login screen or any case when a user must provide the existing password.

In that case the browser, or the password manager will recognise the password field and will offer autocomplete.

Sign up or reset password

If you are in the situation when a user needs to create a new password, set purpose prop to new-password:

<Password purpose="new-password" label="New password" />

This will allow password managers to generate a password for the user automatically.

Properties

Example

<div>
  <ControlledPassword label="Password" />
</div>
<div>
  <ControlledPassword label="Password" width="100%" my={2} />
</div>
<Box display="flex" flexDirection="column">
  <ControlledPassword label="Password" />
  <ControlledPassword label="Password" width="100%" my={2} />
</Box>

Accessibility

The component is done with accessibility in mind and has built-in English aria labels for the button and the component state.

When screen reader user clicks the toggle mode button, the screen reader announces the new state "Your password is hidden/shown":

If you project supports multiple languages it is recommended to pass translated labels to the component:

<Password label="Password" aria={{
    showPasswordButton: 'Show password',
    hidePasswordButton: 'Hide password',
    messagePasswordIsHidden: 'Your password is hidden',
    messagePasswordIsShown: 'Your password is shown'
}}/>

The keys to set are:

• showPasswordButton - the label of the button when the password is hidden
• hidePasswordButton - the label of the button when the password is shown
• messagePasswordIsHidden - the message to announce the state of the component after the password value is hidden
• messagePasswordIsShown - the message to announce the state of the component after the password value is shown

Combinations