Password Field

Password Field 是用于输入密码的输入字段。

用法
Styling

显示按钮
基本特性
验证
只读与禁用
样式变体
最佳实践

Password Field 是用于输入密码的输入字段。默认情况下输入内容是隐藏的。然而，在移动设备上，最后键入的字符会短暂显示一下。可以通过可选的显示按钮来切换隐藏。

Source code

PasswordFieldBasic.javapackage 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-basic")
public class PasswordFieldBasic extends Div {

    public PasswordFieldBasic() {
        // tag::snippet[]
        PasswordField passwordField = new PasswordField();
        passwordField.setLabel("Password");
        passwordField.setValue("Ex@mplePassw0rd");
        add(passwordField);
        // end::snippet[]
    }

}
password-field-basic.tsximport React from 'react';
import { PasswordField } from '@vaadin/react-components/PasswordField.js';

function Example() {
  return (
    // tag::snippet[]
    <PasswordField label="Password" value="Ex@mplePassw0rd" />
    // end::snippet[]
  );
}

password-field-basic.tsimport '@vaadin/password-field';
import { html, LitElement } from 'lit';
import { customElement } from 'lit/decorators.js';
import { applyTheme } from 'Frontend/generated/theme';

@customElement('password-field-basic')
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" value="Ex@mplePassw0rd"></vaadin-password-field>
      <!-- end::snippet[] -->
    `;
  }
}

显示按钮

显示按钮允许用户禁用隐藏功能并查看他们已输入的值。这在移动设备上尤为有帮助，因为移动设备上的输入更容易出错。如果您不需要此功能，可将其禁用。

Open in a
new tab

Source code

PasswordFieldRevealButtonHidden.javapackage 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-reveal-button-hidden")
public class PasswordFieldRevealButtonHidden extends Div {

    public PasswordFieldRevealButtonHidden() {
        // tag::snippet[]
        PasswordField passwordField = new PasswordField();
        passwordField.setRevealButtonVisible(false);
        passwordField.setLabel("Password");
        passwordField.setValue("Ex@mplePassw0rd");
        add(passwordField);
        // end::snippet[]
    }

}
password-field-reveal-button-hidden.tsximport React from 'react';
import { PasswordField } from '@vaadin/react-components/PasswordField.js';

function Example() {
  return (
    // tag::snippet[]
    <PasswordField label="Password" value="Ex@mplePassw0rd" revealButtonHidden />
    // end::snippet[]
  );
}

password-field-reveal-button-hidden.tsimport '@vaadin/password-field';
import { html, LitElement } from 'lit';
import { customElement } from 'lit/decorators.js';
import { applyTheme } from 'Frontend/generated/theme';

@customElement('password-field-reveal-button-hidden')
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"
        value="Ex@mplePassw0rd"
        reveal-button-hidden
      ></vaadin-password-field>
      <!-- end::snippet[] -->
    `;
  }
}

基本特性

以下是大多数输入字段组件都支持的基本特性：

标签

标签用于标识输入字段。其内容为纯文本，并且长度受限于字段的宽度。可使用辅助信息和工具提示来提供无法在标签中展示的附加信息。

强烈建议所有输入字段均使用可视化标签。当无法使用内置标签时，可以通过 aria-labelledby 属性将外部元素关联为字段标签。对于没有任何可见标签的字段，应通过 aria-label 属性为辅助技术提供不可见标签。

辅助信息

辅助信息用于在字段下方为用户提供可能需要输入的信息，例如格式要求或字段用途说明。

可以使用样式变体将辅助信息显示在字段上方。

除了纯文本之外，辅助信息还可以包含组件和HTML元素。但若内容较为复杂或具有交互性，可能会存在可访问性问题。

占位符

占位符是在字段为空时显示的文本。其主要目的是在无法使用辅助信息的情况下，提供简短的输入提示（例如期望的格式）。

占位符不应替代可见标签。用户可能会误将其认为是手动输入的值。有关替代内置字段标签的方法，请参阅标签。

清除按钮

清除按钮——当字段不为空时显示——会清空字段当前的值。尽管该按钮本身无法通过键盘聚焦，但在字段获得焦点时，可通过快捷键Esc触发清除操作。在搜索和筛选字段等场景下，用户常需清除数值，故此按钮尤为实用。而在普通表单中则较少使用。

前缀和后缀

前缀和后缀元素——分别呈现在字段两端——可用于显示单位、图标及与字段用途或格式相关的视觉提示。

前缀和后缀元素通常对屏幕阅读器等辅助技术不够友好。因此，其传递的信息也应通过其他方式如标签、辅助信息或为字段本身添加 ARIA 属性加以传达。

外部及不可见标签（ARIA）

强烈建议所有输入字段使用可视化标签。当无法使用内置标签时，可以通过元素的 id 属性将外部元素关联为字段标签。没有任何可见标签的字段，建议为辅助技术（如屏幕阅读器）提供不可见标签。

Source code

HTML<!-- 将外部元素关联为标签： -->
<label id="external-label">This is the label</label>
<vaadin-password-field accessible-name-ref="external-label">...

<!-- 为屏幕阅读器提供不可见的标签： -->
<vaadin-password-field accessible-name="This is the label">...
Java// 将外部元素关联为标签：
NativeLabel label = new NativeLabel("This is the label");
label.setId("external-label");
field.setAriaLabelledBy("external-label");

// 为屏幕阅读器提供不可见的标签：
field.setAriaLabel("This is the label");

Open in a
new tab

Source code

PasswordFieldBasicFeatures.javapackage com.vaadin.demo.component.passwordfield;

import com.vaadin.flow.component.icon.VaadinIcon;
import com.vaadin.flow.component.orderedlayout.HorizontalLayout;
import com.vaadin.flow.component.textfield.PasswordField;
import com.vaadin.flow.router.Route;

@Route("password-field-basic-features")
public class PasswordFieldBasicFeatures extends HorizontalLayout {

    public PasswordFieldBasicFeatures() {
        setPadding(false);

        // tag::snippet[]
        PasswordField field = new PasswordField();
        field.setLabel("Label");
        field.setHelperText("Helper text");
        field.setPlaceholder("Placeholder");
        field.setTooltipText("Tooltip text");
        field.setClearButtonVisible(true);
        field.setPrefixComponent(VaadinIcon.LOCK.create());
        // end::snippet[]

        add(field);
    }

}
password-field-basic-features.tsximport '@vaadin/icons';
import React from 'react';
import { Icon } from '@vaadin/react-components/Icon.js';
import { PasswordField } from '@vaadin/react-components/PasswordField.js';
import { Tooltip } from '@vaadin/react-components/Tooltip.js';

function Example() {
  return (
    // tag::snippet[]
    <PasswordField
      label="Label"
      helperText="Helper text"
      placeholder="Placeholder"
      clearButtonVisible
    >
      <Tooltip slot="tooltip" text="Tooltip text" />
      <Icon slot="prefix" icon="vaadin:lock" />
    </PasswordField>
    // end::snippet[]
  );
}

password-field-basic-features.tsimport '@vaadin/icon';
import '@vaadin/icons';
import '@vaadin/password-field';
import '@vaadin/tooltip';
import { html, LitElement } from 'lit';
import { customElement } from 'lit/decorators.js';
import { applyTheme } from 'Frontend/generated/theme';

@customElement('password-field-basic-features')
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="Label"
        helper-text="Helper text"
        placeholder="Placeholder"
        clear-button-visible
      >
        <vaadin-tooltip slot="tooltip" text="Tooltip text"></vaadin-tooltip>
        <vaadin-icon slot="prefix" icon="vaadin:lock"></vaadin-icon>
      </vaadin-password-field>
      <!-- end::snippet[] -->
    `;
  }
}

验证

Password Field 提供了基于约束的验证机制。约束允许您定义值必须满足的条件，以便被视为有效。验证通常在用户发起值更改时进行，例如输入内容后按下 Enter 键。如果值无效，该字段会以红色突出显示，输入下方会出现一条错误信息。不过，某些约束能够主动防止用户输入可能导致值无效的字符。

以下是所支持的约束列表及详细信息：

必填

必填字段在标签旁标有指示标记，并且当其值被首次输入后又被清除时，将变为无效。

推荐在表单顶部通过文字说明必填字段的指示标记。可以通过 --lumo-required-field-indicator 样式属性自定义该指示标记。

最小与最大长度

最小和最大输入长度约束决定了字段能接受的最小和最大字符数。当输入值短于最小长度时会触发校验错误，输入文本的最大长度也会受到限制。它们可用于强制特定格式，或限制长度以适应底层数据库架构。

当长度要求可能对用户不够明确时，建议通过辅助信息等方式对用户作出说明。

允许的字符

可以使用单字符正则表达式单独限制字段可输入的字符。与正则表达式不匹配的字符将被拒绝。但通过编程方式设置的值不会受到此约束，即便其包含不允许的字符。

Open in a
new tab

Source code

PasswordFieldValidation.javapackage com.vaadin.demo.component.passwordfield;

import com.vaadin.flow.component.orderedlayout.HorizontalLayout;
import com.vaadin.flow.component.textfield.PasswordField;
import com.vaadin.flow.component.textfield.PasswordField.PasswordFieldI18n;
import com.vaadin.flow.router.Route;

@Route("password-field-validation")
public class PasswordFieldValidation extends HorizontalLayout {

    public PasswordFieldValidation() {
        setPadding(false);

        // tag::snippet[]
        PasswordField field = new PasswordField("Password");
        field.setRequiredIndicatorVisible(true);
        field.setPattern("^[A-Za-z0-9]+$");
        field.setMinLength(6);
        field.setMaxLength(12);

        field.setI18n(new PasswordFieldI18n()
                .setRequiredErrorMessage("Field is required")
                .setMinLengthErrorMessage("Minimum length is 6 characters")
                .setMaxLengthErrorMessage("Maximum length is 12 characters")
                .setPatternErrorMessage(
                        "Only letters A-Z and numbers are allowed"));
        // end::snippet[]
        field.setHelperText(
                "6 to 12 characters. Only letters A-Z and numbers supported.");

        add(field);
    }

}
password-field-validation.tsximport React from 'react';
import { useSignal } from '@vaadin/hilla-react-signals';
import {
  PasswordField,
  type PasswordFieldElement,
} from '@vaadin/react-components/PasswordField.js';

function Example() {
  const errorMessage = useSignal('');

  return (
    // tag::snippet[]
    <PasswordField
      pattern="^[A-Za-z0-9]+$"
      required
      minlength={6}
      maxlength={12}
      label="Password"
      helperText="6 to 12 characters. Only letters A-Z and numbers supported."
      errorMessage={errorMessage.value}
      onValidated={(event) => {
        const field = event.target as PasswordFieldElement;
        const { validity } = field.inputElement as HTMLInputElement;
        if (validity.valueMissing) {
          errorMessage.value = 'Field is required';
        } else if (validity.tooShort) {
          errorMessage.value = `Minimum length is ${field.minlength} characters`;
        } else if (validity.tooLong) {
          errorMessage.value = `Maximum length is ${field.maxlength} characters`;
        } else if (validity.patternMismatch) {
          errorMessage.value = 'Only letters A-Z and numbers are allowed';
        } else {
          errorMessage.value = '';
        }
      }}
    />
    // end::snippet[]
  );
}

password-field-validation.tsimport '@vaadin/password-field';
import { html, LitElement } from 'lit';
import { customElement, state } from 'lit/decorators.js';
import type { PasswordField, PasswordFieldValidatedEvent } from '@vaadin/password-field';
import { applyTheme } from 'Frontend/generated/theme';

@customElement('password-field-validation')
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;
  }

  @state()
  private errorMessage = '';

  protected override render() {
    return html`
      <!-- tag::snippet[] -->
      <vaadin-password-field
        pattern="^[A-Za-z0-9]+$"
        required
        minlength="6"
        maxlength="12"
        label="Password"
        helper-text="6 to 12 characters. Only letters A-Z and numbers supported."
        .errorMessage="${this.errorMessage}"
        @validated="${(event: PasswordFieldValidatedEvent) => {
          const field = event.target as PasswordField;
          const { validity } = field.inputElement as HTMLInputElement;
          if (validity.valueMissing) {
            this.errorMessage = 'Field is required';
          } else if (validity.tooShort) {
            this.errorMessage = `Minimum length is ${field.minlength} characters`;
          } else if (validity.tooLong) {
            this.errorMessage = `Maximum length is ${field.maxlength} characters`;
          } else if (validity.patternMismatch) {
            this.errorMessage = 'Only letters A-Z and numbers are allowed';
          } else {
            this.errorMessage = '';
          }
        }}"
      ></vaadin-password-field>
      <!-- end::snippet[] -->
    `;
  }
}

确保您为每个约束违反情形配置一个合适的错误信息，以便为用户提供明确的反馈。

Note	数据绑定与自定义校验 Flow 和 Hilla 提供了高级的 API —— Binder，可用于数据绑定及为多个字段添加自定义校验规则，从而创建表单。您可通过相关Flow与Hilla文章进一步了解 Binder。

只读与禁用

用于展示数值的字段应设置为 read-only 模式，以防止编辑。只读字段可获取焦点，并可被屏幕阅读器识别。它们可以显示工具提示，其数值可以被选中和复制。

当前不可用的字段应设置为 disabled。禁用字段由于对比度较低，不适宜用于展示信息。它们无法获得焦点，无法显示工具提示，也不会被屏幕阅读器识别，其数值也无法被选中和复制。

禁用字段适用于某些情况下可以根据用户操作变为可用的场景。如果用户无法进行任何操作使其可编辑，建议完全隐藏该字段。

Open in a
new tab

Source code

PasswordFieldReadonlyAndDisabled.javapackage com.vaadin.demo.component.passwordfield;

import com.vaadin.flow.component.orderedlayout.HorizontalLayout;
import com.vaadin.flow.component.textfield.PasswordField;
import com.vaadin.flow.router.Route;

@Route("password-field-readonly-and-disabled")
public class PasswordFieldReadonlyAndDisabled extends HorizontalLayout {

    public PasswordFieldReadonlyAndDisabled() {
        setPadding(false);

        // tag::snippet[]
        PasswordField readonlyField = new PasswordField();
        readonlyField.setReadOnly(true);
        readonlyField.setLabel("Read-only");
        readonlyField.setValue("Ex@mplePassw0rd");

        PasswordField disabledField = new PasswordField();
        disabledField.setEnabled(false);
        disabledField.setLabel("Disabled");
        // end::snippet[]
        add(readonlyField, disabledField);
    }

}
password-field-readonly-and-disabled.tsximport React from 'react';
import { HorizontalLayout } from '@vaadin/react-components/HorizontalLayout.js';
import { PasswordField } from '@vaadin/react-components/PasswordField.js';

function Example() {
  return (
    <HorizontalLayout theme="spacing">
      {/* tag::snippet[] */}
      <PasswordField readonly label="Read-only" value="Ex@mplePassw0rd" />

      <PasswordField disabled label="Disabled" />
      {/* end::snippet[] */}
    </HorizontalLayout>
  );
}

password-field-readonly-and-disabled.tsimport '@vaadin/horizontal-layout';
import '@vaadin/password-field';
import { html, LitElement } from 'lit';
import { customElement } from 'lit/decorators.js';
import { applyTheme } from 'Frontend/generated/theme';

@customElement('password-field-readonly-and-disabled')
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`
      <vaadin-horizontal-layout theme="spacing">
        <!-- tag::snippet[] -->
        <vaadin-password-field readonly label="Read-only" value="Ex@mplePassw0rd">
        </vaadin-password-field>

        <vaadin-password-field disabled label="Disabled"></vaadin-password-field>
        <!-- end::snippet[] -->
      </vaadin-horizontal-layout>
    `;
  }
}

样式变体

可应用以下样式变体：

文本对齐

支持三种文本对齐方式：left（默认）、center 和 right。

当以垂直分组展示数值时，推荐使用右对齐，这有助于数值的解读和对比。

紧凑变体

可通过紧凑变体令部分字段更为紧凑。字段的默认尺寸可通过样式属性进行自定义。

辅助信息显示于字段上方

辅助信息可显示在字段上方、标签下方。

边框

可通过为 --vaadin-input-field-border-width CSS 属性赋值（如 1px），为字段表面添加边框。可通过 html 选择器为所有输入字段全局应用边框，也可以仅应用于特定组件实例。要获得符合 WCAG 2.1 AA 级色彩对比标准的默认 Lumo 字段样式，边框是必需的。

可通过 --vaadin-input-field-border-color 属性重写默认边框颜色。

Open in a
new tab

Source code

PasswordFieldStyles.javapackage com.vaadin.demo.component.passwordfield;

import com.vaadin.flow.component.orderedlayout.HorizontalLayout;
import com.vaadin.flow.component.textfield.PasswordField;
import com.vaadin.flow.component.textfield.TextFieldVariant;
import com.vaadin.flow.router.Route;

@Route("password-field-styles")
public class PasswordFieldStyles extends HorizontalLayout {

    public PasswordFieldStyles() {
        setPadding(false);

        // tag::snippet[]
        PasswordField field = new PasswordField();
        field.addThemeVariants(TextFieldVariant.LUMO_SMALL,
                TextFieldVariant.LUMO_ALIGN_RIGHT,
                TextFieldVariant.LUMO_HELPER_ABOVE_FIELD);
        field.getStyle().set("--vaadin-input-field-border-width", "1px");
        // end::snippet[]
        field.setLabel("Label");
        field.setHelperText("Helper text");
        field.setValue("Ex@mplePassw0rd");

        add(field);
    }

}
password-field-styles.tsximport React from 'react';
import { PasswordField } from '@vaadin/react-components/PasswordField.js';

function Example() {
  return (
    // tag::snippet[]
    <PasswordField
      theme="align-right small helper-above-field"
      label="Label"
      helperText="Helper text"
      value="Ex@mplePassw0rd"
      style={{ '--vaadin-input-field-border-width': '1px' } as React.CSSProperties}
    />
    // end::snippet[]
  );
}

password-field-styles.tsimport '@vaadin/password-field';
import { html, LitElement } from 'lit';
import { customElement } from 'lit/decorators.js';
import { applyTheme } from 'Frontend/generated/theme';

@customElement('password-field-styles')
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
        theme="align-right small helper-above-field"
        label="Label"
        helper-text="Helper text"
        value="Ex@mplePassw0rd"
        style="--vaadin-input-field-border-width: 1px;"
      ></vaadin-password-field>
      <!-- end::snippet[] -->
    `;
  }
}

最佳实践

清晰地向用户表达您的密码要求，以便他们无需猜测。可以适当地利用Helper功能实现此目的。

Open in a
new tab

Source code

PasswordFieldHelper.javapackage 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[]
    }

}
password-field-helper.tsximport React from 'react';
import { PasswordField } from '@vaadin/react-components/PasswordField.js';

function Example() {
  return (
    // tag::snippet[]
    <PasswordField
      label="Password"
      helperText="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}.*$"
      errorMessage="Not a valid password"
    />
    // end::snippet[]
  );
}

password-field-helper.tsimport '@vaadin/password-field';
import { html, LitElement } from 'lit';
import { customElement } from 'lit/decorators.js';
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[] -->
    `;
  }
}

显示输入密码的强度也可以作为激励用户创建更好密码的因素。您可以使用更高级的 Helper 来显示它：

Open in a
new tab

Source code

PasswordFieldAdvancedHelper.javapackage com.vaadin.demo.component.passwordfield;

import com.vaadin.flow.component.Text;
import com.vaadin.flow.component.html.Div;
import com.vaadin.flow.component.html.Span;
import com.vaadin.flow.component.icon.Icon;
import com.vaadin.flow.component.icon.VaadinIcon;
import com.vaadin.flow.component.textfield.PasswordField;
import com.vaadin.flow.data.value.ValueChangeMode;
import com.vaadin.flow.router.Route;

@Route("password-field-advanced-helper")
public class PasswordFieldAdvancedHelper extends Div {

    private Icon checkIcon;
    private Span passwordStrengthText;

    public PasswordFieldAdvancedHelper() {
        // tag::snippet[]
        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);
        // end::snippet[]

        passwordField.setValueChangeMode(ValueChangeMode.EAGER);
        passwordField.addValueChangeListener(e -> {
            String password = e.getValue();
            updateHelper(password);
        });

        updateHelper("");
    }

    private void updateHelper(String password) {
        if (password.length() > 9) {
            passwordStrengthText.setText("strong");
            passwordStrengthText.getStyle().set("color",
                    "var(--lumo-success-color)");
            checkIcon.setVisible(true);
        } else if (password.length() > 5) {
            passwordStrengthText.setText("moderate");
            passwordStrengthText.getStyle().set("color", "#e7c200");
            checkIcon.setVisible(false);
        } else {
            passwordStrengthText.setText("weak");
            passwordStrengthText.getStyle().set("color",
                    "var(--lumo-error-color)");
            checkIcon.setVisible(false);
        }
    }

}
password-field-advanced-helper.tsximport '@vaadin/icons';
import React from 'react';
import { useSignal } from '@vaadin/hilla-react-signals';
import { Icon } from '@vaadin/react-components/Icon.js';
import {
  PasswordField,
  type PasswordFieldValueChangedEvent,
} from '@vaadin/react-components/PasswordField.js';

type PasswordStrength = 'moderate' | 'strong' | 'weak';

const StrengthColor: Record<PasswordStrength, string> = {
  weak: 'var(--lumo-error-color)',
  moderate: '#e7c200',
  strong: 'var(--lumo-success-color)',
};

function Example() {
  const strengthText = useSignal<PasswordStrength>('weak');
  const strengthColor = useSignal<string>(StrengthColor.weak);

  const pattern = '^(?=.*[0-9])(?=.*[a-zA-Z]).{8}.*';

  function onPasswordChanged(event: PasswordFieldValueChangedEvent) {
    let strength: PasswordStrength = 'weak';
    const { value } = event.detail;
    if (value) {
      if (value.length > 9) {
        strength = 'strong';
      } else if (value.length > 5) {
        strength = 'moderate';
      }
    }
    strengthText.value = strength;
    strengthColor.value = StrengthColor[strength];
  }

  return (
    // tag::snippet[]
    <PasswordField
      label="Password"
      pattern={pattern}
      errorMessage="Not a valid password"
      onValueChanged={onPasswordChanged}
    >
      <Icon
        icon="vaadin:check"
        slot="suffix"
        style={{ color: StrengthColor.strong }}
        hidden={strengthText.value !== 'strong'}
      />

      <div slot="helper">
        Password strength: <span style={{ color: strengthColor.value }}>{strengthText.value}</span>
      </div>
    </PasswordField>
    // end::snippet[]
  );
}

password-field-advanced-helper.tsimport '@vaadin/icon';
import '@vaadin/icons';
import '@vaadin/password-field';
import { html, LitElement } from 'lit';
import { customElement, state } from 'lit/decorators.js';
import type { PasswordFieldValueChangedEvent } from '@vaadin/password-field';
import { applyTheme } from 'Frontend/generated/theme';

type PasswordStrength = 'moderate' | 'strong' | 'weak';

const StrengthColor: Record<PasswordStrength, string> = {
  weak: 'var(--lumo-error-color)',
  moderate: '#e7c200',
  strong: 'var(--lumo-success-color)',
};

@customElement('password-field-advanced-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;
  }

  @state()
  private strengthText: PasswordStrength = 'weak';

  @state()
  private strengthColor = StrengthColor.weak;

  private pattern = '^(?=.*[0-9])(?=.*[a-zA-Z]).{8}.*$';

  protected override render() {
    return html`
      <!-- tag::snippet[] -->
      <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>
      <!-- end::snippet[] -->
    `;
  }

  private onPasswordChanged(event: PasswordFieldValueChangedEvent) {
    let strength: PasswordStrength = 'weak';
    const { value } = event.detail;
    if (value) {
      if (value.length > 9) {
        strength = 'strong';
      } else if (value.length > 5) {
        strength = 'moderate';
      }
    }
    this.strengthText = strength;
    this.strengthColor = StrengthColor[strength];
  }
}

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

Docs

Docs

Password Field

显示按钮

基本特性

验证

只读与禁用

样式变体

最佳实践