@piplup/rhf-adaptersmui-one-time-password-inputComponents
MuiOtpInputElement
A pre-integrated MuiOtpInputElement component for connecting OTP and verification code input to React Hook Form.
Import
import { MuiOtpInputElement } from "@piplup/rhf-adapters/mui-one-time-password-input";Usage
"use client";import Stack from "@mui/material/Stack";import { MuiOtpInputElement } from "@piplup/rhf-adapters/mui-one-time-password-input";import { MuiButtonElement } from "@piplup/rhf-adapters/mui-material";import { useForm } from "react-hook-form";export default function Page() { const { control, handleSubmit } = useForm({ defaultValues: { code: "" } }); return ( <form onSubmit={handleSubmit((values) => alert(JSON.stringify(values, null, 2)), )} > <Stack direction="column" spacing={2}> <MuiOtpInputElement control={control} name="code" length={6} /> <div> <MuiButtonElement control={control} type="submit" variant="contained"> Submit </MuiButtonElement> </div> </Stack> </form> );}"use client";import Stack from "@mui/material/Stack";import { MuiOtpInputElement } from "@piplup/rhf-adapters/mui-one-time-password-input";import { MuiButtonElement } from "@piplup/rhf-adapters/mui-material";import { FormContainer } from "@piplup/rhf-core";export default function Page() { return ( <FormContainer defaultValues={{ code: "" }} onSubmit={(values) => alert(JSON.stringify(values, null, 2))} > <Stack direction="column" spacing={2}> <MuiOtpInputElement name="code" length={6} /> <div> <MuiButtonElement type="submit" variant="contained"> Submit </MuiButtonElement> </div> </Stack> </FormContainer> );}Props
Prop
Type
Notes
- Use this component for OTP and verification flows that store a single string value.
- For custom OTP inputs, build on
useMuiOtpInputAdapter.