Form

Label

A form label component built on Radix UI primitives with proper accessibility support.

Import

Code
 
import { Label } from "zudoku/ui/Label";

Basic Usage

Email

Code
 
<Label htmlFor="email">Email</Label>

With Input

Code
 
<div className="grid w-full max-w-sm items-center gap-1.5">
  <Label htmlFor="email">Email</Label>
  <Input type="email" id="email" placeholder="Email" />
</div>

With Textarea

Code
 
<div className="grid w-full gap-1.5">
  <Label htmlFor="message">Your message</Label>
  <Textarea placeholder="Type your message here." id="message" />
</div>

With Checkbox

Code
 
<div className="flex items-center space-x-2">
  <Checkbox id="terms" />
  <Label
    htmlFor="terms"
    className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
  >
    Accept terms and conditions
  </Label>
</div>

Accessibility

The Label component automatically handles proper accessibility attributes when used with form controls:

• Associates the label with form controls via htmlFor prop
• Provides screen reader support
• Enables clicking the label to focus the associated control