chakra-otp-input

One Time Password Component Package for Chakra UI

Codesandbox Link Here

NPM Link Here

Install

npm i chakra-otp-input

Usage

Basic Usage

import { Flex, FormControl, ChakraProvider, theme } from "@chakra-ui/react";
import * as React from "react";
import { OTPInput } from "chakra-otp-input";

export default function App() {
  const handleOTPInput = (value) => {
    console.log(value);
  };

  return (
    <ChakraProvider theme={theme}>
      <Flex pt="48" justify="center" align="center" w="full">
        <FormControl w="60">
          <OTPInput noInputs={6} onChange={handleOTPInput} />
        </FormControl>
      </Flex>
    </ChakraProvider>
  );
}

API

Name	Type	Required	Default	Description
noInputs	number	true	-	Number of inputs to be rendered.
onChange	function	true	-	Returns OTP value as a string to the function provided.
isDisabled	boolean	false	false	If true, sets the OTP inputs to be disabled.
isError	boolean	false	false	If true, will display error styles to inputs.
isNumeric	boolean	false	false	If true, only numeric values will be allowed.
isPrivate	boolean	false	false	If true, input values will be masked.
isPasteDisabled	boolean	false	false	If true, disables pasting into inputs.
spacing	string | number	false	8px	Spacing between input elements. Can be passed as px or spacing key.
placeholder	string	false	-	Placeholder for input elements. Recommended to be max 1 character.
ariaLabelOverride	string	false	"one time password input"	Override for default aria label.

Running project

• Clone this repository

git clone https://github.com/Buupu/chakra-otp-input.git

• Install all dependencies

npm i

• Install package example dependencies

cd example
npm i

• Start the package server, and the example server

# root directory
npm start

# example directory
npm run dev