Formularios

Label

Apto para servidor

An accessible caption for a form control.

Vista previa en vivo

Renderizado desde el código fuente instalado de VEXA — los mismos archivos que recibes.

Email address

Instalación

Añade el código del componente a tu proyecto. Las dependencias del registry se resuelven automáticamente.

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

Se instala en components/vexa/label.tsx

Dependencias npm

Sin dependencias npm externas.

Dependencias del registry

@vexa/utils

Otros items de VEXA que necesita este componente. Instálalos primero — la CLI los resuelve automáticamente.

Código

Cópialo a su ruta destino, o instálalo con el comando de arriba.

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}
    />
  );
}

JSON del registryr/label.json

r/label.json

{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "label",
  "type": "registry:ui",
  "title": "Label",
  "description": "An accessible caption for a form control.",
  "registryDependencies": [
    "@vexa/utils"
  ],
  "files": [
    {
      "path": "registry/default/ui/label.tsx",
      "type": "registry:ui",
      "target": "components/vexa/label.tsx",
      "content": "import type * as React from \"react\";\n\nimport { cn } from \"@/lib/utils\";\n\n/**\n * Label — an accessible caption for a form control.\n *\n * RSC-safe. Uses the native `<label>` element; associate it with a control via\n * `htmlFor` matching the control's `id`. When the associated control is\n * disabled, add `data-disabled` (or rely on a `group`/`peer`) to dim the label.\n */\nexport function Label({ className, ...props }: React.ComponentProps<\"label\">) {\n  return (\n    <label\n      data-slot=\"label\"\n      className={cn(\n        \"inline-flex items-center gap-1 text-sm font-medium leading-none text-vexa-foreground select-none\",\n        \"data-[disabled]:cursor-not-allowed data-[disabled]:opacity-60\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n"
    }
  ],
  "meta": {
    "frameworks": [
      "react",
      "next"
    ],
    "rsc": "server-safe",
    "cssVars": [
      "--vexa-foreground"
    ],
    "a11y": "Native <label>; associate via htmlFor matching the control id.",
    "example": "<Label htmlFor=\"email\">Email</Label>",
    "tests": "planned — see docs/README.md#roadmap"
  }
}

Detalles

Accesibilidad

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