Skip to content
Caseroom

Caseroom

Components and blocks in black and white.

Components · Forms

Label

The visible name of a field.

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

Both previews render the same markup; the HTML tab below is that markup without a framework.

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

Or copy the files below into your project. They need clsx, tailwind-merge, and the Caseroom theme. The HTML needs only the compiled CSS.

label.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
/** 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';