Input OTP

Composable one-time-password input primitive with direction-aware keyboard navigation and paste support.

import * as InputOTP from '@gentleduck/primitives/input-otp'

import * as InputOTP from '@gentleduck/primitives/input-otp'

Anatomy

<InputOTP.Root>
  <InputOTP.Group>
    <InputOTP.Slot />
  </InputOTP.Group>
  <InputOTP.Separator />
</InputOTP.Root>

<InputOTP.Root>
  <InputOTP.Group>
    <InputOTP.Slot />
  </InputOTP.Group>
  <InputOTP.Separator />
</InputOTP.Root>

Example

<InputOTP.Root maxLength={6} dir="rtl">
  <InputOTP.Group>
    <InputOTP.Slot />
    <InputOTP.Slot />
    <InputOTP.Slot />
  </InputOTP.Group>
  <InputOTP.Separator>-</InputOTP.Separator>
  <InputOTP.Group>
    <InputOTP.Slot />
    <InputOTP.Slot />
    <InputOTP.Slot />
  </InputOTP.Group>
</InputOTP.Root>

<InputOTP.Root maxLength={6} dir="rtl">
  <InputOTP.Group>
    <InputOTP.Slot />
    <InputOTP.Slot />
    <InputOTP.Slot />
  </InputOTP.Group>
  <InputOTP.Separator>-</InputOTP.Separator>
  <InputOTP.Group>
    <InputOTP.Slot />
    <InputOTP.Slot />
    <InputOTP.Slot />
  </InputOTP.Group>
</InputOTP.Root>

API

`InputOTP.Root`

Prop	Type	Default	Description
`value`	`string`	-	Controlled OTP value
`onValueChange`	`(value: string) => void`	-	Called when slot values change
`pattern`	`RegExp`	`/^.$/`	Validates each entered character
`maxLength`	`number`	-	Optional cap for active slots used by keyboard/paste behavior
`dir`	`'ltr' \| 'rtl'`	inherited	Local direction override
`name`	`string`	-	Name for form submission
`...props`	`React.ComponentPropsWithoutRef<'div'>`	-	Additional root props

`InputOTP.Group`

Prop	Type	Default	Description
`...props`	`React.ComponentPropsWithoutRef<'div'>`	-	Additional group props

`InputOTP.Slot`

Prop	Type	Default	Description
`maxLength`	`number`	`1`	Maximum characters for slot input
`...props`	`React.ComponentPropsWithoutRef<'input'>`	-	Additional input props

`InputOTP.Separator`

Prop	Type	Default	Description
`customIndicator`	`React.ReactNode`	-	Custom separator content
`children`	`React.ReactNode`	-	Fallback separator content
`...props`	`React.ComponentPropsWithoutRef<'div'>`	-	Additional separator props

Exports

InputOTP.Root, InputOTP.Group, InputOTP.Slot, InputOTP.Separator
REGEXP_ONLY_DIGITS
REGEXP_ONLY_DIGITS_AND_CHARS