COMPONENT 22 · Text & File Inputs

密码框

Password Field

也叫Secure Text FieldPassword Input密码输入框NSSecureTextField

遮蔽敏感文本，并可提供显示或隐藏密码操作。

Masks sensitive text and may provide a show/hide password action.

ANATOMY & USAGE

结构与使用建议

组成部分

密码标签
遮蔽输入
显示密码按钮

适合使用

用户输入密码或类似机密字符串时。

不建议使用

输入普通文本或验证码时。

键盘与无障碍

使用正确 autocomplete；显示按钮说明当前动作，切换后保持焦点与光标位置。

DESCRIBE IT TO AI

这样告诉编程助手

实现密码框（Password Field）：遮蔽敏感文本，并可提供显示或隐藏密码操作。

MINIMAL RUNNABLE CODE

可复制代码

原生与 React 两套实现，不依赖第三方组件库。

READ ONLY · SAFE TO COPY

<div class="demo stack">
  <label for="password">密码</label>
  <input id="password" type="password" autocomplete="current-password">
  <button type="button" aria-pressed="false">显示密码</button>
</div>