Docs
OTP Field
OTP Field
An accessible and customizable OTP Input component.
Installation
Usage
import {
OTPField,
OTPFieldGroup,
OTPFieldInput,
OTPFieldSeparator,
OTPFieldSlot
} from "@/components/ui/otp-field";<OTPField maxLength={6}>
<OTPFieldInput />
<OTPFieldGroup>
<OTPFieldSlot index={0} />
<OTPFieldSlot index={1} />
<OTPFieldSlot index={2} />
</OTPFieldGroup>
<OTPFieldSeparator />
<OTPFieldGroup>
<OTPFieldSlot index={3} />
<OTPFieldSlot index={4} />
<OTPFieldSlot index={5} />
</OTPFieldGroup>
</OTPField>Exmaples
Pattern
Use the pattern prop to define a custom pattern for the OTP field.
Controlled
You can use the value and onValueChange props to control the input value.