PasswordInput

A password field with the reveal control and the field family's label, message and status.

Umbrella

The portable contract both renderers implement.

Shared

Install

npm install asheeui @asheeui/web

Import

import { PasswordInput } from "asheeui";

The field family's password member, with the shared reveal contract and the same status vocabulary.

One contract and a real implementation on both platforms.

The reveal control is part of the field, so its accessible name is stated once for both platforms.

The umbrella is the intersection; see the portable surface for the complete list and the monorepo guide for wiring one shared kit to both applications.

The live examples below run the web branch in this browser. The umbrella is the contract both branches implement; open Web for the browser's extra APIs and Native for the device's behaviour.

PasswordInput is the field family's password member: the same label, description and status as Input, plus the reveal control. It keeps the value out of the visible field until the reader asks to see it, and it never writes the value into the field's own message.

import { PasswordInput } from "asheeui";

<PasswordInput
  label="Password"
  autoComplete="current-password"
  value={password}
  onChange={(event) => setPassword(event.target.value)}
/>;

Reveal

The reveal control is a real button inside the field, with an accessible name that changes between "Show password" and "Hide password". The browser's own password manager still sees an input of type password while the value is hidden.