Password Field
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.
new tab
<vaadin-password-field label="Password" value="Ex@mplePassw0rd"></vaadin-password-field>Reveal Button
The reveal button allows the user to disable masking and see the value they have typed in. This is especially helpful on mobile devices, where typing is more error-prone. In cases where this feature isn’t desired, it can be disabled.
new tab
<vaadin-password-field
label="Password"
value="Ex@mplePassw0rd"
reveal-button-hidden
></vaadin-password-field>Best Practices
Clearly express your password requirements to the user, so that they don’t have to guess. The Helper feature is appropriate for this purpose.
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 display it with a more advanced Helper:
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:${StrengthColor.strong}"
?hidden="${this.strengthText !== 'strong'}"
></vaadin-icon>
<div slot="helper">
Password strength:
<span style="color:${this.strengthColor}">${this.strengthText}</span>
</div>
</vaadin-password-field>F578D95F-02B0-43C1-96CD-26926B472701