Label

Forms

About

Form label component with an optional required asterisk in brand-red. Standard <label> forwarding props plus a required boolean prop. Pairs with input/textarea via htmlFor.

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'

export default function Demo() {
  return (
    <div className="flex flex-col gap-4 p-8 bg-slate-50 max-w-md">
      <Label required htmlFor="demo-name">
        Naam
      </Label>
      <Label htmlFor="demo-email">E-mailadres</Label>
      <Label required htmlFor="demo-phone">
        Telefoonnummer
      </Label>
    </div>
  )
}