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

NameTypeDefault
purpose

"login" | "new-password"

login
variant

"boxed" | "bottom-lined"

boxed
size

"small" | "medium"

medium
inverted

boolean

label

string

placeholder

string

error

boolean

aria

Aria labels object (see Accessibility section below)

Example

Your password is hidden
Your password is hidden
Your password is hidden
Your password is hidden

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

variant="boxed"

size="medium"

Your password is hidden

variant="boxed"

size="medium"

error

Your password is hidden

variant="boxed"

size="medium"

inverted

Your password is hidden

variant="boxed"

size="medium"

inverted

error

Your password is hidden

variant="boxed"

size="medium"

disabled

variant="boxed"

size="medium"

disabled

error

variant="boxed"

size="medium"

disabled

inverted

variant="boxed"

size="medium"

disabled

inverted

error

variant="boxed"

size="small"

Your password is hidden

variant="boxed"

size="small"

error

Your password is hidden

variant="boxed"

size="small"

inverted

Your password is hidden

variant="boxed"

size="small"

inverted

error

Your password is hidden

variant="boxed"

size="small"

disabled

variant="boxed"

size="small"

disabled

error

variant="boxed"

size="small"

disabled

inverted

variant="boxed"

size="small"

disabled

inverted

error

variant="bottom-lined"

size="medium"

Your password is hidden

variant="bottom-lined"

size="medium"

error

Your password is hidden

variant="bottom-lined"

size="medium"

inverted

Your password is hidden

variant="bottom-lined"

size="medium"

inverted

error

Your password is hidden

variant="bottom-lined"

size="medium"

disabled

variant="bottom-lined"

size="medium"

disabled

error

variant="bottom-lined"

size="medium"

disabled

inverted

variant="bottom-lined"

size="medium"

disabled

inverted

error

variant="bottom-lined"

size="small"

Your password is hidden

variant="bottom-lined"

size="small"

error

Your password is hidden

variant="bottom-lined"

size="small"

inverted

Your password is hidden

variant="bottom-lined"

size="small"

inverted

error

Your password is hidden

variant="bottom-lined"

size="small"

disabled

variant="bottom-lined"

size="small"

disabled

error

variant="bottom-lined"

size="small"

disabled

inverted

variant="bottom-lined"

size="small"

disabled

inverted

error