PasswordInput

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

Basic

The toggle shows and hides the password. Focus and the caret stay in the input.

value: hunter2, visible: false, toggles: 0

Code

<PasswordInput value={state.password} visible={state.visible}
               attrs={{ "aria-label": "Password" }}
               onVisibilityChange={() => state.toggles++} />

Usage

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 />

Examples

Controlled visibility

visible is two-way: set it from anywhere.

visible: false

Code

<PasswordInput value={state.revealed} visible={state.reveal} />
<Button onclick={() => state.reveal = !state.reveal}>Toggle from outside</Button>

New password with strength

autocomplete=new-password asks a manager to suggest one. The meter is page code: a real app might score with a strength estimation package.

New password

At least 8 characters.

StrengthEmpty

Code

<Field label="New password" description="At least 8 characters.">
  <PasswordInput value={state.next} autocomplete="new-password" attrs={{ minlength: 8 }} />
</Field>
<div class="meter" data-score={score(state.next)}>...</div>

Ignore password managers

For API keys and PINs: managers that honor the attributes leave the field alone.

Code

<PasswordInput value={state.apiKey} ignorePasswordManagers placeholder="sk-..." />

Sizes

Heights follow the control tokens; the toggle stays square.

Code

<PasswordInput value={state.small} size="sm" />
<PasswordInput value={state.large} size="lg" />

Disabled and read-only

A read-only password can still be revealed.

Code

<PasswordInput value={state.locked} disabled />
<PasswordInput value={state.fixed} readonly />

Validation

invalid marks the input and the root; the Field shows the error under it, in a line it always reserves.

Password

Password must be at least 8 characters.

Code

<Field label="Password" error={state.weak.length < 8 ? "Password must be at least 8 characters." : ""}>
  <PasswordInput value={state.weak} invalid={state.weak.length < 8} />
</Field>

In a form

name submits the value. Reset restores it and hides it; required blocks an empty submit.

Code

<form onsubmit={(e) => submit(e)}>
  <PasswordInput value={state.password} name="password" required />
  <Button type="reset">Reset</Button>
  <Button type="submit" variant="primary">Sign in</Button>
</form>

Custom icons and labels

The visibleIcon and hiddenIcon slots replace the eye; showLabel and hideLabel rename the toggle.

Code

<PasswordInput value={state.pin} showLabel="Show PIN" hideLabel="Hide PIN">
  <Icon slot="visibleIcon" name="shield" />
  <Icon slot="hiddenIcon" name="star" />
</PasswordInput>

Reference PasswordInput in the manual Every part, attribute, slot, key and data attribute.