import { ComponentExample } from "@/components/ComponentExample" import { ComponentReference } from "@/components/ComponentReference"

export const metadata = { title: OTP Input, }

{metadata.title}

A component that renders a form input field for one-time passwords (OTP) using Medusa's design system.

The OtpInput component is useful for scenarios where you need to input a code sent via email or SMS for verification purposes.

In this guide, you'll learn how to use the OTP Input component.

The OTPInput component is available since v4.1.13 of @medusajs/ui.

Usage

import { OtpInput } from "@medusajs/ui"

const [otp, setOtp] = useState("")

return <OtpInput value={otp} onChange={setOtp} />

API Reference

Examples

Handle OTP Completion

Use the onComplete callback to react when the user fills in the full code. This is useful to automatically submit the code for verification once it's complete:

4-Digit PIN

By default, the OTP input renders a 6-digit code. Use the length and groupSize props to render a shorter code without a separator:

Custom Group Size

By default, the OTP input groups digits in sets of 3. Use the groupSize prop to control how many digits are rendered between each separator:

Custom Separator

By default, the OTP input uses - as the separator. You can change it by setting the separator prop. It can be a string or a React node:

Error State

You can leverage the native aria-invalid property to show an error state on the OTP input: