Forms

Password Input

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

Import

tsx

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

bash

npx cronus-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>
  );
}

.cronus

The same component declared in Cronus. Emitted at build time from the audit fixtures — the kernel renders it as HTML with no React.

PortedParity: MatchGeometry 1/1Pixel diff 0 pxLogic 1/1Parity scoreboard

default.cronus

app "audit-fixtures" {
  port 5176
}

style {
  preset aurora
  theme dark
}

component PasswordInputDefault layout:inline style:password-input {
  label "Enter your password"
  text "Enter your password"
}

page "/audit/password-input/default" type:custom {
  use PasswordInputDefault
}

API Reference

Generated from the component's exported types.

PasswordInputLabels

Prop	Type	Default	Description
`show`*	`string`	—	—
`hide`*	`string`	—	—
`weak`*	`string`	—	—
`fair`*	`string`	—	—
`good`*	`string`	—	—
`strong`*	`string`	—	—

PasswordInputProps

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

Prop	Type	Default	Description
`invalid`	`boolean`	—	Marks the control invalid and applies the error ring.
`showStrength`	`boolean`	`false`	Show a 4-segment strength meter + label below the field.
`labels`	`Partial<PasswordInputLabels>`	—	Override default English strings.
`value`	`string`	—	Controlled value.
`defaultValue`	`string`	—	Uncontrolled initial value.
`onChange`	`(event: ChangeEvent<HTMLInputElement>) => void`	—	Called when the value changes.
`placeholder`	`string`	—	Placeholder shown when the value is empty.
`disabled`	`boolean`	—	Disables pointer and keyboard interaction.
`name`	`string`	—	Submitted name when used in a form.
`required`	`boolean`	—	Marks the control as required.
`className`	`string`	—	Additional class names merged onto the root.