## Overview [#overview] The `InputOTP` component provides a user-friendly interface for entering one-time passwords or verification codes. It features animated character slots, customizable grouping with separators, and supports validation states. ## Usage [#usage] ```tsx import { InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, } from "@tilt-legal/cubitt-components/primitives"; ``` ```tsx ``` ## Examples [#examples] ### Basic [#basic] A basic OTP input with two groups separated by a dash. ```tsx import { InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, } from "@tilt-legal/cubitt-components/primitives"; ; ``` ### With Multiple Separators [#with-multiple-separators] OTP input with multiple groups and separators for credit card-style formatting. ```tsx import { InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, } from "@tilt-legal/cubitt-components/primitives"; ; ``` ### Numbers Only [#numbers-only] OTP input restricted to numeric characters only using a regex pattern. ```tsx import { InputOTP, InputOTPGroup, InputOTPSlot } from "@tilt-legal/cubitt-components/primitives"; ; ``` ### Invalid State [#invalid-state] OTP input showing an invalid/error state. ```tsx import { InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, } from "@tilt-legal/cubitt-components/primitives"; ; ``` ### Disabled [#disabled] OTP input in a disabled state. ```tsx import { InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, } from "@tilt-legal/cubitt-components/primitives"; ; ``` *** ## API Reference [#api-reference] ### InputOTP [#inputotp] The root component that manages the OTP input state. Built on [input-otp](https://input-otp.rodz.dev). | Prop | Type | Default | Description | | -------------------- | ------------------------- | ------- | ---------------------------------------- | | `maxLength` | `number` | - | Maximum number of characters (required) | | `value` | `string` | - | Controlled value | | `onChange` | `(value: string) => void` | - | Callback when value changes | | `onComplete` | `(value: string) => void` | - | Callback when all slots are filled | | `pattern` | `string` | - | Regex pattern for allowed characters | | `invalid` | `boolean` | `false` | Shows invalid/error styling on all slots | | `disabled` | `boolean` | `false` | Disables the input | | `containerClassName` | `string` | - | Class name for the container element | ### InputOTPGroup [#inputotpgroup] Groups slots together visually. | Prop | Type | Default | Description | | ----------- | -------- | ------- | ---------------------- | | `className` | `string` | - | Additional CSS classes | ### InputOTPSlot [#inputotpslot] Individual character slot that displays a single character. | Prop | Type | Default | Description | | ----------- | -------- | ------- | ------------------------------ | | `index` | `number` | - | Slot position index (required) | | `className` | `string` | - | Additional CSS classes | ### InputOTPSeparator [#inputotpseparator] Visual separator between slot groups. | Prop | Type | Default | Description | | ----------- | -------- | ------- | ---------------------- | | `className` | `string` | - | Additional CSS classes |