Input OTP 10

import { useId } from 'react'

import { DotIcon } from 'lucide-react'

import { InputOTP, InputOTPGroup, InputOTPSlot } from '@/registry/new-york/ui/input-otp'
import { Label } from '@/registry/new-york/ui/label'

const InputOTPCustomSeparatorDemo = () => {
  const id = useId()

  return (
    <div className='space-y-3'>
      <Label htmlFor={id}>Input OTP Custom Separator</Label>
      <InputOTP id={id} maxLength={6}>
        <InputOTPGroup>
          <InputOTPSlot index={0} />
          <InputOTPSlot index={1} />
          <InputOTPSlot index={2} />
        </InputOTPGroup>
        <div role='separator' className='text-muted-foreground'>
          <DotIcon />
        </div>
        <InputOTPGroup>
          <InputOTPSlot index={3} />
          <InputOTPSlot index={4} />
          <InputOTPSlot index={5} />
        </InputOTPGroup>
      </InputOTP>
    </div>
  )
}

export default InputOTPCustomSeparatorDemo