ForgotPasswordForm

Code

import { ForgotPasswordForm } from "@fadymondy/nasaq/web";export function Forgot() {  return <ForgotPasswordForm onSubmit={async ({ email }) => { await api.sendReset(email); }} />;}declare const api: { sendReset(email: string): Promise<void> };

Auth · beta

Live examples and controls: ForgotPasswordForm in the lab.

InstallCopy Anchor Link

npx shadcn@latest add https://docs.nasaqui.com/r/forgot-password-form.json

A single email field. After onSubmit resolves it swaps to a confirmation: "Check your inbox", the address, a "Resend email" button that waits out a countdown, and a link to use a different address.

When to useCopy Anchor Link

• The first step of password recovery.

When not to useCopy Anchor Link

• Setting the new password: use ResetPasswordForm.
• One-time codes: use VerifyOtpForm.

ImportCopy Anchor Link

import { ForgotPasswordForm } from "@fadymondy/nasaq/web";
// inside this monorepo: "@nasaq/web"

Quick startCopy Anchor Link

import { ForgotPasswordForm } from "@fadymondy/nasaq/web";

export function Forgot() {
  return <ForgotPasswordForm onSubmit={async ({ email }) => { await api.sendReset(email); }} />;
}

declare const api: { sendReset(email: string): Promise<void> };

AnatomyCopy Anchor Link

ForgotPasswordForm               data-slot="forgot-password-form"
├─ request state                 form, noValidate
│  ├─ error summary              role="alert"
│  ├─ Field: email               autocomplete="email"
│  └─ submit Button
└─ sent state                    heading is focused
   ├─ "Check your inbox" + address
   ├─ Resend button              disabled during the countdown
   └─ "Use a different email"

APICopy Anchor Link

ForgotPasswordForm: every div prop except onSubmit and children, plus:

Tip: respond the same whether or not the account exists, so the form does not leak who is registered.

ExamplesCopy Anchor Link

Shorter cooldown

import { ForgotPasswordForm } from "@fadymondy/nasaq/web";

export function Quick() {
  return <ForgotPasswordForm resendSeconds={10} onSubmit={async () => {}} />;
}

AccessibilityCopy Anchor Link

• The form is noValidate and validates itself, so messages are yours to localise and read in one place. Every field has a visible <label>; an invalid field gets aria-invalid and its message is linked with aria-describedby.
• On a failed submit focus moves to the first invalid field. When the failure is for the whole form (error) the summary at the top of the form (role="alert") is focused instead, so it is announced.
• The submit button shows a spinner and is aria-busy while onSubmit runs; a second submit is ignored.
• When the sent state appears its heading takes focus and is announced; the resend countdown is a live region updated once a second only for the visible text, and the button is disabled (not hidden) while waiting.

RTL & i18nCopy Anchor Link

• Built-in English and Arabic strings follow the Nasaq locale (useNasaq). Pass labels to change any of them or to add another language; keys you omit keep the built-in text.
• Layout uses logical properties, so it mirrors under dir="rtl" with no extra work.
• The confirmed address is shown dir="ltr" inside the Arabic sentence so it does not reorder.

Styling & tokensCopy Anchor Link

• Built from Field, Input, Button and Alert; tokens only.

Do / Don'tCopy Anchor Link

• Do give the same answer for unknown emails.
• Do keep the resend cooldown.
• Don't tell people whether an account exists.
• Don't auto-resend.

RelatedCopy Anchor Link

• auth-layout
• login-form
• reset-password-form
• verify-otp-form

LabCopy Anchor Link

https://docs.nasaqui.com/?path=/docs/components-auth-forgot-password-form--docs