react-otp-input css

[irtaza9]

• I was facing an issue while adding styles in the component but then I just tried a little bit may be this will help others

               <OtpInput
                value={otp}
                onChange={handleChangeotp}
                numInputs={6}
                separator={<span style={{ width: "8px" }}></span>}
                shouldAutoFocus={true}
                inputStyle={{
                  border: "1px solid transparent",
                  borderRadius: "8px",
                  width: "54px",
                  height: "54px",
                  fontSize: "12px",
                  color: "#000",
                  fontWeight: "400",
                  caretColor: "blue",
                  backgroundColor: "darkgray",
                }}
                focusStyle={{
                  border: "1px solid #CFD3DB",
                  outline: "none",
                }}
              />

[irtaza9]

Closing this as this is just for others so that they can use it

[Cor4zon]

Thanks a lot, it solved my problem

[abena07]

how do you make the width responsive?

[irtaza9]

Which width? The width for input box or the container width? or something else.

[abena07]

the input width, but btw i figured it out with tailwind media queries