Forms

Password Input

A password field with a show/hide toggle and an optional strength meter.

Import

tsx

import { PasswordInput } from "@cooud-ui/ui";

bash

npx cooud-ui add password-input

Examples

Default

A password field with a built-in show/hide toggle. The toggle flips the input type and stays keyboard-accessible with a clear pressed state.

tsx

<PasswordInput
  className="max-w-sm"
  placeholder="Enter your password"
  autoComplete="current-password"
/>

Strength meter

Pass `showStrength` to render a 4-segment meter and label that update live from the value's length and character variety.

Weak

tsx

function PasswordInputStrengthDemo() {
  const [value, setValue] = useState("");

  return (
    <div className="w-full max-w-sm">
      <PasswordInput
        value={value}
        onChange={(event) => setValue(event.target.value)}
        showStrength
        placeholder="Create a password"
        autoComplete="new-password"
      />
    </div>
  );
}

API Reference

Generated from the component's exported types.

PasswordInputProps

Extends Omit<InputHTMLAttributes<HTMLInputElement>, "type">

Prop	Type	Default	Description
`invalid`	`boolean`	—	—
`showStrength`	`boolean`	`false`	Show a 4-segment strength meter + label below the field.