ui
Input OTP
Input OTP component for entering one-time passwords and verification codes. Built with input-otp library for robust OTP input handling.
1. Import
Import the OTP input components from the design system.
import {
InputOTP,
InputOTPGroup,
InputOTPSlot,
InputOTPSeparator,
} from "@/design-system/components/ui/input-otp"2. Props
InputOTP component props.
| Prop | Type | Default |
|---|---|---|
| maxLength | number | 6 |
| containerClassName | string | -- |
| className | string | -- |
| disabled | boolean | false |
3. Usages
Common OTP input patterns and configurations.
import {
InputOTP,
InputOTPGroup,
InputOTPSlot,
} from "@/design-system/components/ui/input-otp";
export function Example() {
return (
<InputOTP maxLength={6}>
<InputOTPGroup>
<InputOTPSlot index={0} />
<InputOTPSlot index={1} />
<InputOTPSlot index={2} />
<InputOTPSlot index={3} />
<InputOTPSlot index={4} />
<InputOTPSlot index={5} />
</InputOTPGroup>
</InputOTP>
);
}