[docs] Can we create a similar OTP component like shown in MUI Base with @mui/material

[noobDev31]

Related page

https://mui.com/base-ui/react-input/#otp-input

Kind of issue

Unclear explanations

Issue description

Wanted to know the feasibility of creating OTP component using an OutlinedInput of mui/material
basically the only part i am struggling is passing the ref to the OutlinedInput of mui/material

Context

• [otp] Add a OtpInput or PinInput component base-ui#75

Search keywords: OTP

[aarongarciah]

Hey @noobDev31, please provide a sandbox or repository with the code you're trying to make it work so we can have a look. Passing a ref to OutlinedInput should work; here's an example: https://codesandbox.io/p/sandbox/holy-smoke-knt7kk

[github-actions]

👋 Thanks for using this project!

We use GitHub issues exclusively as a bug and feature requests tracker, however, this issue appears to be a support request.

For support with Material UI please check out https://mui.com/material-ui/getting-started/support/. Thanks!

If you have a question on Stack Overflow, you are welcome to link to it here, it might help others.
If your issue is subsequently confirmed as a bug, and the report follows the issue template, it can be reopened.

[noobDev31]

Hey @noobDev31, please provide a sandbox or repository with the code you're trying to make it work so we can have a look. Passing a ref to OutlinedInput should work; here's an example: https://codesandbox.io/p/sandbox/holy-smoke-knt7kk

Hi @aarongarciah,on the below Stackblitz link i get some issue related to select being undefined for me(mostly because i am not passing the ref properly) also on my local(attached image) I am not able to pass ref on the slotProps because it doesn't exist there
even i tried to pass ref on the root level of ref it has issues (2nd image)

https://stackblitz.com/edit/react-73e4p7qt?file=Demo.tsx,index.html

[noobDev31]

Okay I think i need to pass it to inputRef root level prop also the all handlers on the root but still i get issues regarding select method not being defined on the targetIndex
https://stackblitz.com/edit/react-73e4p7qt-mvphj6u8?file=Demo.tsx,index.html