OTP

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

Author

• @author Akila K [email protected]

Modify

• @modify Raman P [email protected]

Link

Story Book Link ErrorPage

PlayGround

Try it have a fun codeBox

Installation

npm i @licuido-ui/ui_otp

Import component

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

Usage

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

Image

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