Input OTP
Introduction
Input OTP uses the input-otp library by Guilherme Rodz. It supports grouped input slots, separators, and validation.
Installation
Add the component with the CLI.
npx shadcn@latest add @intentui/input-otp
Composed components
When you install this component via the CLI, it automatically loads all composed components, so you don’t need to add them individually.
Manual installation
Install the dependencies, then copy the component source into your project.
npm install input-otp @heroicons/react cn
Anatomy
import { Description } from "@/components/ui/field"
import {
InputOTP,
InputOTPControl,
InputOTPGroup,
InputOTPLabel,
InputOTPSlot,
} from "@/components/ui/input-otp"<InputOTP maxLength={6}>
<InputOTPLabel>Code</InputOTPLabel>
<InputOTPControl>
<InputOTPGroup>
{[...Array(6)].map((_, index) => (
<InputOTPSlot key={index} index={index} />
))}
</InputOTPGroup>
</InputOTPControl>
<Description>Please enter the 6-digit code we sent to your email.</Description>
</InputOTP>Examples
Separator
To include a separator between the OTP input groups, use the InputOTPSeparator component.
Controlled
To control the Input OTP component, utilize the value and onChange props.
Component API
InputOTP
InputOTP extends the Input OTP <OTPInput> component.
containerClassNamestringInputOTPControl
InputOTPControl extends the native <span> element.
classNamestringInputOTPGroup
InputOTPGroup extends the native <div> element.
classNamestringInputOTPSlot
InputOTPSlot extends the native <div> element.
classNamestringindexnumberInputOTPSeparator
InputOTPSeparator extends the native <div> element.
InputOTPLabel
InputOTPLabel extends the Intent UI <Label> component.
classNamestringSee the Input OTP documentation for the full API reference.
