# Input OTP

Separate slots that behave like one input. Typing moves forward, paste fills every slot.

Tier: Free

## Installation

```bash
npx shadcn add @fetaui/input-otp
```

## Usage

```tsx
import { InputOTP } from '@/components/fetaui/input-otp'

export function Example() {
  return <InputOTP onComplete={verify} />
}
```

## API

| Prop | Type | Default |
|---|---|---|
| pattern | six-digits, four-pin, alphanumeric | six-digits |
| value | string |  |
| defaultValue | string |  |
| onValueChange | (value) => void |  |
| onComplete | (value) => void |  |
| invalid | boolean | false |
| disabled | boolean | false |
| animated | boolean | true |

## When to use

- For codes sent by email or SMS, and for short PINs.

## When not to use

- For passwords: use Input.

## Accessibility

- One input with autocomplete one-time-code, split visually into slots.
- Digits are numeric on phones for digit patterns.

## Motion

- Each digit drops 6 px into its slot in 120 ms and the ring hops forward.
- Paste fills left to right, 40 ms apart.
- With reduced motion, digits appear at once.