opencommerceby Agentcard
GitHub

Component

Label

Accessible label for a form control.

Text referenceSource and examples as JSON

npx -y github:anwarlemu/opencommerce-brand-cli#release add label --surface site

Run from the target React 19.2+ app root with Tailwind CSS 4 and the @/* source alias.

label.preview
Preview

Usage

use-it-for.md

Use the default form label above an input. Use variant=control for the larger label beside a checkbox, switch or radio. Connect htmlFor to the control id, or use Field to connect it automatically.

never.md
  • Bold labels
  • Caps labels
  • Labels without a control to point at

Exports: Label. This component includes a client boundary. Keep event handlers and state in a client component.

Dependencies: @radix-ui/react-label.

Example

examples/label.tsx
import { Checkbox } from "@/components/ui/checkbox";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Switch } from "@/components/ui/switch";

export function Site() {
  return <div className="grid max-w-sm gap-4">
    <div className="grid gap-1.5">
      <Label htmlFor="label-company">Company</Label>
      <Input id="label-company" name="company" placeholder="Acme" />
    </div>
    <Label variant="control"><Checkbox defaultChecked />Email me a receipt for every purchase</Label>
    <div className="flex items-center justify-between gap-4">
      <Label variant="control" htmlFor="label-switch">Pause this card</Label>
      <Switch id="label-switch" />
    </div>
  </div>;
}

Source

components/ui/label.tsx
"use client";

import * as React from "react";
import * as LabelPrimitive from "@radix-ui/react-label";
import { cn } from "@/lib/utils";

// Form labels: 12px Inter at 64 percent ink, as the brand sets its table heads.
// The control variant pairs a body-size label with an inline checkbox or switch.
function Label({ className, variant = "form", ...props }: React.ComponentProps<typeof LabelPrimitive.Root> & { variant?: "form" | "control" }) {
  return <LabelPrimitive.Root data-slot="label" className={cn(
    "flex items-center gap-2 select-none peer-disabled:opacity-50 group-data-[disabled=true]:opacity-50 font-sans text-caption leading-normal text-fg-muted",
    variant === "control" && "font-sans text-body leading-snug text-fg",
    className,
  )} {...props} />;
}

export { Label };

Reference: Extension from opencommerce-agentcard-web src/components/monitoring.tsx (table head labels).