Label

Forms 2

About

Displays a label element with enhanced styling and accessibility features for form controls.

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

Code

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

Usage.tsx

import { Label } from "@/components/ui/label";
import { Input } from "@/components/ui/input"

export default function DemoOne() {
  return (
    <div className="grid w-full max-w-sm items-center gap-1.5">
      <Label htmlFor="email">Email</Label>
      <Input id="email" type="email" placeholder="Enter your email" />
    </div>
  );
}