npm package: @licuido-ui/ui_otp
Description: The OTP component allows you to create a one-time password input field for authentication purposes.
Latest version: 3.0.2

# OTP

The OTP component allows you to create a one-time password input field for authentication purposes.

### Author

- @author Akila K <akila@crayond.co>

### Modify

- @modify Raman P <raman@crayond.co>

## Link

[Story Book Link ErrorPage](http://216.48.182.148:3333/?path=/docs)

### PlayGround

[Try it have a fun codeBox](https://codesandbox.io/p/sandbox/hungry-cache-zglwy6?file=%2Fsrc%2FApp.js%3A16%2C30)

## Installation

```sh
npm i @licuido-ui/ui_otp
```

## Import component

```jsx
import { OTP } from '@licuido-ui/ui_otp';
```

## Usage

```jsx
 <OTP
        variant='metans'
        customProps={{
          onResend: () => console.log('api call'),
          numInputs: 4,
          otpTimer: 0,
          errorMsg: 'in valid',
        }}
      />
```

## Image

![OTP img](./otp.png)

## Props


| **Prop**      | **Type** | **Default Value** | **Description**                                   |
| ------------- | -------- | ----------------- | ------------------------------------------------- |
| `variant`     | String   | 'default'         | Type of select component.                         |
| `customProps` | Object   | {}                | customProps containing various custom properties: |

**customProps** contain these props ,
| **Prop**               | **Type**                                    | **Default Value** | **Description**                                                   |
| ---------------------- | ------------------------------------------- | ----------------- | ----------------------------------------------------------------- |
| Prop Name              | Type                                        | Default Value     | Description                                                       |
| `className`            | `string`                                    | `''`              | Additional CSS class for custom styling.                          |
| `sx`                   | `SxProps<Theme>`                            | `{}`              | Custom styles using the Material-UI theme.                        |
| `numInputs`            | `number`                                    | `4`               | The number of OTP input fields.                                   |
| `shouldAutoFocus`      | `boolean`                                   | `false`           | Whether the first input field should auto-focus.                  |
| `otpTimer`             | `number`                                    | `60`              | The initial value of the OTP timer (in seconds).                  |
| `inputType`            | `'password' \| 'text' \| 'number' \| 'tel'` | `'text'`          | The type of input for OTP fields.                                 |
| `renderSeparator`      | `Function` or `React.ReactNode`             | `null`            | A function or React node to render separators between OTP fields. |
| `placeholder`          | `string`                                    | `''`              | Placeholder text for OTP input fields.                            |
| `containerStyle`       | `React.CSSProperties`                       | `{}`              | Custom styles for the container of OTP fields.                    |
| `inputStyle`           | `React.CSSProperties`                       | `{}`              | Custom styles for OTP input fields.                               |
| `errorMsg`             | `string`                                    | `''`              | Error message to display.                                         |
| `gridContainerProps`   | `GridProps`                                 | `{}`              | Props for styling the Grid container for buttons.                 |
| `buttonContainerStyle` | `SxProps`                                   | `{}`              | Styling for the container of buttons.                             |
| `buttons`              | Array of button objects                     | `[]`              | An array of buttons to be displayed at the bottom.                |
| `rootStyle`            | `SxProps`                                   | `{}`              | Custom styles for the root element.                               |
| `boxContainer`         | `SxProps`                                   | `{}`              | Custom styles for the container box.                              |
| `subTxtStyle`          | `SxProps`                                   | `{}`              | Custom styles for the subtext.                                    |
| `subTxtFontSize`       | `number` or `string`                        | `'14px'`          | Font size for the subtext.                                        |
| `subTxtFontColor`      | `string`                                    | `'#333'`          | Font color for the subtext.                                       |
| `resendColor`          | `string`                                    | `'blue'`          | Color for the "Resend" link.                                      |
| `resendFontSize`       | `number` or `string`                        | `'14px'`          | Font size for the "Resend" link.                                  |
| `resendStyle`          | `React.CSSProperties`                       | `{}`              | Custom styles for the "Resend" link.                              |
| `errorFontSize`        | `number` or `string`                        | `'14px'`          | Font size for error messages.                                     |
| `errorMsgColor`        | `string`                                    | `'red'`           | Color for error messages.                                         |
| `timerColor`           | `string`                                    | `'#333'`          | Font color for the timer.                                         |
| `timerStyle`           | `React.CSSProperties`                       | `{}`              | Custom styles for the timer.                                      |
| `logo`                 | `string` or `ReactNode`                     | `''`              | An optional logo image or component.                              |
| `logoStyle`            | `React.CSSProperties`                       | `{}`              | Styling for the logo.                                             |
| `logoAltTxt`           | `string`                                    | `''`              | Alternate text for the logo image.                                |
| `didNotOTP`            | `boolean`                                   | `false`           | hide and show.                                                    |
| `onResend`             | `Function`                                  | `null`            | A function is resend OTP fields.                                  |
| `titleStyle`           | `SxProps<Theme>`                            | `{}`              | Styling for the Title.                                            |
| `Title`                | `string`                                    | ``                | Label for the Title.                                              |
| `subLabelStyle`        | `SxProps<Theme>`                            | `{}`              | Styling for the Sub Title.                                        |
| `subLabel`             | `string`                                    | ``                | Label for the Sub Title.                                          |
| `onsubmitAction`       | `Function`                                  | `null`            | A function is onsubmitAction OTP fields.                          |