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

# <SecurityForm />

## Overview

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

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

<Warning>
  After changing the user's password, their session will be terminated, and they will need to log in again using the new password.
</Warning>

## Example Usage

```typescript custom-security-form.tsx
import { UserDetailsElements } from '@/components/elements';

const { SecurityForm } = UserDetailsElements;

export const SecurityTab = () => {
  return (
    <SecurityForm.Root>
      <SecurityForm.CurrentPasswordInput
        label="Current Password"
        labelClassname="custom-label-class"
        inputClassname="custom-input-class"
      />
      <SecurityForm.NewPasswordInput
        label="New Password"
        labelClassname="custom-label-class"
        inputClassname="custom-input-class"
      />
      <SecurityForm.ConfirmPasswordInput
        label="Confirm Password"
        labelClassname="custom-label-class"
        inputClassname="custom-input-class"
      />
      <SecurityForm.ErrorMessage
        className="custom-error-class"
      />
      <SecurityForm.SubmitButton
        text="Update Password"
        className="custom-button-class"
      />
    </SecurityForm.Root>
  );
};
```

### SecurityForm.Root

The root component of security form. Encapsulates the business logic for handling security form.

#### Props

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

### Input Fields

SecurityForm has the following exported input fields:

* SecurityForm.CurrentPasswordInput - field for entering current password.
* SecurityForm.NewPasswordInput - field for entering new password.
* SecurityForm.ConfirmPasswordInput - field for entering new password confirmation.

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>

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

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