Label
Component
Section titled “Component” Preview react
import { Label } from "@/components/ui/label"
export function LabelDemo() {return ( <div className="flex flex-col gap-2 max-w-sm"> <Label htmlFor="email">Email</Label> <input id="email" type="email" placeholder="Enter your email" className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm" /> </div>)}Installation
Section titled “Installation”npx shadcn@latest add https://devx-op.github.io/arkitect-ui/r/r/label.jsonpnpm dlx shadcn@latest add https://devx-op.github.io/arkitect-ui/r/r/label.jsonbunx shadcn@latest add https://devx-op.github.io/arkitect-ui/r/r/label.jsonimport { cn } from "@/lib/utils"
function Label({ className, ...props }: React.ComponentProps<"label">) { return ( <label 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 }