elements
Manual UI Templates PasswordInput

PasswordInput

elements man ui/templates/password-input

A password field with a button that shows and hides what was typed.

Example
import { PasswordInput } from "@elements/ui/password-input";

<PasswordInput value={form.password} attrs={{ "aria-label": "Password" }} />
<PasswordInput value={form.next} autocomplete="new-password" visible={ui.reveal} />
<PasswordInput value={form.apiKey} ignorePasswordManagers />

Parts

Part What it is
.password-input The root.
.password-input-input The native input, in the Input chrome.
.password-input-toggle The show and hide button.
.password-input-indicator The icon inside the toggle.

Attributes

Attribute Type Default Description
value string (two-way) "" The password.
visible boolean (two-way) false Shows the password as text.
autocomplete "current-password" | "new-password" | "off" "current-password" Tells password managers whether to fill or to suggest a new password.
ignorePasswordManagers boolean false Asks 1Password, LastPass, Bitwarden, Dashlane and Proton Pass to leave the field alone (API keys, PINs).
size "sm" | "md" | "lg" "md" Height and type size from the control tokens.
placeholder string "" Shown while empty.
name string "" Submits the value with its form.
disabled boolean false Not interactive.
readonly boolean false Not editable; the toggle still reveals it.
required boolean false The form will not submit while empty.
invalid boolean false Marks the input invalid.
showLabel string "Show password" The toggle's name while hidden.
hideLabel string "Hide password" The toggle's name while visible.
class string "" Extra classes on the root.
attrs Record<string, string | number | boolean | undefined> {} Attributes for the input: id, aria-label, minlength, pattern, data-*.
oninput (e: InputEvent) => void () => {} The input's input event.
onchange (e: Event) => void () => {} The input's change event.
onVisibilityChange (details: { visible: boolean }) => void () => {} When the toggle shows or hides the password.

Slots

Slot Content
visibleIcon The toggle's icon while the password is visible. Default: eye.
hiddenIcon The toggle's icon while it is hidden. Default: eye-off.

Keyboard

Keys Action
Tab Moves from the input to the toggle.
Enter / Space On the toggle: shows or hides the password and returns focus to the input.

Data attributes

Attribute Values On
data-state "visible" | "hidden" root, input, toggle, indicator
data-disabled present when disabled root, input, toggle, indicator
data-invalid present when invalid root, input, indicator
data-readonly present when read-only root, input, toggle, indicator

Accessibility

  • The toggle is named Show password or Hide password, points at the input with aria-controls, and sets aria-expanded while the password shows.
  • The toggle stays in the tab order so a keyboard user can reveal the password; a click keeps focus and the caret in the input.
  • It is a native password input, so password managers, autofill and form validation work.

See also