Label
Understand the design system and contribute to it
Component preview
The live preview for UI components is handled by components/atoms/codedocs/ComponentPreview.tsx. Use it directly inside MDX whenever you want a playground-style embed. Provide componentProps to set default values and propOptions to surface toggle-able props next to the preview.
Preview
Prop reference
Auto-generated from the component source
Label
className
React.ComponentProps<typeof LabelPrimitive.Root>
"use client";
import * as React from "react";
import * as LabelPrimitive from "@radix-ui/react-label";
import { cn } from "@/lib/utils";
function Label({
className,
...props
}: React.ComponentProps<typeof LabelPrimitive.Root>) {
return (
<LabelPrimitive.Root
data-slot="label"
className={cn(
"flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
className
)}
{...props}
/>
);
}
export { Label };