# Label (Caseroom component)

The visible name of a field. Black and white, dark mode, shadcn-compatible; React, Astro and plain HTML.

39% of the 2,062 sites in The UI Index have a form (806 sites).

## Install

- React: `npx shadcn@latest add https://www.themes.dev/caseroom/r/label.json`
- Astro: `npx shadcn@latest add https://www.themes.dev/caseroom/r/astro/label.json`
- HTML: https://www.themes.dev/caseroom/r/html/label.html (with https://www.themes.dev/caseroom/r/html/caseroom.css)

Page: https://www.themes.dev/caseroom/components/label/ · Rules for agents: https://www.themes.dev/caseroom/AGENT.md

## Code

### label.astro

```astro
---
import type { HTMLAttributes } from 'astro/types';
import { cn } from '@/lib/utils';
import { labelClasses } from './label.variants';

type Props = HTMLAttributes<'label'>;
const { class: className, ...rest } = Astro.props;
---

<label class={cn(labelClasses, className)} {...rest}><slot /></label>
```

### label.tsx

```tsx
import type { LabelHTMLAttributes } from 'react';
import { cn } from '@/lib/utils';
import { labelClasses } from './label.variants';

export type LabelProps = LabelHTMLAttributes<HTMLLabelElement>;

export function Label({ className, ...props }: LabelProps) {
  return <label className={cn(labelClasses, className)} {...props} />;
}
```

### label.variants.ts

```tsx
/** A label holding its control (checkbox, switch) keeps the control on the first line and wraps with leading. */
export const labelClasses =
  'flex items-center gap-2 text-sm leading-none font-medium has-[input]:items-start has-[input]:leading-snug has-[input]:[&>*:first-child]:mt-px select-none peer-disabled:cursor-not-allowed peer-disabled:opacity-50';
```