My Design System

My Design System

Password Field

Source: TypeScript / Java

Password Field is an input field for entering passwords. The input is masked by default. On mobile devices the last typed letter is shown for a brief moment. The masking can be toggled using an optional reveal button.

Open in a
new tab
<vaadin-password-field label="Password" value="Ex@mplePassw0rd"></vaadin-password-field>

Common Input Field Features

Password Field includes all Text Field and shared input field features.

Reveal Button

The reveal button allows the user to disable masking and see the value they’ve typed in. This is especially helpful on mobile devices where typing is more error-prone. In cases where this feature is not desired, it can be disabled.

Open in a
new tab
<vaadin-password-field
  label="Password"
  value="Ex@mplePassw0rd"
  reveal-button-hidden
></vaadin-password-field>

Best Practices

Clearly indicate your password requirements to the user, so that they don’t have to guess. The Helper feature is appropriate for this purpose.

Open in a
new tab
<vaadin-password-field
  label="Password"
  helper-text="A password must be at least 8 characters.
    It has to have at least one letter and one digit."
  pattern="^(?=.*[0-9])(?=.*[a-zA-Z]).{8}.*$"
  error-message="Not a valid password"
>
</vaadin-password-field>

Showing the strength of the entered password can also be a motivating factor for users to create better passwords. You could indicate it with a more advanced Helper:

Open in a
new tab
<vaadin-password-field
  label="Password"
  @value-changed="${this.onPasswordChanged}"
  pattern="${this.pattern}"
  error-message="Not a valid password"
>
  <vaadin-icon
    icon="vaadin:check"
    slot="suffix"
    style="color: var(--lumo-success-color)"
    ?hidden="${this.strengthText !== StrengthText.strong}"
  ></vaadin-icon>
  <div slot="helper">
    Password strength:
    <span style="color:${this.strengthColor}">${this.strengthText}</span>
  </div>
</vaadin-password-field>