Password Input

Installation & usage

npm i @youj/react

For an app already set up with npx @youj/cli init, which installs the peers (@youj/core, @youj/motion, motion and Base UI) and wires the provider. New app? Start at Installation.

Use it for every password: signing in, choosing a new one, confirming a change. PasswordInput alone is enough for a sign-in form. When people choose a password, add PasswordStrength and PasswordRequirements under it in the same Field, so the rules and the estimate update as they type. For a one-time code sent by email or an authenticator app, use Input OTP instead.

import { useId, useState } from 'react'
import { Field, FieldLabel, PasswordInput, PasswordRequirements, PasswordStrength } from '@youj/react'

export function NewPassword() {
  const [value, setValue] = useState('')
  const rulesId = useId()
  return (
    <Field>
      <FieldLabel>New password</FieldLabel>
      <PasswordInput autoComplete="new-password" value={value} onValueChange={setValue} aria-describedby={rulesId} />
      <PasswordStrength value={value} />
      <PasswordRequirements id={rulesId} value={value} />
    </Field>
  )
}

autoComplete defaults to current-password. Set new-password when people choose one, so password managers offer to generate it. Point the input's aria-describedby at the checklist's id so the rules are read with the field.

Reference

Propsvisible, defaultVisible, onVisibleChange… (10)

Props

PasswordInput props
Prop	Type	Default
`visible`	`boolean` Controlled visibility.	–
`defaultVisible`	`boolean` default false	`false`
`onVisibleChange`	`(visible: boolean) => void`	–
`autoComplete`	`string` default 'current-password'	`'current-password'`
`groupClassName`	`string` Wrapper class; `className` goes to the input.	–
Other props pass through: extends `InputPrimitive.Props`.

className styles the input and groupClassName the group around it. Other Base UI Input props pass through, such as value, onValueChange and name.

PasswordStrength

PasswordStrength props
Prop	Type	Default
`value`Required	`string` The password to score.	–
`scorer`	`(password: string) => number \| PasswordStrengthResult` Your own estimate: a 0–4 score, or `{ score, label }`.	–
`labels`	`readonly [string, string, string, string, string]` Five labels, very weak → strong.	–
Other props pass through: extends `ComponentProps<'div'>`.

PasswordRequirements

PasswordRequirements props
Prop	Type	Default
`value`Required	`string`	–
`requirements`	`PasswordRequirement[]`	–
Other props pass through: extends `ComponentProps<'ul'>`.

MotionReveal, slash on, hide… · reduced motion

Motion

Motion tokens
Moment	Tokens	Value
Revealthe eye blinks shut and open again	`duration.slowease.standard` 340ms · cubic-bezier(0.2, 0, 0, 1)	340mscubic-bezier(0.2, 0, 0, 1)
Slash ondrawn through the eye after a `fast` delay	`duration.baseease.standard` 220ms · cubic-bezier(0.2, 0, 0, 1)	220mscubic-bezier(0.2, 0, 0, 1)
Hidethe slash retracts and the eye settles	`duration.fastease.standard` 140ms · cubic-bezier(0.2, 0, 0, 1)	140mscubic-bezier(0.2, 0, 0, 1)
Strength segmentsfill from the inline start and tint, one stagger step apart; they empty from the far end	`duration.baseease.standard` 220ms · cubic-bezier(0.2, 0, 0, 1)	220mscubic-bezier(0.2, 0, 0, 1)
Strength labelcolor follows the score	`duration.fastease.standard` 140ms · cubic-bezier(0.2, 0, 0, 1)	140mscubic-bezier(0.2, 0, 0, 1)
Requirement metthe check draws on	`duration.slowease.enter` 340ms · cubic-bezier(0.16, 1, 0.3, 1)	340mscubic-bezier(0.16, 1, 0.3, 1)
Check landinga small settle after a `base` delay	`spring.settle` 0.45s, bounce 0.3	0.45s, bounce 0.3

Reduced motion

The eye swaps at once, segments fill without a stagger, and checks appear already drawn.

Reduced motion

The eye swaps between open and slashed at once, the strength segments fill together with no stagger, and met requirements show their check already drawn. Every state change is still visible and announced.

AccessibilityKeyboard, ARIA, focus