react-otp-field

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

Live Demo

Installation

npm install --save react-otp-field

Basic usage

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

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.

Development

Run the development server:

npm run dev