PasswordInput 密码输入框
安全录入口令，并提供带可访问名称的显示与隐藏切换。
使用概览
适合使用
- 登录或设置凭据时需要让用户核对输入内容时。
不建议使用
- 录入验证码、访问令牌展示或无需保密的普通文本时。
真实示例
登录密码输入
允许用户按需查看或隐藏当前口令。
正在加载示例…
安装
本地候选警告Registry 地址仅指向当前本地文档站；npm 包也只用于本地候选验证，尚未公开发布。
pnpm dlx shadcn@4.16.0 add http://127.0.0.1:3000/r/password-input.json基础用法
导入
import { PasswordInput } from "@richardqiu/quartz/password-input";JSX
<PasswordInput name="password" aria-label="登录密码" showPasswordLabel="显示密码" hidePasswordLabel="隐藏密码" autoComplete="current-password" />状态与控制摘要
默认
键盘焦点可见
已禁用
只读
无效
label · textactive · booleanAPI 参考
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
showPasswordLabel | string | 必填 | 为显示口令的切换按钮提供可访问名称。 |
组合结构
- 01
PasswordInput
键盘约定
- Tab 访问输入框和显示按钮，Enter 或空格键切换可见状态。
可访问性契约
- 显示与隐藏标签由使用方提供，并随按下状态切换。
- 请求显示前，输入框保持原生 password 类型。