Label
An accessible label bound to a form control, with automatic disabled-state styling via peer/group selectors.
Install
pnpm dlx shadcn@latest add @namche/labelUsage
import { Label } from '@/components/ui/label';
import { Input } from '@/components/ui/input';
<div className="grid gap-2">
<Label htmlFor="cluster-name">Cluster name</Label>
<Input id="cluster-name" />
</div>Label renders a plain <label> with no dependency on a Radix/Base UI
primitive. It dims and disables pointer events automatically when a sibling
control carries data-disabled (via group-data-[disabled=true]) or when
paired with a disabled peer input (peer-disabled) — wire the relationship
with a matching id/htmlFor and it needs no extra classes.