Overview
Get Started
Label
Renders an accessible label associated with controls.
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
export function LabelDemo() {
return (
<div className="flex flex-col items-start gap-2">
<Label htmlFor="email">Email</Label>
<Input id="email" type="email" placeholder="you@example.com" />
</div>
);
}Installation
import { mergeProps } from "@base-ui/react/merge-props";
import { useRender } from "@base-ui/react/use-render";
import { cn } from "@/lib/cn";
function Label({ className, render, ...props }: useRender.ComponentProps<"label">) {
const defaultProps = {
className: cn("inline-flex items-center gap-2 font-medium text-foreground text-sm", className),
"data-slot": "label",
};
return useRender({
defaultTagName: "label",
props: mergeProps<"label">(defaultProps, props),
render,
});
}
export { Label };Usage
import { Label } from "@/components/ui/label";<Label htmlFor="email">Email</Label>