Label
An accessible label for form controls.
Installation
$
Usage
import { Label } from "@/components/ui/label"Examples
Default
htmlFor has to match the control's id. That pairing is what lets a click on the label focus the field, and what a screen reader reads out with the control.
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| htmlFor | string | - | The id of the form control this label describes. Clicking the label moves focus to that control. |
"use client"
import * as React from "react"
import { cn } from "@/registry/lib/utils"
// @use-when the name of a form control, bound to it.
function Label({
className,
onMouseDown,
...props
}: React.ComponentProps<"label">) {
return (
<label
data-slot="label"
className={cn(
"block text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
className
)}
onMouseDown={(event) => {
// Let clicks that start on an interactive control inside the label
// behave normally (do not treat them as a label double-click).
const target = event.target as HTMLElement
if (target.closest("button, input, select, textarea")) return
onMouseDown?.(event)
// Prevent text selection when double-clicking to toggle a control.
if (!event.defaultPrevented && event.detail > 1) event.preventDefault()
}}
{...props}
/>
)
}
export { Label }