Help

OTP Input

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.

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

Was this example helpful?

Usage#

Code
import { OtpInput } from "@medusajs/ui"

Code
1const [otp, setOtp] = useState("")2
3return <OtpInput value={otp} onChange={setOtp} />

API Reference#

A controlled segmented input for one-time passwords, PINs, and short numeric verification codes.

Prop	Type	Default
`autoFocus`	`boolean`	-
`disabled`	`boolean`	-
`groupSize`	`number`	`3`
`inputClassName`	`string`	-
`length`	`number`	`6`
`onChange`	`function`	-
`onComplete`	`function`	-
`readOnly`	`boolean`	-
`separator`	`ReactNode`	`"-"`
`value`	`string`	-
`aria-label`	`string`	`"One-time password"`

Was this helpful?

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:

Was this example helpful?

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:

Was this example helpful?

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:

Was this example helpful?

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:

Was this example helpful?

Error State#

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

Was this guide helpful?