Input

Form input with brand-red focus ring and border. Forwards all native input props (type, name, etc.) and supports file/email/tel/text/password/url/number. Accessible focus styles via focus-visible.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Input to your project and fits it to your theme.

import Input from '@/components/ui/input'

export default function Demo() {
  return (
    <div className="flex flex-col gap-4 p-8 bg-slate-50 max-w-md">
      <Input placeholder="Naam" />
      <Input placeholder="E-mailadres" type="email" />
      <Input placeholder="Telefoonnummer" type="tel" />
      <Input placeholder="Adres" />
    </div>
  )
}