Password

Password 用于输入密码、密钥等敏感文本。组件基于 Input 封装，保留输入框的尺寸、插槽、清空按钮和原生 input 属性，并额外提供密码明文/密文切换能力。

import { Password } from '@skyroc/web-ui';

何时使用

• 需要输入密码、确认密码、访问令牌或密钥。
• 需要让用户临时查看输入内容，减少密码输入错误。
• 需要复用 Input 的尺寸、插槽、清空按钮和表单属性。
• 普通单行文本输入使用 Input；需要数值步进时使用 NumberInput。

基础用法

默认情况下，Password 使用密文输入，并在右侧显示可见性切换按钮。

<Password placeholder="Please input password" />

受控可见性

通过 visible 和 onVisibleChange 控制密码是否明文显示；非受控模式使用 defaultVisible。

const [visible, setVisible] = useState(false);

<Password visible={visible} onVisibleChange={setVisible} />

可清空

通过 clearable 显示清空按钮。清空按钮来自 Input，会清空当前 DOM value 并触发 input 事件。

<Password clearable defaultValue="abc123" />

自定义图标

通过 hiddenIcon 和 visibleIcon 替换默认的 EyeOff / Eye 图标。hiddenIcon 在密码处于隐藏状态时显示，visibleIcon 在密码处于明文状态时显示。

<Password
  hiddenIcon={<Lock />}
  visibleIcon={<LockOpen />}
/>

禁用

通过 disabled 禁用输入框。Password 继承 Input 的只读逻辑，readOnly 也会让底层 input 不可编辑。

<Password disabled defaultValue="abc123" />

尺寸

通过 size 调整高度、字号、内边距和插槽间距，从 xs 到 2xl 共 6 个尺寸。

API

Password

通用属性参考：继承 Input 的常用属性和原生 input 属性，但底层 type 由可见性状态自动控制。

类型