Helsinki Design System
Helsinki Design System
Getting started
Tutorials
Guidelines
Visual assets
Design tokens
Components
OverviewAccordionButtonCardCheckboxDate inputDialogDropdownFieldsetFooterIconKorosLoading spinnerLogoNavigationNotificationNumber inputPassword inputPrinciplesAccessibilitySecurityUsage and variationsDemos & APIPhone inputRadio buttonSearch inputSelection groupStatus labelTabsTagText fieldsTime inputToggle buttonTooltip
Patterns
About
Contributing
Resources

Password input

DraftAccessible

A password field is a foundational input field component that the user can interact with and specifically input password data.

Principles

  • A label should always be provided with password fields.
  • If possible, validate input in client-side real-time and provide the user with immediate feedback. See HDS Form validation pattern page for more information and best practices with password fields.
  • Password fields should always be mandatory. It is recommended to mark it as a required field.
  • Verify that "paste" functionality, browser password helpers, and external password managers are allowed for the input.
  • HDS password input provides a way to mask/unmask the password. Do not disabled this functionality without a good reason.

Accessibility

  • In the case of an insufficient password, aim to provide clear instructions to the user on how to correct the mistake. Always provide a text description of the error.
  • It is required to use autocomplete attribute if input control is listed in the common input purposes list. You can read the full list of common input purposes at WCAG 2.1 documentation website. You can read more about the requirement from WCAG 2.1 Identify Input Purpose guideline.
  • Place sign-in in its own form element and use landmark region to mark the login area. This allows assistive technologies to quickly locate and skip to the login section.

Security

As HDS password input provides only the front-end solution, remember that you need to take care of the security in your project. Here are some good practices you need to consider.

General Security

  • Do not prevent the user from copying and pasting the password into the field.
  • Prefer using ready authentication libraries and services, and familiarize yourself properly with their implementation.
  • In City of Helsinki Services, always use Helsinki Profiili authentication if possible.
  • Never store the password in a readable form. Always use proper hash algorithms.
  • Always protect the communication with secure connections (TLS 1.2 or newer).
  • Encourage usage of multi-factor authentication and password managers.

Creating a new password

  • Inform user properly what the requirements for their password are.
  • Do not accept password matching user identifier, e.g. a username or an email.
  • Do not truncate, sanitize, or format in any way the password user has given.
  • Set minimum length for password 12 to 16 characters.
  • Avoid setting a maximum password length smaller than 128 characters.
  • If possible, allow the password input to reflect the strength of the password entered when the password component is used for creating anew password.
  • If possible, add other programmatic assistance. Detect and suggest changes to provide the user with assistance in generating strong passwords.

Using password to log in

  • In an error message, you should not declare whether the username or the password is wrong but give general instructions to fix the problem.

Usage and variations

Default password input

A default HDS password input includes an icon to mask and unmask the password.

Assistive text
Assistive text
Error text
Assistive text
Success text
Assistive text

Core code example:

<div class="hds-text-input">
<label for="input" class="hds-text-input__label">
Label text
<span class="hds-text-input__required">*</span>
</label>
<div class="hds-text-input__input-wrapper">
<input
id="input1"
class="hds-text-input__input"
type="password"
/>
<div class="hds-text-input__buttons">
<button
type="button"
aria-label="Show"
class="hds-text-input__button"
>
<i class="hds-icon hds-icon--eye hds-icon--size-s" aria-hidden="true"></i>
</div>
</div>
<span class="hds-text-input__helper-text">Assistive text</span>
</div>

React code example:

<PasswordInput
concealPasswordButtonAriaLabel="Hide password"
helperText="Assistive text"
id="Default"
includeShowPasswordButton
label="Label"
revealPasswordButtonAriaLabel="Show password"
/>
<PasswordInput
concealPasswordButtonAriaLabel="Hide password"
defaultValue="0451234567"
disabled
helperText="Assistive text"
id="Disabled"
includeShowPasswordButton
label="Label for disabled"
revealPasswordButtonAriaLabel="Show password"
/>
<PasswordInput
concealPasswordButtonAriaLabel="Hide password"
errorText="Error text"
helperText="Assistive text"
id="Error"
includeShowPasswordButton
invalid
label="Label for invalid input"
revealPasswordButtonAriaLabel="Show password"
/>
<PasswordInput
concealPasswordButtonAriaLabel="Hide password"
helperText="Assistive text"
id="Success"
includeShowPasswordButton
label="Label for success input"
revealPasswordButtonAriaLabel="Show password"
successText="Success text"
/>

Password input with an external button

If necessary, the mask/unmask icon can be removed and the feature controlled with an external button element.

Assistive text

React code example:

{() => {
const [revealPassword, setRevealPassword] = React.useState(false);
return (
<div style={{ display: "grid", gridTemplateColumns: "400px 200px", gap: "20px" }}>
<PasswordInput
label="Label for external show password button"
id="external-password-button"
includeShowPasswordButton={false}
helperText="Assistive text"
type={revealPassword ? 'text' : 'password'}
style={{maxWidth: '400px'}}
/>
<div style={{ display: 'flex', justifyContent: 'center', flexDirection: 'column' }}>
<Button
variant="supplementary"
onClick={() => setRevealPassword(!revealPassword)}
iconLeft={revealPassword ? <IconEyeCrossed aria-hidden /> : <IconEye aria-hidden />}
>
{revealPassword ? 'Hide password' : 'Show password'}
</Button>
</div>
</div>
);
}}

Demos & API

Core

Password input in hds-core

React

Password input in hds-react

PasswordInput API