Open sagarpanchal opened 1 month ago
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
@chakra/react
<Box />
containerStyle
This way we can use
@chakra/react
's<Box />
instead of div and not limit styles tocontainerStyle
attribute