Export a hook for more generic solution

[sagarpanchal]

const [otp, setOtp] = React.useState("");

const { getContainerProps, getInputProps } = useOtpInput({
  // we may wrap setState in our hook, if it is convenient, and only take initialValue here
  value: otp,
  setValue: setOtp,
});

const test = (
  <Box {...getContainerProps()} display='flex' flexDirection="row" gap="1em">
    {Array.from({ length: 4 }).map((_, index) => (
      <Box key={index} gap="1em" border="1px solid #000" borderRadius="0.25em" height="3em" width="3em" >
        <Box as="input" {...getInputProps(index)} type="text" key={index} />
      </Box>
    ))}
  </Box>
);

This way we can use @chakra/react's <Box /> instead of div and not limit styles to containerStyle attribute

[amitpatil321]

To fix this exact problem and give styling freedom, I have created this otp component which gives you full control over container, input and separator as well

react-smart-otp

Check this and let me know if this solved your problem