Skip to content
themes.dev
    Style: Wireframe

    Components

    56 free

    Style

    Components · Forms

    Label

    The visible name of a field.

    40% of the 2,073 sites in The UI Index have a form (821 sites).

    Used in UI Pro: Form section

    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/ui/r/label.json
    Astro
    npx shadcn@latest add https://www.themes.dev/ui/r/astro/label.json

    Or copy the files below into your project. They need clsx, tailwind-merge, and the themes.dev UI 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';