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, FormHelperText, FormLabel } from "@chakra-ui/react";
import * as React from "react";
import { OTPInput } from "chakra-otp-input";

export default function App() {
  return (
    <Flex pt="48" justify="center" align="center" w="full">
      <FormControl w="60">
        <OTPInput noInputs={6} onChange={(value) => console.log(value)} />
      </FormControl>
    </Flex>
  );
}

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.
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 element. Can be passed as px or spacing key.

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

GitHub

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