# Input OTP

> Segmented one-time-code entry.

Import from `@aspyn-io/kit`. Scaffold source: `npx shadcn@latest add https://design.aspyn.io/r/input-otp.json`

## Install

```tsx
import { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator } from "@aspyn-io/kit";
```

### Six-digit verification

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

Restrict what can be typed with the pattern prop. input-otp ships REGEXP_ONLY_DIGITS, REGEXP_ONLY_CHARS, and REGEXP_ONLY_DIGITS_AND_CHARS.

```tsx
import { REGEXP_ONLY_DIGITS } from "input-otp";

<InputOTP maxLength={6} pattern={REGEXP_ONLY_DIGITS}>
  <InputOTPGroup>
    <InputOTPSlot index={0} />
    {/* … */}
    <InputOTPSlot index={5} />
  </InputOTPGroup>
</InputOTP>
```

### Controlled

Drive the value with value + onChange to read digits as they are typed.

```tsx
const [value, setValue] = React.useState("");

<InputOTP maxLength={6} value={value} onChange={setValue}>
  <InputOTPGroup>
    <InputOTPSlot index={0} />
    {/* … */}
    <InputOTPSlot index={5} />
  </InputOTPGroup>
</InputOTP>
<p>Entered: {value}</p>
```

### Disabled

```tsx
<InputOTP maxLength={6} disabled>
  <InputOTPGroup>
    <InputOTPSlot index={0} />
    {/* … */}
    <InputOTPSlot index={5} />
  </InputOTPGroup>
</InputOTP>
```

## Notes

- Controlled: value + onChange; fires onComplete when all slots fill.
- Paste, arrow keys, and screen-reader announcements handled by input-otp.