GuidelinesGuidelinesBuilt on @radix-ui/react-label — one variant only. The source builds this with cva purely for pattern consistency with its other components, not because it needs to vary; skipped here since a single string is simpler.
npx chandra-asri-ui add labelpeer-disabled:opacity-70 dims the label automatically when the field it's paired with (via the peer class) is disabled.
<Checkbox id="terms" className="peer" disabled defaultChecked />
<Label htmlFor="terms">Disabled option</Label>"use client";
import { cn } from "@/lib/utils";
import * as LabelPrimitive from "@radix-ui/react-label";
import * as React from "react";
/**
* Only one visual variant — the source builds this with `cva` purely for
* pattern consistency with its other components, not because it needs
* multiple variants. Skipped here since a single string is simpler for a
* component with nothing to vary.
*/
export const Label = React.forwardRef<
React.ComponentRef<typeof LabelPrimitive.Root>,
React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>
>(({ className, ...props }, ref) => (
<LabelPrimitive.Root
ref={ref}
className={cn(
"text-sm leading-none font-medium peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
className,
)}
{...props}
/>
));
Label.displayName = LabelPrimitive.Root.displayName;