Components
Label
Accessible form label built on Radix.
The Label primitive wraps Radix Label — associate it with a control via
htmlFor, and it dims automatically when a peer/group control is disabled.
Preview
import { Input } from '@web/components/ui/input';import { Label } from '@web/components/ui/label';export default function LabelDemo() { return ( <div className="flex flex-col gap-6"> <div className="grid w-full max-w-sm gap-2"> <Label htmlFor="demo-name">Full name</Label> <Input id="demo-name" placeholder="Ada Lovelace" /> </div> <Label className="group" data-disabled="true"> Disabled label (dimmed) </Label> </div> );}Import
import { Label } from "@/components/ui/label";Props
Label accepts all props of Radix Label.Root (which extends the native
<label> element), plus className.