Label

An accessible caption that associates text with a form control.

Project name

Installation

Terminal

pnpm dlx @dowel-ui/cli add label

npm packages installed: radix-ui.

Accessibility

Set htmlFor to the id of the control it labels. Clicking the label moves focus to that control, including composite widgets that are not native inputs.

Props

Label

Every prop of Radix UI’s Label.Root, plus className.

Quality

7/7 checks, measured from the source and its tests

Tested — passes
axe assertion — passes
Keyboard tested — does not apply
Storybook examples — passes
Accessibility documented — passes
Semantic tokens only — passes
Motion from tokens — does not apply
className merged — passes
Visible focus — does not apply
No fixed widths — passes

Used in

Whole screens assembled from this component. Installing one brings this and everything else it needs with it.

Source

This is exactly what dowel add label writes into your project, with imports rewritten to your own path alias.

ui/label.tsx

import { Label as LabelPrimitive } from "radix-ui";
import type { ComponentPropsWithRef } from "react";

import { cn } from "@/lib/utils";

export type LabelProps = ComponentPropsWithRef<typeof LabelPrimitive.Root>;

/**
 * Caption for a form control.
 *
 * Built on the Radix primitive so clicking the label focuses its control even
 * when the control is a composite widget rather than a native input.
 */
export function Label({ className, ...props }: LabelProps) {
  return (
    <LabelPrimitive.Root
      className={cn(
        "flex items-center gap-2 text-sm leading-none font-medium select-none",
        "peer-disabled:cursor-not-allowed peer-disabled:opacity-55",
        "group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-55",
        className,
      )}
      {...props}
    />
  );
}