Input OTP

Accessible one-time password component with copy-paste functionality.

[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; } }

<InputOTP maxLength={6} defaultValue="123456">
  <InputOTPGroup>
    <InputOTPSlot index={0} />
    <InputOTPSlot index={1} />
    <InputOTPSlot index={2} />
    <InputOTPSlot index={3} />
    <InputOTPSlot index={4} />
    <InputOTPSlot index={5} />
  </InputOTPGroup>
</InputOTP>

About

The InputOTP component uses input-otp by Guilherme Rodz.

Installation

pnpm dlx cubix@latest add input-otp

Usage

Import

import {
  InputOTP,
  InputOTPGroup,
  InputOTPSeparator,
  InputOTPSlot,
} from "@/components/cubix/input-otp"

Example

<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>

Composition

Use the following composition to build an InputOTP:

InputOTP
├── InputOTPGroup
│   ├── InputOTPSlot
│   ├── InputOTPSlot
│   └── InputOTPSlot
├── InputOTPSeparator
├── InputOTPGroup
│   ├── InputOTPSlot
│   ├── InputOTPSlot
│   └── InputOTPSlot
├── InputOTPSeparator
└── InputOTPGroup
    ├── InputOTPSlot
    └── InputOTPSlot

Pattern

Use the pattern prop to define a custom pattern for the OTP input.

import { REGEXP_ONLY_DIGITS } from "input-otp"

<Field className="w-fit">
  <FieldLabel htmlFor="digits-only">Digits Only</FieldLabel>
  <InputOTP id="digits-only" maxLength={6} pattern={REGEXP_ONLY_DIGITS}>
    <InputOTPGroup>
      <InputOTPSlot index={0} />
      <InputOTPSlot index={1} />
      <InputOTPSlot index={2} />
      <InputOTPSlot index={3} />
      <InputOTPSlot index={4} />
      <InputOTPSlot index={5} />
    </InputOTPGroup>
  </InputOTP>
</Field>

Separator

Use <InputOTPSeparator /> to add a separator between input groups.

<InputOTP maxLength={6}>
  <InputOTPGroup>
    <InputOTPSlot index={0} />
    <InputOTPSlot index={1} />
  </InputOTPGroup>
  <InputOTPSeparator />
  <InputOTPGroup>
    <InputOTPSlot index={2} />
    <InputOTPSlot index={3} />
  </InputOTPGroup>
  <InputOTPSeparator />
  <InputOTPGroup>
    <InputOTPSlot index={4} />
    <InputOTPSlot index={5} />
  </InputOTPGroup>
</InputOTP>

Separated

Use variant="separated" on InputOTPGroup and InputOTPSlot for standalone inputs with space between them.

<InputOTP maxLength={6} defaultValue="123456">
  <InputOTPGroup variant="separated">
    <InputOTPSlot index={0} variant="separated" />
    <InputOTPSlot index={1} variant="separated" />
    <InputOTPSlot index={2} variant="separated" />
    <InputOTPSlot index={3} variant="separated" />
    <InputOTPSlot index={4} variant="separated" />
    <InputOTPSlot index={5} variant="separated" />
  </InputOTPGroup>
</InputOTP>

Disabled

Use the disabled prop to disable the input.

<InputOTP id="disabled" maxLength={6} disabled defaultValue="123456">
  <InputOTPGroup>
    <InputOTPSlot index={0} />
    <InputOTPSlot index={1} />
    <InputOTPSlot index={2} />
  </InputOTPGroup>
  <InputOTPSeparator />
  <InputOTPGroup>
    <InputOTPSlot index={3} />
    <InputOTPSlot index={4} />
    <InputOTPSlot index={5} />
  </InputOTPGroup>
</InputOTP>

Controlled

Use the value and onChange props to control the input value.

Enter your one-time password.

const [value, setValue] = React.useState("")

<InputOTP maxLength={6} value={value} onChange={setValue}>
  <InputOTPGroup>
    <InputOTPSlot index={0} />
    <InputOTPSlot index={1} />
    <InputOTPSlot index={2} />
    <InputOTPSlot index={3} />
    <InputOTPSlot index={4} />
    <InputOTPSlot index={5} />
  </InputOTPGroup>
</InputOTP>

Invalid

Use aria-invalid on the slots to show an error state.

<InputOTP maxLength={6} value={value} onChange={setValue}>
  <InputOTPGroup>
    <InputOTPSlot index={0} aria-invalid />
    <InputOTPSlot index={1} aria-invalid />
  </InputOTPGroup>
  <InputOTPSeparator />
  <InputOTPGroup>
    <InputOTPSlot index={2} aria-invalid />
    <InputOTPSlot index={3} aria-invalid />
  </InputOTPGroup>
  <InputOTPSeparator />
  <InputOTPGroup>
    <InputOTPSlot index={4} aria-invalid />
    <InputOTPSlot index={5} aria-invalid />
  </InputOTPGroup>
</InputOTP>

Four Digits

A common pattern for PIN codes. This uses the pattern={REGEXP_ONLY_DIGITS} prop.

import { REGEXP_ONLY_DIGITS } from "input-otp"

<InputOTP maxLength={4} pattern={REGEXP_ONLY_DIGITS}>
  <InputOTPGroup>
    <InputOTPSlot index={0} />
    <InputOTPSlot index={1} />
    <InputOTPSlot index={2} />
    <InputOTPSlot index={3} />
  </InputOTPGroup>
</InputOTP>

Alphanumeric

Use REGEXP_ONLY_DIGITS_AND_CHARS to accept both letters and numbers.

import { REGEXP_ONLY_DIGITS_AND_CHARS } from "input-otp"

<InputOTP maxLength={6} pattern={REGEXP_ONLY_DIGITS_AND_CHARS}>
  <InputOTPGroup>
    <InputOTPSlot index={0} />
    <InputOTPSlot index={1} />
    <InputOTPSlot index={2} />
  </InputOTPGroup>
  <InputOTPSeparator />
  <InputOTPGroup>
    <InputOTPSlot index={3} />
    <InputOTPSlot index={4} />
    <InputOTPSlot index={5} />
  </InputOTPGroup>
</InputOTP>

Form

Compose InputOTP with Card and Field for a verification form.

Verify your login

Enter the verification code we sent to your email address: m@example.com.

Having trouble signing in? Contact support

<Card className="mx-auto w-[min(100%,19rem)]" size="sm">
  <CardHeader>
    <CardTitle>Verify your login</CardTitle>
    <CardDescription>
      Enter the verification code we sent to your email address:{" "}
      <span className="font-medium">m@example.com</span>.
    </CardDescription>
  </CardHeader>
  <CardContent>
    <form id="otp-verification-form">
      <Field className="gap-3 *:w-auto!">
        <div className="flex w-full items-center justify-between gap-2">
          <FieldLabel htmlFor="otp-verification">
            Verification code
          </FieldLabel>
          <Button type="button" variant="outline" size="xs">
            <RefreshCwIcon data-icon="inline-start" />
            Resend Code
          </Button>
        </div>
        <InputOTP
          maxLength={6}
          id="otp-verification"
          required
          containerClassName="w-full justify-between gap-2"
        >
          <InputOTPGroup>
            <InputOTPSlot index={0} className="h-10 w-10 shrink-0 text-lg" />
            <InputOTPSlot index={1} className="h-10 w-10 shrink-0 text-lg" />
            <InputOTPSlot index={2} className="h-10 w-10 shrink-0 text-lg" />
          </InputOTPGroup>
          <InputOTPSeparator />
          <InputOTPGroup>
            <InputOTPSlot index={3} className="h-10 w-10 shrink-0 text-lg" />
            <InputOTPSlot index={4} className="h-10 w-10 shrink-0 text-lg" />
            <InputOTPSlot index={5} className="h-10 w-10 shrink-0 text-lg" />
          </InputOTPGroup>
        </InputOTP>
        <FieldDescription className="w-full">
          <a href="#">I no longer have access to this email address.</a>
        </FieldDescription>
      </Field>
    </form>
  </CardContent>
  <CardFooter className="flex-col gap-2">
    <Button type="submit" form="otp-verification-form" className="w-full">
      Verify
    </Button>
    <div className="text-center text-sm text-muted-foreground">
      Having trouble signing in?{" "}
      <a
        href="#"
        className="underline underline-offset-4 transition-colors hover:text-primary"
      >
        Contact support
      </a>
    </div>
  </CardFooter>
</Card>

API Reference

See the input-otp documentation for the full primitive API.

InputOTP

Prop	Type	Default	Description
maxLength	number	-	Maximum number of characters the OTP input accepts.
value	string	-	Controlled value of the OTP input.
defaultValue	string	-	Initial value when uncontrolled.
onChange	(value: string) => void	-	Called when the OTP value changes.
pattern	string	-	Regular expression pattern for allowed characters. Use REGEXP_ONLY_DIGITS or REGEXP_ONLY_DIGITS_AND_CHARS from input-otp.
disabled	boolean	-	Disables the OTP input.
containerClassName	string	-	Classes applied to the OTP container element.
className	string	-	Additional Tailwind classes merged with the component styles (last one wins).
children	React.ReactNode	-	Groups, slots, and separators that compose the OTP input.

InputOTPGroup

Prop	Type	Default	Description
variant	"default" \| "separated"	"default"	Layout of the slots. Use separated to add space between individual inputs.
className	string	-	Additional Tailwind classes merged with the component styles (last one wins).
children	React.ReactNode	-	One or more InputOTPSlot elements.

InputOTPSlot

Prop	Type	Default	Description
index	number	-	Zero-based index of this slot within the OTP input.
variant	"default" \| "separated"	"default"	Visual style of the slot. Use separated for standalone bordered inputs.
aria-invalid	boolean	-	Marks the slot as invalid and applies destructive styles.
className	string	-	Additional Tailwind classes merged with the component styles (last one wins).

InputOTPSeparator

Prop	Type	Default	Description
className	string	-	Additional Tailwind classes merged with the component styles (last one wins).