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

# <ProfileForm />

## Overview

**ProfileForm** is a collection of components designed to facilitate the creation of a custom user details page.
It provides a set of components that encapsulate the business logic for handling the user details form, allowing
users to easily customize the layout, styles, labels, placeholders, and button texts.

<Note>
  ProfileForm should be used in protected page - user should be authenticated to access it.
</Note>

## Example Usage

```typescript custom-profile-form.tsx
import { UserDetailsElements } from '@locai1/iam-react/elements';

const { ProfileForm } = UserDetailsElements;

import { useSession } from '@/hooks/use-session';

const CustomProfileTab = ({ userDetails }) => {
  const { userDetails } = useSession();

  return (
    <ProfileForm.Root userDetails={userDetails}>
      <ProfileForm.FirstNameInput
        label="First name"
        labelClassname="custom-label-class"
        inputClassname="custom-input-class"
      />
      <ProfileForm.LastNameInput
        label="Last name"
        labelClassname="custom-label-class"
        inputClassname="custom-input-class"
      />
      <ProfileForm.PhoneNumberInput
        label="Phone Number"
        labelClassname="custom-label-class"
        inputClassname="custom-input-class"
      />
      <ProfileForm.ErrorMessage
        className="custom-error-class"
      />
      <ProfileForm.SubmitButton
        text="Update Profile"
        className="custom-button-class"
      />
    </ProfileForm.Root>
  );
};
```

### ProfileForm.Root

The root component of profile form. Encapsulates the business logic for handling user details form.

#### Props

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

<ResponseField name="userDetails" type="UserDetails" required>
  User details to be pre-filled in the form.

  ```typescript UserDetails type
  type UserDetails = {
    firstName: string;
    lastName: string;
    phoneNumber: string;
    email: string;
    isEmailVerified: boolean;
    isPhoneVerified: boolean;
    userState: string;
    displayName: string;
    metadata?: Record<string, string>;
  };
  ```
</ResponseField>

### Input Fields

ProfileForm has the following exported input fields:

* ProfileForm.FirstNameInput - field for entering first name.
* ProfileForm.LastNameInput - field for entering last name.
* ProfileForm.PhoneNumberInput - field for entering phone number.

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>

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

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