@licuido-ui/ui_otp-simple v1.0.0

OTP

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

Author

• @author NArayanamoorthi E narayana@crayond.co

Link

Story Book Link ErrorPage

PlayGround

Try it have a fun codeBox

Installation

npm i @licuido-ui/ui_otp-simple

Import component

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

Usage

<Otpsimple numInputs={4} {...args} />

Image

Props

| Prop | Type | Default Value | Description | | Prop | Type | Default Value | Description | | --------------- | -------- | ---------------------- | -------------------- | | id | - | - | Identifier | | className | - | - | CSS class name | | numInputs | number | 4 | Number of inputs | | shouldAutoFocus | boolean | false | Auto-focus flag | | inputType | string | 'text' | Type of input | | renderSeparator | function | null | Separator rendering | | placeholder | string | '' | Placeholder text | | containerStyle | object | {} | Styles for container | | inputStyle | object | {} | Styles for input | | errorMsg | string | '' | Error message | | errorStyle | object | {} | Styles for error | | rootStyle | object | {} | Root styles | | onChangeFn | funtion | - | onchange value | | isHyphen | boolean | otp center hyphen call | false |