Password Input

Usage

import {
  PasswordInput,
  PasswordInputGroup,
  PasswordInputInput,
  PasswordInputTrigger,
} from "@kanzo-tech/ui";

<PasswordInput>
  <PasswordInputGroup>
    <PasswordInputInput placeholder="Password" />
    <PasswordInputTrigger />
  </PasswordInputGroup>
</PasswordInput>

The trigger's accessible name and the type swap come from the machine, and focus returns to the input after a reveal — so the caret does not jump to the end mid-edit.

Anatomy

PasswordInput
└── PasswordInputGroup
    ├── PasswordInputInput
    └── PasswordInputTrigger
        └── PasswordInputIndicator

Sizes

Visible by default

autoComplete="new-password" keeps a browser from autofilling the old value into a change-password form.

Invalid

Disabled

Editing a stored credential

A secret that already exists on the server never reaches the client, so there is nothing to prefill: the field renders empty and submitting it empty means "keep what is stored". Set hasStoredValue on PasswordInputInput and it shows a hint saying so — a hint that disappears the moment the user types, because after that the submitted value really does replace the secret.

The affordance is an opt-in prop on the input part rather than a component of its own, so entering a credential and editing one are the same field in two modes.

Controlled (API key)

An API key is not a password. ignorePasswordManagers keeps 1Password and friends from offering to save it.

API Reference

PasswordInput

Extends PasswordInput.Root from Ark, so visible, defaultVisible, onVisibilityChange, disabled, invalid, readOnly, required, name, autoComplete and ignorePasswordManagers pass through.

PasswordInputTrigger renders its own InputGroupAddon and falls back to PasswordInputIndicator (eye / eye-off) when given no children.

PasswordInputInput

Extends PasswordInput.Input from Ark, plus the stored-credential affordance:

While hasStoredValue is set and the field is untouched, storedPlaceholder is shown in place of placeholder; once a value is present the normal placeholder returns.

PasswordInputInputProps is exported, so a wrapper can take the same props without restating them.