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 hiddenshown
— 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
Name | Type | Default |
---|---|---|
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
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 hiddenhidePasswordButton
- the label of the button when the password is shownmessagePasswordIsHidden
- the message to announce the state of the component after the password value is hiddenmessagePasswordIsShown
- the message to announce the state of the component after the password value is shown
Combinations
variant="boxed"
size="medium"
variant="boxed"
size="medium"
error
variant="boxed"
size="medium"
inverted
variant="boxed"
size="medium"
inverted
error
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"
variant="boxed"
size="small"
error
variant="boxed"
size="small"
inverted
variant="boxed"
size="small"
inverted
error
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"
variant="bottom-lined"
size="medium"
error
variant="bottom-lined"
size="medium"
inverted
variant="bottom-lined"
size="medium"
inverted
error
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"
variant="bottom-lined"
size="small"
error
variant="bottom-lined"
size="small"
inverted
variant="bottom-lined"
size="small"
inverted
error
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