Password Input

PasswordInput is a native password field with a built-in reveal toggle. It renders an <input type="password"> inside the same shell as Input and adds an inline-end button that flips the field between masked and visible. Like the rest of the family it carries its own label, description, error, and required — no external wrapper needed — and passing error flips it to the invalid (red) state. Omit them and it still composes cleanly inside a Field.

import { PasswordInput } from '@42/ui-react/password-input';

<PasswordInput name="password" placeholder="Enter a password" />

It is an event-based control, like Input: value, onChange, name, and ref forward to the underlying <input>, so React Hook Form's register and a plain onChange(event) handler both work as usual. The show / hide state is owned internally and never leaks into the form value.

Playground

<Component  label="Password"  size="md"  placeholder="Enter a password"/>

Variants

Three shells. default is bordered, filled is a soft neutral surface, unstyled strips the chrome but keeps the layout (height + the reveal toggle).

<PasswordInput variant="default" placeholder="Default" /><PasswordInput variant="filled" placeholder="Filled" /><PasswordInput variant="unstyled" placeholder="Unstyled" />

Sizes

Five steps — xs through xl. The control font, padding, and the toggle icon scale to match Input.

<PasswordInput size="xs" placeholder="xs" /><PasswordInput size="sm" placeholder="sm" /><PasswordInput size="md" placeholder="md" /><PasswordInput size="lg" placeholder="lg" /><PasswordInput size="xl" placeholder="xl" />

States

invalid swaps the border and focus ring to red regardless of color (and sets aria-invalid). disabled dims the shell and disables both the input and the toggle; readOnly keeps full contrast and stays focusable but rejects edits.

<PasswordInput invalid defaultValue="weak" /><PasswordInput disabled defaultValue="secret" /><PasswordInput readOnly defaultValue="secret" />

With label, description & error

label, description (helper text), and error are built in via Field — no external wrapper needed. Passing error flips the shell to the invalid (red) state; required adds the semantic flag and a red asterisk on the label.

<PasswordInput label="Password" description="At least 8 characters." placeholder="Enter a password" /><PasswordInput label="Password" required placeholder="Enter a password" /><PasswordInput label="Password" error="Password is too weak" placeholder="Enter a password" />

If you omit these props, PasswordInput still composes cleanly inside a Field: disabled / invalid / readOnly / required propagate from the Field, and the aria-* relationships are wired for you.

import { Field } from '@42/ui-react/field';
import { PasswordInput } from '@42/ui-react/password-input';

<Field label="Password" description="At least 8 characters." required>
  <PasswordInput name="password" placeholder="Enter a password" />
</Field>

API

name, placeholder, id, ref, and onBlur forward to the underlying <input>. className styles the shell root.

Accessibility

• Pass label / description / error to wire the accessible name and aria-* relationships via the built-in Field. Omit them and it composes inside an outer Field (or your own <label htmlFor>) instead.
• The reveal toggle is a real <button> carrying aria-controls and aria-expanded so assistive tech can announce its state. It is exposed to AT rather than nested in an aria-hidden decoration.
• Focus management stays on the input itself; the toggle is a redundant pointer convenience (tabIndex={-1}) so keyboard users tab straight from field to field.
• invalid sets aria-invalid on the input.