Component

Label

Accessible label for a form control.

npx -y github:anwarlemu/agentcard-brand-cli#release add label

label.preview

Email me a receipt for every purchase

Pause this card

Usage

use-it-for.md

Associate it with a checkbox, switch or radio so clicking the text activates the control. Use Field for text inputs.

never.md

Bold labels
Caps labels
Labels without a control to point at

Dependencies: @radix-ui/react-label.

Example

examples/label.tsx

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

export function Site() {
  return (
    <div className="grid max-w-sm gap-4">
      <Label>
        <Checkbox defaultChecked />
        Email me a receipt for every purchase
      </Label>
      <div className="flex items-center justify-between gap-4">
        <Label 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";

// A control's name: 16px Inter in ink, beside a checkbox or a switch. Field sets it above an input in the brand's form
// style, the 12px display face at 68 percent ink.
function Label({ className, ...props }: React.ComponentProps<typeof LabelPrimitive.Root>) {
  return (
    <LabelPrimitive.Root
      data-slot="label"
      className={cn("flex items-center gap-2 text-body leading-snug text-fg select-none peer-disabled:opacity-50 group-data-[disabled=true]:opacity-50", className)}
      {...props}
    />
  );
}

export { Label };

Reference: live https://www.agentcard.sh/get-started.