Password field
Capture sensitive text with a visible reveal control.
npm install https://animui.stracture.net/__local/package.tgzLive · keyboard ready
- Sign in forms and password confirmation fields.
- Any secret the person may want to check by revealing it.
- Use password-strength when creating or changing a password.
- Use input for non-secret values.
Installation
Install animui once, then import any component or block from its typed package entry.
animui · 250 components and blocks
React 19 and React DOM 19 are required. The package includes Free and Pro entries, styles and TypeScript declarations.
npm install https://animui.stracture.net/__local/package.tgzLoad the stylesheet once at your app root, then use the typed component import:
import 'animui/styles.css';
import { PasswordField } from 'animui/password-field';Read the Code tab for the implementation files and the API reference below for required props.
Download animui 0.3.0 · Agent guideexample.tsx
import { PasswordField } from "animui/password-field"; export function SignInPassword() { return ( <PasswordField label="Password" name="password" autoComplete="current-password" required /> );}Translated
example.tsx
<PasswordField label="Passwort" messages={{ showPassword: "Passwort anzeigen", hidePassword: "Passwort verbergen" }} />PasswordField
A password input with a show and hide toggle whose eye icon is slashed by a drawn line.
PropTypeDefaultDescription
labelRequiredstring–Visible label tied to the input.descriptionstring–Helper copy under the field, linked through aria-describedby.messagesPartial<{ showPassword: string; hidePassword: string }>{ showPassword: "Show password", hidePassword: "Hide password" }Names of the reveal toggle, for translation. Pass only the strings you change....propsOmit<InputHTMLAttributes<HTMLInputElement>, "type">–Forwarded to the input, including ref, value, onChange, name, and autoComplete.- EnterorSpace
- On the toggle button, shows or hides the password.
- 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.
- 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.
- 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.
- 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
Give your coding assistant the Markdown reference instead of screenshots.
- 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.
The full library index for assistants is at /llms.txt.