HeroUI Label

Forms 13

About

HeroUI v3 Label — accessible form label primitive that associates a caption with an input via htmlFor.

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

Code

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

Usage.tsx

import { Input } from "@heroui/react"
import { Label } from "@/components/ui/heroui-label"

export default function Basic() {
  return (
    <div className="flex flex-col gap-1">
      <Label htmlFor="name">Name</Label>
      <Input className="w-64" id="name" placeholder="Enter your name" type="text" />
    </div>
  )
}