InputPassword

An input box for entering passwords, with password visibility toggle support.

When to Use

• When users need to input passwords
• Need to protect sensitive information from bystanders
• Need to provide password visibility toggle functionality
• For login, registration, password change, and other scenarios

Examples

Basic Usage

The simplest password input box, click the eye icon to toggle password visibility.

Live Editor

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

  return (
    <div>
      <InputPassword
        placeholder="Please enter password"
        value={password}
        onChange={(e) => setPassword(e.target.value)}
      />
      <div style={{ marginTop: '12px', color: '#79879c', fontSize: '14px' }}>
        Password length: {password.length} characters
      </div>
    </div>
  );
}

Result

Loading...

Controlled Component

Implement a controlled component using value and onChange.

Live Editor

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

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

  return (
    <div>
      <InputPassword
        placeholder="Please enter password"
        value={password}
        onChange={(e) => setPassword(e.target.value)}
      />
      <Group style={{ marginTop: '16px' }}>
        <Button onClick={handleClear}>Clear Password</Button>
      </Group>
    </div>
  );
}

Result

Loading...

Disabled State

Disable the password input box through the disabled property.

Live Editor

function Demo() {
  return (
    <Group direction="column">
      <InputPassword disabled placeholder="Disabled state" />
      <InputPassword disabled value="secretpassword" />
    </Group>
  );
}

Result

Loading...

With Prefix

Add a prefix icon through the prefix property.

Live Editor

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

  return (
    <InputPassword
      prefix={<Key size={16} />}
      placeholder="Please enter password"
    />
  );
}

Result

Loading...

With Addon Before

Add a label before the input through the addonBefore property.

Live Editor

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

  return (
    <Group direction="column">
      <InputPassword addonBefore="Password" placeholder="Please enter password" />
      <InputPassword addonBefore={<Key size={16} />} placeholder="Please enter password" />
    </Group>
  );
}

Result

Loading...

Custom Width

Set the password input box width through the width property.

Live Editor

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

Result

Loading...

Password Strength Validation

Implement password strength validation functionality.

Live Editor

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: 'Weak', color: '#ca2621' };
    if (score <= 3) return { level: 2, text: 'Medium', color: '#f5a623' };
    return { level: 3, text: 'Strong', color: '#55bc8a' };
  };

  const strength = getStrength(password);

  return (
    <div>
      <InputPassword
        placeholder="Please enter password"
        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 }}>
            Password strength: {strength.text}
          </div>
        </div>
      )}
    </div>
  );
}

Result

Loading...

Confirm Password

Implement password confirmation functionality.

Live Editor

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' }}>Password:</div>
          <InputPassword
            placeholder="Please enter password"
            value={password}
            onChange={(e) => setPassword(e.target.value)}
          />
        </div>
        <div>
          <div style={{ marginBottom: '8px', fontSize: '14px' }}>Confirm Password:</div>
          <InputPassword
            placeholder="Please enter password again"
            value={confirmPassword}
            onChange={(e) => setConfirmPassword(e.target.value)}
          />
        </div>
      </Group>
      {isMatch && (
        <div style={{ marginTop: '12px', color: '#55bc8a', fontSize: '14px' }}>
          Passwords match
        </div>
      )}
      {isNotMatch && (
        <div style={{ marginTop: '12px', color: '#ca2621', fontSize: '14px' }}>
          Passwords do not match
        </div>
      )}
    </div>
  );
}

Result

Loading...

Login Form Example

Using InputPassword in a login form.

Live Editor

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

  const handleSubmit = (e) => {
    e.preventDefault();
    if (username && password) {
      alert(`Login Info:\nUsername: ${username}\nPassword: ${'*'.repeat(password.length)}`);
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <Group direction="column" spacing="md">
        <div>
          <div style={{ marginBottom: '8px', fontSize: '14px' }}>Username:</div>
          <Input
            placeholder="Please enter username"
            value={username}
            onChange={(e) => setUsername(e.target.value)}
          />
        </div>
        <div>
          <div style={{ marginBottom: '8px', fontSize: '14px' }}>Password:</div>
          <InputPassword
            placeholder="Please enter password"
            value={password}
            onChange={(e) => setPassword(e.target.value)}
          />
        </div>
        <Button type="submit" variant="filled" color="primary">
          Login
        </Button>
      </Group>
    </form>
  );
}

Result

Loading...

API

InputPassword Properties

InputPassword inherits most properties from Input, but does not support addonAfter and suffix properties (because the suffix position is used for the show/hide password icon).

Property	Description	Type	Default
value	Password value (controlled)	string	-
defaultValue	Default value (uncontrolled)	string	-
placeholder	Placeholder text	string	-
size	Input box size	KubedSizes	'sm'
width	Input box width (pixels)	number	-
prefix	Prefix content	ReactNode	-
addonBefore	Label before input	ReactNode	-
disabled	Whether disabled	boolean	false
readOnly	Whether read-only	boolean	false
onChange	Callback when value changes	(e: ChangeEvent) => void	-
onFocus	Callback when gaining focus	(e: FocusEvent) => void	-
onBlur	Callback when losing focus	(e: FocusEvent) => void	-
Others	Native attributes	HTMLAttributes<HTMLInputElement>	-

info

About InputPassword:

• Built-in show/hide password functionality, click the eye icon to toggle password visibility
• Uses Eye and EyeClosed icons to indicate password state
• Does not support addonAfter and suffix properties because the suffix position is occupied by the password toggle icon

About Controlled vs Uncontrolled:

• Use value + onChange to implement controlled component
• Use defaultValue to implement uncontrolled component
• In controlled mode, must provide onChange handler to update value

About Size:

• Supports the same size options as Input: xs, sm, md, lg, xl
• Default size is sm

InputPassword component inherits all native HTML input element attributes.

Usage Recommendations

Password Strength Validation

Recommended approach for implementing password strength validation:

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

  // Length check
  if (password.length >= 8) score++;
  if (password.length >= 12) score++;

  // Character type check
  if (/[a-z]/.test(password)) score++;  // Lowercase letters
  if (/[A-Z]/.test(password)) score++;  // Uppercase letters
  if (/[0-9]/.test(password)) score++;  // Numbers
  if (/[^a-zA-Z0-9]/.test(password)) score++;  // Special characters

  return score;
};

Password Confirmation

Recommended implementation for password confirmation:

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('Passwords do not match');
  } else {
    setError('');
  }
};

Working with Form Components

Using InputPassword in Form:

<Form onFinish={handleFinish}>
  <FormItem
    name="password"
    label="Password"
    rules={[
      { required: true, message: 'Please enter password' },
      { min: 6, message: 'Password must be at least 6 characters' }
    ]}
  >
    <InputPassword placeholder="Please enter password" />
  </FormItem>
  <FormItem
    name="confirmPassword"
    label="Confirm Password"
    dependencies={['password']}
    rules={[
      { required: true, message: 'Please confirm password' },
      ({ getFieldValue }) => ({
        validator(_, value) {
          if (!value || getFieldValue('password') === value) {
            return Promise.resolve();
          }
          return Promise.reject(new Error('Passwords do not match'));
        },
      }),
    ]}
  >
    <InputPassword placeholder="Please enter password again" />
  </FormItem>
</Form>