Neolithic Populous Metropolis

    chakra-otp-input
    TypeScript icon, indicating that this package has built-in type declarations

    0.3.6 • Public • Published

    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

    Keywords

    none

    Install

    npm i chakra-otp-input

    DownloadsWeekly Downloads

    39

    Version

    0.3.6

    License

    MIT

    Unpacked Size

    46.4 kB

    Total Files

    12

    Last publish

    Collaborators

    • buupu