laif-ds/dist/agent-docs/components/InputOtp.md

Design System di Laif con componenti React basati su principi di Atomic Design

# InputOtp

## Overview

OTP (One-Time Password) input built on `input-otp`. Includes grouped slots and an optional separator.

---

## Exports

- `InputOTP` (accepts all `input-otp` props, plus `containerClassName`)
- `InputOTPGroup`
- `InputOTPSlot` (requires `index: number`)
- `InputOTPSeparator`

---

## Example

```tsx
import { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator } from "laif-ds";

export function OtpExample() {
  return (
    <InputOTP maxLength={6} containerClassName="w-full justify-center">
      <InputOTPGroup>
        {Array.from({ length: 3 }).map((_, i) => (
          <InputOTPSlot key={i} index={i} />
        ))}
      </InputOTPGroup>
      <InputOTPSeparator />
      <InputOTPGroup>
        {Array.from({ length: 3 }).map((_, i) => (
          <InputOTPSlot key={i + 3} index={i + 3} />
        ))}
      </InputOTPGroup>
    </InputOTP>
  );
}
```