v3.0.1

# react-otp-field

[![npm version](https://img.shields.io/npm/v/react-otp-field)](https://www.npmjs.com/package/react-otp-field) [![npm](https://img.shields.io/npm/l/react-otp-field)](https://github.com/coded-bear/react-otp-field/blob/main/LICENSE) [![npm](https://img.shields.io/bundlephobia/minzip/react-otp-field)](https://www.npmjs.com/package/react-otp-field)

Customizable OTP Field component for the web built with React.js

[Live Demo](https://coded-bear.github.io/react-otp-field/)

## Installation

```
npm install --save react-otp-field
```

## Basic usage

```jsx
import React, { useState } from 'react';
import OtpField from 'react-otp-field';

const App = () => {
    const [value, setValue] = useState('');

    return (
        <OtpField
            value={value}
            onChange={setValue}
            numInputs={6}
            onChangeRegex={/^([0-9]{0,})$/}
            autoFocus
            separator={<span>-</span>}
            isTypeNumber
            inputProps={{ className: 'otp-field__input', disabled: false }}
        />
    );
};
```

## API

<table>
    <thead>
        <tr>
            <th>Name</th>
            <th>Type</th>
            <th>Required</th>
            <th>Default value</th>
            <th>Description</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>value</td>
            <td>String</td>
            <td>true</td>
            <td>''</td>
            <td>The value of the OTP Field.</td>
        </tr>
        <tr>
            <td>onChange</td>
            <td>Function</td>
            <td>true</td>
            <td>console.log</td>
            <td>Returns OTP values typed in inputs.</td>
        </tr>
        <tr>
            <td>numInputs</td>
            <td>Number</td>
            <td>false</td>
            <td>4</td>
            <td>Number of inputs.</td>
        </tr>
        <tr>
            <td>onChangeRegex</td>
            <td>RegEx</td>
            <td>false</td>
            <td>none</td>
            <td>RegEx for single onChange.</td>
        </tr>
        <tr>
            <td>labelText</td>
            <td>String</td>
            <td>false</td>
            <td>'Enter verification code'</td>
            <td>Aria-label attribute for inputs.</td>
        </tr>
        <tr>
            <td>classNames</td>
            <td>String</td>
            <td>false</td>
            <td>'otp-field'</td>
            <td>Class names for OTP Field component.</td>
        </tr>
        <tr>
            <td>autoComplete</td>
            <td>String</td>
            <td>false</td>
            <td>'off'</td>
            <td>AutoComplete props for first input.</td>
        </tr>
        <tr>
            <td>autoFocus</td>
            <td>Boolean</td>
            <td>false</td>
            <td>false</td>
            <td>AutoFocus on first input.</td>
        </tr>
        <tr>
            <td>separator</td>
            <td>Component</td>
            <td>false</td>
            <td>none</td>
            <td>Separator between inputs.</td>
        </tr>
        <tr>
            <td>isTypeNumber</td>
            <td>Boolean</td>
            <td>false</td>
            <td>false</td>
            <td>Type number for inputs.</td>
        </tr>
        <tr>
            <td>hasError</td>
            <td>Boolean</td>
            <td>false</td>
            <td>false</td>
            <td>Error class 'otp-field--has-error' for otp-field component.</td>
        </tr>
        <tr>
            <td>inputProps</td>
            <td>Object</td>
            <td>false</td>
            <td>none</td>
            <td>Props for inputs.</td>
        </tr>
    </tbody>
</table>

## Development

#### Run the development server:

```
npm run dev
```


Customizable OTP Field component for the web built with React.js. 

react-otp-field

Customizable OTP Field component for the web built with React.js

Name	Type	Required	Default value	Description
value	String	true	''	The value of the OTP Field.
onChange	Function	true	console.log	Returns OTP values typed in inputs.
numInputs	Number	false	4	Number of inputs.
onChangeRegex	RegEx	false	none	RegEx for single onChange.
labelText	String	false	'Enter verification code'	Aria-label attribute for inputs.
classNames	String	false	'otp-field'	Class names for OTP Field component.
autoComplete	String	false	'off'	AutoComplete props for first input.
autoFocus	Boolean	false	false	AutoFocus on first input.
separator	Component	false	none	Separator between inputs.
isTypeNumber	Boolean	false	false	Type number for inputs.
hasError	Boolean	false	false	Error class 'otp-field--has-error' for otp-field component.
inputProps	Object	false	none	Props for inputs.

react-otp-field

.css-1z04cui{margin-bottom:var(--chakra-space-4);font-size:var(--chakra-fontSizes-md);}v3.0.1

react-otp-field

Installation

Basic usage

API

Development

Run the development server:

Keywords

v3.0.1