PasswordInput

PasswordInput is an Input for password entry. It ships with a reveal toggle — a button that switches the field between obscured and plain text.

What it is

An Input with type="password" plus an absolutely-positioned toggle button. The toggle flips the input type between password and text. Set togglable={false} to drop the button and render a plain password input — useful when the surrounding design supplies its own reveal control.

Install

PasswordInput is exported from usemotif. No separate install.

import { PasswordInput } from 'usemotif';

API

const PasswordInput: ForwardRefExoticComponent<PasswordInputProps & RefAttributes<HTMLInputElement>>

Accessibility

PasswordInput inherits Input's Field-context contract. The reveal toggle carries an aria-label that updates with state — "Show password" when obscured, "Hide password" when visible — so a screen-reader user knows what the button does and what state the field is in.

Toggling reveal switches the input's type attribute. The field keeps its value and focus across the switch; only the masking changes.

Examples

Inside a sign-in Field:

<Field>
<Label>Password</Label>
<PasswordInput placeholder="Your password" />
</Field>

Without the toggle:

<PasswordInput togglable={false} />