Docs

You are viewing documentation for an older Vaadin version. View latest documentation

Docs

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.

Open in a
new tab
PasswordField passwordField = new PasswordField();
passwordField.setLabel("Password");
passwordField.setValue("Ex@mplePassw0rd");
add(passwordField);

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
PasswordField passwordField = new PasswordField();
passwordField.setRevealButtonVisible(false);
passwordField.setLabel("Password");
passwordField.setValue("Ex@mplePassw0rd");
add(passwordField);

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
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);

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
PasswordField passwordField = new PasswordField();
passwordField.setLabel("Password");
passwordField.setRevealButtonVisible(false);

checkIcon = VaadinIcon.CHECK.create();
checkIcon.setVisible(false);
checkIcon.getStyle().set("color", "var(--lumo-success-color)");
passwordField.setSuffixComponent(checkIcon);

Div passwordStrength = new Div();
passwordStrengthText = new Span();
passwordStrength.add(new Text("Password strength: "), passwordStrengthText);
passwordField.setHelperComponent(passwordStrength);

add(passwordField);

5CE7B45C-679A-4177-9CED-7452B85FDEC9