Input OTP

import { InputOTP } from '@/components/ui/input-otp'

export default function Example() {
  const [code, setCode] = useState('')
  const [error, setError] = useState<string | false>(false)

  const handleComplete = async (value: string) => {
    try {
      await verifyCode(value)
      // Success - redirect or show success state
    } catch (err) {
      setError('Invalid code. Please try again.')
    }
  }

  return (
    <>
      {/* Basic 6-digit code */}
      <InputOTP
        label="Verification Code"
        length={6}
        value={code}
        onChange={setCode}
        onComplete={handleComplete}
        error={error}
      />

      {/* With separator */}
      <InputOTP
        label="Enter Code"
        length={6}
        value={code}
        onChange={setCode}
        separator
        separatorAfter={3}
      />

      {/* 4-digit PIN */}
      <InputOTP
        label="PIN Code"
        length={4}
        value={code}
        onChange={setCode}
        type="password"
      />

      {/* Alphanumeric */}
      <InputOTP
        label="License Key"
        length={6}
        value={code}
        onChange={setCode}
        type="text"
      />
    </>
  )
}