docs / core / label

Label

the name of a form control, click it and the control focuses. never a heading or a caption.

intensity · recedesrsc · server

provenance

authored in usva

layer

core / primitives

intensity

recedes · safe anywhere, including dense surfaces

composition

above an Input or Select, beside a Checkbox, wired with htmlFormono for tokens, ids and machine namesnever a section heading or a captiondisabled dims the label only. disable the control too

a11y

a real <label> · htmlFor clicks through to the control · disabled sets data-disabledjest-axe
live demo · try it out

props

proptypedefaultnotes
htmlForstring—the control's id. clicking the label focuses it.
disabledbooleanfalsemuted, not-allowed styling and data-disabled. style only, disable the control too.
monobooleanfalsethe monospace family, for tokens, ids and machine names.

get it

npx shadcn add https://usva.build/r/label.jsoncopy
source · components/ui/label.tsxexactly what this command copiescopy
import * as React from "react";
import { cn } from "@/lib/utils";

export interface LabelProps
  extends React.LabelHTMLAttributes<HTMLLabelElement> {
  disabled?: boolean;
  mono?: boolean;
}

export const Label = React.forwardRef<HTMLLabelElement, LabelProps>(
  ({ className, disabled, mono, ...props }, ref) => (
    // biome-ignore lint/a11y/noLabelWithoutControl: reusable label primitive; htmlFor/content supplied by consumers
    <label
      ref={ref}
      data-disabled={disabled ? "" : undefined}
      className={cn(
        "select-none text-[13px] font-medium leading-none text-ink",
        mono ? "font-mono" : "font-sans",
        disabled && "cursor-not-allowed text-muted",
        className,
      )}
      {...props}
    />
  ),
);
Label.displayName = "Label";