Forms

Label

Server-safe

An accessible caption for a form control.

Live preview

Rendered from the installed VEXA source — the same files you receive.

Email address

Installation

Adds the component source to your project. Registry dependencies are pulled in automatically.

npx shadcn@latest add https://vexa.valfiguer.com/r/label.json

Installs to components/vexa/label.tsx

npm dependencies

No external npm dependencies.

Registry dependencies

@vexa/utils

Other VEXA items this component needs. Install them first — they are resolved automatically by the CLI.

Source

Copy this into its target path, or install it with the command above.

components/vexa/label.tsx

import type * as React from "react";

import { cn } from "@/lib/utils";

/**
 * Label — an accessible caption for a form control.
 *
 * RSC-safe. Uses the native `<label>` element; associate it with a control via
 * `htmlFor` matching the control's `id`. When the associated control is
 * disabled, add `data-disabled` (or rely on a `group`/`peer`) to dim the label.
 */
export function Label({ className, ...props }: React.ComponentProps<"label">) {
  return (
    <label
      data-slot="label"
      className={cn(
        "inline-flex items-center gap-1 text-sm font-medium leading-none text-vexa-foreground select-none",
        "data-[disabled]:cursor-not-allowed data-[disabled]:opacity-60",
        className,
      )}
      {...props}
    />
  );
}

Details

Example

tsx

<Label htmlFor="email">Email</Label>

Accessibility

Native <label>; associate via htmlFor matching the control id.