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