Skip to content
MIZU.

PasswordField

A revealable secret with explicit visibility feedback.

Live — this one is real

Usage

import { PasswordField } from "mizu-ui";

export function Example() {
  return (
    <PasswordField
      label="Password"
      name="password"
      autoComplete="new-password"
    />
  );
}

Source & setup

Import mizu-ui/styles.css once. Fonts are optional via mizu-ui/fonts.css. Override --mizu-* tokens or use className for local styling. Uses native React and CSS; install the package peers for root imports.

Inspect forms/Fields.tsx

Source is included in the npm package under src/forms/Fields.tsx.

Open full source ↗

Props

PropTypeDefaultDescription
labelstring—Accessible label.
...inputInputHTMLAttributes—Native value, autocomplete and ref.

Accessibility

The reveal button reports aria-pressed and keeps its name synchronized. Does not copy or store secrets.

Motion

CSS transitions explain state changes. Reduced motion removes travel.

Works alongside

FormFieldTextFieldTextAreaSelectField