Password field

Capture sensitive text with a visible reveal control.

import { PasswordField } from "@/forma/arc/password-field/password-field";

Base

In FORMA

Liegt in kit/arc/password-field und ist über @/forma/arc/password-field/password-field erreichbar.
Farbe, Ecken, Höhen, Abstände, Tiefe, Schrift und Tempo kommen aus der Richtung (core/arc-bridge.ts); Arc behält Verhalten, Tastatur und Federn.

When to use

Sign in forms and password confirmation fields.
Any secret the person may want to check by revealing it.

When not to use

Use password-strength when creating or changing a password.
Use input for non-secret values.

Usage

import { PasswordField } from "@/forma/arc/password-field/password-field";

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

Examples

Translated

<PasswordField label="Passwort" messages={{ showPassword: "Passwort anzeigen", hidePassword: "Passwort verbergen" }} />

API reference

PasswordField

A password input with a show and hide toggle whose eye icon is slashed by a drawn line.

Prop	Type	Default	Description
`label` (required)	`string`	–	Visible label tied to the input.
`description`	`string`	–	Helper copy under the field, linked through aria-describedby.
`messages`	`Partial<{ showPassword: string; hidePassword: string }>`	`{ showPassword: "Show password", hidePassword: "Hide password" }`	Names of the reveal toggle, for translation. Pass only the strings you change.
`...props`	`Omit<InputHTMLAttributes<HTMLInputElement>, "type">`	–	Forwarded to the input, including ref, value, onChange, name, and autoComplete.

Keyboard interactions

Keys	Action
Enter / Space	On the toggle button, shows or hides the password.

Accessibility

Toggle is a native button with aria-pressed and a label that switches between "Show password" and "Hide password" (messages.showPassword and messages.hidePassword).
Description is linked through aria-describedby.
Set autoComplete to current-password or new-password so password managers work.

Motion

A slash draws across the eye and masks the outline beneath it instead of swapping icons.
After the first toggle, the value resolves through a short CSS reveal on each change; reduced motion draws the slash instantly.

Responsive behavior

The field fills its column; the reveal button sits inside the shell, so it never wraps below the input.
Hover styles apply only on fine pointers.

Performance

One ResizeObserver per field measures the helper row for its height spring; cheap for a form, but avoid hundreds in a table.
The reveal effect is a short CSS animation, and the slash is one drawn path.

Notes for AI

Use for sign in and password confirmation. Use password-strength when the user is creating a new password.
Uncontrolled by default; pass value and onChange to control it like a native input.
Every built-in string can be translated through messages; the label and description are your own props.

Also in text fields

Textarea: A multiline field for notes, descriptions, and longer text.
Search field: A recognizable search entry point with clear affordances.
Expanding search: An icon that morphs into a search field with results beneath it.
Inline edit: Rename in place: the text becomes a field without moving.

Guidance for AI tools

Password field: Capture sensitive text with a visible reveal control. Follow the declared prop types and do not invent props. Keep keyboard access, reduced motion support, and both light and dark themes intact when adapting it.

Full library index: https://uiarc.dev/llms.txt

ZurückNumber field WeiterSearch field

Komponente und Text: Arc UI (MIT, uiarc.dev), angepasst für FORMA.