Components
Label
Renders an accessible label associated with controls.
Label and FieldLabel
To keep the layout consistent, we recommend using Field and FieldLabel instead of using Label directly.
Loading...
Installation
CLI
npx shadcn@latest add https://exawizards.com/exabase/design/registry/label.jsonManual
Copy and paste the following code into your project.
"use client"
import * as React from "react"
import { 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 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 }
Usage
import { Label } from "@/components/ui/label"<Label htmlFor="email">Your email address</Label>API
<Label> renders as a <label> element.