> ## 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.

# <SignUpForm />

## Overview

**SignUpForm** is a collection of components designed to facilitate the creation of a custom sign-up flow.
It provides a set of components that encapsulate the business logic for handling forms, allowing users to easily
customize the layout, styles, labels, placeholders, and button texts.

## Example Usage

```typescript custom-sign-up-form.tsx
import { useRouter } from 'next/navigation';

import type { Session } from '@locai1/iam-javascript';
import { SignUpElements } from '@locai1/iam-react/elements';

const { SignUnForm } = SignUpElements;

const CustomSignUpForm = () => {
   const { push } = useRouter();

   const handleComplete = (session: Session | undefined) => {
    console.log('Sign in complete', session);
  };

  const verificationUrl = `${window.location.origin}/verify-email?code={{code}}&userId={{userId}}&sessionToken={{sessionToken}}`;

  return (
    <SignUpForm.Root
      onComplete={handleComplete}
      verificationUrl={verificationUrl}
    >
      <SignUpForm.FirstNameInput
        label="First Name"
        placeholder="Enter your first name"
        labelClassname="custom-label-class"
        inputClassname="custom-input-class"
      />
      <SignUpForm.LastNameInput
        label="Last Name"
        placeholder="Enter your last name"
        labelClassname="custom-label-class"
        inputClassname="custom-input-class"
      />
      <SignUpForm.EmailInput
        label="Email"
        placeholder="Enter your email"
        labelClassname="custom-label-class"
        inputClassname="custom-input-class"
      />
      <SignUpForm.PasswordInput
        label="Password"
        placeholder="Enter your password"
        labelClassname="custom-label-class"
        inputClassname="custom-input-class"
      />
      <SignUpForm.ConfirmPasswordInput
        label="Confirm Password"
        placeholder="Re-enter your password"
        labelClassname="custom-label-class"
        inputClassname="custom-input-class"
      />
      <SignUpForm.ErrorMessage className="custom-error-class" />
      <SignUpForm.SubmitButton text="Sign Up" className="custom-button-class" />
    </SignUpForm.Root>
  );
};
```

## Components

### SignUpForm.Root

The root component of sign-up form. It encapsulates business logic for handling sign-up form.

<Note>
  **SignUpForm** is responsible for creating a user. You need to implement a **VerificationForm**(from **SignUpElement**)
  that displays and handle otp inputs logic(entering the code from email) and complete registration flow.
</Note>

#### Props

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

<ResponseField name="onComplete" type="callback" required>
  A callback function that is called when the sign-up process is successfully completed.
</ResponseField>

<ResponseField name="verificationUrl" type="string" required>
  Verification url used to redirect user to verification page from email.
  It should contain a placeholder for verification code.
</ResponseField>

### Input Fields

SignUpForm has the following exported input fields:

* SignUpForm.FirstNameInput - field for entering first name.
* SignUpForm.LastNameInput - field for entering last name.
* SignUpForm.EmailInput - field for entering email.
* SignUpForm.PasswordInput - field for entering password.
* SignUpForm.ConfirmPasswordInput - field for entering password.

All these fields have similar props listed below:

#### 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>

### SignInForm.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>

### SignInForm.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>