label.tsx

Overview

The label.tsx file defines a reusable, styled React component named Label that acts as a wrapper around the Radix UI LabelPrimitive.Root component. It leverages the class-variance-authority (CVA) library to manage CSS class variants, allowing for consistent styling of label elements across the application. This component is designed for accessibility and style consistency, primarily used to label form elements or other UI components.

Key features include:

• Forwarding refs to the underlying Radix UI label element.

• Applying base styles and variant styles to the label using CVA.

• Supporting disabled states with appropriate cursor and opacity adjustments.

• Composable with additional class names via the className prop.

Detailed Explanation

Imports

• @radix-ui/react-label: Provides the accessible primitive label element.

• class-variance-authority: Utility for managing className variants.

• React: React library for component creation.

• cn (from @/lib/utils): Utility function to concatenate and conditionally join class names.

Constants

labelVariants

const labelVariants = cva(
  'text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70',
);

• Purpose: Defines the base CSS classes applied to the label component.

• Classes included:

  • text-sm: Small text size.

  • font-medium: Medium font weight.

  • leading-none: No extra line height.

  • peer-disabled:cursor-not-allowed: When the associated peer element is disabled, cursor changes to "not-allowed".

  • peer-disabled:opacity-70: When peer is disabled, reduce opacity to 70%.

• Usage: This CVA instance returns a string of classes that can be extended or overridden by additional class names.

Component: Label

const Label = React.forwardRef<
  React.ElementRef<typeof LabelPrimitive.Root>,
  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> &
    VariantProps<typeof labelVariants>
>(({ className, ...props }, ref) => (
  <LabelPrimitive.Root
    ref={ref}
    className={cn(labelVariants(), className)}
    {...props}
  />
));

Description

• A React functional component that forwards its ref to the underlying Radix UI LabelPrimitive.Root.

• Accepts all props valid for the Radix UI label primitive, plus variant props from labelVariants (though currently no variants are defined beyond base styles).

• Combines the base label styles with any additional class names passed via the className prop.

Parameters

• className (optional): Additional CSS classes to append to the base label styles.

• ...props: Other props supported by LabelPrimitive.Root, such as:

  • htmlFor: String ID of the input element the label corresponds to.

  • Event handlers, accessibility attributes, etc.

• ref: React ref forwarded to the DOM element of the label.

Return Value

• Returns a React element representing a styled label, forwarding all received props and the ref to the Radix UI label primitive.

Usage Example

import { Label } from '@/components/label';

function Example() {
  return (
    <div>
      <input type="checkbox" id="accept" disabled />
      <Label htmlFor="accept" className="text-blue-600">
        Accept terms and conditions
      </Label>
    </div>
  );
}

In this example, the Label will render with the base styles plus the additional text-blue-600 class, and will reflect the disabled state styling because the input is disabled.

Implementation Details & Algorithms

• Class Variance Authority (CVA): The cva function creates a reusable and composable class string for styling labels. While in this file it is used only for base styles with no variants defined, it allows for future extension with variants (e.g., color, size) without modifying the core component.

• Peer Styling: The use of peer-disabled utility class relies on Tailwind CSS peer selector to style the label based on the disabled state of a sibling element (usually the input the label is for). This improves accessibility and UI clarity.

• Forwarding Refs: React's forwardRef is used to allow parent components to get a reference to the actual DOM label element for direct DOM manipulation or accessibility purposes.

Interaction with Other Parts of the System

• Radix UI Label Primitive: This component is a styled wrapper around Radix UI's LabelPrimitive.Root, meaning it inherits accessibility and behavior from Radix's highly accessible primitives.

• Utility Function cn (Class Names): This utility (likely a classnames or clsx wrapper) concatenates and conditionally applies CSS classes, ensuring clean and maintainable className strings.

• Tailwind CSS: The styling depends on Tailwind CSS utility classes (e.g., text-sm, peer-disabled:opacity-70), so this component is tightly coupled with Tailwind CSS configuration.

• Potential Usage: This component is expected to be used throughout the UI wherever a label is needed for form inputs or interactive elements, providing consistent look and feel.

• Peer inputs: For the peer-disabled styling to work, the label should be a sibling of the input element with the peer class applied.

Mermaid Diagram

This diagram shows the structure of the file focusing on the Label component and its relationship with the imported modules and utilities.

classDiagram
    class Label {
      +forwardRef(ref, props)
      +displayName: string
    }
    class LabelPrimitiveRoot {
      <<imported from @radix-ui/react-label>>
    }
    class labelVariants {
      +cva(baseClasses: string)
    }
    class cn {
      +(...classes: string[]) : string
      <<utility function>>
    }

    Label --> LabelPrimitiveRoot : uses
    Label --> labelVariants : applies styles from
    Label --> cn : combines class names with

Summary

The label.tsx file provides a clean, accessible, and easily styled Label React component that wraps Radix UI's label primitive. It uses Tailwind CSS for styling and CVA for consistent class management. The component supports forwarding refs and accepts all native label props, making it flexible and easy to integrate into forms and interactive UI elements.

This setup promotes code reuse, accessibility, and consistent styling across applications using the Radix UI and Tailwind CSS stacks.