NAMCHE UI

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/label

Usage

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.

On this page