Label (components/ui/label.tsx)

Overview

An accessible form label component built with Radix UI that provides consistent styling and behavior for form inputs.

Features

• Form input association
• Required state indication
• Error state handling
• Hover effects
• Focus management
• Accessibility support
• Custom styling options
• Responsive design

Dependencies

import * as React from 'react'
import * as LabelPrimitive from '@radix-ui/react-label'
import { cva, type VariantProps } from 'class-variance-authority'
import { cn } from '@/lib/utils'

Props

interface LabelProps extends React.LabelHTMLAttributes<HTMLLabelElement> {
  htmlFor?: string;
  required?: boolean;
  error?: boolean;
  className?: string;
  children: ReactNode;
}

Implementation

State Management

No internal state management required.

Methods

No methods required as this is a purely presentational component.

Unique Functionality

• Required state indication
• Error state handling
• Focus management
• Accessibility attributes

HTML Structure

<LabelPrimitive.Root
  className={cn(
    "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
    {
      'text-destructive': error,
      'after:text-destructive after:content-["*"] after:ml-0.5': required
    },
    className
  )}
  htmlFor={htmlFor}
  {...props}
>
  {children}
</LabelPrimitive.Root>

API Integration

No direct API integration.

Components Used

No additional components used.

Notes

• Built on Radix UI primitives
• Supports form input association
• Handles required state indication
• Manages error states
• Maintains accessibility features
• Provides consistent styling
• Supports custom className prop