Input OTP

One-time-password input with individual slots, built on input-otp.

import { REGEXP_ONLY_DIGITS } from 'input-otp'
import { RotateCcwIcon } from 'lucide-react'
import { Button } from '@/components/ui/button'
import {
  Card,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from '@/components/ui/card'
import { Field, FieldDescription, FieldLabel } from '@/components/ui/field'
import { InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot } from '@/components/ui/input-otp'

const Slots = ({
  from = 0,
  count,
  ...props
}: { from?: number; count: number } & Partial<React.ComponentProps<typeof InputOTPSlot>>) => (
  <InputOTPGroup>
    {Array.from({ length: count }, (_, i) => (
      // biome-ignore lint/suspicious/noArrayIndexKey: slots are positional
      <InputOTPSlot key={from + i} {...props} index={from + i} />
    ))}
  </InputOTPGroup>
)

export function InputOtpDemo() {
  return (
    <Card className="w-full max-w-sm">
      <CardHeader>
        <CardTitle>Confirm your email</CardTitle>
        <CardDescription>
          We sent a 6-digit code to <span className="font-medium text-foreground">sofia.berg@example.se</span>.
        </CardDescription>
      </CardHeader>
      <CardContent>
        <Field>
          <FieldLabel htmlFor="otp-default">Verification code</FieldLabel>
          <InputOTP id="otp-default" maxLength={6} pattern={REGEXP_ONLY_DIGITS}>
            <Slots count={3} />
            <InputOTPSeparator className="mx-2" />
            <Slots from={3} count={3} />
          </InputOTP>
          <FieldDescription>The code is valid for 10 minutes.</FieldDescription>
        </Field>
      </CardContent>
      <CardFooter className="justify-between gap-2">
        <Button variant="ghost" size="sm">
          <RotateCcwIcon data-icon="inline-start" />
          Send a new code
        </Button>
        <Button size="sm">Confirm</Button>
      </CardFooter>
    </Card>
  )
}

Installation

pnpm dlx shadcn@latest add https://rdf.dev.360online.com/r/input-otp.json

Installs to @/components/ui/input-otp.

Manual installation

Install the dependencies:

pnpm add input-otp@^1.5.0 lucide-react@^1.48.0

Copy the source into your project:

components/ui/input-otp.tsx

'use client'

import { OTPInput, OTPInputContext } from 'input-otp'
import { MinusIcon } from 'lucide-react'
import * as React from 'react'
import { cn } from '@/lib/utils'

function InputOTP({
	className,
	containerClassName,
	...props
}: React.ComponentProps<typeof OTPInput> & {
	containerClassName?: string
}) {
	return (
		<OTPInput
			data-slot="input-otp"
			containerClassName={cn('cn-input-otp flex items-center has-disabled:opacity-50', containerClassName)}
			spellCheck={false}
			className={cn('disabled:cursor-not-allowed', className)}
			{...props}
		/>
	)
}

function InputOTPGroup({ className, ...props }: React.ComponentProps<'div'>) {
	return (
		<div
			data-slot="input-otp-group"
			className={cn(
				'flex items-center rounded-lg has-aria-invalid:border-destructive has-aria-invalid:ring-3 has-aria-invalid:ring-destructive/20 dark:has-aria-invalid:ring-destructive/40',
				className,
			)}
			{...props}
		/>
	)
}

function InputOTPSlot({
	index,
	className,
	...props
}: React.ComponentProps<'div'> & {
	index: number
}) {
	const inputOTPContext = React.useContext(OTPInputContext)
	const { char, hasFakeCaret, isActive } = inputOTPContext?.slots[index] ?? {}

	return (
		<div
			data-slot="input-otp-slot"
			data-active={isActive}
			className={cn(
				'relative flex size-10 items-center justify-center border-y border-r border-input text-sm transition-all outline-none first:rounded-l-lg first:border-l last:rounded-r-lg aria-invalid:border-destructive data-[active=true]:z-10 data-[active=true]:border-ring data-[active=true]:ring-3 data-[active=true]:ring-ring data-[active=true]:aria-invalid:border-destructive data-[active=true]:aria-invalid:ring-destructive/20 dark:data-[active=true]:aria-invalid:ring-destructive/40',
				className,
			)}
			{...props}
		>
			{char}
			{hasFakeCaret && (
				<div className="pointer-events-none absolute inset-0 flex items-center justify-center">
					<div className="h-4 w-px animate-caret-blink bg-foreground duration-1000" />
				</div>
			)}
		</div>
	)
}

function InputOTPSeparator({ ...props }: React.ComponentProps<'div'>) {
	return (
		<div
			data-slot="input-otp-separator"
			className="flex items-center [&_svg:not([class*='size-'])]:size-4"
			role="separator"
			{...props}
		>
			<MinusIcon />
		</div>
	)
}

export { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator }

An accessible OTP (One-Time Password) input component with individual character slots and visual feedback. Perfect for verification codes, PIN entries, and secure authentication flows.

Features

Individual character slots with visual focus indicators
Animated caret for active slot feedback
Composable slot grouping with separators
Pattern validation support (digits only, letters only, alphanumeric, custom patterns)
Controlled and uncontrolled state management
Disabled and invalid (aria-invalid) states
Auto-focus and keyboard navigation
Copy/paste support
Fully accessible with proper ARIA attributes
Built on top of the input-otp library

Usage

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

// Basic usage — each slot reads its state from context by `index`
<InputOTP maxLength={6}>
  <InputOTPGroup>
    <InputOTPSlot index={0} />
    <InputOTPSlot index={1} />
    <InputOTPSlot index={2} />
    <InputOTPSlot index={3} />
    <InputOTPSlot index={4} />
    <InputOTPSlot index={5} />
  </InputOTPGroup>
</InputOTP>

// With separator
<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>

// Digits only
<InputOTP maxLength={6} pattern={REGEXP_ONLY_DIGITS}>...</InputOTP>

// Controlled
const [value, setValue] = useState('')
<InputOTP maxLength={6} value={value} onChange={setValue}>...</InputOTP>

Examples

Default

An email confirmation step: six digits split 3-3 with a separator, labelled with FieldLabel via the id on InputOTP.

import { REGEXP_ONLY_DIGITS } from 'input-otp'
import { RotateCcwIcon } from 'lucide-react'
import { Button } from '@/components/ui/button'
import {
  Card,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from '@/components/ui/card'
import { Field, FieldDescription, FieldLabel } from '@/components/ui/field'
import { InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot } from '@/components/ui/input-otp'

const Slots = ({
  from = 0,
  count,
  ...props
}: { from?: number; count: number } & Partial<React.ComponentProps<typeof InputOTPSlot>>) => (
  <InputOTPGroup>
    {Array.from({ length: count }, (_, i) => (
      // biome-ignore lint/suspicious/noArrayIndexKey: slots are positional
      <InputOTPSlot key={from + i} {...props} index={from + i} />
    ))}
  </InputOTPGroup>
)

export function InputOtpDemo() {
  return (
    <Card className="w-full max-w-sm">
      <CardHeader>
        <CardTitle>Confirm your email</CardTitle>
        <CardDescription>
          We sent a 6-digit code to <span className="font-medium text-foreground">sofia.berg@example.se</span>.
        </CardDescription>
      </CardHeader>
      <CardContent>
        <Field>
          <FieldLabel htmlFor="otp-default">Verification code</FieldLabel>
          <InputOTP id="otp-default" maxLength={6} pattern={REGEXP_ONLY_DIGITS}>
            <Slots count={3} />
            <InputOTPSeparator className="mx-2" />
            <Slots from={3} count={3} />
          </InputOTP>
          <FieldDescription>The code is valid for 10 minutes.</FieldDescription>
        </Field>
      </CardContent>
      <CardFooter className="justify-between gap-2">
        <Button variant="ghost" size="sm">
          <RotateCcwIcon data-icon="inline-start" />
          Send a new code
        </Button>
        <Button size="sm">Confirm</Button>
      </CardFooter>
    </Card>
  )
}

With Separator

Visual separator between two groups of slots.

import { InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot } from '@/components/ui/input-otp'

export function InputOtpWithSeparator() {
  return (
    <InputOTP maxLength={6} aria-label="Verification code">
      <InputOTPGroup>
        <InputOTPSlot index={0} />
        <InputOTPSlot index={1} />
        <InputOTPSlot index={2} />
      </InputOTPGroup>
      <InputOTPSeparator className="mx-2" />
      <InputOTPGroup>
        <InputOTPSlot index={3} />
        <InputOTPSlot index={4} />
        <InputOTPSlot index={5} />
      </InputOTPGroup>
    </InputOTP>
  )
}

Multiple Separators

Pairs of digits, here for a date of birth.

import { REGEXP_ONLY_DIGITS } from 'input-otp'
import { Field, FieldDescription, FieldLabel } from '@/components/ui/field'
import { InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot } from '@/components/ui/input-otp'

const Slots = ({
  from = 0,
  count,
  ...props
}: { from?: number; count: number } & Partial<React.ComponentProps<typeof InputOTPSlot>>) => (
  <InputOTPGroup>
    {Array.from({ length: count }, (_, i) => (
      // biome-ignore lint/suspicious/noArrayIndexKey: slots are positional
      <InputOTPSlot key={from + i} {...props} index={from + i} />
    ))}
  </InputOTPGroup>
)

export function InputOtpMultipleSeparators() {
  return (
    <Field className="w-auto">
      <FieldLabel htmlFor="otp-birthdate">Child’s date of birth</FieldLabel>
      <InputOTP id="otp-birthdate" maxLength={6} pattern={REGEXP_ONLY_DIGITS}>
        <Slots from={0} count={2} />
        <InputOTPSeparator className="mx-1" />
        <Slots from={2} count={2} />
        <InputOTPSeparator className="mx-1" />
        <Slots from={4} count={2} />
      </InputOTP>
      <FieldDescription>YY – MM – DD</FieldDescription>
    </Field>
  )
}

Patterns

pattern restricts which characters are accepted: digits only, letters only, or digits and letters.

import { REGEXP_ONLY_CHARS, REGEXP_ONLY_DIGITS, REGEXP_ONLY_DIGITS_AND_CHARS } from 'input-otp'
import { Field, FieldDescription, FieldLabel } from '@/components/ui/field'
import { InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot } from '@/components/ui/input-otp'

const Slots = ({
  from = 0,
  count,
  ...props
}: { from?: number; count: number } & Partial<React.ComponentProps<typeof InputOTPSlot>>) => (
  <InputOTPGroup>
    {Array.from({ length: count }, (_, i) => (
      // biome-ignore lint/suspicious/noArrayIndexKey: slots are positional
      <InputOTPSlot key={from + i} {...props} index={from + i} />
    ))}
  </InputOTPGroup>
)

export function InputOtpPatterns() {
  return (
    <div className="flex w-full max-w-md flex-col gap-6">
      <Field>
        <FieldLabel htmlFor="otp-digits">Code from SMS</FieldLabel>
        <InputOTP id="otp-digits" maxLength={6} pattern={REGEXP_ONLY_DIGITS}>
          <Slots count={6} />
        </InputOTP>
        <FieldDescription>
          <code>REGEXP_ONLY_DIGITS</code> — only 0–9 are accepted.
        </FieldDescription>
      </Field>
      <Field>
        <FieldLabel htmlFor="otp-letters">Locker code, Aquarena swimming hall</FieldLabel>
        <InputOTP id="otp-letters" maxLength={4} pattern={REGEXP_ONLY_CHARS}>
          <Slots count={4} className="uppercase" />
        </InputOTP>
        <FieldDescription>
          <code>REGEXP_ONLY_CHARS</code> — only letters are accepted.
        </FieldDescription>
      </Field>
      <Field>
        <FieldLabel htmlFor="otp-alnum">Activation code from your letter</FieldLabel>
        <InputOTP id="otp-alnum" maxLength={8} pattern={REGEXP_ONLY_DIGITS_AND_CHARS}>
          <Slots count={4} className="uppercase" />
          <InputOTPSeparator className="mx-1" />
          <Slots from={4} count={4} className="uppercase" />
        </InputOTP>
        <FieldDescription>
          <code>REGEXP_ONLY_DIGITS_AND_CHARS</code> — letters and digits.
        </FieldDescription>
      </Field>
    </div>
  )
}

Controlled

Controlled OTP input with external state management.

import { REGEXP_ONLY_DIGITS } from 'input-otp'
import { useState } from 'react'
import { Field, FieldDescription, FieldLabel } from '@/components/ui/field'
import { InputOTP, InputOTPGroup, InputOTPSlot } from '@/components/ui/input-otp'

const Slots = ({
  from = 0,
  count,
  ...props
}: { from?: number; count: number } & Partial<React.ComponentProps<typeof InputOTPSlot>>) => (
  <InputOTPGroup>
    {Array.from({ length: count }, (_, i) => (
      // biome-ignore lint/suspicious/noArrayIndexKey: slots are positional
      <InputOTPSlot key={from + i} {...props} index={from + i} />
    ))}
  </InputOTPGroup>
)

export function InputOtpControlled() {
  const [value, setValue] = useState('')

  return (
    <Field className="w-auto items-center">
      <FieldLabel htmlFor="otp-controlled">Access code for the recycling centre</FieldLabel>
      <InputOTP id="otp-controlled" maxLength={6} pattern={REGEXP_ONLY_DIGITS} value={value} onChange={setValue}>
        <Slots count={6} />
      </InputOTP>
      <FieldDescription className="text-center" aria-live="polite">
        {value === '' ? 'Type the code shown in the app.' : `${value.length} of 6 digits entered`}
      </FieldDescription>
    </Field>
  )
}

Disabled

OTP input in disabled state with a pre-filled value.

import { Field, FieldDescription, FieldLabel } from '@/components/ui/field'
import { InputOTP, InputOTPGroup, InputOTPSlot } from '@/components/ui/input-otp'

const Slots = ({
  from = 0,
  count,
  ...props
}: { from?: number; count: number } & Partial<React.ComponentProps<typeof InputOTPSlot>>) => (
  <InputOTPGroup>
    {Array.from({ length: count }, (_, i) => (
      // biome-ignore lint/suspicious/noArrayIndexKey: slots are positional
      <InputOTPSlot key={from + i} {...props} index={from + i} />
    ))}
  </InputOTPGroup>
)

export function InputOtpDisabled() {
  return (
    <Field data-disabled="true" className="w-auto">
      <FieldLabel htmlFor="otp-disabled">Verification code</FieldLabel>
      <InputOTP id="otp-disabled" maxLength={6} disabled defaultValue="482915">
        <Slots count={6} />
      </InputOTP>
      <FieldDescription>Code confirmed at 09:42.</FieldDescription>
    </Field>
  )
}

Invalid

Set aria-invalid on the slots to show the error state, and describe the error with FieldError.

import { Field, FieldError, FieldLabel } from '@/components/ui/field'
import { InputOTP, InputOTPGroup, InputOTPSlot } from '@/components/ui/input-otp'

const Slots = ({
  from = 0,
  count,
  ...props
}: { from?: number; count: number } & Partial<React.ComponentProps<typeof InputOTPSlot>>) => (
  <InputOTPGroup>
    {Array.from({ length: count }, (_, i) => (
      // biome-ignore lint/suspicious/noArrayIndexKey: slots are positional
      <InputOTPSlot key={from + i} {...props} index={from + i} />
    ))}
  </InputOTPGroup>
)

export function InputOtpInvalid() {
  return (
    <Field data-invalid="true" className="w-auto">
      <FieldLabel htmlFor="otp-invalid">Verification code</FieldLabel>
      <InputOTP id="otp-invalid" maxLength={6} defaultValue="481952" aria-describedby="otp-invalid-error">
        <Slots count={6} aria-invalid />
      </InputOTP>
      <FieldError id="otp-invalid-error">The code is incorrect. You have 2 attempts left.</FieldError>
    </Field>
  )
}

Custom Length

A 4-digit PIN.

import { REGEXP_ONLY_DIGITS } from 'input-otp'
import { Field, FieldDescription, FieldLabel } from '@/components/ui/field'
import { InputOTP, InputOTPGroup, InputOTPSlot } from '@/components/ui/input-otp'

const Slots = ({
  from = 0,
  count,
  ...props
}: { from?: number; count: number } & Partial<React.ComponentProps<typeof InputOTPSlot>>) => (
  <InputOTPGroup>
    {Array.from({ length: count }, (_, i) => (
      // biome-ignore lint/suspicious/noArrayIndexKey: slots are positional
      <InputOTPSlot key={from + i} {...props} index={from + i} />
    ))}
  </InputOTPGroup>
)

export function InputOtpCustomLength() {
  return (
    <Field className="w-auto">
      <FieldLabel htmlFor="otp-pin">Library card PIN</FieldLabel>
      <InputOTP id="otp-pin" maxLength={4} pattern={REGEXP_ONLY_DIGITS}>
        <Slots count={4} />
      </InputOTP>
      <FieldDescription>4 digits, used at the self-service kiosks.</FieldDescription>
    </Field>
  )
}

With Completion

onComplete fires when all slots are filled — here it signs an application and shows the result.

import { REGEXP_ONLY_DIGITS } from 'input-otp'
import { CheckCircle2Icon, RotateCcwIcon } from 'lucide-react'
import { useState } from 'react'
import { Badge } from '@/components/ui/badge'
import { Button } from '@/components/ui/button'
import {
  Card,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from '@/components/ui/card'
import { Spinner } from '@/components/ui/spinner'
import { InputOTP, InputOTPGroup, InputOTPSlot } from '@/components/ui/input-otp'

const Slots = ({
  from = 0,
  count,
  ...props
}: { from?: number; count: number } & Partial<React.ComponentProps<typeof InputOTPSlot>>) => (
  <InputOTPGroup>
    {Array.from({ length: count }, (_, i) => (
      // biome-ignore lint/suspicious/noArrayIndexKey: slots are positional
      <InputOTPSlot key={from + i} {...props} index={from + i} />
    ))}
  </InputOTPGroup>
)

export function InputOtpWithCompletion() {
  const [value, setValue] = useState('')
  const [status, setStatus] = useState<'idle' | 'checking' | 'done'>('idle')

  const verify = () => {
    setStatus('checking')
    window.setTimeout(() => setStatus('done'), 1200)
  }

  return (
    <Card className="w-full max-w-sm">
      <CardHeader>
        <CardTitle>Sign the application</CardTitle>
        <CardDescription>Enter the code we sent to +46 70 ••• •• 18 to sign as guardian.</CardDescription>
      </CardHeader>
      <CardContent className="flex flex-col items-center gap-3">
        <InputOTP
          aria-label="Signing code"
          maxLength={6}
          pattern={REGEXP_ONLY_DIGITS}
          value={value}
          onChange={(next) => {
            setValue(next)
            setStatus('idle')
          }}
          onComplete={verify}
          disabled={status !== 'idle'}
        >
          <Slots count={6} />
        </InputOTP>
        <div className="flex h-5 items-center text-sm text-muted-foreground" aria-live="polite">
          {status === 'idle' && 'Signs automatically when all six digits are entered.'}
          {status === 'checking' && (
            <span className="flex items-center gap-2">
              <Spinner />
              Verifying…
            </span>
          )}
          {status === 'done' && (
            <Badge variant="secondary">
              <CheckCircle2Icon data-icon="inline-start" />
              Signed
            </Badge>
          )}
        </div>
      </CardContent>
      <CardFooter className="justify-center">
        <Button
          variant="link"
          size="sm"
          onClick={() => {
            setValue('')
            setStatus('idle')
          }}
        >
          <RotateCcwIcon data-icon="inline-start" />
          Start over
        </Button>
      </CardFooter>
    </Card>
  )
}

Props

InputOTP (Root)

maxLength: number - Maximum number of characters (required)
value?: string - The controlled value of the input
onChange?: (value: string) => void - Callback fired when value changes
onComplete?: (value: string) => void - Callback fired when all slots are filled
pattern?: string - Regex source string to validate input characters
disabled?: boolean - Whether the input is disabled
autoFocus?: boolean - Whether to auto-focus the first slot
containerClassName?: string - CSS class for the container element
children - InputOTPGroup / InputOTPSlot / InputOTPSeparator elements (or use the lower-level render prop of input-otp)

InputOTPGroup

Extends standard div props
Used to group related slots together
Provides consistent layout and shows the error ring when a slot has aria-invalid

InputOTPSlot

index: number - The slot index (required). The character, active state and caret are read from the InputOTP context.
aria-invalid - Shows the destructive error state
Extends standard div props

InputOTPSeparator

Extends standard div props (role="separator")
Renders a minus icon between groups
Can be customized with CSS classes for styling

Patterns

The component supports common input patterns:

import { REGEXP_ONLY_DIGITS, REGEXP_ONLY_CHARS, REGEXP_ONLY_DIGITS_AND_CHARS } from 'input-otp'

// Numbers only (0-9)
<InputOTP pattern={REGEXP_ONLY_DIGITS} />

// Letters only (a-z, A-Z)
<InputOTP pattern={REGEXP_ONLY_CHARS} />

// Digits and letters
<InputOTP pattern={REGEXP_ONLY_DIGITS_AND_CHARS} />

// Custom pattern
<InputOTP pattern="^[a-fA-F0-9]+$" />

Accessibility

The Input OTP component follows WCAG 2.1 guidelines and provides:

Proper ARIA labels and descriptions
Keyboard navigation support:
- ←/→: Navigate between slots
- Backspace: Delete character and move to previous slot
- Delete: Delete character in current slot
- Home/End: Move to first/last slot
- Ctrl+A: Select all text
- Ctrl+V: Paste clipboard content
Focus management with visual indicators
Screen reader announcements for value changes
Support for disabled states
High contrast visual feedback

Best Practices

Length and Grouping
- Use appropriate maxLength based on your use case (4-8 characters common)
- Group related digits with InputOTPGroup for better visual organization
- Use separators to break up longer codes (e.g., 3-3 for 6-digit codes)
Validation
- Use pattern validation to restrict input types (digits, letters, alphanumeric)
- Provide clear feedback about expected input format
- Validate on completion rather than per-character for better UX
User Experience
- Enable auto-focus for immediate input capability
- Provide clear instructions about expected code format
- Show loading states during verification
- Handle paste operations gracefully
Security
- Clear sensitive values after use
- Consider auto-submit on completion for better flow
- Implement rate limiting on the backend
- Use HTTPS for all OTP-related communications
Error Handling
- Show clear error messages for invalid codes
- Allow users to easily clear and re-enter codes
- Provide resend functionality with appropriate cooldown
- Handle network errors gracefully

Common Use Cases

Two-Factor Authentication: 6-digit TOTP codes
SMS Verification: 4-6 digit SMS codes
PIN Entry: 4-digit PINs for secure access
Backup Codes: 8-character alphanumeric recovery codes
Email Verification: Variable length verification codes

Input
Form
Label
Button

Input OTP

Installation

Features

Usage

Examples

Default

With Separator

Multiple Separators

Patterns

Controlled

Disabled

Invalid

Custom Length

With Completion

Props

InputOTP (Root)

InputOTPGroup

InputOTPSlot

InputOTPSeparator

Patterns

Accessibility

Best Practices

Common Use Cases

Related Components