Label Nuevo

El componente hp-label asocia etiquetas de texto con elementos de formulario de manera accesible, superando las limitaciones de <label> nativo con Custom Elements.

Demostración

Sin estilos (solo base.css)

Así se ve hp-label usando únicamente @headless-primitives/utils/base.css. El click-to-focus y aria-labelledby funcionan completamente.

Nombre

Con estilos personalizados

Nombre de usuario

Notificaciones

index.html

<hp-label for="first-name" class="my-label">Nombre</hp-label>
<input id="first-name" type="text" />

<!-- Con otros primitivos -->
<hp-label for="toggle-id" class="my-label">Aceptar términos</hp-label>
<hp-switch id="toggle-id"></hp-switch>

style.css

.my-label {
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}

.my-label:hover {
  color: #3b82f6;
}

Instalación

pnpm

pnpm add @headless-primitives/label

npm

npm install @headless-primitives/label

yarn

yarn add @headless-primitives/label

bun

bun add @headless-primitives/label

Features

• ♿️ aria-labelledby gestionado automáticamente en el control destino.
• 🖱️ Click-to-focus: traslada el foco al control referenciado por for.
• 🎨 Sin estilos visuales (Headless).
• 🔒 Prevención de selección accidental en doble-click.

Anatomía

<hp-label for="mi-control">Etiqueta</hp-label>

API Reference

hp-label

Asocia texto al control con ID for: en click enfoca y dispara click en el destino.

Atributos / Propiedades

Atributo / Propiedad	Tipo	Por Defecto	Descripción
for / htmlFor	string | null	null	ID del elemento objetivo en el documento.
id	string	auto	Generado automáticamente si falta y hay for válido.

Accesibilidad

hp-label resuelve una limitación crítica: <label> nativo no puede transferir el foco a Custom Elements. El componente:

• Click to Focus: Traslada el foco al control referenciado por for.
• aria-labelledby: Si el destino no tiene aria-labelledby, lo vincula automáticamente con el id de la etiqueta.
• No Selection: Previene selección accidental de texto en doble-click.