PasswordField

Password field (react-aria-components) with a reveal toggle. Composes the text-field parts; error display flows from the enclosing Form's validationErrors like any RAC field. Text is passed in as data (label, revealLabel) so the primitive stays domain-agnostic — the host localizes it.

import { PasswordField } from "@evolve-storefront/ui/password-field";

Preview

DefaultOpen in Storybook ↗

Usage

<PasswordField name="password" label="Password" />

Props

Prop	Type	Description
label	ReactNode
defaultValue?	string
disabled?	boolean
name?	string
value?	string
onValueChange?	((value: string) => void)	onValueChange, not onChange: this hands over the value, where the DOM event of that name hands over an event. Same-name-different-signature is the one shadow nothing catches at the call site.
required?	boolean
readOnly?	boolean
invalid?	boolean
autoComplete?	string
description?	ReactNode
placeholder?	string
newPassword?	boolean	Use the new-password autocomplete hint (sign-up) instead of current-password.
revealLabel?	string	Accessible label for the reveal toggle (localize in the host). Defaults to "Show password".
labelClassName?	string
inputClassName?	string

Any other props go to the root element, like on a plain HTML element.

Examples

With ErrorErrors come from the enclosing Form's validationErrors map (keyed by field name) — the same path a feature feeds from zod.flatten().fieldErrors.

// The error is read from the form's map by the field's name.
<Form validationErrors={errors}>
  <PasswordField name="password" label={t("password")} revealLabel={t("showPassword")} newPassword />
</Form>;

Open in Storybook ↗