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.
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.
import { html, LitElement } from 'lit';
import { customElement } from 'lit/decorators.js';
import '@vaadin/password-field';
import { applyTheme } from 'Frontend/generated/theme';
@customElement('input-field-helper')
export class Example extends LitElement {
protected override createRenderRoot() {
const root = super.createRenderRoot();
// Apply custom theme (only supported if your app uses one)
applyTheme(root);
return root;
}
protected override render() {
return html`
<!-- tag::snippet[] -->
<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>
<!-- end::snippet[] -->
`;
}
}
PasswordFieldHelper.java
package com.vaadin.demo.component.passwordfield;
import com.vaadin.flow.component.html.Div;
import com.vaadin.flow.component.textfield.PasswordField;
import com.vaadin.flow.router.Route;
@Route("password-field-helper")
public class PasswordFieldHelper extends Div {
public PasswordFieldHelper() {
// tag::snippet[]
PasswordField passwordField = new PasswordField();
passwordField.setLabel("Password");
passwordField.setHelperText(
"A password must be at least 8 characters. It has to have at least one letter and one digit.");
passwordField.setPattern("^(?=.*[0-9])(?=.*[a-zA-Z]).{8}.*$");
passwordField.setErrorMessage("Not a valid password");
add(passwordField);
// end::snippet[]
}
}
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: