## 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/input-otp"; ``` ```tsx ``` ## Examples [#examples] ### 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/input-otp"; ; ``` ### 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/input-otp"; ; ``` ### States [#states] Switch between default, error, and disabled states. ```tsx import { InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, } from "@tilt-legal/cubitt-components/input-otp"; const states = ["default", "invalid", "disabled"] as const; const [state, setState] = useState<"default" | "invalid" | "disabled">("default"); <> { if (states.includes(value as (typeof states)[number])) { setState(value as (typeof states)[number]); } }} value={state} > Default Error Disabled ; ``` *** ## 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 and sets `aria-invalid` | | `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 |