shadcn.io is not affiliated with official shadcn/ui
Installation
bunx --bun shadcn@latest add https://kit.dev/r/aria/label.jsonnpx shadcn@latest add https://kit.dev/r/aria/label.jsonpnpm dlx shadcn@latest add https://kit.dev/r/aria/label.jsonyarn shadcn@latest add https://kit.dev/r/aria/label.jsonThis component depends on Checkbox. Install it first if you haven't already.
Install the following dependencies:
bun add react-aria-componentsnpm install react-aria-componentspnpm add react-aria-componentsyarn add react-aria-componentsCopy and paste the following code into your project.
"use client";
import {
LabelContext,
Label as LabelPrimitive,
type LabelProps,
} from "react-aria-components";
import { cn } from "@/lib/utils";
export const Label = (props: LabelProps) => {
const { className, htmlFor, slot, ...rest } = props;
const label = (
<LabelPrimitive
className={cn(
"cn-label cn-label-aria flex select-none items-center peer-disabled:cursor-not-allowed group-data-[disabled=true]:pointer-events-none",
className
)}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
elementType?string