indevuiLabel

Forms

About

Here is modern label by indevui

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

Code

How indevuiLabel is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

// demo.tsx
import { Mail } from 'lucide-react';
import Label from '@/components/ui/indevui-label';

function LabelDemo() {
  return (
    <div className="flex flex-col items-start gap-8 p-4 md:flex-row">
      <div className="grid w-full max-w-sm items-center gap-2">
        <Label htmlFor="email">Email</Label>
        <input
          id="email"
          type="email"
          placeholder="your@email.com"
          className="flex h-10 w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
        />
      </div>
      <div className="grid w-full max-w-sm items-center gap-2">
        <Label htmlFor="email-icon">
          <Mail className="h-4 w-4 text-muted-foreground" />
          Email with Icon
        </Label>
        <input
          id="email-icon"
          type="email"
          placeholder="your@email.com"
          className="flex h-10 w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
        />
      </div>
      <div data-disabled className="group grid w-full max-w-sm items-center gap-2">
        <Label htmlFor="name">Disabled</Label>
        <input
          id="name"
          type="text"
          placeholder="Your name"
          disabled
          className="flex h-10 w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50"
        />
      </div>
    </div>
  );
}

export { LabelDemo as DemoOne };