Input Password

InputPassword is a password-specific composition of Input. It keeps the shared Input label, description, error, variants, adornments, sizes, clear action, loading, disabled, read-only, and native input behavior, while adding accessible show/hide controls, optional password generation, strength feedback, and requirements.

Basic usageCopy Anchor Link

import { InputPassword } from '@mosmox/ui';

<InputPassword label="Password" placeholder="Enter your password" />

The password is hidden by default. The visibility button uses Mosmox UI icons, a descriptive aria-label, a matching title, and a native button so it works with mouse, keyboard, and assistive technology.

SizesCopy Anchor Link

InputPassword uses the exact InputSize values: xs, sm, and default. default is the standard Input size; there is no separate password-only size scale.

<InputPassword label="Default" size="default" />
<InputPassword label="Small" size="sm" />
<InputPassword label="Extra small" size="xs" />

Controlled and uncontrolled valuesCopy Anchor Link

Use defaultValue when InputPassword should manage its value:

<InputPassword label="Account password" defaultValue="Initial secret" />

Use value and onChange when the parent owns the value:

const [password, setPassword] = useState('');

<InputPassword
  label="Account password"
  value={password}
  onChange={(event) => setPassword(event.target.value)}
/>

Show/hide and adornmentsCopy Anchor Link

The show/hide action is always available unless the field is disabled or loading. prefix, suffix, trailingIcon, and clearable continue to use the shared Input behavior. Password actions are placed in a separate end-actions slot, so a suffix and clear button do not get replaced by the visibility or generator controls.

<InputPassword
  label="API secret"
  prefix="Key"
  suffix="vault"
  clearable
  onClear={() => setPassword('')}
/>

Read-only values can still be revealed or hidden, but the password and generator controls do not edit the input. Disabled and loading fields disable the action buttons as well.

Password generationCopy Anchor Link

Set generateButton to add an optional generator action. generatorOptions accepts minLength, maxLength, and a custom charset:

<InputPassword
  label="Generated password"
  generateButton
  generatorOptions={{
    minLength: 18,
    maxLength: 24,
    charset: 'ABCDEFGHJKLMNPQRSTUVWXYZabcdefghijkmnopqrstuvwxyz23456789!@#$%',
  }}
  onGenerate={(password) => console.log(password.length)}
/>

The generated length is selected between the inclusive minimum and maximum. When crypto.getRandomValues is available, generation uses it with rejection sampling to avoid simple modulo bias. A Math.random fallback is used only in environments where Web Crypto is unavailable or rejects the call; do not treat generated passwords as a replacement for a managed password manager or server-side credential policy.

For a controlled field, update the parent value in onGenerate:

const [password, setPassword] = useState('');

<InputPassword
  label="Controlled generated password"
  value={password}
  onChange={(event) => setPassword(event.target.value)}
  generateButton
  onGenerate={setPassword}
/>

For an uncontrolled field, InputPassword inserts the generated result into its internal value before calling onGenerate.

Strength and requirementsCopy Anchor Link

showStrength enables a compact strength meter. It is off by default. The built-in score considers length, mixed case, digits, and symbols; it is a visual hint, not a security verdict.

<InputPassword
  label="Create a password"
  minLength={12}
  showStrength
/>

Pass requirements to render custom checks. Each requirement receives the current password and returns whether it is met:

<InputPassword
  label="Create a password"
  minLength={12}
  requirements={[
    { id: 'uppercase', label: 'One uppercase letter', test: (value) => /[A-Z]/.test(value) },
    { id: 'number', label: 'One number', test: (value) => /\d/.test(value) },
    { id: 'symbol', label: 'One special character', test: (value) => /[^A-Za-z0-9]/.test(value) },
  ]}
/>

When minLength is present, a built-in minimum-length requirement is shown. Use id: 'minLength' on a custom requirement if you want to replace that row. minLength is also forwarded to the native input for browser validation.

Errors, descriptions, and native Input behaviorCopy Anchor Link

description and error use the same Input field messaging and aria-describedby wiring:

<InputPassword
  label="Password"
  description="Use at least 12 characters."
  minLength={12}
  error="This password does not meet the account policy."
/>

The component also supports Input's variant, fullWidth, leadingIcon, prefix, suffix, trailingIcon, clearable, onClear, loading, disabled, readOnly, required, maxLength, and native input attributes. The password type is controlled by InputPassword and cannot be overridden.

AccessibilityCopy Anchor Link

• the field uses Input's associated label, generated or supplied id, description, and error wiring;
• show/hide and generate are native buttons with accessible names, titles, and keyboard activation;
• the visibility button uses aria-pressed to expose the current visible/hidden state;
• strength and requirements are included in aria-describedby and update politely;
• requirement marks are supplementary; the text labels communicate the requirement;
• disabled and loading states disable the native input and password actions;
• read-only fields remain focusable and may reveal the value without changing it;
• generator output is client-side only and should be handled according to the application's credential policy.

API ReferenceCopy Anchor Link

InputPasswordCopy Anchor Link

All other supported InputProps and native InputHTMLAttributes<HTMLInputElement> props are forwarded. The type prop is owned by InputPassword.

PasswordGeneratorOptionsCopy Anchor Link