PasswordResetForm: choose a new password

The second step, opened from the emailed link: a new password typed twice. Pass the token in hiddenFields, and hideEmail when the link already names the account.

PasswordResetForm

PreviewLink to the section Preview

Live in all three themes. Everything here is interactive.

Light theme, PasswordResetForm: choose a new password

Dark theme, PasswordResetForm: choose a new password

High contrast theme, PasswordResetForm: choose a new password

UsageLink to the section Usage

tsx

import { PasswordResetForm } from '@skribly/ui/pages'

tsx

<PasswordResetForm
  step="reset"
  labels={labels}
  minLength={12}
  defaultEmail={email}
  hiddenFields={{ token }}
  onSubmit={savePassword}
/>

Every label is a prop, so the app passes its own words in its own language. See no built-in text.

AccessibilityLink to the section Accessibility

The password rules sit under the field as its description, so they are read before typing.
Both fields use autocomplete="new-password", so password managers offer a strong one.
A warning that the link expires is a tone, an icon and a word.

This demo runs through axe in all three themes on every test run. See what the tests check.