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

import InputOTP from "@/components/ui/input-otp/InputOTP.astro";
import InputOTPGroup from "@/components/ui/input-otp/InputOTPGroup.astro";
import InputOTPSlot from "@/components/ui/input-otp/InputOTPSlot.astro";
import InputOTPSeparator from "@/components/ui/input-otp/InputOTPSeparator.astro";

Usage

import {
InputOTP,
InputOTPGroup,
InputOTPSlot,
InputOTPSeparator,
} from "@/components/ui"

<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