### Install Dependencies

Source: https://github.com/guilhermerodz/input-otp/blob/master/CLAUDE.md

Installs all project dependencies using pnpm.

```bash
pnpm install
```

--------------------------------

### Install input-otp with npm

Source: https://github.com/guilhermerodz/input-otp/blob/master/_autodocs/QUICK_START.md

Install the input-otp package using npm. This command should be run in your project's root directory.

```bash
npm install input-otp
```

--------------------------------

### Development Mode

Source: https://github.com/guilhermerodz/input-otp/blob/master/CLAUDE.md

Starts the development server for all packages.

```bash
pnpm dev
```

--------------------------------

### Run Development Server

Source: https://github.com/guilhermerodz/input-otp/blob/master/apps/website/README.md

Use one of these commands to start the development server. Open http://localhost:3000 to view the app.

```bash
npm run dev
```

```bash
yarn dev
```

```bash
pnpm dev
```

```bash
bun dev
```

--------------------------------

### Usage Example for SlotProps

Source: https://github.com/guilhermerodz/input-otp/blob/master/_autodocs/types.md

Example of how to use the SlotProps interface to render an individual OTP slot. It conditionally applies styling based on `isActive` and displays the character or placeholder.

```tsx
function Slot({ char, isActive, hasFakeCaret, placeholderChar }: SlotProps) {
  return (
    <div className={isActive ? 'ring-2 ring-blue-500' : ''}>
      {char ?? placeholderChar}
      {hasFakeCaret && <div className="animate-blink">|</div>}
    </div>
  )
}
```

--------------------------------

### Run Development Server

Source: https://github.com/guilhermerodz/input-otp/blob/master/apps/playground/README.md

Use these commands to start the development server for the Next.js project. Open http://localhost:3000 in your browser to view the application.

```bash
npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev
```

--------------------------------

### Default OTP Input Example with Tailwind CSS

Source: https://github.com/guilhermerodz/input-otp/blob/master/README.md

A comprehensive example demonstrating the OTPInput component with Tailwind CSS, @shadcn/ui, tailwind-merge, and clsx. It includes custom Slot, FakeCaret, and FakeDash components for enhanced UI.

```tsx
'use client'
import { OTPInput, SlotProps } from 'input-otp'

<OTPInput
  maxLength={6}
  containerClassName="group flex items-center has-[:disabled]:opacity-30"
  render={({ slots }) => (
    <>
      <div className="flex">
        {slots.slice(0, 3).map((slot, idx) => (
          <Slot key={idx} {...slot} />
        ))}
      </div>

      <FakeDash />

      <div className="flex">
        {slots.slice(3).map((slot, idx) => (
          <Slot key={idx} {...slot} />
        ))}
      </div>
    </>
  )}
/>

// Feel free to copy. Uses @shadcn/ui tailwind colors.
function Slot(props: SlotProps) {
  return (
    <div
      className={cn(
        'relative w-10 h-14 text-[2rem]',
        'flex items-center justify-center',
        'transition-all duration-300',
        'border-border border-y border-r first:border-l first:rounded-l-md last:rounded-r-md',
        'group-hover:border-accent-foreground/20 group-focus-within:border-accent-foreground/20',
        'outline outline-0 outline-accent-foreground/20',
        { 'outline-4 outline-accent-foreground': props.isActive },
      )}
    >
      <div className="group-has-[input[data-input-otp-placeholder-shown]]:opacity-20">
        {props.char ?? props.placeholderChar}
      </div>
      {props.hasFakeCaret && <FakeCaret />}
    </div>
  )
}

// You can emulate a fake textbox caret!
function FakeCaret() {
  return (
    <div className="absolute pointer-events-none inset-0 flex items-center justify-center animate-caret-blink">
      <div className="w-px h-8 bg-white" />
    </div>
  )
}

// Inspired by Stripe's MFA input.
function FakeDash() {
  return (
    <div className="flex w-10 justify-center items-center">
      <div className="w-3 h-1 rounded-full bg-border" />
    </div>
  )
}

// tailwind.config.ts for the blinking caret animation.
const config = {
  theme: {
    extend: {
      keyframes: {
        'caret-blink': {
          '0%,70%,100%': { opacity: '1' },
          '20%,50%': { opacity: '0' },
        },
      },
      animation: {
        'caret-blink': 'caret-blink 1.2s ease-out infinite',
      },
    },
  },
}

// Small utility to merge class names.
import { clsx } from 'clsx'
import { twMerge } from 'tailwind-merge'

import type { ClassValue } from 'clsx'

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs))
}

```

--------------------------------

### Basic Usage

Source: https://github.com/guilhermerodz/input-otp/blob/master/_autodocs/README.md

Demonstrates how to install and use the OTPInput component for basic OTP input functionality.

```APIDOC
## Installation

```bash
npm install input-otp
```

## Basic Usage

```tsx
'use client'
import { OTPInput } from 'input-otp'

function OTPForm() {
  return (
    <OTPInput
      maxLength={6}
      render={({ slots }) => (
        <div className="flex gap-2">
          {slots.map((slot, idx) => (
            <div key={idx} className="w-10 h-12 border p-2">
              {slot.char}
            </div>
          ))}
        </div>
      )}
    />
  )
}
```
```

--------------------------------

### Playground Development Mode

Source: https://github.com/guilhermerodz/input-otp/blob/master/CLAUDE.md

Starts the development server specifically for the playground application.

```bash
pnpm dev:playground
```

--------------------------------

### Complete Validation Example with Server-Side Check

Source: https://github.com/guilhermerodz/input-otp/blob/master/_autodocs/api-reference/input-validation.md

An advanced example showing custom validation logic within `handleChange` and asynchronous server-side verification in `handleComplete`. Errors are managed and displayed to the user.

```tsx
function AdvancedValidation() {
  const [value, setValue] = useState('')
  const [errors, setErrors] = useState<string[]>([])

  const validate = (newValue: string) => {
    const errs: string[] = []
    
    if (newValue.length > 0 && !/^\\d+$/.test(newValue)) {
      errs.push('Only digits allowed')
    }
    
    if (newValue.length === 6) {
      // Additional validation for complete OTP
      if (newValue === '000000') {
        errs.push('Invalid OTP pattern')
      }
    }
    
    setErrors(errs)
    return errs.length === 0
  }

  const handleChange = (newValue: string) => {
    if (validate(newValue)) {
      setValue(newValue)
    }
  }

  const handleComplete = async (otp: string) => {
    // Server-side validation
    try {
      const res = await fetch('/verify-otp', {
        method: 'POST',
        body: JSON.stringify({ otp })
      })
      
      if (!res.ok) {
        setErrors(['Invalid or expired OTP'])
      }
    } catch (err) {
      setErrors(['Verification failed'])
    }
  }

  return (
    <div>
      <OTPInput
        maxLength={6}
        value={value}
        onChange={handleChange}
        onComplete={handleComplete}
        pattern="^\\d+$"
        render={({ slots }) => (
          <div className="flex gap-2">
            {slots.map((slot, idx) => (
              <div key={idx} className="w-10 h-12 border">
                {slot.char}
              </div>
            ))}
          </div>
        )}
      />
      
      {errors.length > 0 && (
        <div className="text-red-500 text-sm mt-2">
          {errors.map((err, idx) => (
            <p key={idx}>• {err}</p>
          ))}
        </div>
      )}
      
      {value.length === 6 && errors.length === 0 && (
        <p className="text-green-500 text-sm mt-2">✓ Valid OTP format</p>
      )}
    </div>
  )
}
```

--------------------------------

### OTPInputContext Usage Example

Source: https://github.com/guilhermerodz/input-otp/blob/master/_autodocs/exports.md

Demonstrates how to consume OTPInputContext within a component to access render props and how to nest a custom component within OTPInput.

```typescript
function MyComponent() {
  const renderProps = useContext(OTPInputContext)
  return <div>{renderProps.slots.map(...)}</div>
}

<OTPInput maxLength={6}>
  <MyComponent />
</OTPInput>
```

--------------------------------

### Advanced Slot Rendering with Context

Source: https://github.com/guilhermerodz/input-otp/blob/master/_autodocs/api-reference/OTPInputContext.md

An advanced example showcasing how to use OTPInputContext for custom slot rendering, including active states and placeholder characters.

```APIDOC
### Example: Advanced Slot Rendering with Context

```tsx
'use client'
import { OTPInput, OTPInputContext, SlotProps } from 'input-otp'
import { useContext } from 'react'

function OTPForm() {
  return (
    <OTPInput maxLength={6}>
      <SlotGrid />
    </OTPInput>
  )
}

function SlotGrid() {
  const { slots, isFocused, isHovering } = useContext(OTPInputContext)

  return (
    <div className={`flex gap-2 p-4 rounded ${isHovering ? 'bg-gray-100' : ''}`}>
      {slots.map((slot, idx) => (
        <SlotItem key={idx} slot={slot} isActive={slot.isActive} />
      ))}
    </div>
  )
}

function SlotItem({ slot, isActive }: { slot: SlotProps; isActive: boolean }) {
  return (
    <div
      className={`
        w-12 h-14 flex items-center justify-center
        border-2 rounded-lg font-mono text-xl transition-all
        ${isActive ? 'border-blue-500 bg-blue-50' : 'border-gray-300'}`}
    >
      {slot.char ? (
        <span>•</span>
      ) : (
        <span className="text-gray-400">{slot.placeholderChar}</span>
      )}
      {slot.hasFakeCaret && <FakeCaret />}
    </div>
  )
}

function FakeCaret() {
  return (
    <div className="absolute animate-pulse">
      <div className="w-0.5 h-6 bg-blue-500" />
    </div>
  )
}
```
```

--------------------------------

### Zustand State Management for OTP Input

Source: https://github.com/guilhermerodz/input-otp/blob/master/_autodocs/api-reference/form-integration.md

Integrate OTPInput with Zustand for simple state management. This example uses a store to manage the OTP value.

```tsx
import { OTPInput, REGEXP_ONLY_DIGITS } from 'input-otp'
import { create } from 'zustand'

const useOTPStore = create((set) => ({
  otp: '',
  setOTP: (value: string) => set({ otp: value }),
  clearOTP: () => set({ otp: '' })
}))

function OTPWithZustand() {
  const { otp, setOTP } = useOTPStore()

  return (
    <OTPInput
      maxLength={6}
      value={otp}
      onChange={setOTP}
      pattern={REGEXP_ONLY_DIGITS}
      render={({ slots }) => (
        <div className="flex gap-2">
          {slots.map((slot, idx) => (
            <div key={idx} className="w-10 h-12 border">
              {slot.char}
            </div>
          ))}
        </div>
      )}
    />
  )
}
```

--------------------------------

### Basic Paste Transformation Example

Source: https://github.com/guilhermerodz/input-otp/blob/master/_autodocs/api-reference/input-validation.md

This example demonstrates removing hyphens from pasted text using pasteTransformer. It ensures that only digits are accepted by the OTP input.

```tsx
import { OTPInput, REGEXP_ONLY_DIGITS } from 'input-otp'

function OTPWithPaste() {
  return (
    <OTPInput
      maxLength={6}
      pattern={REGEXP_ONLY_DIGITS}
      pasteTransformer={(text) => text.replaceAll('-', '')}
      render={({ slots }) => (
        <div className="flex gap-2">
          {slots.map((slot, idx) => (
            <div key={idx} className="w-10 h-12 border">
              {slot.char}
            </div>
          ))}
        </div>
      )}
    />
  )
}
```

--------------------------------

### Usage Example for RenderProps

Source: https://github.com/guilhermerodz/input-otp/blob/master/_autodocs/types.md

Example of a custom render function using RenderProps to display OTP slots. The `renderFn` receives slot states and focus/hover information to customize the input's appearance.

```tsx
const renderFn = (props: RenderProps) => {
  const { slots, isFocused, isHovering } = props
  
  return (
    <div className={isFocused ? 'focused' : ''}>
      {slots.map((slot, idx) => (
        <div key={idx} className={slot.isActive ? 'active' : ''}>
          {slot.char || slot.placeholderChar}
        </div>
      ))}
    </div>
  )
}

<OTPInput maxLength={6} render={renderFn} />
```

--------------------------------

### Basic OTPInput with TypeScript Types

Source: https://github.com/guilhermerodz/input-otp/blob/master/_autodocs/QUICK_START.md

Demonstrates how to import and use the OTPInput component with TypeScript, including defining props and a custom render function for slots. Ensure you have the 'input-otp' package installed.

```tsx
import { OTPInput, type OTPInputProps, type SlotProps, type RenderProps } from 'input-otp'

const props: OTPInputProps = {
  maxLength: 6,
  render: ({ slots, isFocused }: RenderProps) => (
    <div>
      {slots.map((slot: SlotProps) => (
        <div key={slot.char}>{slot.char}</div>
      ))}
    </div>
  )
}
```

--------------------------------

### OTP Pattern Validation Examples

Source: https://github.com/guilhermerodz/input-otp/blob/master/_autodocs/QUICK_START.md

Use the `pattern` prop to define allowed characters for OTP input. Examples include digits only, letters only, alphanumeric, and custom regex patterns.

```tsx
// Digits only
pattern={REGEXP_ONLY_DIGITS}
```

```tsx
// Letters only
pattern={REGEXP_ONLY_CHARS}
```

```tsx
// Alphanumeric
pattern={REGEXP_ONLY_DIGITS_AND_CHARS}
```

```tsx
// Custom pattern
pattern="^[A-F0-9]+"$
```

--------------------------------

### OTPInput with Pattern Validation

Source: https://github.com/guilhermerodz/input-otp/blob/master/_autodocs/api-reference/OTPInput.md

This example demonstrates how to use OTPInput with a specific pattern, such as only allowing digits. The `pattern` prop accepts a regular expression for validation.

```tsx
import { OTPInput, REGEXP_ONLY_DIGITS } from 'input-otp'

function NumericOTP() {
  return (
    <OTPInput
      maxLength={6}
      pattern={REGEXP_ONLY_DIGITS}
      render={({ slots }) => (
        <div className="flex">
          {slots.map((slot, idx) => <div key={idx}>{slot.char}</div>)}
        </div>
      )}
    />
  )
}
```

--------------------------------

### Minimal OTP Input Form Example

Source: https://github.com/guilhermerodz/input-otp/blob/master/_autodocs/QUICK_START.md

A basic React component demonstrating how to use OTPInput for a 6-digit OTP input. It renders read-only input fields for each digit.

```tsx
'use client'
import { OTPInput } from 'input-otp'

export default function OTPForm() {
  return (
    <OTPInput
      maxLength={6}
      render={({ slots }) => (
        <div className="flex gap-2">
          {slots.map((slot, idx) => (
            <input
              key={idx}
              type="text"
              readOnly
              className="w-10 h-12 border text-center"
              value={slot.char || ''}
            />
          ))}
        </div>
      )}
    />
  )
}
```

--------------------------------

### OTPInput using Context API Pattern

Source: https://github.com/guilhermerodz/input-otp/blob/master/_autodocs/api-reference/OTPInput.md

This example shows how to use the `OTPInputContext` to access slot information and focus state within child components. This pattern is useful for complex custom rendering.

```tsx
'use client'
import { OTPInput, OTPInputContext } from 'input-otp'
import { useContext } from 'react'

function OTPForm() {
  return (
    <OTPInput maxLength={6}>
      <SlotContainer />
    </OTPInput>
  )
}

function SlotContainer() {
  const { slots, isFocused } = useContext(OTPInputContext)
  return (
    <div className="flex gap-2">
      {slots.map((slot, idx) => (
        <div key={idx} className="w-10 h-12 border">
          {slot.char}
        </div>
      ))}
    </div>
  )
}
```

--------------------------------

### OTP Input with Placeholder Characters

Source: https://github.com/guilhermerodz/input-otp/blob/master/_autodocs/QUICK_START.md

Display placeholder characters in empty OTP slots using the `placeholder` prop. This example uses dots as placeholders.

```tsx
import { OTPInput } from 'input-otp'

export default function WithPlaceholder() {
  return (
    <OTPInput
      maxLength={6}
      placeholder="•••••"
      render={({ slots }) => (
        <div className="flex gap-2">
          {slots.map((slot, idx) => (
            <div key={idx} className="w-10 h-12 border text-center">
              {slot.char ?? slot.placeholderChar}
            </div>
          ))}
        </div>
      )}
    />
  )
}
```

--------------------------------

### OTP Input with Placeholder Rendering

Source: https://github.com/guilhermerodz/input-otp/blob/master/_autodocs/api-reference/slot-rendering.md

Demonstrates configuring an OTP input with a placeholder string and using the `render` prop to display either the character or the placeholder character for each slot. This is useful for guiding user input.

```tsx
<OTPInput
  maxLength={6}
  placeholder="000000"
  render={({ slots }) => (
    <div className="flex gap-2">
      {slots.map((slot, idx) => (
        <div key={idx} className="w-10 h-12 border text-center">
          {slot.char ?? slot.placeholderChar ?? ''}
        </div>
      ))}
    </div>
  )}
/>
```

--------------------------------

### Displaying OTP Status with Context

Source: https://github.com/guilhermerodz/input-otp/blob/master/_autodocs/api-reference/OTPInputContext.md

Example of a component that reads OTP slot count and focus state from the context to display user-friendly status messages.

```tsx
function StatusDisplay() {
  const { slots, isFocused } = useContext(OTPInputContext)
  const filledCount = slots.filter(s => s.char !== null).length
  
  return (
    <div>
      <p>{filledCount}/{slots.length} digits entered</p>
      <p>{isFocused ? 'Focused' : 'Not focused'}</p>
    </div>
  )
}
```

--------------------------------

### Redux State Management for OTP Input

Source: https://github.com/guilhermerodz/input-otp/blob/master/_autodocs/api-reference/form-integration.md

Integrate OTPInput with Redux for centralized state management. This example assumes you have a Redux store configured with an 'otpSlice'.

```tsx
import { OTPInput, REGEXP_ONLY_DIGITS } from 'input-otp'
import { useDispatch, useSelector } from 'react-redux'
import { setOTP } from './otpSlice'

function OTPWithRedux() {
  const dispatch = useDispatch()
  const otp = useSelector((state) => state.otp.value)

  return (
    <OTPInput
      maxLength={6}
      value={otp}
      onChange={(value) => dispatch(setOTP(value))}
      pattern={REGEXP_ONLY_DIGITS}
      render={({ slots }) => (
        <div className="flex gap-2">
          {slots.map((slot, idx) => (
            <div key={idx} className="w-10 h-12 border">
              {slot.char}
            </div>
          ))}
        </div>
      )}
    />
  )
}
```

--------------------------------

### Multi-Format Support with Paste Transformation

Source: https://github.com/guilhermerodz/input-otp/blob/master/_autodocs/api-reference/input-validation.md

This example shows how to create a flexible paste transformer that handles multiple input formats, converts them to uppercase, removes non-alphanumeric characters, and limits the output to a specific length.

```tsx
function FlexibleOTP() {
  const pasteTransformer = (text: string) => {
    // Remove all non-alphanumeric
    let cleaned = text.replace(/[^a-zA-Z0-9]/g, '')
    // Uppercase
    cleaned = cleaned.toUpperCase()
    // Take first 6 characters
    return cleaned.slice(0, 6)
  }

  return (
    <OTPInput
      maxLength={6}
      pattern="^[A-Z0-9]+$"
      pasteTransformer={pasteTransformer}
      render={({ slots }) => (
        <div className="flex gap-2">
          {slots.map((slot, idx) => (
            <div key={idx} className="w-10 h-12 border uppercase">
              {slot.char}
            </div>
          ))}
        </div>
      )}
    />
  )
}

// Accepts:
// - "AB-CD-EF" → "ABCDEF"
// - "ab cd ef" → "ABCDEF"
// - "abcdef" → "ABCDEF"
// - "12-34-56" → "123456"
```

--------------------------------

### Formik Integration for OTP Input

Source: https://github.com/guilhermerodz/input-otp/blob/master/_autodocs/api-reference/form-integration.md

Use this snippet to integrate OTPInput with Formik for form handling and validation. Ensure Yup is installed for schema validation.

```tsx
import { OTPInput, REGEXP_ONLY_DIGITS } from 'input-otp'
import { Formik, Form } from 'formik'
import * as Yup from 'yup'

const validationSchema = Yup.object().shape({
  otp: Yup.string()
    .required('OTP is required')
    .length(6, 'OTP must be 6 digits')
    .matches(/^\d+$/, 'OTP must contain only digits')
})

function OTPWithFormik() {
  const handleSubmit = (values) => {
    console.log('OTP:', values.otp)
  }

  return (
    <Formik
      initialValues={{ otp: '' }}
      validationSchema={validationSchema}
      onSubmit={handleSubmit}
    >
      {({ values, setFieldValue, errors }) => (
        <Form>
          <OTPInput
            maxLength={6}
            pattern={REGEXP_ONLY_DIGITS}
            value={values.otp}
            onChange={(otp) => setFieldValue('otp', otp)}
            render={({ slots }) => (
              <div className="flex gap-2">
                {slots.map((slot, idx) => (
                  <div key={idx} className="w-10 h-12 border">
                    {slot.char}
                  </div>
                ))}
              </div>
            )}
          />
          {errors.otp && <p style={{ color: 'red' }}>{errors.otp}</p>}
          <button type="submit">Submit</button>
        </Form>
      )}
    </Formik>
  )
}
```

--------------------------------

### OTP Input using Context API

Source: https://github.com/guilhermerodz/input-otp/blob/master/_autodocs/QUICK_START.md

Leverage the Context API for accessing OTP input state and methods within nested components. This example shows how `OTPInputContext` can be used.

```tsx
import { OTPInput, OTPInputContext } from 'input-otp'
import { useContext } from 'react'

export default function ContextExample() {
  return (
    <OTPInput maxLength={6}>
      <SlotDisplay />
    </OTPInput>
  )
}

function SlotDisplay() {
  const { slots, isFocused } = useContext(OTPInputContext)

  return (
    <div className={isFocused ? 'ring-2' : ''}>
      {slots.map((slot, idx) => (
        <div key={idx} className="w-10 h-12 border">
          {slot.char}
        </div>
      ))}
    </div>
  )
}
```

--------------------------------

### Handle Standard Keyboard Events with onKeyDown

Source: https://github.com/guilhermerodz/input-otp/blob/master/_autodocs/api-reference/events-and-refs.md

The component supports standard HTML input events, including `onKeyDown`. This example demonstrates how to trigger an action, like form submission, when the 'Enter' key is pressed.

```tsx
<
OTPInput
  maxLength={6}
  onKeyDown={(e) => {
    if (e.key === 'Enter') {
      submitForm()
    }
  }}
  render={({ slots }) => ...}
/>
```

--------------------------------

### Set Selection Range on OTP Input

Source: https://github.com/guilhermerodz/input-otp/blob/master/_autodocs/api-reference/events-and-refs.md

Demonstrates how to programmatically set the selection range within the OTP input using the `.setSelectionRange` method accessed via the ref. This example selects all text.

```tsx
<button onClick={() => {
  inputRef.current?.setSelectionRange(0, 6)
}}>
  Select All
</button>
```

--------------------------------

### OTP Input with Auto-Submit on Complete

Source: https://github.com/guilhermerodz/input-otp/blob/master/_autodocs/QUICK_START.md

This example demonstrates how to automatically submit a form when the OTP input is completed. It uses `useRef` to access the form element and `onComplete` callback.

```tsx
import { OTPInput, REGEXP_ONLY_DIGITS } from 'input-otp'
import { useRef } from 'react'

export default function AutoSubmitOTP() {
  const formRef = useRef<HTMLFormElement>(null)

  return (
    <form ref={formRef} action="/verify-otp" method="post">
      <OTPInput
        name="otp"
        maxLength={6}
        pattern={REGEXP_ONLY_DIGITS}
        onComplete={() => formRef.current?.submit()}
        render={({ slots }) => (
          <div className="flex gap-2">
            {slots.map((slot, idx) => (
              <div key={idx} className="w-10 h-12 border">
                {slot.char}
              </div>
            ))}
          </div>
        )}
      />
      <button type="submit">Submit</button>
    </form>
  )
}
```

--------------------------------

### Async OTP Submission with Loading State

Source: https://github.com/guilhermerodz/input-otp/blob/master/_autodocs/api-reference/form-integration.md

Handle asynchronous OTP submission by integrating with a fetch API call. This example shows how to manage loading and success states to provide user feedback during the verification process.

```tsx
import { OTPInput, REGEXP_ONLY_DIGITS } from 'input-otp'
import { useState } from 'react'

function AsyncOTPSubmission() {
  const [otp, setOTP] = useState('')
  const [isLoading, setIsLoading] = useState(false)
  const [success, setSuccess] = useState(false)

  const handleComplete = async (value: string) => {
    setIsLoading(true)
    try {
      const response = await fetch('/api/verify-otp', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ otp: value })
      })
      if (response.ok) {
        setSuccess(true)
      }
    } catch (error) {
      console.error('OTP verification failed:', error)
    } finally {
      setIsLoading(false)
    }
  }

  return (
    <div>
      <OTPInput
        maxLength={6}
        value={otp}
        onChange={setOTP}
        onComplete={handleComplete}
        pattern={REGEXP_ONLY_DIGITS}
        disabled={isLoading || success}
        render={({ slots }) => (
          <div className={isLoading ? 'opacity-50' : ''}>
            {slots.map((slot, idx) => (
              <div key={idx} className="w-10 h-12 border">
                {slot.char}
              </div>
            ))}
          </div>
        )}
      />
      {isLoading && <p>Verifying...</p>}
      {success && <p style={{ color: 'green' }}>OTP verified!</p>}
    </div>
  )
}
```

--------------------------------

### Controlled Input with Render Prop Example

Source: https://github.com/guilhermerodz/input-otp/blob/master/_autodocs/api-reference/OTPInput.md

Demonstrates a controlled OTP input using the render prop pattern. It manages the input value with React's useState hook and customizes the appearance of each OTP slot.

```tsx
'use client'
import { OTPInput, SlotProps } from 'input-otp'
import { useState } from 'react'

function OTPForm() {
  const [value, setValue] = useState('')

  return (
    <OTPInput
      maxLength={6}
      value={value}
      onChange={setValue}
      onComplete={(value) => console.log('OTP complete:', value)}
      render={({ slots, isFocused }) => (
        <div className="flex gap-2">
          {slots.map((slot, idx) => (
            <Slot key={idx} {...slot} isFocused={isFocused} />
          ))}
        </div>
      )}
    />
  )
}

function Slot({ char, isActive, hasFakeCaret, isFocused }) {
  return (
    <div
      className={`
        w-10 h-12 flex items-center justify-center
        border rounded transition-all
        ${isActive ? 'border-blue-500 ring-2 ring-blue-300' : 'border-gray-300'}
      `}
    >
      <span className="text-lg">{char}</span>
      {hasFakeCaret && <span className="animate-pulse">|</span>}
    </div>
  )
}
```

--------------------------------

### Advanced OTP Slot Rendering with State

Source: https://github.com/guilhermerodz/input-otp/blob/master/_autodocs/api-reference/slot-rendering.md

Shows advanced rendering by utilizing all state properties from `RenderProps` and `SlotProps`. This example customizes slot appearance based on `isActive`, `char`, `placeholderChar`, and `hasFakeCaret` states, and also applies styles based on `isFocused` and `isHovering` states of the input.

```tsx
function AdvancedOTP() {
  return (
    <OTPInput
      maxLength={6}
      render={({ slots, isFocused, isHovering }) => (
        <div
          className={`
            flex gap-2 p-3 rounded-lg transition-all
            ${isFocused ? 'ring-2 ring-blue-500' : ''}
            ${isHovering && !isFocused ? 'bg-gray-100' : ''}
          `}
        >
          {slots.map((slot, idx) => (
            <SlotComponent key={idx} slot={slot} />
          ))}
        </div>
      )}
    />
  )
}

function SlotComponent({ slot }: { slot: SlotProps }) {
  return (
    <div
      className={`
        w-10 h-12 flex items-center justify-center
        border-2 rounded-md font-mono text-lg
        transition-all relative
        ${slot.isActive
          ? 'border-blue-500 bg-blue-50 shadow-md'
          : 'border-gray-300 bg-white'
        }
      `}
    >
      {slot.char && <span className="text-xl font-semibold">{slot.char}</span>}
      
      {!slot.char && slot.placeholderChar && (
        <span className="text-gray-400 opacity-50">{slot.placeholderChar}</span>
      )}
      
      {slot.hasFakeCaret && <FakeCaret />}
    </div>
  )
}

function FakeCaret() {
  return (
    <div className="absolute animate-pulse">
      <div className="w-0.5 h-6 bg-blue-500" />
    </div>
  )
}
```

--------------------------------

### Get Current OTP Value

Source: https://github.com/guilhermerodz/input-otp/blob/master/_autodocs/api-reference/events-and-refs.md

Provides an example of how to retrieve the current value from the OTP input using its ref. This is useful for form submissions or validation.

```tsx
const handleSubmit = () => {
  const otp = inputRef.current?.value
  console.log('Current OTP:', otp)
}
```

--------------------------------

### Build All Packages

Source: https://github.com/guilhermerodz/input-otp/blob/master/CLAUDE.md

Builds all packages in the monorepo using Turbo.

```bash
pnpm build
```

--------------------------------

### Format Code

Source: https://github.com/guilhermerodz/input-otp/blob/master/CLAUDE.md

Applies Prettier formatting to the entire project according to the defined configuration.

```bash
pnpm format
```

--------------------------------

### Import OTPInputContext

Source: https://github.com/guilhermerodz/input-otp/blob/master/_autodocs/api-reference/OTPInputContext.md

Import the OTPInputContext from the 'input-otp' library.

```typescript
import { OTPInputContext } from 'input-otp'
```

--------------------------------

### Checksum Validation for OTP

Source: https://github.com/guilhermerodz/input-otp/blob/master/_autodocs/api-reference/input-validation.md

Implement custom checksum logic to validate the OTP. This example calculates the sum of digits and checks if it's even.

```tsx
const validateChecksum = (otp: string) => {
  // Custom validation logic
  const sum = otp.split('').reduce((a, b) => a + parseInt(b), 0)
  return sum % 2 === 0
}

if (validateChecksum(value)) {
  // Valid
}
```

--------------------------------

### Build Library Only

Source: https://github.com/guilhermerodz/input-otp/blob/master/CLAUDE.md

Builds only the core library package using tsup, outputting to the dist/ directory.

```bash
pnpm build:lib
```

--------------------------------

### Use OTPInput Component

Source: https://github.com/guilhermerodz/input-otp/blob/master/_autodocs/exports.md

Import and use the main OTP input component. Configure it with props like maxLength and a render function to customize its appearance.

```typescript
import { OTPInput } from 'input-otp'

<OTPInput
  maxLength={6}
  render={({ slots }) => ...}
/>
```

--------------------------------

### Use Context Props for Rendering

Source: https://github.com/guilhermerodz/input-otp/blob/master/README.md

Import `OTPInputContext` and use `React.useContext` to access slots for custom rendering, replacing the `render` prop.

```diff
+import { OTPInputContext } from 'input-otp'

function MyForm() {
  return (
    <OTPInput
-     // First remove the `render` prop
-     render={...}
    >
      <OTPInputWrapper />
    </OTPInput>
  )
}

+function OTPInputWrapper() {
+ const inputContext = React.useContext(OTPInputContext)
+ return (
+   <>
+     {inputContext.slots.map((slot, idx) => (
+       <Slot key={idx} {...slot} />
+     ))}
+   </>
+ )
+}
```

--------------------------------

### Basic OTP Slot Rendering

Source: https://github.com/guilhermerodz/input-otp/blob/master/_autodocs/api-reference/slot-rendering.md

Demonstrates basic rendering of OTP slots using the `render` prop. It maps over the `slots` array to display each character in a styled div.

```tsx
import { OTPInput } from 'input-otp'

function BasicOTP() {
  return (
    <OTPInput
      maxLength={6}
      render={({ slots }) => (
        <div className="flex gap-2">
          {slots.map((slot, idx) => (
            <div key={idx} className="w-10 h-12 border p-2">
              {slot.char}
            </div>
          ))}
        </div>
      )}
    />
  )
}
```

--------------------------------

### Automatic Form Submission on OTP Completion

Source: https://github.com/guilhermerodz/input-otp/blob/master/README.md

Submit the form automatically when the OTP is completed. This example shows how to use the `onComplete` prop to trigger form submission.

```tsx
export default function Page() {
  const formRef = useRef<HTMLFormElement>(null)
  const buttonRef = useRef<HTMLButtonElement>(null)

  return (
    <form ref={formRef}>
      <OTPInput
        // ... automatically submit the form
        onComplete={() => formRef.current?.submit()}
        // ... or focus the button like as you wish
        onComplete={() => buttonRef.current?.focus()}
      />

      <button ref={buttonRef}>Submit</button>
    </form>
  )
}
```

--------------------------------

### Basic Ref Usage with useRef

Source: https://github.com/guilhermerodz/input-otp/blob/master/_autodocs/api-reference/events-and-refs.md

Demonstrates how to initialize a ref using `useRef` and assign it to the OTPInput component to access the underlying HTMLInputElement.

```typescript
const inputRef = useRef<HTMLInputElement>(null)

<OTPInput ref={inputRef} maxLength={6} render={({ slots }) => ...} />
```

--------------------------------

### OTP Input Integration with react-hook-form

Source: https://github.com/guilhermerodz/input-otp/blob/master/_autodocs/QUICK_START.md

Integrate OTP input with `react-hook-form` for streamlined form handling. This example shows how to register the OTP input and use `handleSubmit`.

```tsx
import { OTPInput, REGEXP_ONLY_DIGITS } from 'input-otp'
import { useForm } from 'react-hook-form'

export default function OTPWithHookForm() {
  const { register, handleSubmit, watch } = useForm({
    defaultValues: { otp: '' }
  })

  const otp = watch('otp')

  return (
    <form onSubmit={handleSubmit((data) => console.log(data))}>
      <OTPInput
        {...register('otp')}
        maxLength={6}
        pattern={REGEXP_ONLY_DIGITS}
        render={({ slots }) => (
          <div className="flex gap-2">
            {slots.map((slot, idx) => (
              <div key={idx} className="w-10 h-12 border">
                {slot.char}
              </div>
            ))}
          </div>
        )}
      />
      <button type="submit">Verify</button>
    </form>
  )
}
```

--------------------------------

### Custom Pattern: Only digits with hyphens

Source: https://github.com/guilhermerodz/input-otp/blob/master/_autodocs/api-reference/regexp-patterns.md

Example of using a custom pattern to allow digits and hyphens. The pattern is anchored and requires at least one digit or hyphen.

```tsx
<OTPInput
  maxLength={6}
  pattern="^[0-9-]+$"
  render={({ slots }) => ...}
/>
```

--------------------------------

### OTPInputContext Usage

Source: https://github.com/guilhermerodz/input-otp/blob/master/_autodocs/api-reference/OTPInputContext.md

Demonstrates how to import and use the OTPInputContext within a React component to access slot and input states.

```APIDOC
## Import
```typescript
import { OTPInputContext } from 'input-otp'
```

## Usage
Use `useContext()` to access the value within children of `OTPInput`:

```typescript
import { useContext } from 'react'

const context = useContext(OTPInputContext)
```

## Value Type
The context provides a `RenderProps` object containing:

| Property | Type | Description |
|----------|------|-------------|
| slots | `SlotProps[]` | Array of slot state objects, one per maxLength position. |
| isFocused | `boolean` | Whether the underlying input element is currently focused. |
| isHovering | `boolean` | Whether the user is hovering over the input container (false if input is disabled). |

### Example: Basic Context Usage

```tsx
'use client'
import { OTPInput, OTPInputContext } from 'input-otp'
import { useContext } from 'react'

function OTPForm() {
  return (
    <OTPInput maxLength={6}>
      <SlotDisplay />
    </OTPInput>
  )
}

function SlotDisplay() {
  const { slots, isFocused } = useContext(OTPInputContext)

  return (
    <div className={isFocused ? 'ring-2 ring-blue-500' : ''}>
      {slots.map((slot, idx) => (
        <div key={idx} className="w-10 h-12 border text-center">
          {slot.char}
        </div>
      ))}
    </div>
  )
}
```
```

--------------------------------

### REGEXP_ONLY_DIGITS Pattern

Source: https://github.com/guilhermerodz/input-otp/blob/master/_autodocs/api-reference/regexp-patterns.md

Use this pattern to match inputs containing only numeric digits (0-9). It is anchored to the start and end of the string and requires at least one digit.

```typescript
import { REGEXP_ONLY_DIGITS } from 'input-otp'

// Value: '^\d+$'
```

```tsx
import { OTPInput, REGEXP_ONLY_DIGITS } from 'input-otp'

function NumericOTP() {
  return (
    <OTPInput
      maxLength={6}
      pattern={REGEXP_ONLY_DIGITS}
      render={({ slots }) => (
        <div className="flex gap-2">
          {slots.map((slot, idx) => (
            <div key={idx} className="w-10 h-12 border text-center">
              {slot.char}
            </div>
          ))}
        </div>
      )}
    />
  )
}
```

--------------------------------

### Grouped OTP Slots Example

Source: https://github.com/guilhermerodz/input-otp/blob/master/_autodocs/QUICK_START.md

Customize the visual grouping of OTP slots, for instance, to display them like '123-456'. This involves slicing the `slots` array in the `render` prop.

```tsx
import { OTPInput, REGEXP_ONLY_DIGITS } from 'input-otp'

export default function GroupedOTP() {
  return (
    <OTPInput
      maxLength={6}
      pattern={REGEXP_ONLY_DIGITS}
      render={({ slots }) => (
        <div className="flex items-center gap-2">
          <Group slots={slots.slice(0, 3)} />
          <span className="text-gray-400">-</span>
          <Group slots={slots.slice(3)} />
        </div>
      )}
    />
  )
}

function Group({ slots }: { slots: any[] }) {
  return (
    <div className="flex gap-2">
      {slots.map((slot, idx) => (
        <div key={idx} className="w-10 h-12 border text-center">
          {slot.char}
        </div>
      ))}
    </div>
  )
}
```

--------------------------------

### Dynamic Import of OTPInput

Source: https://github.com/guilhermerodz/input-otp/blob/master/_autodocs/exports.md

Demonstrates how to dynamically import the OTPInput component using a dynamic import statement. This can be useful for code-splitting and lazy loading.

```typescript
const { OTPInput } = await import('input-otp')
```

--------------------------------

### Import OTPInput Component in React

Source: https://github.com/guilhermerodz/input-otp/blob/master/README.md

Import the OTPInput component from the 'input-otp' library. Ensure to include the 'use client' directive for server components.

```diff
+'use client'
+import { OTPInput } from 'input-otp'
```

--------------------------------

### Style OTPInput with CSS Modules

Source: https://github.com/guilhermerodz/input-otp/blob/master/_autodocs/QUICK_START.md

Apply styles using CSS Modules by importing a stylesheet and referencing its classes. Conditional styling for active slots is handled via class toggling.

```tsx
import styles from './otp.module.css'

<OTPInput
  maxLength={6}
  containerClassName={styles.container}
  render={({ slots }) => (
    <div className={styles.slots}>
      {slots.map((slot, idx) => (
        <div
          key={idx}
          className={`${styles.slot} ${slot.isActive ? styles.active : ''}`}
        >
          {slot.char}
        </div>
      ))}
    </div>
  )}
/>
```

--------------------------------

### Blacklist Validation for OTP

Source: https://github.com/guilhermerodz/input-otp/blob/master/_autodocs/api-reference/input-validation.md

Prevent specific, known invalid OTP patterns from being used. This example checks if the input value is present in a predefined list of blocked patterns.

```tsx
const blockedPatterns = ['000000', '111111', '123456']

if (!blockedPatterns.includes(value)) {
  // Not blocked
}
```

--------------------------------

### OTP Input with Paste Transformation

Source: https://github.com/guilhermerodz/input-otp/blob/master/_autodocs/configuration.md

Customize how pasted text is transformed before being applied to the OTP input. This example converts pasted text to uppercase and removes hyphens and spaces.

```tsx
import { OTPInput } from 'input-otp'

function OTPWithPaste() {
  return (
    <OTPInput
      maxLength={6}
      pasteTransformer={(text) => 
        text
          .toUpperCase()
          .replaceAll('-', '')
          .replaceAll(' ', '')
      }
      render={({ slots }) => (
        <div>{slots.map((s, i) => <div key={i}>{s.char}</div>)}</div>
      )}
    />
  )
}
```

--------------------------------

### Custom Pattern: Uppercase letters only

Source: https://github.com/guilhermerodz/input-otp/blob/master/_autodocs/api-reference/regexp-patterns.md

Example of using a custom pattern to allow only uppercase alphabetic characters. The pattern is anchored and requires at least one uppercase letter.

```tsx
<OTPInput
  maxLength={6}
  pattern="^[A-Z]+$"
  render={({ slots }) => ...}
/>
```

--------------------------------

### OTP Input with Context API

Source: https://github.com/guilhermerodz/input-otp/blob/master/_autodocs/api-reference/slot-rendering.md

Demonstrates using the Context API to access OTP input slots and focus state for rendering. This is useful for deeply nested components or when preferring the Context API pattern.

```typescript
import { OTPInput, OTPInputContext } from 'input-otp'
import { useContext } from 'react'

function OTPForm() {
  return (
    <OTPInput maxLength={6}>
      <SlotGrid />
    </OTPInput>
  )
}

function SlotGrid() {
  const { slots, isFocused } = useContext(OTPInputContext)
  
  return (
    <div className="flex gap-2">
      {slots.map((slot, idx) => (
        <Slot key={idx} {...slot} />
      ))}
    </div>
  )
}
```

--------------------------------

### Controlled Component

Source: https://github.com/guilhermerodz/input-otp/blob/master/_autodocs/README.md

Illustrates how to use OTPInput as a controlled component, managing its value and handling completion events.

```APIDOC
## Controlled Component

```tsx
import { OTPInput, REGEXP_ONLY_DIGITS } from 'input-otp'
import { useState } from 'react'

function ControlledOTP() {
  const [value, setValue] = useState('')

  const handleComplete = (otp: string) => {
    console.log('OTP completed:', otp)
  }

  return (
    <OTPInput
      maxLength={6}
      value={value}
      onChange={setValue}
      onComplete={handleComplete}
      pattern={REGEXP_ONLY_DIGITS}
      render={({ slots }) => (
        <div className="flex gap-2">
          {slots.map((slot, idx) => (
            <div key={idx} className="w-10 h-12 border">
              {slot.char}
            </div>
          ))}
        </div>
      )}
    />
  )
}
```
```

--------------------------------

### OTP Input with Paste Transformer

Source: https://github.com/guilhermerodz/input-otp/blob/master/_autodocs/QUICK_START.md

Customize paste behavior using `pasteTransformer` to clean up pasted text before it populates the OTP fields. This example removes hyphens from pasted text.

```tsx
import { OTPInput, REGEXP_ONLY_DIGITS } from 'input-otp'

export default function WithPasteTransform() {
  return (
    <OTPInput
      maxLength={6}
      pattern={REGEXP_ONLY_DIGITS}
      pasteTransformer={(text) => text.replaceAll('-', '')}
      render={({ slots }) => (
        <div className="flex gap-2">
          {slots.map((slot, idx) => (
            <div key={idx} className="w-10 h-12 border">
              {slot.char}
            </div>
          ))}
        </div>
      )}
    />
  )
}
```

--------------------------------

### Basic OTP Input with Context

Source: https://github.com/guilhermerodz/input-otp/blob/master/_autodocs/api-reference/OTPInputContext.md

Demonstrates a basic OTP input form where child components access context to display slots and focus state.

```tsx
'use client'
import { OTPInput, OTPInputContext } from 'input-otp'
import { useContext } from 'react'

function OTPForm() {
  return (
    <OTPInput maxLength={6}>
      <SlotDisplay />
    </OTPInput>
  )
}

function SlotDisplay() {
  const { slots, isFocused } = useContext(OTPInputContext)

  return (
    <div className={isFocused ? 'ring-2 ring-blue-500' : ''}>
      {slots.map((slot, idx) => (
        <div key={idx} className="w-10 h-12 border text-center">
          {slot.char}
        </div>
      ))}
    </div>
  )
}
```

--------------------------------

### Clear OTP Input Programmatically

Source: https://github.com/guilhermerodz/input-otp/blob/master/_autodocs/api-reference/events-and-refs.md

Illustrates how to clear the OTP input's value and then focus it using the ref. This example demonstrates direct manipulation of the input's `.value` property.

```tsx
<button onClick={() => {
  if (inputRef.current) {
    inputRef.current.value = ''
    inputRef.current.focus()
  }
}}>
  Clear
</button>
```

--------------------------------

### Run Playwright Tests with UI

Source: https://github.com/guilhermerodz/input-otp/blob/master/CLAUDE.md

Runs Playwright tests in a headed mode with a user interface for visualization.

```bash
pnpm test:ui
```

--------------------------------

### Custom Pattern: Special characters allowed

Source: https://github.com/guilhermerodz/input-otp/blob/master/_autodocs/api-reference/regexp-patterns.md

Example of using a custom pattern to allow digits and specific special characters. The pattern is anchored and requires at least one allowed character.

```tsx
<OTPInput
  maxLength={6}
  pattern="^[0-9!@#$%]+$"
  render={({ slots }) => ...}
/>
```

--------------------------------

### Import input-otp with Alias

Source: https://github.com/guilhermerodz/input-otp/blob/master/_autodocs/exports.md

Shows how to import the OTPInput component and assign it an alias for brevity in your JSX. This is useful for reducing boilerplate in your code.

```typescript
import { OTPInput as OTP } from 'input-otp'

<OTP maxLength={6} render={({ slots }) => ...} />
```

--------------------------------

### Metadata Tracking for Cursor Movement

Source: https://github.com/guilhermerodz/input-otp/blob/master/_autodocs/internals.md

Tracks the previous selection state (start, end, direction) to determine cursor movement direction. Uses a useRef to persist state across renders.

```typescript
const inputMetadataRef = useRef({
  prev: [
    inputRef.current?.selectionStart,
    inputRef.current?.selectionEnd,
    inputRef.current?.selectionDirection,
  ],
})

```

--------------------------------

### Tsup Build Configuration

Source: https://github.com/guilhermerodz/input-otp/blob/master/_autodocs/internals.md

Command-line configuration for the tsup build tool. This command enables TypeScript definition file generation and code minification for the library.

```bash
tsup --dts --minify
```

--------------------------------

### Paste Transformer for Hyphenated Input

Source: https://github.com/guilhermerodz/input-otp/blob/master/README.md

Use the `pasteTransformer` prop to handle pasted text that may not conform to the input's regex or max length. This example removes hyphens from pasted text.

```tsx
<OTPInput
  // Transform the pasted text to parse hyphens but remove hyphens,
  // so it fits into the input's pattern and max length.
  pasteTransformer={(pasted) => pasted.replaceAll('-', '')}
/>
```