# Label

Renders an accessible label associated with controls.

## When to use

* Name a form control, so clicking the text focuses or toggles it.
* Use it beside checkboxes, switches and radio items, linking it with `htmlFor` and the control `id`.

## How it works

`Label` renders a `<label>` with the shared text style. With Base UI it is a plain `<label>`; with Radix it wraps the `Label` primitive from `radix-ui`. It dims itself when the peer control or the surrounding group is disabled.

## Example

### Base UI

```tsx
'use client'

import { Checkbox } from "@/shadcn/base/ui/checkbox"
import { Label } from "@/shadcn/base/ui/label"

export default function LabelDemo() {
  return (
    <div className="flex gap-2">
      <Checkbox id="terms" />
      <Label htmlFor="terms">Accept terms and conditions</Label>
    </div>
  )
}
```

```tsx [components/ui/label.tsx]
"use client"

import * as React from "react"
import { cn } from "cn"

function Label({ className, ...props }: React.ComponentProps<"label">) {
  return (
    <label
      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 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
        className
      )}
      {...props}
    />
  )
}

export { Label }
```

### Radix

```tsx
'use client'

import { Checkbox } from "@/shadcn/radix/ui/checkbox"
import { Label } from "@/shadcn/radix/ui/label"

export default function LabelDemo() {
  return (
    <div className="flex gap-2">
      <Checkbox id="terms" />
      <Label htmlFor="terms">Accept terms and conditions</Label>
    </div>
  )
}
```

```tsx [components/ui/label.tsx]
"use client"

import * as React from "react"
import { cn } from "cn"
import { Label as LabelPrimitive } from "radix-ui"

function Label({
  className,
  ...props
}: React.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 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
        className
      )}
      {...props}
    />
  )
}

export { Label }
```

## Installation

```bash
npx shadcn@latest add label
```

## Reference

Official page: https://ui.shadcn.com/docs/components/label