Fieldset Nuevo

El componente hp-fieldset agrupa controles de formulario relacionados con una leyenda accesible, análogo al <fieldset>/<legend> nativo. Propaga disabled a todos los controles hijos (nativos y ARIA), preservando el estado previo de cada uno.

Demostración

Sin estilos (solo base.css)

Información de contacto

index.html

<hp-fieldset class="contact-group">
  <hp-fieldset-legend>Información de contacto</hp-fieldset-legend>
  <div class="fields">
    <input type="text" placeholder="Nombre completo" />
    <input type="email" placeholder="correo@ejemplo.com" />
    <button type="submit">Enviar</button>
  </div>
</hp-fieldset>

<button id="toggle">Deshabilitar grupo</button>

<script>
  const btn = document.getElementById("toggle");
  const fs = document.querySelector("hp-fieldset");
  btn.addEventListener("click", () => {
    fs.disabled = !fs.disabled;
    btn.textContent = fs.disabled ? "Habilitar grupo" : "Deshabilitar grupo";
  });
</script>

style.css

.contact-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
}

.fields {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
}

hp-fieldset[data-state="disabled"] {
  opacity: 0.5;
  pointer-events: none;
}

hp-fieldset-legend {
  font-weight: 600;
  font-size: 0.9rem;
}

Instalación

pnpm

pnpm add @headless-primitives/fieldset

npm

npm install @headless-primitives/fieldset

yarn

yarn add @headless-primitives/fieldset

bun

bun add @headless-primitives/fieldset

Features

• ♿️ role="group", aria-disabled y aria-labelledby gestionados automáticamente.
• 🔒 Propagación inteligente de disabled a controles nativos e interactivos.
• 🎨 Sin estilos visuales (Headless).
• 🔄 Eventos hp-disable / hp-enable en cada transición de estado.

Anatomía

<hp-fieldset>
  <hp-fieldset-legend></hp-fieldset-legend>
  <!-- controles de formulario -->
</hp-fieldset>

API Reference

hp-fieldset

Contenedor raíz con role="group" y propagación de disabled.

Atributos / Propiedades

Atributo / Propiedad	Tipo	Por Defecto	Descripción
disabled	boolean	false	Propaga disabled a controles nativos y aria-disabled a controles ARIA.

Propiedades de solo lectura

Propiedad	Tipo	Descripción
baseId	string	Prefijo único para IDs hijos.

Eventos

Evento	Detalle	Descripción
hp-disable	—	Cuando disabled transiciona de false a true.
hp-enable	—	Cuando disabled transiciona de true a false.

Atributos ARIA gestionados automáticamente

• role="group" — Asignado si no se especifica.
• aria-disabled — Sincronizado con disabled.
• data-state — "disabled" | "enabled".
• aria-labelledby — Asignado por hp-fieldset-legend.

hp-fieldset-legend

Leyenda accesible del grupo.

Atributos gestionados automáticamente

• id — Se asigna {baseId}-legend si no se especifica.

Accesibilidad

Adhiere al patrón WAI-ARIA group. La propagación de disabled respeta el estado preexistente de cada control: si un control ya estaba deshabilitado antes, permanecerá deshabilitado al re-habilitar el fieldset.