One Time Password Component Package for Chakra UI
Codesandbox Link Here
NPM Link Here
npm i chakra-otp-inputimport { 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>
);
}| 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. |
- 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