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

# <SignInForm />

## Overview

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

## Example Usage

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

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

import { FORGOT_PASSWORD_PAGE } from '@/const';

const { SignInForm } = SignInElements;

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

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

  const handleForgotPassword = () => {
    push(FORGOT_PASSWORD_PAGE);
  };

  return (
    <SignInForm.Root onComplete={handleComplete}>
      <SignInForm.EmailInput
        label="Email"
        placeholder="Enter your email"
        labelClassname="custom-label-class"
        inputClassname="custom-input-class"
      />
      <SignInForm.PasswordInput
        label="Password"
        forgotPassword={{
          text: "Forgot your password?",
          onClick: handleForgotPassword,
        }}
        labelClassname="custom-label-class"
        inputClassname="custom-input-class"
      />
      <SignInForm.ErrorMessage className="custom-error-class" />
      <SignInForm.SubmitButton text="Sign In" className="custom-button-class" />
      <SignInForm.OAuthSection onComplete={handleComplete} />
    </SignInForm.Root>
  );
};
```

## Components

### SignInForm.Root

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

#### Props

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

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

### SignInForm.EmailInput

An email input field.

#### Props

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

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

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

<ResponseField name="inputClassname" type="string">
  Custom class name for the email input.
</ResponseField>

### SignInForm.PasswordInput

Password input field with an optional "forgot password" link.

#### Props

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

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

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

<ResponseField name="forgotPassword" type="object">
  An object containing the text and onClick handler for the "forgot password" link, if not provided the link will not be rendered.

  ```typescript forgotPassword
  forgotPassword?: {
    text: string;
    onClick: () => void;
  };
  ```
</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>

### SignInForm.OAuthSection

A section for handling OAuth sign-in options.