Input Otp

Collect a short verification code in visually separated slots.

View component source ↗

Preview

Example

A minimal example to get started.

[data-input-otp] { --nojs-bg: white !important; --nojs-fg: black !important; background-color: var(--nojs-bg) !important; color: var(--nojs-fg) !important; caret-color: var(--nojs-fg) !important; letter-spacing: .25em !important; text-align: center !important; border: 1px solid var(--nojs-fg) !important; border-radius: 4px !important; width: 100% !important; } @media (prefers-color-scheme: dark) { [data-input-otp] { --nojs-bg: black !important; --nojs-fg: white !important; } }

Installation

Install this component and its dependencies in a project initialized with shadcn.

pnpm dlx shadcn@latest add https://ui.hyunjoon.net/r/input-otp.json

Usage

This is the basic example. Use the Code tab above for the selected example. Adjust import aliases to match your project.

import { InputOTP, InputOTPGroup, InputOTPSlot } from "@/components/ui/input-otp";

export default function Example() {
  return (
    <InputOTP maxLength={6} aria-label="Verification code">
      <InputOTPGroup>
        {[0, 1, 2, 3, 4, 5].map((index) => (
          <InputOTPSlot key={index} index={index} />
        ))}
      </InputOTPGroup>
    </InputOTP>
  );
}

API reference

Derived from the installed component types. Native DOM props are also supported where applicable. A dash means no explicit default is documented. Some props depend on the selected mode.

InputOTP

InputOTP properties
Prop	Type	Default	Description
`className`	string \| undefined string \| undefined	`—`	Additional CSS classes merged with the component styles.
`defaultValue`	string \| number \| readonly string[] \| undefined string \| number \| readonly string[] \| undefined	`—`	Initial value for an uncontrolled component.
`defaultChecked`	boolean \| undefined boolean \| undefined	`—`	Initial checked state for an uncontrolled control.
`id`	string \| undefined string \| undefined	`—`	Unique identifier used to associate labels and descriptions.
`children`	undefined \| React.ReactNode undefined \| React.ReactNode	`—`	Content rendered inside this component.
`onFocus`	React.FocusEventHandler<HTMLInputElement> \| undefined React.FocusEventHandler<HTMLInputElement> \| undefined	`—`	Called when the control receives focus.
`onBlur`	React.FocusEventHandler<HTMLInputElement> \| undefined React.FocusEventHandler<HTMLInputElement> \| undefined	`—`	Called when the control loses focus.
`onKeyDown`	React.KeyboardEventHandler<HTMLInputElement> \| undefined React.KeyboardEventHandler<HTMLInputElement> \| undefined	`—`	Called when a key is pressed while this element is focused.
`onClick`	React.MouseEventHandler<HTMLInputElement> \| undefined React.MouseEventHandler<HTMLInputElement> \| undefined	`—`	Called when the element is activated.
`disabled`	boolean \| undefined boolean \| undefined	`—`	Prevents user interaction.
`name`	string \| undefined string \| undefined	`—`	Field name used in form data.
`type`	React.HTMLInputTypeAttribute \| undefined React.HTMLInputTypeAttribute \| undefined	`—`	The native input or button behavior.
`alt`	string \| undefined string \| undefined	`—`	Accessible text alternative for the image.
`src`	string \| undefined string \| undefined	`—`	URL of the displayed resource.
`multiple`	boolean \| undefined boolean \| undefined	`—`	Allows more than one value to be selected.
`max`	string \| number \| undefined string \| number \| undefined	`—`	Maximum allowed value.
`min`	string \| number \| undefined string \| number \| undefined	`—`	Minimum allowed value.
`step`	string \| number \| undefined string \| number \| undefined	`—`	Increment between valid values.
`required`	boolean \| undefined boolean \| undefined	`—`	Whether the user must provide a value before form submission.
`checked`	boolean \| undefined boolean \| undefined	`—`	Current checked state when controlled.
`placeholder`	string \| undefined string \| undefined	`—`	Hint shown when the control has no value.
`value`	string \| undefined string \| undefined	`—`	The current value when controlled by the application.
`onChange`	((newValue: string) => unknown) \| undefined ((newValue: string) => unknown) \| undefined	`—`	Called when the underlying form control changes; inspect the event for its value.
`maxLength`Required	number number	`—`	Maximum number of input characters.
`textAlign`	"center" \| "left" \| "right" \| undefined "center" \| "left" \| "right" \| undefined	`—`	Configures text align; see the accepted type.
`onComplete`	((...args: any[]) => unknown) \| undefined ((...args: any[]) => unknown) \| undefined	`—`	Callback for complete events. See the signature for parameters.
`pushPasswordManagerStrategy`	"none" \| "increase-width" \| undefined "none" \| "increase-width" \| undefined	`—`	Configures push password manager strategy; see the accepted type.
`pasteTransformer`	((pasted: string) => string) \| undefined ((pasted: string) => string) \| undefined	`—`	Configures paste transformer; see the accepted type.
`containerClassName`	string \| undefined string \| undefined	`—`	Configures container class name; see the accepted type.
`noScriptCSSFallback`	string \| null \| undefined string \| null \| undefined	`—`	Configures no script cssfallback; see the accepted type.
`nonce`	string \| undefined string \| undefined	`—`	Configures nonce; see the accepted type.
`render`	InputOTPRenderFn \| undefined InputOTPRenderFn \| undefined	`—`	Element or render function used to compose a custom root element.
`ref`	React.Ref<HTMLInputElement> \| undefined React.Ref<HTMLInputElement> \| undefined	`—`	Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref).

InputOTPGroup

InputOTPGroup properties
Prop	Type	Default	Description
`ref`	React.Ref<HTMLDivElement> \| undefined React.Ref<HTMLDivElement> \| undefined	`—`	Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref).
`defaultChecked`	boolean \| undefined boolean \| undefined	`—`	Initial checked state for an uncontrolled control.
`defaultValue`	string \| number \| readonly string[] \| undefined string \| number \| readonly string[] \| undefined	`—`	Initial value for an uncontrolled component.
`className`	string \| undefined string \| undefined	`—`	Additional CSS classes merged with the component styles.
`id`	string \| undefined string \| undefined	`—`	Unique identifier used to associate labels and descriptions.
`children`	React.ReactNode React.ReactNode	`—`	Content rendered inside this component.
`onFocus`	React.FocusEventHandler<HTMLDivElement> \| undefined React.FocusEventHandler<HTMLDivElement> \| undefined	`—`	Called when the control receives focus.
`onBlur`	React.FocusEventHandler<HTMLDivElement> \| undefined React.FocusEventHandler<HTMLDivElement> \| undefined	`—`	Called when the control loses focus.
`onChange`	React.ChangeEventHandler<HTMLDivElement, Element> \| undefined React.ChangeEventHandler<HTMLDivElement, Element> \| undefined	`—`	Called when the underlying form control changes; inspect the event for its value.
`onKeyDown`	React.KeyboardEventHandler<HTMLDivElement> \| undefined React.KeyboardEventHandler<HTMLDivElement> \| undefined	`—`	Called when a key is pressed while this element is focused.
`onClick`	React.MouseEventHandler<HTMLDivElement> \| undefined React.MouseEventHandler<HTMLDivElement> \| undefined	`—`	Called when the element is activated.

InputOTPSlot

InputOTPSlot properties
Prop	Type	Default	Description
`ref`	React.Ref<HTMLDivElement> \| undefined React.Ref<HTMLDivElement> \| undefined	`—`	Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref).
`defaultChecked`	boolean \| undefined boolean \| undefined	`—`	Initial checked state for an uncontrolled control.
`defaultValue`	string \| number \| readonly string[] \| undefined string \| number \| readonly string[] \| undefined	`—`	Initial value for an uncontrolled component.
`className`	string \| undefined string \| undefined	`—`	Additional CSS classes merged with the component styles.
`id`	string \| undefined string \| undefined	`—`	Unique identifier used to associate labels and descriptions.
`children`	React.ReactNode React.ReactNode	`—`	Content rendered inside this component.
`onFocus`	React.FocusEventHandler<HTMLDivElement> \| undefined React.FocusEventHandler<HTMLDivElement> \| undefined	`—`	Called when the control receives focus.
`onBlur`	React.FocusEventHandler<HTMLDivElement> \| undefined React.FocusEventHandler<HTMLDivElement> \| undefined	`—`	Called when the control loses focus.
`onChange`	React.ChangeEventHandler<HTMLDivElement, Element> \| undefined React.ChangeEventHandler<HTMLDivElement, Element> \| undefined	`—`	Called when the underlying form control changes; inspect the event for its value.
`onKeyDown`	React.KeyboardEventHandler<HTMLDivElement> \| undefined React.KeyboardEventHandler<HTMLDivElement> \| undefined	`—`	Called when a key is pressed while this element is focused.
`onClick`	React.MouseEventHandler<HTMLDivElement> \| undefined React.MouseEventHandler<HTMLDivElement> \| undefined	`—`	Called when the element is activated.
`index`Required	number number	`—`	Configures index; see the accepted type.

InputOTPSeparator

InputOTPSeparator properties
Prop	Type	Default	Description
`ref`	React.Ref<HTMLDivElement> \| undefined React.Ref<HTMLDivElement> \| undefined	`—`	Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref).
`defaultChecked`	boolean \| undefined boolean \| undefined	`—`	Initial checked state for an uncontrolled control.
`defaultValue`	string \| number \| readonly string[] \| undefined string \| number \| readonly string[] \| undefined	`—`	Initial value for an uncontrolled component.
`className`	string \| undefined string \| undefined	`—`	Additional CSS classes merged with the component styles.
`id`	string \| undefined string \| undefined	`—`	Unique identifier used to associate labels and descriptions.
`children`	React.ReactNode React.ReactNode	`—`	Content rendered inside this component.
`onFocus`	React.FocusEventHandler<HTMLDivElement> \| undefined React.FocusEventHandler<HTMLDivElement> \| undefined	`—`	Called when the control receives focus.
`onBlur`	React.FocusEventHandler<HTMLDivElement> \| undefined React.FocusEventHandler<HTMLDivElement> \| undefined	`—`	Called when the control loses focus.
`onChange`	React.ChangeEventHandler<HTMLDivElement, Element> \| undefined React.ChangeEventHandler<HTMLDivElement, Element> \| undefined	`—`	Called when the underlying form control changes; inspect the event for its value.
`onKeyDown`	React.KeyboardEventHandler<HTMLDivElement> \| undefined React.KeyboardEventHandler<HTMLDivElement> \| undefined	`—`	Called when a key is pressed while this element is focused.
`onClick`	React.MouseEventHandler<HTMLDivElement> \| undefined React.MouseEventHandler<HTMLDivElement> \| undefined	`—`	Called when the element is activated.

Usage notes

Set maxLength to the expected code length. Slot indexes start at zero and must remain within that length.