> Markdown version of [Password Field](https://vaadin.com/docs/v14/ds/components/password-field). Section index: [llms.txt](https://vaadin.com/docs/v14/ds/llms.txt)

# 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.

`PasswordFieldBasic.java`

```java
PasswordField passwordField = new PasswordField();
passwordField.setLabel("Password");
passwordField.setValue("Ex@mplePassw0rd");
add(passwordField);
```

## <a id="common-input-field-features"></a>Common Input Field Features

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

- [See Text Field features](https://vaadin.com/docs/v14/ds/components/text-field.md)

- [See shared input field features](https://vaadin.com/docs/v14/ds/components/input-fields.md)

## <a id="reveal-button"></a>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.

`PasswordFieldRevealButtonHidden.java`

```java
PasswordField passwordField = new PasswordField();
passwordField.setRevealButtonVisible(false);
passwordField.setLabel("Password");
passwordField.setValue("Ex@mplePassw0rd");
add(passwordField);
```

## <a id="best-practices"></a>Best Practices

Clearly indicate your password requirements to the user, so that they don’t have to guess. The [Helper](https://vaadin.com/docs/v14/ds/components/input-fields.md#helper) feature is appropriate for this purpose.

`PasswordFieldHelper.java`

```java
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:

`PasswordFieldAdvancedHelper.java`

```java
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`