示例
直接操作示例，查看组件在具体任务中的状态与反馈。
本地凭据编辑
使用建议
密码值始终由原生控件和宿主持有
继续使用 value、defaultValue、name、form 与 autoComplete；visible 只控制输入类型，不复制、缓存或提交密码内容。
显隐状态可以受控
用 visible 与 onVisibleChange 对接宿主状态；指针切换保留已聚焦输入和选区，readOnly 仍可查看，disabled 则禁止切换。
内部显隐标签跟随 Provider
按钮默认读取 MonkeysProvider 的 passwordInput 消息；字段标签、错误、密码策略和账户流程仍由宿主业务 i18n 管理。
引入方式
从已验证的公开子路径导入组件；全局样式接入方式见安装指南。
import { BasePasswordInput } from '@inf-monkeys-tech/monkeys-design/components/base';当前限制
- PasswordInput 不提供密码生成、强度评估、泄露检查、存储或安全策略；浏览器密码管理器与自动填充策略由宿主配置并验证。
- T17 尚缺 manual keyboard/focus、deterministic visual 与 packed React 18/19 证据；显隐后的焦点、选区、自动填充和移动端行为尚未完成最终人工闭环。
- Manual keyboard/focus review, deterministic visual evidence, and packed React 18/19 checks are pending T17/T23.
API
查看组件源码export interface BasePasswordInputProps
extends Omit<
InputHTMLAttributes<HTMLInputElement>,
'className' | 'disabled' | 'readOnly' | 'style' | 'type'
> {
visible?: boolean;
defaultVisible?: boolean;
onVisibleChange?: (visible: boolean) => void;
showPasswordLabel?: string;
hidePasswordLabel?: string;
invalid?: boolean;
disabled?: boolean;
readOnly?: boolean;
appearance?: BaseAppearance;
className?: string;
classNames?: BasePasswordInputClassNames;
style?: CSSProperties;
}| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
visible | 密码内容当前的受控可见状态。 | boolean | — |
defaultVisible | 非受控模式下密码内容是否默认可见。 | boolean | false |
onVisibleChange | 密码可见状态变化时调用的回调。 | (visible: boolean) => void | — |
showPasswordLabel | 显示密码操作的可访问名称。 | string | — |
hidePasswordLabel | 隐藏密码操作的可访问名称。 | string | — |
invalid | 是否进入无效状态并应用相应的校验样式与语义。 | boolean | false |
disabled | 是否禁用该组件及其可交互行为。 | boolean | false |
readOnly | 是否将控件设为只读，同时保留聚焦与内容读取能力。 | boolean | false |
appearance | 覆盖组件使用的外观令牌或局部样式配置。 | BaseAppearance | — |
className | 追加到组件根元素的 CSS 类名。 | string | — |
classNames | 按组件公开的结构插槽分别追加 CSS 类名。 | BasePasswordInputClassNames | — |
style | 追加到组件根元素的内联样式。 | CSSProperties | — |