PasswordInput
Forms & Input

PasswordInput

Masked text input with a lock icon and a reveal toggle.

Props

PasswordInput wraps Input with a reveal toggle that controls the input type. Standard input attributes are forwarded. The default leading icon is a lock; pass leftIcon={null} to omit it.

PasswordInputProps props
PropTypeDefaultDescription
revealablebooleantrueRenders the reveal toggle. Off leaves a plain masked field.
revealedboolean—Controlled reveal state.
defaultRevealedbooleanfalseInitial reveal state when uncontrolled.
onRevealedChange(revealed: boolean) => void—Fires when the toggle is pressed.
showLabelstring"Show password"Accessible name for the toggle while masked.
hideLabelstring"Hide password"…and while showing.
size"sm" | "md""md"Input height. Icon dimensions follow the control size.
leftIconReactNode<IconLock />Leading icon content. Pass null to hide the icon.
rightIconReactNode—Trailing Input content. Used only when revealable is false; otherwise the reveal button occupies this slot.
invalidboolean—From Input. Red border and focus ring; defaults to the enclosing Field's error state.
monoboolean—From Input. Renders the value in the mono family.
containerClassNamestring—From Input. Targets the shell; className targets the <input>.

Examples

Sign in

PasswordInput

Choosing one

Pair it with PasswordStrength while a password is being set. Pass revealable={false} to the confirmation field.

PasswordInput with strength
ImportTSX
import { PasswordInput, PasswordStrength } from "@solarius/onset";

<Field label="New password" hint="At least 12 characters.">
  <Stack gap="2">
    <PasswordInput
      value={password}
      onChange={(e) => setPassword(e.currentTarget.value)}
    />
    <PasswordStrength value={password} minLength={12} />
  </Stack>
</Field>;

PasswordStrength

Renders one UsageBar in the tone matching the score's level (red, amber, green), plus a word for that level so color is not the only carrier. It is role="status": the word is announced when the level changes, and nothing is announced for the keystrokes in between.

PasswordStrengthProps props
PropTypeDefaultDescription
valuestring—The password being typed.
minLengthnumber8What counts as long enough. Match the rule the server enforces.
strengthPasswordStrengthResult—Password strength result supplied by an external estimator or server.
labelsPartial<Record<PasswordStrengthLevel, ReactNode>>—Replace any of the four readouts.
showLabelbooleantrueShow the word beside the bar.
hideWhenEmptybooleantrueRender nothing until something has been typed.
PasswordStrength

estimatePasswordStrength scores length and character variety. The estimate does not enforce password policy. Pass a strength result to use another estimator. Validate password requirements on the server.

A real estimatorTSX
import { PasswordStrength, type PasswordStrengthResult } from "@solarius/onset";

const { score } = zxcvbn(password); // 0–4
const strength: PasswordStrengthResult = {
  level: score < 2 ? "weak" : score < 3 ? "fair" : "strong",
  score: score * 25,
};

<PasswordStrength value={password} strength={strength} />;