Customizable OTP Field component for the web built with React.js
npm install --save react-otp-field
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 }}
/>
);
};
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. |
npm run dev