[docs] Can we create a similar OTP component like shown in Base UI 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

No response

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

[noobDev31]

Okay using InputBase works for me

https://stackblitz.com/edit/react-ajmuvfal?file=Demo.tsx

[github-actions]

This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue.
Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.

Note

@noobDev31 How did we do? Your experience with our support team matters to us. If you have a moment, please share your thoughts in this short Support Satisfaction survey.