Label

A simple label component for form fields.

Source Code

"use client";
 
import { useId } from "react";
 
import { cn } from "@/lib/utils";
 
const Label = ({
  children,
  className,
  ...props
}: React.ComponentPropsWithRef<"label">) => {
  const generatedId = useId();
  const id = props.id ?? generatedId;
 
  return (
    <label
      className={cn("text-foreground text-base font-medium", className)}
      id={id}
      {...props}
    >
      {children}
    </label>
  );
};
 
export { Label };

API Reference

Extends the label element.

Examples

Simple

Basic usage with an input field.

Best Practices

Association:
- Always associate labels with form controls
- Use htmlFor to link with input IDs
- Ensure labels are clickable
Content:
- Keep labels concise and clear
- Use sentence case
- Include required field indicators when needed
Accessibility:
- Never hide labels visually
- Maintain sufficient text contrast
- Consider label position relative to inputs

Input

Listbox