Skip to content
Corsair UI
Browse the docs

ComponentsNo. 33 of 109

Label

Accessible name for a form control.

Installation

pnpm dlx shadcn@latest add @corsair-ui/label

No setup needed: the CLI finds @corsair-ui in the shadcn registry directory. The files land in your project as source: edit them like your own code. More in Installation.

Also adds
utils
npm
@radix-ui/react-labelclsxtailwind-merge

Examples

With an input

Required

API

Built on Radix Label; every prop it takes is passed through.

Accessibility

  • Clicking it focuses or toggles its control; point htmlFor at the control's id.
  • Dims when the control after it is disabled.

Compatibility

Tailwind CSS
3.4 and 4, both checked in CI
React
19
Rendering
Client component ("use client")

Source

1 file, installed as source you own
label.tsxView on GitHub
"use client";

import * as LabelPrimitive from "@radix-ui/react-label";
import type { ComponentProps } from "react";

import { cn } from "@/registry/default/lib/utils";

function Label({ className, ...props }: ComponentProps<typeof LabelPrimitive.Root>) {
  return (
    <LabelPrimitive.Root
      data-slot="label"
      className={cn(
        "flex items-center gap-2 text-sm leading-none font-medium select-none",
        "group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50",
        // Right after a checkbox, radio or switch (they carry `peer`), the label toggles it.
        "peer-enabled:cursor-pointer peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
        className
      )}
      {...props}
    />
  );
}

export { Label };