react-otp-input css

[Irtaza Hussain]

• 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",
                }}
              />

[Irtaza Hussain]

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

[Victor Fedorov]

Thanks a lot, it solved my problem

[Bennett-Eghan]

how do you make the width responsive?

[Irtaza Hussain]

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

[Bennett-Eghan]

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