Label

import { Label } from "@/components/ui/label"

<Label htmlFor="email">Email address</Label>

<div className="flex flex-col gap-1.5">
  <Label htmlFor="name">Full name</Label>
  <Input id="name" placeholder="John Doe" />
</div>

<Label htmlFor="email" required>Email address</Label>

<Label htmlFor="input" className="opacity-50 cursor-not-allowed">Username</Label>
<Input id="input" disabled />

npx shadcn@latest add https://solar-ui.com/r/label.json

import * as React from "react"
import { cn } from "@/lib/utils"
 
const Label = React.forwardRef<
  HTMLLabelElement,
  React.LabelHTMLAttributes<HTMLLabelElement> & { required?: boolean }
>(({ className, required, children, ...props }, ref) => (
  <label
    ref={ref}
    className={cn(
      "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
      className
    )}
    {...props}
  >
    {children}
    {required && <span className="text-(--color-destructive) ml-1">*</span>}
  </label>
))
Label.displayName = "Label"
 
export { Label }