Input 23

import { useId } from 'react'

import { Input } from '@/registry/new-york/ui/input'
import { Label } from '@/registry/new-york/ui/label'

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

  return (
    <div className='group relative w-full max-w-xs'>
      <Label
        htmlFor={id}
        className='bg-background text-foreground absolute top-0 left-2 z-1 block -translate-y-1/2 px-1 text-xs'
      >
        Input with overlapping label
      </Label>
      <Input id={id} type='email' placeholder='Email address' className='dark:bg-background h-10' />
    </div>
  )
}

export default InputOverlappingLabelDemo