InputPassword 密码输入框

用于输入密码的输入框，支持切换密码可见性。

何时使用

• 需要用户输入密码时
• 需要保护敏感信息不被旁观者看到
• 需要提供切换密码可见性的功能
• 用于登录、注册、修改密码等场景

示例

基础用法

最简单的密码输入框，点击眼睛图标可切换密码可见性。

实时编辑器

function Demo() {
  const [password, setPassword] = React.useState('');

  return (
    <div>
      <InputPassword
        placeholder="请输入密码"
        value={password}
        onChange={(e) => setPassword(e.target.value)}
      />
      <div style={{ marginTop: '12px', color: '#79879c', fontSize: '14px' }}>
        密码长度: {password.length} 个字符
      </div>
    </div>
  );
}

结果

Loading...

受控组件

通过 value 和 onChange 实现受控组件。

实时编辑器

function Demo() {
  const [password, setPassword] = React.useState('');

  const handleClear = () => {
    setPassword('');
  };

  return (
    <div>
      <InputPassword
        placeholder="请输入密码"
        value={password}
        onChange={(e) => setPassword(e.target.value)}
      />
      <Group style={{ marginTop: '16px' }}>
        <Button onClick={handleClear}>清空密码</Button>
      </Group>
    </div>
  );
}

结果

Loading...

禁用状态

通过 disabled 属性禁用密码输入框。

实时编辑器

function Demo() {
  return (
    <Group direction="column">
      <InputPassword disabled placeholder="禁用状态" />
      <InputPassword disabled value="secretpassword" />
    </Group>
  );
}

结果

Loading...

带前缀

通过 prefix 属性添加前缀图标。

实时编辑器

function Demo() {
  const { Key } = KubedIcons;

  return (
    <InputPassword
      prefix={<Key size={16} />}
      placeholder="请输入密码"
    />
  );
}

结果

Loading...

带前置标签

通过 addonBefore 属性添加前置标签。

实时编辑器

function Demo() {
  const { Key } = KubedIcons;

  return (
    <Group direction="column">
      <InputPassword addonBefore="密码" placeholder="请输入密码" />
      <InputPassword addonBefore={<Key size={16} />} placeholder="请输入密码" />
    </Group>
  );
}

结果

Loading...

自定义宽度

通过 width 属性设置密码输入框宽度。

实时编辑器

function Demo() {
  return (
    <Group direction="column">
      <InputPassword width={200} placeholder="宽度 200px" />
      <InputPassword width={300} placeholder="宽度 300px" />
      <InputPassword width={400} placeholder="宽度 400px" />
    </Group>
  );
}

结果

Loading...

密码强度验证

实现密码强度验证功能。

实时编辑器

function Demo() {
  const [password, setPassword] = React.useState('');

  const getStrength = (pwd) => {
    if (!pwd) return { level: 0, text: '', color: '' };

    let score = 0;
    if (pwd.length >= 8) score++;
    if (/[a-z]/.test(pwd)) score++;
    if (/[A-Z]/.test(pwd)) score++;
    if (/[0-9]/.test(pwd)) score++;
    if (/[^a-zA-Z0-9]/.test(pwd)) score++;

    if (score <= 2) return { level: 1, text: '弱', color: '#ca2621' };
    if (score <= 3) return { level: 2, text: '中', color: '#f5a623' };
    return { level: 3, text: '强', color: '#55bc8a' };
  };

  const strength = getStrength(password);

  return (
    <div>
      <InputPassword
        placeholder="请输入密码"
        value={password}
        onChange={(e) => setPassword(e.target.value)}
      />
      {password && (
        <div style={{ marginTop: '12px' }}>
          <div style={{ display: 'flex', gap: '4px', marginBottom: '8px' }}>
            {[1, 2, 3].map((level) => (
              <div
                key={level}
                style={{
                  width: '60px',
                  height: '4px',
                  borderRadius: '2px',
                  backgroundColor: level <= strength.level ? strength.color : '#e3e9ef',
                }}
              />
            ))}
          </div>
          <div style={{ fontSize: '14px', color: strength.color }}>
            密码强度: {strength.text}
          </div>
        </div>
      )}
    </div>
  );
}

结果

Loading...

确认密码

实现密码确认功能。

实时编辑器

function Demo() {
  const [password, setPassword] = React.useState('');
  const [confirmPassword, setConfirmPassword] = React.useState('');

  const isMatch = password && confirmPassword && password === confirmPassword;
  const isNotMatch = password && confirmPassword && password !== confirmPassword;

  return (
    <div>
      <Group direction="column" spacing="md">
        <div>
          <div style={{ marginBottom: '8px', fontSize: '14px' }}>密码:</div>
          <InputPassword
            placeholder="请输入密码"
            value={password}
            onChange={(e) => setPassword(e.target.value)}
          />
        </div>
        <div>
          <div style={{ marginBottom: '8px', fontSize: '14px' }}>确认密码:</div>
          <InputPassword
            placeholder="请再次输入密码"
            value={confirmPassword}
            onChange={(e) => setConfirmPassword(e.target.value)}
          />
        </div>
      </Group>
      {isMatch && (
        <div style={{ marginTop: '12px', color: '#55bc8a', fontSize: '14px' }}>
          两次密码输入一致
        </div>
      )}
      {isNotMatch && (
        <div style={{ marginTop: '12px', color: '#ca2621', fontSize: '14px' }}>
          两次密码输入不一致
        </div>
      )}
    </div>
  );
}

结果

Loading...

登录表单示例

在登录表单中使用 InputPassword。

实时编辑器

function Demo() {
  const [username, setUsername] = React.useState('');
  const [password, setPassword] = React.useState('');

  const handleSubmit = (e) => {
    e.preventDefault();
    if (username && password) {
      alert(`登录信息:\n用户名: ${username}\n密码: ${'*'.repeat(password.length)}`);
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <Group direction="column" spacing="md">
        <div>
          <div style={{ marginBottom: '8px', fontSize: '14px' }}>用户名:</div>
          <Input
            placeholder="请输入用户名"
            value={username}
            onChange={(e) => setUsername(e.target.value)}
          />
        </div>
        <div>
          <div style={{ marginBottom: '8px', fontSize: '14px' }}>密码:</div>
          <InputPassword
            placeholder="请输入密码"
            value={password}
            onChange={(e) => setPassword(e.target.value)}
          />
        </div>
        <Button type="submit" variant="filled" color="primary">
          登录
        </Button>
      </Group>
    </form>
  );
}

结果

Loading...

API

InputPassword 属性

InputPassword 继承 Input 的大部分属性，但不支持 addonAfter 和 suffix 属性（因为后缀位置用于显示/隐藏密码图标）。

属性	说明	类型	默认值
value	密码值（受控）	string	-
defaultValue	默认值（非受控）	string	-
placeholder	占位符文本	string	-
size	输入框尺寸	KubedSizes	'sm'
width	输入框宽度（像素）	number	-
prefix	前缀内容	ReactNode	-
addonBefore	前置标签	ReactNode	-
disabled	是否禁用	boolean	false
readOnly	是否只读	boolean	false
onChange	值变化时的回调	(e: ChangeEvent) => void	-
onFocus	获得焦点时的回调	(e: FocusEvent) => void	-
onBlur	失去焦点时的回调	(e: FocusEvent) => void	-
其他	原生属性	HTMLAttributes<HTMLInputElement>	-

信息

关于 InputPassword：

• 内置可切换显示/隐藏密码功能，点击眼睛图标切换密码可见性
• 使用 Eye 和 EyeClosed 图标来指示密码状态
• 不支持 addonAfter 和 suffix 属性，因为后缀位置被密码切换图标占用

关于受控与非受控：

• 使用 value + onChange 实现受控组件
• 使用 defaultValue 实现非受控组件
• 受控模式下，必须提供 onChange 处理函数更新 value

关于尺寸：

• 支持与 Input 相同的尺寸选项：xs、sm、md、lg、xl
• 默认尺寸为 sm

InputPassword 组件继承所有原生 HTML input 元素的属性。

使用建议

密码强度验证

实现密码强度验证的推荐方式：

const getPasswordStrength = (password) => {
  let score = 0;

  // 长度检查
  if (password.length >= 8) score++;
  if (password.length >= 12) score++;

  // 字符类型检查
  if (/[a-z]/.test(password)) score++;  // 小写字母
  if (/[A-Z]/.test(password)) score++;  // 大写字母
  if (/[0-9]/.test(password)) score++;  // 数字
  if (/[^a-zA-Z0-9]/.test(password)) score++;  // 特殊字符

  return score;
};

密码确认

确认密码的推荐实现：

const [password, setPassword] = React.useState('');
const [confirmPassword, setConfirmPassword] = React.useState('');
const [error, setError] = React.useState('');

const handleConfirmChange = (e) => {
  const value = e.target.value;
  setConfirmPassword(value);

  if (value && value !== password) {
    setError('两次密码不一致');
  } else {
    setError('');
  }
};

与表单组件配合

在 Form 中使用 InputPassword：

<Form onFinish={handleFinish}>
  <FormItem
    name="password"
    label="密码"
    rules={[
      { required: true, message: '请输入密码' },
      { min: 6, message: '密码至少6个字符' }
    ]}
  >
    <InputPassword placeholder="请输入密码" />
  </FormItem>
  <FormItem
    name="confirmPassword"
    label="确认密码"
    dependencies={['password']}
    rules={[
      { required: true, message: '请确认密码' },
      ({ getFieldValue }) => ({
        validator(_, value) {
          if (!value || getFieldValue('password') === value) {
            return Promise.resolve();
          }
          return Promise.reject(new Error('两次密码不一致'));
        },
      }),
    ]}
  >
    <InputPassword placeholder="请再次输入密码" />
  </FormItem>
</Form>