PasswordInput

PasswordInput is a password field with a button to show and hide what was typed. PasswordStrengthIndicator shows how far a new password meets the rules your application sets. Use them together for a new password, or the field alone to sign in.

// apps/docs/examples/ui/password-input.tsx'use client';
import {useState} from 'react';
import {PasswordInput} from '@workspace/active-ui/components/composed/password-input';import {PasswordStrengthIndicator} from '@workspace/active-ui/components/composed/password-strength-indicator';import {  Field,  FieldLabel,} from '@workspace/active-ui/components/primitives/field';
// The rules are the application's: the indicator only shows them.function criteriaFor(password: string) {  return [    {id: 'length', label: 'At least 12 characters', met: password.length >= 12},    {id: 'digit', label: 'A digit', met: /\d/.test(password)},    {      id: 'case',      label: 'An upper-case and a lower-case letter',      met: /[a-z]/.test(password) && /[A-Z]/.test(password),    },  ];}
/** * A new password with a button to show it, and the rules it has to meet. * Type to see the bar and the rules change; when every rule is met, one * confirmation replaces the list. */export default function PasswordInputExample() {  const [password, setPassword] = useState('');  return (    <Field className="w-full max-w-sm">      <FieldLabel htmlFor="new-password">New password</FieldLabel>      <PasswordInput        id="new-password"        autoComplete="new-password"        value={password}        onChange={(event) => setPassword(event.target.value)}        ariaLabelShowPassword="Show password"        ariaLabelHidePassword="Hide password"        aria-describedby="new-password-rules"      />      <PasswordStrengthIndicator        id="new-password-rules"        criteria={criteriaFor(password)}        compliantLabel="The password meets every rule."        criterionMetLabel="met"        criterionUnmetLabel="not met"      />    </Field>  );}

What the composition adds#

• A reveal button that is a real tab stop, named after the action it offers: "Show password" while hidden, "Hide password" while shown.

• The same field throughout. Showing switches type on the same input, so the value, the cursor, name, id and autoComplete stay, and password managers see one field.

• No password-manager blocking. The field adds no autoComplete="off" or ignore attributes; you declare the role with autoComplete (current-password, new-password).

• disabled covers the button too; readOnly leaves the button working, so the value can still be read.

• Rules as presentation. The indicator receives a list of translated rules with met for each, shows a bar and the open rules, and one confirmation once all are met. It validates nothing.

Usage#

import {PasswordInput} from '@workspace/active-ui/components/composed/password-input';import {PasswordStrengthIndicator} from '@workspace/active-ui/components/composed/password-strength-indicator';
<PasswordInput  id="new-password"  autoComplete="new-password"  value={password}  onChange={(event) => setPassword(event.target.value)}  ariaLabelShowPassword="Show password"  ariaLabelHidePassword="Hide password"/><PasswordStrengthIndicator  criteria={[{id: 'length', label: 'At least 12 characters', met: password.length >= 12}]}  compliantLabel="The password meets every rule."  criterionMetLabel="met"  criterionUnmetLabel="not met"/>

What your application provides#

• The rules and the check of each one, and the validation on submit: the indicator only shows.

• Both translated button names, and the state words met and not met for screen readers.

• autoComplete, and for a secret that is not a sign-in credential, the attributes that tell password managers to skip it.

Accessibility and keyboard#

• Tab moves from the field to the reveal button; Enter or Space toggles it.

• The bar and the icons are hidden from assistive technology; each rule carries its state as hidden text, so it is not shown by colour and shape alone.

• The indicator is not a live region: it would talk on every keystroke. Link it to the field with aria-describedby, as in the example, so it is read with the field.

API#

PasswordInput#

interface PasswordInputProps extends React.ComponentProps<'input'> {
  ariaLabelShowPassword: string;
  ariaLabelHidePassword: string;
}

PasswordStrengthIndicator#

interface PasswordStrengthCriterion {
  id: string;
  label: string;
  met: boolean;
}

interface PasswordStrengthIndicatorProps extends Omit<
  React.ComponentProps<'div'>,
  'children'
> {
  criteria: readonly PasswordStrengthCriterion[];
  compliantLabel: string;
  criterionMetLabel: string;
  criterionUnmetLabel: string;
}