Docs
Label

Label

Renders an accessible label associated with controls.

Installation

Copy and paste the following code into your project.

import { cn } from "@/lib/utils"
import { cva, VariantProps } from "class-variance-authority"
import * as React from "react"
 
export const labelVariants = cva(
  "select-none text-sm font-medium peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
)
 
export interface LabelProps
  extends React.LabelHTMLAttributes<HTMLLabelElement>,
    VariantProps<typeof labelVariants> {}
 
const Label = React.forwardRef<HTMLLabelElement, LabelProps>(
  ({ className, ...props }, ref) => {
    return (
      <label className={cn(labelVariants(), className)} ref={ref} {...props} />
    )
  },
)
Label.displayName = "Label"
 
export { Label }

Update the import paths to match your project setup.

Usage

import { Label } from "@/components/ui/label"
<Label htmlFor="email">Your email address</Label>
InputMenu 🚧