# Label

Accessible name for a form control.

Docs: https://corsairui.vercel.app/docs/label

## Install

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

Also adds: `utils`.
npm: `@radix-ui/react-label`, `clsx`, `tailwind-merge`.

## API

Built on Radix Label (https://www.radix-ui.com/primitives/docs/components/label); its props pass through.

## Styling

Restyle it in the project that installs it: `className` on each part, the theme variables, and these attributes with arbitrary variants (`[&_[data-slot=…]]:…`, `data-[state=…]:…`).

data-slot: `label`

## Accessibility

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

## Examples

On the docs page: With an input, Required. The usage examples in the source comments below are the reference.

## Source

What `shadcn add` writes into the project:

### label.tsx

```tsx
"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 };
```