Input OTP | Bearnie

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

Installation

npx bearnie add input-otp

Usage

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

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

Pattern

Use the pattern prop to define what characters are allowed in the OTP input.

Digits only (default)

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

Alphanumeric

Use pattern="alphanumeric" to accept both letters and numbers.

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

Examples

Separator

Use the InputOTPSeparator component to add a separator between input groups.

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

Disabled

Use the disabled prop to disable the input.

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

Invalid

Use invalid on the slots to show an error state.

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

Four digits

A common pattern for PIN codes.

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

Custom separator

You can pass custom content to the separator.

<InputOTP maxLength={6}>
  <InputOTPGroup>
    <InputOTPSlot index={0} />
    <InputOTPSlot index={1} />
    <InputOTPSlot index={2} />
  </InputOTPGroup>
  <InputOTPSeparator>
    <span class="text-muted-foreground">-</span>
  </InputOTPSeparator>
  <InputOTPGroup>
    <InputOTPSlot index={3} />
    <InputOTPSlot index={4} />
    <InputOTPSlot index={5} />
  </InputOTPGroup>
</InputOTP>

Anatomy

InputOTP - The main container that manages OTP state
InputOTPGroup - Groups slots together with connected styling
InputOTPSlot - Individual input slot for each digit
InputOTPSeparator - Visual separator between groups

Props

InputOTP

Prop	Type	Default	Description
maxLength	number	required	Maximum length of the OTP (number of slots)
pattern	digits \| alphanumeric \| string	digits	Pattern to validate input
disabled	boolean	false	Disables all slots
value	string	-	Initial value
name	string	-	Name attribute for form submission
class	string	-	Additional CSS classes

InputOTPGroup

Prop	Type	Default	Description
class	string	-	Additional CSS classes

InputOTPSlot

Prop	Type	Default	Description
index	number	required	Index of the slot (0-based)
invalid	boolean	false	Shows error state
class	string	-	Additional CSS classes

InputOTPSeparator

Prop	Type	Default	Description
class	string	-	Additional CSS classes