Label

Installation

pnpm dlx brutx@latest add label

Basic Usage

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

<Label htmlFor="email">Email</Label>
<Input id="email" type="email" placeholder="Enter your email" />

With Checkbox

<div className="flex items-center gap-2">
  <Checkbox id="terms" />
  <Label htmlFor="terms">Accept terms and conditions</Label>
</div>

Required Field

<Label htmlFor="username">
  Username <span className="text-red-500">*</span>
</Label>
<Input id="username" placeholder="Enter your username" required />

With Helper Text

<div className="space-y-2">
  <Label htmlFor="password">Password</Label>
  <Input id="password" type="password" placeholder="..." />
  <p className="text-sm text-gray-500">Must be at least 8 characters.</p>
</div>

Form Example

<form className="space-y-4">
  <div className="space-y-2">
    <Label htmlFor="name">Full Name</Label>
    <Input id="name" placeholder="John Doe" />
  </div>
  <div className="space-y-2">
    <Label htmlFor="email">Email Address</Label>
    <Input id="email" type="email" placeholder="john@example.com" />
  </div>
  <div className="flex items-center gap-2">
    <Checkbox id="newsletter" />
    <Label htmlFor="newsletter">Subscribe to newsletter</Label>
  </div>
</form>