Label

A label in the hand, that dims with the control it names.

Accept the terms

tsx

import { Checkbox } from "@/components/ui/checkbox";
import { Label } from "@/components/ui/label";

export default function LabelDemo() {
  return (
    <Label>
      <Checkbox seed="label-terms" />
      Accept the terms
    </Label>
  );
}

Installation

$ pnpm dlx shadcn@latest add @ballpoint/label

Or copy the source

ui/label.tsx

"use client";

import type { ComponentProps } from "react";
import { cn } from "@/lib/utils";

function Label({ className, ...props }: ComponentProps<"label">) {
  return (
    <label
      data-slot="label"
      className={cn(
        "flex items-center gap-2 text-base leading-tight select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50 peer-data-disabled:cursor-not-allowed peer-data-disabled:opacity-50",
        className,
      )}
      {...props}
    />
  );
}

export { Label };

Usage

tsx

import { Label } from "@/components/ui/label"

<Label htmlFor="email">Email</Label>

API reference

htmlForstring: The id of the control it names. Or wrap the control instead: the label lays it out beside the text.
classNamestring: A plain <label>: every prop goes to it.