ComponentsCore
Input OTP
Component for entering one-time passwords. Fully accessible, unstyled by default, and easy to customize.
Example
Usage
Features
- Supports iOS + Android copy-paste-cut
- Automatic OTP code retrieval from transport (e.g SMS)
- Supports screen readers (a11y)
- Supports all keybindings
- Automatically optimizes for password managers
Installation
Install following dependencies:
npm install react-aria-components tw-animate-css tailwindcss-react-aria-components class-variance-authority lucide-react clsx tailwind-merge motionAdd cn helper using clsx and twMerge for conditional class merging in Tailwind components.
Copy and paste the following code into your project.
npx libravelui@latest add input-otpAnatomy
import {
InputOTP,
InputOTPGroup,
InputOTPSeparator,
InputOTPSlot,
} from "@/components/ui/core/input-otp";<InputOTP maxLength={6}>
<InputOTPGroup>
<InputOTPSlot index={0} />
<InputOTPSlot index={1} />
<InputOTPSlot index={2} />
</InputOTPGroup>
<InputOTPSeparator />
<InputOTPGroup>
<InputOTPSlot index={3} />
<InputOTPSlot index={4} />
<InputOTPSlot index={5} />
</InputOTPGroup>
</InputOTP>Another Example
Separator
With separator for clearer digit entry and easier interaction.
Usage
Props
Loading types…