ForgotPasswordForm

A password reset request form block with email input and success state.

Forgot your password?

Enter your email address and we'll send you a reset link.

CMSCMS Ready

The ForgotPasswordForm component accepts customizable title, description, and link props for CMS integration. Content editors can configure form text without code changes.

Basic Usage

import { ForgotPasswordForm } from "@corew500/features/auth"

<ForgotPasswordForm
  signInHref="/login"
/>

With Validation

Enable client-side validation with password requirements and real-time feedback.

<ForgotPasswordForm
  signInHref="/login"
  validation={{
    enableClientValidation: true,
    validationMode: "onBlur",
  }}
/>

The validation prop enables:

Real-time email format validation
Custom error messages
Enhanced UX with immediate feedback

With Glow Effect

Enable interactive glow effects on inputs and buttons.

<ForgotPasswordForm
  glow
  signInHref="/login"
/>

The glow effect adds:

Mouse-tracking radial gradient on input fields
Animated gradient underline on buttons that fades in on hover

Custom Content

<ForgotPasswordForm
  title="Reset your password"
  description="Enter your email and we'll send you a reset link"
  signInHref="/login"
  successTitle="Check your email"
  successDescription="We've sent you a password reset link"
/>

Loading State

<ForgotPasswordForm loading signInHref="/login" />

Custom Error Messages

<ForgotPasswordForm
  signInHref="/login"
  validation={{
    enableClientValidation: true,
    errorMessages: {
      email: {
        required: "Please enter your email address",
        invalid: "Please enter a valid email",
      },
    },
  }}
/>

Props

Prop	Type	Default	Description
`onFormSubmit`	(data: ForgotPasswordFormData) => void	—	Called when the form is submitted
`loading`	enum	`false`	Whether the form is in a loading state
`success`	enum	`false`	When true, shows success state instead of form
`glow`	enum	`false`	Enable glow effects
`title`	string	`Forgot password?`	—
`description`	string	`Enter your email address and we'll send you a link to reset your password.`	—
`successTitle`	string	`Check your email`	—
`successDescription`	string	`We've sent you a password reset link to your email address.`	—
`successSubDescription`	string	`If you don't see it, check your spam folder.`	—
`successAction`	enum	—	—
`labels`	{ email?: string; }	`{}`	—
`placeholders`	{ email?: string; }	`{}`	—
`buttonLabels`	{ submit?: string; loading?: string; backToLogin?: string; }	`{}`	—
`errors`	{ email?: string; general?: string; }	`{}`	—
`backToLoginHref`	string	`#`	—