PasswordField

A labelled password input with an eye toggle whose slash draws across to reveal or hide the value.

When to use

• Sign-in, sign-up and secret entry where users may want to check what they typed.
• Creating a CapyDB or notdocs account, where a typo would lock the person out.
• For ordinary text use Input; for one-time codes use a dedicated code field rather than this.

Usage

import { PasswordField } from "@/components/iris/password-field/password-field";
h(PasswordField, {
  label: "New password",
  autoComplete: "new-password",
  description: "At least 12 characters, with a number or symbol.",
  messages: { showPassword: "Show password", hidePassword: "Hide password" },
});

Props

Prop	Type	Default	Description
label	string	required	Visible label tied to the input.
description	string	–	Helper copy under the field.
messages	Partial<{ showPassword: string; hidePassword: string }>	English defaults	Accessible names for the toggle, for translation.
...props	InputHTMLAttributes<HTMLInputElement> (minus type)	–	Forwarded to the input (ref, value, onChange, autoComplete, name…). type is managed.

Notes

• The toggle is a real button with aria-pressed and a label that flips between the two messages. Revealed state is internal; there is no prop to start revealed.
• Always set autoComplete (current-password or new-password) so password managers behave.
• There is no error prop; pass aria-invalid to tint the border red and show the message separately (or in description).
• Styled with the theme's surface, line-strong (border), ink (hover and focus border), red (invalid), rounded-control (field) and rounded-button (reveal button). className goes to the input.
• Reduced motion drops the reveal blur and the toggle press.