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

## Anatomy

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

## Example

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