shadcn.io is not affiliated with official shadcn/ui
Installation
bunx --bun shadcn@latest add https://kit.dev/r/base/label.jsonnpx shadcn@latest add https://kit.dev/r/base/label.jsonpnpm dlx shadcn@latest add https://kit.dev/r/base/label.jsonyarn shadcn@latest add https://kit.dev/r/base/label.jsonThis component depends on Checkbox. Install it first if you haven't already.
Copy and paste the following code into your project.
"use client";
import type React from "react";
import { cn } from "@/lib/utils";
export const Label = (props: React.ComponentProps<"label">) => {
const { className, ...rest } = props;
return (
// biome-ignore lint/a11y/noLabelWithoutControl: association is via htmlFor or wrapping at the call site
<label
className={cn(
"cn-label flex select-none items-center peer-disabled:cursor-not-allowed group-data-[disabled=true]:pointer-events-none",
className
)}
data-slot="label"
{...rest}
/>Update the import paths to match your project setup.
Usage
import { Checkbox } from "@/components/ui/checkbox";
import { Label } from "@/components/ui/label";<div className="flex items-center gap-2">
<Checkbox id="terms" />
<Label htmlFor="terms">Accept terms and conditions</Label>
</div>For form fields, prefer Field and FieldLabel.
Demos
Rtl
Right-to-left label. See the RTL configuration guide for document direction.
API Reference
Label
PropType
AttributeType