Label

Names a form control and expands its clickable target.

Preview

Example code

Include me in the weekly digest

Playground

Sizesize

Sets the label text size.

Usage

tsx

import { Input } from "earthling-ui/input";
import { Label } from "earthling-ui/label";

export function Example() {
  return (
    <>
      <Label htmlFor="email">Email</Label>
      <Input id="email" type="email" />
    </>
  );
}

Match htmlFor to the associated control id.
Keep labels visible; placeholders should provide examples rather than names.
Disabled peer and group states automatically reduce label emphasis.

Installation

Start with the project setup for React and Tailwind CSS 4. Both paths use the same component and theme.

Import package

Own the source

bash

npm install earthling-ui

Use the component import shown above. Package updates keep the implementation current.

API reference

Declarations from the current library build, including inherited primitive props. Playground controls above show selected options; they are not the complete API.

tsx

// Generated by dts-bundle-generator v9.5.1

import { VariantProps } from 'class-variance-authority';
import { ComponentProps } from 'react';

export declare const labelVariants: (props?: ({
	size?: "sm" | "md" | "lg" | null | undefined;
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
export interface LabelProps extends ComponentProps<"label">, VariantProps<typeof labelVariants> {
	asChild?: boolean;
}
export declare const Label: import("react").ForwardRefExoticComponent<Omit<LabelProps, "ref"> & import("react").RefAttributes<HTMLLabelElement>>;

export {};

Runtime dependencies: @radix-ui/react-slot, class-variance-authority, cnfast.

Source

Use the eject command to copy this implementation with its required helpers and project-specific imports.

View Label implementation

tsx

"use client";

import { Slot } from "@radix-ui/react-slot";
import { cva, type VariantProps } from "class-variance-authority";
import { cn } from "@/utils/cn";
import { type ComponentProps, forwardRef } from "react";

const labelVariants = cva(
  "inline-flex items-center gap-2 font-medium leading-none select-none peer-disabled:cursor-not-allowed peer-disabled:opacity-50 group-aria-disabled:cursor-not-allowed group-aria-disabled:opacity-50",
  {
    variants: {
      size: { sm: "text-xs", md: "text-sm", lg: "text-base" },
    },
    defaultVariants: { size: "md" },
  },
);

export interface LabelProps
  extends ComponentProps<"label">, VariantProps<typeof labelVariants> {
  asChild?: boolean;
}

const Label = forwardRef<HTMLLabelElement, LabelProps>(
  ({ className, size, asChild = false, ...props }, ref) => {
    const Comp = asChild ? Slot : "label";
    return (
      <Comp
        ref={ref}
        className={cn(labelVariants({ size }), className)}
        {...props}
      />
    );
  },
);
Label.displayName = "Label";

export { Label, labelVariants };