Comments (2)
You can create a component for react hookform like below
import FormHelperText from '@mui/material/FormHelperText';
import { MuiOtpInput } from 'mui-one-time-password-input';
import { Controller, useFormContext } from 'react-hook-form';
export function RHFOtpInput({ name, length = 6, ...other }) {
const { control } = useFormContext();
return (
<Controller
name={name}
control={control}
render={({ field, fieldState: { error } }) => (
<div>
<MuiOtpInput
{...field}
autoFocus
gap={1.5}
length={length}
TextFieldsProps={{
error: !!error,
placeholder: '-',
}}
{...other}
/>
{error && (
<FormHelperText sx={{ px: 2 }} error>
{error.message}
</FormHelperText>
)}
</div>
)}
/>
);
}
Usage
<FormProvider>
<RHFOtpInput name="otpValue" />
</FormProvider>
from mui-otp-input.
Thanks for you response.
from mui-otp-input.
Related Issues (20)
- I cannot set inputProps as numeric type for MuiOtpInput HOT 5
- Not working properly in Next JS HOT 5
- SyntaxError: Cannot use import statement outside a module HOT 2
- Doesn't work with react 16 HOT 1
- Improve focus handling HOT 1
- Can not fill all OTP code in Chrome and DuckDuckGo HOT 7
- autofocus html prop renders cursor at the last position HOT 1
- setting field error with `shouldFocus` doesn't set focus
- Can't see the OTP input field value on small size phones HOT 1
- Error react/jsx-runtime Next.js HOT 1
- 'MuiOtpInput' cannot be used as a JSX component - TypeScript Error HOT 2
- Add functionality for accessibility AriaLabel + AriaDescribeby HOT 3
- e.slice is not a function error HOT 1
- Cannot use as JSX component HOT 2
- Browserlist support HOT 1
- Mask Input values without the use of type="password" HOT 3
- setFocus (react-hook-form) HOT 3
- create react based app facing load issues HOT 1
- Android device not showing number keyboard after adding number type HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from mui-otp-input.