> ## Documentation Index
> Fetch the complete documentation index at: https://iam-docs.razi.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# <RequestCodeForm />

## Overview

**RequestCodeForm** is a collection of components designed to facilitate the creation of a custom forgot password flow.
It provides a set of components that encapsulate the business logic for handling the request code form, allowing
users to easily customize the layout, styles, labels, placeholders, and button texts.

## Example Usage

```typescript custom-request-code-form.tsx
import { useState } from 'react';

import { ForgotPasswordElements } from '@locai1/iam-react/elements';

const { RequestCodeForm } = ForgotPasswordElements;

const CustomRequestCodeForm = ({ onComplete, resetPasswordUrl }) => {
  const [email, setEmail] = useState<string | undefined>();

  const handleComplete = (value: string) => {
    setEmail(value);
    console.log(`Forgot password code for email ${value} requested`);
  };

  return (
    <RequestCodeForm.Root
      onComplete={handleComplete}
      resetPasswordUrl={resetPasswordUrl}
      email={email}
    >
      <RequestCodeForm.EmailInput
        label="Email"
        placeholder="Enter your email"
        labelClassname="custom-label-class"
        inputClassname="custom-input-class"
      />
      <RequestCodeForm.ErrorMessage
        className="custom-error-class"
      />
      <RequestCodeForm.SubmitButton
        text="Request Code"
        className="custom-button-class"
      />
    </RequestCodeForm.Root>
  );
};
```

### RequestCodeForm.Root

The root component of request code form. It encapsulates business logic for handling code requesting process.

<Note>
  **RequestCodeForm** is responsible only for requesting code. You need to implement a **UpdatePasswordForm**
  (from **ForgotPasswordElements**) that handles password updating process.
</Note>

#### Props

<ResponseField name="children" type="ReactNode">
  React elements to be rendered inside the form. **RequestCodeForm** elements should be rendered as children of **RequestCodeForm.Root**.
</ResponseField>

<ResponseField name="onComplete" type="callback" required>
  A callback function that is called when code is successfully requested.
</ResponseField>

<ResponseField name="email" type="string">
  Default email value for the email input field.
</ResponseField>

<ResponseField name="resetPasswordUrl" type="string" required>
  Reset password url used to redirect user to reset password page from email.
  It should contain a placeholder for the reset password code.
</ResponseField>

### RequestCodeForm.EmailInput

Field for email of user's for which a password reset code will be requested.

#### Props

<ResponseField name="label" type="string">
  Label for input field. Optional, if not provided the label will not be rendered.
</ResponseField>

<ResponseField name="placeholder" type="string">
  Placeholder for input field. Optional, if not provided the placeholder will not be rendered.
</ResponseField>

<ResponseField name="labelClassname" type="string">
  Custom class name for label.
</ResponseField>

<ResponseField name="labelClassname" type="string">
  Custom class name for input.
</ResponseField>

### RequestCodeForm.ErrorMessage

Displays an error message if there is an error in the form submission.

#### Props

<ResponseField name="classname" type="string">
  Custom class name for the error message.
</ResponseField>

### RequestCodeForm.SubmitButton

Submit button for the form.

#### Props

<ResponseField name="text" type="string">
  Text to be displayed on the button.
</ResponseField>

<ResponseField name="classname" type="string">
  Custom class name for the button.
</ResponseField>