PasswordInput

Password field with a button that shows or hides the characters.

Code

import { PasswordInput } from "@/components/ui/password-input"
import { Field, FieldControl, FieldLabel } from "@/components/ui/field"

<Field required>
  <FieldLabel>Password</FieldLabel>
  <FieldControl>
    <PasswordInput />
  </FieldControl>
</Field>

Examples

Example source

var P = window.PUI, h = React.createElement;
  ReactDOM.createRoot(document.getElementById('preview')).render(h(P.Field, { required: true, style: { maxWidth: 420 } },
    h(P.FieldLabel, null, 'Password'),
    h(P.FieldControl, null, h(P.PasswordInput, { defaultValue: 'correct-horse' }))));

Usage

What you provide

The same props as Input (no type). Use it inside Field for the label, rules and errors.
autoComplete: "current-password" (default) to sign in, "new-password" when creating one.
showLabel / hideLabel to translate the button text ("Show password" / "Hide password").

Usage

Never block paste or password managers. State the password rules before typing.

Accessibility

The password starts hidden and the button says the next action: "Show password", then "Hide password". The icon follows the text and is hidden from screen readers.
The button is type="button": it never submits the form, keeps focus after activation and keeps the value. It has no aria-pressed, because its name already changes.
Showing the password doesn't announce it in any extra message.

Adapted from Magoo 1.6.0 by Marcelo Sales: Input "password" (input-password). Magoo is educational guidance; test the behavior in your implementation.

API

Install with:

npx @aline-aroucha/pui add password-input

<PasswordInput>
  <Input />
  <Button />
</PasswordInput>

PasswordInput

Name	Type	Default
`autoComplete`	`"current-password" \| "new-password"`	`"current-password"`
Signing in or creating a password.
`showLabel`	`string`	`"Show password"`
Button text while the password is hidden.
`hideLabel`	`string`	`"Hide password"`
Button text while the password is visible.
`…input props`	`InputHTMLAttributes`	—
Every Input prop except `type`.