PasswordInput

Password input with visibility toggle. Optional strength meter and requirements list. Inherits label/required/helperText/error from Input.

Examples

With label

Password*

import { useState } from 'react';
import { PasswordInput } from '@kactostecnologia/benix-ds';

export default function LoginForm() {
  const [pwd, setPwd] = useState('');

  return (
    <PasswordInput
      label="Password"
      required
      value={pwd}
      onChange={(e) => setPwd(e.target.value)}
      placeholder="Your password"
    />
  );
}

With strength meter + requirements

Default rules: min 8 chars, number, lowercase, uppercase, special. Ícones rendered with Lucide.

New password

Mínimo de 8 caracteres
Pelo menos um número
Pelo menos uma letra minúscula
Pelo menos uma letra maiúscula
Pelo menos um caractere especial

import { useState } from 'react';
import { PasswordInput } from '@kactostecnologia/benix-ds';

export default function SignupForm() {
  const [pwd, setPwd] = useState('');

  return (
    <PasswordInput
      label="New password"
      value={pwd}
      onChange={(e) => setPwd(e.target.value)}
      showStrength
      showRequirements
    />
  );
}

Custom requirements

Override the rules array. Each rule is { label, regex } — regex tested against the value.

Master password

At least 12 characters
Contains your username
Two or more numbers

import { useState } from 'react';
import { PasswordInput, type PasswordRequirement } from '@kactostecnologia/benix-ds';

const STRICT_RULES: PasswordRequirement[] = [
  { label: 'At least 12 characters', regex: /.{12,}/ },
  { label: 'Contains your username', regex: /kactos/i },
  { label: 'Two or more numbers', regex: /(\d.*){2,}/ },
];

export default function CustomSignup() {
  const [pwd, setPwd] = useState('');

  return (
    <PasswordInput
      label="Master password"
      value={pwd}
      onChange={(e) => setPwd(e.target.value)}
      showStrength
      showRequirements
      customRequirements={STRICT_RULES}
    />
  );
}

Error state

Password

Password must be at least 8 characters.

import { PasswordInput } from '@kactostecnologia/benix-ds';

export default function PasswordError() {
  return (
    <PasswordInput
      label="Password"
      defaultValue="abc"
      error="Password must be at least 8 characters."
    />
  );
}

API Reference

Props of the PasswordInput component.

Prop	Type	Default	Description
`value`	`string`	—	—
`onChange`	`(e: React.ChangeEvent<HTMLInputElement>) => void`	—	—
`label`	`string`	—	—
`required`	`boolean`	`false`	—
`helperText`	`string`	—	—
`error`	`string \| boolean`	—	—
`showStrength`	`boolean`	`false`	Render the strength bar below the input.
`showRequirements`	`boolean`	`false`	Render the requirements checklist.
`customRequirements`	`PasswordRequirement[]`	—	Override the default 5 password rules.