Label a form control

Install

pnpm

pnpm add @zedtech/zedkit-ui

Package version: 0.4.0 (changesets).

Import

import

import { Label, LabelProps } from "@zedtech/zedkit-ui";

Registry source

Copy into your app after npx shadcn add (imports are rewritten for consumers).

label.tsx

// Derived from shadcn/ui (label) — see Provenance in packages/ui/README.md. Tolerated exception: migrated to custom code only when customization needs it.
"use client";

import * as React from "react";
import * as LabelPrimitive from "@radix-ui/react-label";
import { cva, type VariantProps } from "class-variance-authority";
import { cn } from "@/lib/utils";

const labelVariants = cva(
  "text-sm leading-none font-medium peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
);

type LabelProps = React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> &
  VariantProps<typeof labelVariants>;

const Label = React.forwardRef<React.ElementRef<typeof LabelPrimitive.Root>, LabelProps>(({ className, ...props }, ref) => (
  <LabelPrimitive.Root ref={ref} className={cn(labelVariants(), className)} {...props} />
));
Label.displayName = LabelPrimitive.Root.displayName;

export { Label, type LabelProps };

Exports

Symbol	Role
Label	Component
LabelProps	Props type

Wraps: `@radix-ui/react-label`

Preview

@zedtech/zedkit-ui — Label, LabelProps

Name

Examples

Simple

import { Input, Label } from "@zedtech/zedkit-ui";
<Label htmlFor="name">Name</Label>
<Input id="name" placeholder="Ada" />

Required mark

import { Input, Label } from "@zedtech/zedkit-ui";
<Label htmlFor="email">Email <span aria-hidden="true">*</span></Label>
<Input id="email" required />

Props

Prop

Type

Accessibility

Pairs with a control via `htmlFor` plus a matching `id`; clicking the label focuses the control (native behavior). A disabled peer dims the label via `peer-disabled`.

Collect text input with a label Build validated forms with labels, errors, and pending state

Troubleshooting

Clicking the label does nothing — the control needs a matching `id` for `htmlFor`. Label not dimming with a disabled control — `peer-disabled` needs the control as a preceding `peer` sibling.