> Markdown version of [Password Field](https://vaadin.com/docs/v23/components/password-field). Section index: [llms.txt](https://vaadin.com/docs/v23/components/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.

**TypeScript** — `password-field-basic.ts`

```html
<vaadin-password-field label="Password" value="Ex@mplePassw0rd"></vaadin-password-field>
```

**Java** — `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/v23/components/text-field.md)

- [See shared input field features](https://vaadin.com/docs/v23/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 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.

**TypeScript** — `password-field-reveal-button-hidden.ts`

```html
<vaadin-password-field
  label="Password"
  value="Ex@mplePassw0rd"
  reveal-button-hidden
></vaadin-password-field>
```

**Java** — `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 express your password requirements to the user, so that they don’t have to guess. The [Helper](https://vaadin.com/docs/v23/components/input-fields.md#helper) feature is appropriate for this purpose.

**TypeScript** — `password-field-helper.ts`

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

**Java** — `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 display it with a more advanced Helper:

**TypeScript** — `password-field-advanced-helper.ts`

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

**Java** — `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);
```

`F578D95F-02B0-43C1-96CD-26926B472701`